Pages

Wednesday, January 11, 2012

Inspired Interface

It's something we use every time we start up a game, select our player, change our gear, or swap some gems. It's a ubiquitous element that is absolutely crucial to get right and can hamstring any game that gets it wrong. I'm speaking about the user interface.

A game UI has the ability to help or hinder the player experience depending on its quality. At its best players don't even think about how they are using it. Everything is natural and unobtrusive. At its worst menus are hard to navigate, unintuitive, and critical information is hard to find.

Connie Yang is a Senior UI Designer and the UI Lead for Bejeweled Blitz at PopCap Games. Her career began as a graphic designer in Shanghai before making the transition to game development. When given the opportunity to travel, she finds great sources of inspiration from different cultures around the world.


Why is it important to have well done UI design to make a good game experience?

UI design is important for every single game, particularly with casual games. The player is not a character immersed in a 3D world. You aren't lost in this other space. For a game like Bejeweled the whole gameplay mechanic of swapping gems is a UI. In this title in particular it's very important to make sure that experience and what the user sees, hears, and feels make the game fun and rewarding.

It could be colored tiles people are swapping but instead it's animated gems or a special rare gem with flames and rainbows. We try to be wacky with that stuff. We're really creating the entire gameplay effect since we don't have to convey information about a world or characters.

I never stopped to think how UI must be even more important for PopCap style games since for something like Bejeweled the whole game is a large series of manipulatable UI elements. Does your team help design some of the gameplay features like how gems get swapped or do you mostly focus on elements like menus?

Something like that falls under core game mechanics. We have a team of very talented game designers who work on stuff like that. One of the best things about PopCap is we have a very open environment. Everyone can have input. If some people think one mechanic isn't very fun but another group does it spawns a constructive discussion. It's not like one person gets to say, "This is the way it's going to be, and that's it!"

I'd say our primary focus is more interacting with the other elements of the gameplay like getting all the information organized and screen flow.


What is the greatest challenge you have had to overcome, either with a personal or professional project?

Managing a project always presents a lot more difficulties than anyone expects. You have to always consider what needs to be done within a given time and deal with the possibility features might change drastically based on iteration and feedback. You have to be super fluid.

You also have to make sure your team and everyone you work with is the same way. Even with all those changes not everyone will always be happy. There's rarely 100% happiness with every decision. You have to make sure everyone is still motivated to get everything done because it's not slowing down. It's just going in a different direction. We try very much to keep to the agile development process.

Did you originally start in a managerial role at PopCap or was that something you moved into?

I originally started as a designer at a graphic design firm in Shanghai. Then I became an art director and managed a small team of designers. When I moved to PopCap Shanghai I entered as a senior designer and then started managing others. Here at PopCap Seattle I came in as a senior UI designer and now I have a small team of designers to work on this awesome product.


What work are you most proud of?

We just officially released Bejeweled Blitz as a free iOS app. This is the first time we've split Bejeweled Blitz out from the Bejeweled 2 app which you always had to pay for. They were bundled together which is different than what we do on Facebook where Bejeweled Blitz is a free game with micro-transactions.

This is the first time we're mimicking that on the iPhone. This is possibly one of the longest and most examined mobile products we've ever worked on so everyone is waiting with bated breath to see what happens. This is our first time trying a freemium product on the mobile market. We're all super excited about it!

What sort of challenges did you have in making this a new standalone product on the iOS?

We built a completely new app from the ground up. Bejeweled Blitz is one of the oldest popular games on Facebook. We keep adding new features and updating it but we've never rebuilt it from scratch. It's become cobbled together over time. We really wanted to do something totally clean and optimized for the iOS app to allow us to easily update the product and gather user metrics.


How do you see UI design evolving over the next few years?

UI design is at a funny place right now. A lot of people don't know what it is. Until I got here there was maybe one other UI designer. Even at this worldwide company of 500 or so the UI design group is very, very small. We've always had a lot of game artists and graphic designers but not many people in this category. People don't really know what to make of it yet. Is it valuable or not? Is it different than the work of graphic designers or artists? It's a strange balance we have to strike with everyone.

It's going to be more recognizable and understood by people as time goes on particularly in the casual games industry as casual games get more and more popular. The games you see on Facebook and mobile devices can't get that vast cinematic landscape you can achieve on a console. So much of it relies on the interface design because that's all the player sees.


Are there any techniques or best practices you have learned that have served you well over the years?

My process is pretty straightforward. I make sure I understand everything that needs to be in a certain game or application. Then I start with wireframing. I basically create a detailed flowchart of how I imagine the information to be distributed and how things are laid out and what the user flow may be. That goes through several rounds of iteration and feedback with everyone on the team. They make sure it's possible, makes sense, and it matches the game style we want to deliver.

Once we have that hammered out we go into a visual design process. How is it going to look and behave? How will it transition? We'll flesh out a lot of details on that front. From there we iterate and get feedback.

The next stage is to start producing the assets and working directly with the developers to get everything working right. From there it's polish like making sure animation timings are just right.

Even though you can go through this process, it can all change in an instant.

What sort of tools do you use to make these rapid prototypes?

We initially create flat diagrams; boxes and arrows and text to convey our ideas. We make interactive prototypes using Adobe Flash to do quick mockups of our UI designs. There are tons of other good user interface wireframing tools out there too. If you want to use a different one it's totally fine.


Other than PopCap's library, are there any games out right now that you think has a successful and well made UI?

I unfortunately only feel like I can better pick out a few that did a poor job. I'm a big fan of League of Legends. It's been my go-to game, it's super fun. The user interface is not great. It's hard to do a lot of the basic functionalities like inviting friends into a game and getting a room set up. Things can be hard to find. They've made a lot of improvements lately, particularly in the store. It used to be one big screen and you couldn't easily navigate to other items or categories.

I like the new Xbox dashboard. It really took a page out of the Windows 7 phone, "Metro", interface. Everything is in boxes and very clean looking. It's a little strange to get used to but it's definitely more pleasing than the previous iteration. It also conveys a bit more relevant information to you as a player.


Since you've just released Bejeweled Blitz are you now working on a new title?

Bejeweled Blitz is a constantly updating product. We already have several updates planned for the iPhone app, things like features that we weren't able to implement for the first release. The Facebook version is constantly evolving with new features as well. I'm the UI Lead for the Bejeweled Blitz team so I focus on all its platforms.


Is there anything about the new Bejeweled Blitz iOS app which you are particularly proud of or excited about?

The entire menu system, all the art and UI is completely new. That's something my team and I created from scratch. It's quite a sense of accomplishment.


Tell me about your background.

Before I worked in the games industry I was a graphic designer. I did mostly client based work at small design firms here in the U.S. and I worked in Shanghai for 4 years. I moved there shortly after I graduated from college. I grew up and went to school in the U.S. but I wanted to experience living abroad so I just packed my bags and hauled over.

I actually worked in web and print design for two and a half years. Then I eventually switched over to games. I had some contacts in the industry in Shanghai, more specifically the PopCap office. I had always loved games, I've played them since I was in high school. I played console games but I was big into PC gaming since I was 8 or 9 years old. I worked in the PopCap Shanghai office for about a year before I ended up switching over to work in the Seattle office doing user interface design.

What drew you to Shanghai as the place you wanted to spend time abroad?

Well I speak Chinese so that gives you a bit of an edge for anyplace you want to work in China. I had relatives in both Beijing and Shanghai. I'd been to Beijing before and it's nice but Shanghai is the more international location. There are a ton of ex-pats and growing companies and businesses. It was super exciting.

Was the transition from graphic design to user interface design difficult?

Honestly it was pretty straightforward. Especially because I had worked on a lot of web design projects. There's a lot of overlap and similarities. They both do wireframing, prototyping, and design mockups. Web design IS interface design, it's just instead of building on a web platform you're building on mobile, console, and other platforms.

While you were in school for graphic design was your plan to ultimately apply that to game development or were you interested in the web and advertising?

I had always thought it would be amazing to work at a game company like EA or Square Enix. I never thought of myself actually being able to do that. I studied graphic design and I intended to work at a design, branding, or advertising firm. That was my path for awhile. I just happened to meet a ton of people in the games industry in Shanghai and gravitated in that direction.


What are your inspirations?

I always love to look at different websites and competitions to see what's new and what people are working on. I love sites like tumblr that compile really awesome things. It's a great way to see where overall trends are going and what's cool and what's around.

Personally in terms of recharging my mind I love traveling. I love going to different countries and exploring totally different locations. It's a core inspiration for me.

Are there UI design challenges in the same vein as something like "Dominance War" for 3D artists?

None that are so glorified. There are some like the Webby Awards where you get recognized for creating a great ad, web campaign, or website. They're mostly advertising based. That sort of award style is from that industry. Then you have the game industry awards which I feel are just purely for console games. I think we get a little bit shafted on both sides because we're not on either end of the spectrum.

When traveling do you often find inspiration from the art and architecture styles of the different cultures you are exploring?

Absolutely. I just came back from Iceland and it was great to see Scandinavian design. It was my first time in a Scandinavian country. Their architecture, interior design, and everything you see feels very futuristic and clean. I tend to be a very clean and minimalistic designer so I found that to be super cool.


Knowing what you know now, what advice would you have given yourself when you were just starting out?

I would tell myself to learn early how to give constructive feedback. It's very important! I would have also told myself that even if there are certain design changes that I don't agree with, it's not that big a deal. There are times when you get attached to certain things and you think it's the end of the world when they're cut and it's really not, especially when working on a service-based game. Things change all the time, nothing is ever permanent.

I imagine you're reacting a lot to feedback from the player base. Do you find you constantly iterate on game UI elements based on player feedback?

Absolutely. We test a lot of new features with individuals and have statistical tracking to see where users are dropping off, what features they use most often, which ones they don't, what confuses them. If we have a solid group that doesn't understand one particular feature then we look at that and see what we can do to make it more appealing.


What motivated you to switch from graphic design to work in the game industry?

I always loved games. I was a huge dork growing up. In elementary school I loved Sierra adventure games. I was a big fan of King's Quest. In high school I really got into RPGs. That love continued through college. I never thought it was realistic I could work in the industry because I wasn't a programmer or 3D artist. I guess there's room for everyone!


What are your favorite games?

My favorite game of all time is Katamari Damacy. It's my happy game. I love how pure and clean it is. It has that one core mechanic of rolling around collecting things. They've done a ton of great mini-games for it. I love the aesthetic style. It's satisfying. It's one of the most positive games I've ever played. It has a great soundtrack and cute visuals. If you want to have 4 minutes of pure fun, play that game. It's fantastic.

I like games that really engross and involve you both atmospherically and with the story. One of my favorite series is called Fatal Frame. It's a horror game series and it's super creepy.

What are you playing right now?

League of Legends. I've been playing a lot more casual games recently. I didn't much before I started working at PopCap but I do now. I play a lot of Bejeweled. I play a lot of the other popular Facebook games like the Sims and now Zynga's CastleVille. It's cool to see how the social games are evolving. They're getting more game-like as opposed to ways to spam your friends.

They're doing a few things better now. The Sims Social made it really fun to visit your neighbors and interact with your existing friends which was super awesome. It was something I hadn't experienced in any other type of social game before.

I'm trying to stop myself from buying Skyrim.

I can empathize. My brother-in-law brought it over during Thanksgiving and I spent 2 hours just pick pocketing the folks in the first village. It's terribly addictive!

That's what I'm afraid will happen! I want to keep my next 100 hours!

I'm also curious to see what happens when The Old Republic launches. I'm a big Bioware fan. I'm excited to see what they take from World of Warcraft and what they depart from. WoW is that gold standard now.


Thank you for your time Connie!

No comments:

Post a Comment