Viewing entries in
UI

Recent Articles on Medium

I've been using Medium as my blogging tool of choice lately. It's pretty, it's slim and streamlined, and I enjoy its UX. Here's a collection of the recent articles I've published there.

Don't be Afraid of a Pencil - Here I discuss the concept of sketching as communication, and that drawing skills aren't required to sketch. And that you should be sketching.

UI: It's Not the Tool - Too many people think that making great UI means digging into Balsamiq Mockups or other wireframing tools. But UI goes beyond tools.

The Right Fidelity for the Job - Wireframes are only one part of the UX design process. Don't work at high fidelity when you're just trying to sort out early problems.

What Are Your Project's Design Pillars? - Every project has their foundational design principles, and every bit of design should always speak to those principles.

Embedded or Centralized?

I've worked in all kinds of team configurations in my ten years (so far) in the game industry, so I thought I'd talk a little bit about what I've experienced as a game UI/UX designer from two different perspectives: that of the embedded designer, and that of the "client services" designer. Both styles of working have their pros and cons.

The Evolution of UX Design in Games

I've been following with interest the discussion among non-game-industry UX designers that "UX is not UI," and finding that the evolution of UX from UI within the game industry has created a unique type of UX designer that really does seem heavily tied into UI design.

Doesn't Exist? Make it.

A huge portion of my UI/UX design time is spent in the sketching phase. I don't rely completely on stencils, but when I need one I like having it. The other day I realized that, for a long time, I'd been doing something that I wish I had a stencil for. I was sure such a stencil existed, but I did a Google search, asked around on Twitter, and turned up absolutely nothing. Completely surprised by this, I decided that it's not hard to make my own -- after all, I'd done it for quilting way back in the day, when I was into that sort of thing.

UX Thoughts: Twitter, Facebook, and Stream Control

I use both Twitter and Facebook, but in very different ways, and I get very different user experiences out of both of them. My Facebook friends list is very highly curated; although I sometimes feel bad about it, I have a fairly strict rule about only having people on my friends list that I actually know, in person, and are friends or close colleagues in some way -- not just people I met at a game dev conference somewhere. The reason for this is that I use Facebook for more personal updates and targeted discussion.

My Twitter feed, on the other hand, is a much looser, less committed stream of stuff. Unlike Facebook, there's no mutual requirement for following, so I'll tend to follow anyone who seems remotely interesting until they prove themselves not to be, at which point I'll remove them -- because, unlike Facebook, I feel less obligation to follow someone on Twitter since it's less personal.

The problem with both of these is that they're at opposite ends of the stream control spectrum. Facebook has always had algorithms that are out of our control as users that dictate which posts from which friends you see, and has implemented even more controversial stream-throttling mechanisms recently with their promoted posts. You're able to set up lists to offset this, but the effort to do so is high enough to be a bothersome user experience.

Twitter, on the other hand, has zero internal stream-throttling mechanisms. Again, like Facebook, you can set up lists to manage this, but it's to achieve the opposite experience from Facebook -- your feed can be so noisy that you need to set up lists so that you don't miss anything.

I do some management of my Twitter feed in order to make it useful rather than too noisy. But even with some pruning and management, there are posters I enjoy following who are just really, really prolific. And while I might enjoy many of their posts, I often wish I could throttle their post stream just a little bit, depending on who the poster is.

The type of throttling that I'm envisioning already exists in Google News. Google News allows you to list your favorite news sources, but then set a slider value according to how much of that source you want to see in your news feed -- "seldom" to "always", with values like "rarely" and "occasionally" in between.

I would love to see this kind of slider implemented on the profile of people I follow, and setting it controls how many posts I see from them in a given time in my stream.

What would the algorithm be for determining how to throttle a user's posts? Would it be time-based or content-based? I'm not immediately sure, but I imagine some basic UX research could be done with Twitter's users to determine what value they get out of the posters they follow or how they "use" their stream to find the answer.

Throw My Work Away. No, Really.

In order to for us to avoid wasting valuable engineering time, it's almost vital that much of my work gets thrown away. It's better to test out ideas and waste only a day of my time than it is to waste several days of several people's time, only to discover the idea didn't work.

The UI Sorting Hat

If you're a game developer, into which house does your company's Sorting Hat put your UI team members? Art, Design, or Engineering?

Change, Outcry, and Layers in Game UI Design

UXMatters recently posted a great article called "Quieting the Outcry over Software User Interface Redesigns." It touches on something we've probably all experienced on sites like Facebook: the moment there's any significant redesign of the site, half of our feed is full of outrage over the change and threats to quit that almost always prove to be empty. As a UI designer, it can be hard to figure out where that line is between legitimate user frustration over something that turned out to be a poor design decision on your part, and the knee-jerk reaction to change that's very common when people have become accustomed to doing things a certain way and finding things in certain spots on their favorite web sites (or the game UI they've been using for the past few weeks). This article provides some great information on how to avoid that reaction (or mostly avoid it, since there will always be a vocal minority that hates change even if it's for the better). But there is one small bit that I disagree with.

In addition, evaluate the groups of users who are complaining and the tasks with which they’re having problems. Are they representative of the primary users of your product? Do they match one of your key audience profiles? Are they typical users? Are they upset about something relating to a key task—or a secondary task that users rarely perform? For example, removing a command-line Interface tool might make a tiny group of users very upset, but benefit 99% of your target audience.

I thought this was a poor example of a good point the author was trying to make. The usual goal of UI design, whether it's for games or for applications, is to make interactions simple. But frequently we as designers can take that idea too far and begin watering down gameplay or feature richness for the sake of UI simplicity, losing useful and in-depth features that the user may ultimately benefit from and enjoy once they've crossed the line from beginner to advanced user.

Instead, why not think of something like a command-line interface tool as a deeper, more richly-featured layer of UI that can remain in place as something accessible to the more hardcore users? In fact, a command-line interface is a great example that's directly applicable to games. Many online multiplayer games require servers to run, and for some games these servers are run by the players themselves, usually by players who are technically adept and know their way around a command line. For years, running a server was almost always only possible via the command line, but it's now pretty standard to include a GUI in the main menu with most of the common options a server administrator would want to set. And in most of these games, the command line interface is still accessible and allows really knowledgeable server admins to set many more advanced options on their servers.

The percentage of server admins compared to players is going to be pretty small for any game, but those server admins are a very important component of your game -- without them you'd have far fewer servers to play on. Instead of cutting the command line interface because it's advanced and only used by a small percentage of players, the ability to run a server is made accessible for both beginner and advanced players by adding an outer layer to the whole game UI.

Not every UI decision can be treated like this, of course. In some cases a game mechanic may be very complex, and the only UI solution that works with it may be equally complex. In cases like this, the questions to be answered are these: is there any way to create a layered UI solution that helps beginning players grasp the basics of the mechanic, but gives advanced players the information they need to play at a higher level? If there isn't, then does the mechanic need to be simplified in order to make it accessible to the highest number of players so it doesn't turn people away? Or would simplifying the mechanic unacceptably water down the gameplay goals?

In the best game UI design scenarios, layered UI can be created so that beginners don't feel alienated by advanced features or mechanics that they don't yet understand, but the more advanced layer of UI still exists so that when players are ready to go from beginners to advanced users, they can level up in their UI skills as well as their game skills. Yep, it's gamification of the UI -- if you're a Photoshop user you're probably familiar with the feeling of mastering the deeper layers of complexity within the app, and it's something that can happen in game UI, too.

So while we may run into situations in which we have to consider cutting that feature so that 99% of our audience is made happier, I like to approach game UI problems as layers of an onion first. Sometimes with more eye-watering, depending on how hard the problem is to solve.

The Path to Game UI Design, Part V: Further Interest

Yesterday, we talked about how to get experience you'll need to build good game UI; today I'm going to tell you about my own path into a career in game UI design and then give you a few resources to get you started.

"How Did YOU Do It?"

Right off the bat I'm just going to tell you that my own story of how I got into the game industry and became a UI designer is a poor example to follow only because the path I took is pretty winding and indirect, and huge, overflowing buckets of luck played a big part in the opportunities I was able to take advantage of. But I'll tell you the abridged form of my story anyway since most people ask, and parts of it still help answer the question this article is addressing.

I graduated with my B.S. in astrophysics a long time ago fully intending to go on to my Ph.D., while on the side doing a ton of gaming and game-related writing for GameSpy and other outfits as a freelancer since writing was a hobby of mine. When a bunch of ill-timed hurdles fell into my path I was offered a full-time job at GameSpy to run their biggest site, PlanetQuake. After doing that for about a year I moved up to the role of Action Genre Producer, managing all of the web sites on the network that fell under the action category since first-person shooters were my expertise.

The job didn't directly involve a lot of the qualifications of a UI designer except that I worked with the web designers at GameSpy, picking up a lot of the skills necessary for web design and development along the way. But after about three years at GameSpy I took a job with Activision as their online marketing manager for the "hardcore" titles (aka, first-person shooters like Call of Duty, DOOM, and others). The job involved a little bit more creative work, doing some marketing materials that stretched my pretty much non-existent at-the-time graphic design skills. To this point (and, really, at ANY point) I hadn't had any education in graphic design other than my own interest in web design, learning from colleagues and friends that I felt were good teachers in clean, good, solid web UI design and practicing on my own web site and associated logos and images.

While at Activision I kept trying to teach myself the principles of good graphic design since I had no background in it. In addition to that, in my spare time I created game levels and mods, which helped to translate some of the programming skills I'd learned doing theoretical modeling in astrophysics into game programming. Then I learned that a position for a UI designer was open at Raven Software, a company I'd worked with pretty closely while at GameSpy and Activision, and they were working on a game and tech that I was pretty familiar with: Quake IV.

I had bought DOOM 3 and knew that they would be using that tech for Quake IV, and I also knew that the tools to work with the game came with it. The UI for DOOM 3 used a pretty simple scripting system that I was confident I could pick up. So, pulling some late nights and cramming at every opportunity, in a short amount of time I did the following: I learned the GUI system, I created a small three-story level with the DOOM 3 level editor, I designed a few letters for a theoretical font to represent the Strogg alphabet (the Strogg being the alien enemy in Quake IV), and then created a working elevator GUI using the font that allowed the player to move to and from any floor, and in-between floors the GUI would ripple and flicker with static as if it were being affected by a war-torn electrical system. (For flair I threw a muzak version of "The Girl From Ipanema" into the elevator, Blues Brothers-style. Hey, the Strogg like to relax a little, too, you know.)

This was the centerpiece of my portfolio, meant to show that not only could I do the graphic design of the UI itself but could also take it into the game, hook it up to the scripting system, and then make it actually work. I added other pieces to my portfolio to try and show some capabilities in graphic design even though I knew my skill set there was limited -- theoretical Strogg decal work, and mostly some web design.

I got the job. Looking back, I can honestly say that Raven took a huge chance on me given that my skill set in actual graphic design was really weak, but they had picked me because I showed a strong ability to quickly pick up any technical skill needed to do UI design in their tech. And while at Raven I was grouped with people much stronger in graphic design and art than me, which let me do a lot of learning and growing, something I've continued to do since.

Raven wasn't the start of my game industry career but it was the start of my career as a game UI designer. While at Raven I worked on Quake IV, Wolfenstein, and Marvel: Ultimate Alliance, and after Raven I moved on to Gas Powered Games where I worked on Space Siege and Demigod. And after Gas Powered Games I went to Uber Entertainment where I am today, working on Monday Night Combat and now Super Monday Night Combat.

Bringing It All Together

Making games is hard work no matter how much fun it is to play them, contrary to what many people who haven't made games may think. And game UI is no different. The skills and pointers in this article can get you to a certain point, but being a game UI designer means being able to deal with the incredibly fast pace of game development, having the ability to switch gears on the fly, and being self-motivated enough to obtain a range of skills that aren't readily available from a single college program. But at the end of the day creating good game UI is an accomplishment few people get to say they do, and your fellow game development colleagues will be happy to have you there doing it.

Resources

This is a very small list of resources to get you started. From here, look to other games and study their UI, and talk to as many game designers as you can about how they see game UI fitting in with their game design.

Tools

EpicGames UDK Scaleform

Web Sites

Design Shack Smashing Magazine

Books

The Design of Everyday Things Donald Norman

Edward Tufte's Books

Special Thanks

Several people helped me polish up this article and I'd like to give them a shout of thanks: my husband, Matt; Stacie Scattergood; Josh Sawyer of Obsidian Entertainment, and Ashley Matheson of BioWare.

The Path to Game UI Design, Part IV: Getting Experience

Yesterday we continued our series and discussed the tools that game UI designers and artists use. Today, let's talk about how to get experience when you're outside the industry and interested in getting in.

The Path to Game UI Design, Part II: The Roles

Yesterday we looked at what types of backgrounds might be applicable to game UI design. Today we'll talk about the three main roles that the UI designer or artist might play in the game industry.

The Path to Game UI Design, Part 1: Character Sheets

When you're a game developer and someone asks you how to get into the game industry -- which happens about twice a week -- they almost always mean, "How do I become a game designer?" or, "I have lots of ideas for games. How do I get a job where I can get paid for my game ideas?" (Hint: you can't, but that's another article for another time.) The question is almost never framed in the context of a specific position within the game industry, like a programmer or an artist. Most people tend to think of people like me who work in the game industry as having some kind of amorphous job title; in their minds the job description on my business card reads, "plays games all day" . But once in a while I get asked specifically about my job as a user interface designer for games, my qualifications, and how I got here. Every few months I'm asked the question, "how can I --" (or my friend, or my cousin) "-- become a game UI designer?" And I realized recently that it's time I laid out the answer in something I can pull up easily the next time the question comes up.

User interface design for games isn't glorious -- it's one of the less visible cogs in the machinery of making games, unlike programmers, artists, and game designers -- and this is one reason why I'm often surprised I get the question at all. But I'm always happy to get it, because the more qualified people there are going into game UI the better game interfaces will get over time. And if there's any question about the demand for UI designers, I can tell you that every couple of months I'm asked by some of the bigger companies in the industry if I'm interested in a position with them or know someone who's qualified. I'm not looking, since I'm happy where I am (Uber Entertainment, of course), but if the demand is still high by the time you're reading this and you're interested in this path into the game industry, it's a good time to be you. We'll spend the next few days talking about these topics in becoming a game UI designer:

- What Encompasses Game UI Design?
- Who is Qualified? A look at the different paths into game UI design
- Types of Jobs: The UI Designer, the UI Artist, and the Hybrid
- The Tools
- Getting Experience
- About Game Design Schools and Programs
- "How Did YOU Do It?" - Further Resources

What Encompasses Game User Interface Design?

A user interface designer's work is the glue that binds the player's input to actions in the game world; it can also be one of the ways that a player receives feedback from the game. The most common interface that people recognize in games is the Heads Up Display, or HUD. This is the overlay of information that a player sees in most games, and it frequently displays information such as health, ammo for weapons, what weapon is currently in use, and more.

Game UI also encompasses front end menus, such as options screens, server browsers, and other similar screens outside of the actual gameplay.

Who Is Qualified?

The path into game UI design can be approached from many angles. Let's discuss a few of them, going from most experienced to least.

The Web/App UI Developer: This person already has a background in UI design in another field. Since the principles of good UI design are the same no matter what you're designing UI for, such a developer is already halfway there. The web or application UI developer will need to translate his or her knowledge and skills into the world of games. Designing game UI uses the same set of skills and principles as web development and design or application UI design does: the UI needs to be communicative and easy to use. The additional skills the web or app developer will need to acquire are the ability to communicate game design information in an environment that is constantly changing and learning how to present what can frequently be complex game design mechanics in a way that is understandable, informative, and barrier-free. Later on we'll cover ways to practice these skills.

The Graphic Design Degree Holder: There aren't any colleges that offer a degree in game UI design, but there are plenty that offer degrees in graphic design. This is one of the most applicable degrees you can have if you're fresh out of college and want to work in games. Much of UI design requires graphic design skills, so if your education was focused on this, you've already got a foot near the door. If you fall into this category, your next steps should be to work on applying your graphic design skills to game UI and to educate yourself on the tech and tools involved.

The Self-Starter: What if you're not a web developer, app UI developer, or even someone with a degree in design? It's still possible to become a game UI designer -- I'm evidence of that. But you've got more work ahead of you than anyone else. You're probably doing design work on the side (or you should be), and plenty of working graphic designers are self-taught. Making sure you have plenty of work under your belt to show that you've got design chops is going to be the biggest task on your list.

Tomorrow we'll take a look at the three common types of UI jobs in the industry: the UI Designer, the UI Artist, and the Hybrid.

1 Comment

UI/UX Case Study: iTunes' Ping.

Everyone loves social networking, don't they? So I guess it wasn't a big surprise when Apple announced they'd be jumping on the social networking bandwagon with Ping, the new social tool in iTunes. It seems kind of natural, though. I don't know about you but I've almost always been exposed to new music mostly through the recommendations of friends, so social networking and Apple's music software sound like they should be as natural a fit as chocolate and peanut butter. So when Ping launched I was curious and checked it out. I was pretty underwhelmed but figured, hey, the service is new so I should give it a chance to get seeded a little bit. It's been a few weeks now and unfortunately I'm just as underwhelmed as I was when it launched, and I feel like a lot of that is due to a poor presentation on Apple's part. I know that it's common knowledge that iTunes isn't really up to the user experience snuff, but I expected that Apple would maybe learn from all the things they've done so incredibly well in the area of user experience with their hardware and bring some that to Ping. What I encountered, though, is a service that's barely noticeable and almost actively anti-social as far as social networking goes.

I find the service lacking; it doesn't really compel you to do anything at all. There are "Like" and "Post" buttons on artist pages, but Ping really never gives me a compelling reason to bother doing anything with them. Who's following me? Who will see when I "Like" something, and am I even going to notice that anyone cared? It's too close to Twitter's shouting-into-the-wind and not nearly close enough to Facebook's tighter social integration that promotes discussion, friend-finding, information sharing, and commentary.

When I first set up my Ping profile I figured that I at least had to do some initial seeding myself to get it going, however, so I added a friend to my Ping list when he mentioned that he'd set himself up on the service. Great! I've got someone I'm following...

...or do I?

When I click on Ping I get a page that actually lies about my Ping network.

Ping telling me that I'm not following anyone.

This is the first page I saw when I clicked on Ping. And it's virtually empty. Look at all that blank space. A big expanse of empty page is about the worst way to initiate a positive user experience, and layered on top of that is the fact that the page is a lie -- I am following someone. I'm just following someone who really doesn't do much with Ping. And this big, blank page is making me start to understand, right off the bat, why they don't bother.

No, actually, I AM following people. See?

If I click on People I see the page above. Now why on earth would Ping lie to me, Apple? That's not a great way to start off a relationship. Also, the label People is terribly vague. Is it people I'm following? People following me? People you think I should follow? I don't know because the navigation term is so vague that I had to take a guess about where it would take me when I clicked it.

There's really no reason for that big blank first page to exist in that state, unless there's some deep technical reason why it simply must be designed this way that we non-Apple employees aren't privy to. On the right hand side is a list of things that might be able to get me using the service; why aren't those things brought to the forefront for new Ping users? Here's a really (and I do mean really) quick and dirty example of what an opening page for a new Ping user should really look like, or should look like for people like me who have few friends in their list and whose few friends don't really have any new updates to display.

Give the user something to DO when they first begin using your service.

Instead of presenting the new Ping user with a big blank page of nothing, they should be presented with something to do. Here we immediately push some artist recommendations in front of them (and hopefully more correct ones than are in my own list; seriously, Apple? Aaron Neville? When have I ever listened to anything that would cause you to recommend that) and some people they might want to follow. Facebook integration really should have been a huge part of Ping's launch, but I suppose opaque red tape issues might have gotten in the way. Still, if you're going to launch a social networking service the very least thing that it should launch with is some way to recommend a few appropriate people to follow, and failing that there should be something my quick mock-up doesn't have: a very, very prominent Find Your Friends search box taking center stage on this page, not relegated to a tiny column of stuff on the right.

Ping was touted at the conference as a way to stay up-to-date on what your favorite artists are doing. You could see when they'd be releasing new albums or what shows they were doing in your area. Facebook and LinkedIn are both very good at pushing events in front of you that (a) are in your area and (b) are things you might be interested in. You'll notice in one of the screenshots above that I'm following Alice in Chains. And you might notice some tasty bit of info buried on the page after this, if you click on them.

There's some cool info in here I would have liked to have known back before tickets would have been sold out.

I had no idea that Alice in Chains was playing Key Arena tonight until yesterday. When I heard it on the radio. A device that iTunes is seriously designed to replace. I favorite'd Alice in Chains, and iTunes knows where I live -- you can see in the lower right of the page that they're telling me the band is playing in my area. Why on Earth was that information never pushed to me in a much more prominent way? There's no excuse for someone having to click three layers deep to find this information, it should be big and obvious on my Ping homepage. (Maybe, I don't know, in that giant blank space?)

There are many apps out there these days that recognize the value of leading a new user to the seed content that should compel them to use their service. One of Facebook's biggest strengths is the "You may know..." feature, and Twitter now has something similar. Pushing recommendations to build a list that will then propagate further content is essential to getting people to use your social networking service. I just don't see Ping taking off until Apple sees it more as an integral layer to the entire iTunes user experience and not just a bolted-on social network tool for the sake of social networking.

1 Comment

2 Comments

UI/UX Case Study: The Evernote Sharing User Experience.

During a typical day of working on Monday Night Combat, I'll have brief but frequent periods of time where, in order to test a change to the UI I've just made, I'm waiting for the game to be built and pushed -- or "cooked" -- to my Xbox, and since I can't actually make any changes during this time it leaves me with about two minutes of time where I'll fire up a web browser, check email, or otherwise twiddle my thumbs. It can be pretty distracting to keep moving from random web articles back to the game, so I thought it would help my focus if I tried to at least productively read things that have to do with UI, keeping my attention at least mostly related to the task at hand. So during those moments for the past few weeks I've been collecting articles about user experience design and user interface design and storing them in a notebook in my very favorite app of all time, Evernote. By tagging them in their own notebook I'm slowly accumulating an indexed encyclopedia of UX and UI design knowledge that I can use for my own reference, edification, and skill growth. I also post these articles to Twitter and Facebook as I find them (I'm trying to consciously add value to my social networking these days rather than just posting about what I had for lunch -- it was a pulled-pork sandwich, though, if you must know), and after a couple of people told me they've really been digging these articles, I decided I should share my Evernote notebook publicly for the benefit of other people who might like to see this information collected.

So yesterday I fired up the Evernote app and tried to share my "UI and UX Articles" notebook with the world, and I ran into a really frustrating UX and UI issue that stuck in my craw hard enough to have me thinking about it most of the afternoon. And that led to me thinking about how I would have solved the issue, which led to sketching, and ultimately to me thinking that this is a good opportunity for me to give myself a UX/UI homework assignment: redesign Evernote's notebook sharing. (See the note at the end of this article in which I attempt to justify my belief that I'm not being a snarky UI designer.)

Let's start by taking a look at the goal, the current user experience in achieving that goal, and the desired user experience with possible solutions to achieve it, at least from my own perspective. If any other UI/UX people are out there reading this, certainly feel free to grade my homework and let me know if you think I'm entirely off-base.

The goal: The user wants to share a notebook, either publicly or with specified people.

The current user experience: Sharing can only be done via the web app, and the UI for sharing is inconsistent, confusing, and leads the user to a dead-end unrelated path.

The desired user experience: Sharing should be easy to do, take a minimal amount of clicks, and be easy to find.

The Current User Experience

From the get-go I'm presented with a small usability annoyance: why can I only share notebooks via the web and not the Evernote application itself? As a developer I'm willing to give Evernote the benefit of the doubt on this one and assume that there's a technical limitation right now that makes it non-trivial to share notebooks via any platform other than the web app. As a user, though, I've heard -- through my experience in using Evernote -- that notebooks are shareable, so I'm baffled as to why there's no "Share" option when I right-click on a notebook. That's the action that coincides with my mental model of how sharing would work, a mental model based on years of using apps that work this way.

The inability to share notebooks via the flagship Evernote application is even more baffling given the data presented inThe Evernote web interface.

The top left list is a list of my notebooks, and beneath that is a widget that says, "Sharing." Since I want to share a notebook, this is the first thing I click.

What I see here is a header, a paragraph, and a link. I see the words "click Sharing Setup", but my eyes don't see a link with the words "Sharing Setup". I see something about linking notebooks, but since this is the box about Sharing and this is the only link I see, I assume this is going to take me to the right place, so I click it. This is where I end up when I click.

At this point I'm pretty confused. I want to share a notebook and I clicked "sharing" and then clicked the one link I saw, but now I'm reading something about linking shared notebooks to my account. I'm not interested in linking other people's notebooks into my account -- I clicked something about sharing, and this assumes I'm dealing with a notebook that's already shared somehow. There's nothing about how to share a notebook on this page, so I click Back to see if maybe I clicked on the wrong link. When I get the previous page I click "Sharing" again to see if I missed anything...but no, I get the same box that tells me to click "Sharing Setup". Except I don't see any link that says "Sharing Setup."

Oh, wait! After spending several minutes and at least one click into the "linking" page to see if maybe I missed something there that would take me to sharing, I finally see it: the header is a link. I'm supposed to click the header that says "Sharing Setup." When I mouse over it I see that it highlights. Aha.

This touches on one of my biggest pet peeves about interface design: not maintaining separation and consistency between headers, body copy, and links.

There are two problems I see with the way this box is designed. The first is that the paragraph header itself is used as the link, but there's no indication that it's clickable. In the very same space I see underlined text -- this is a web convention that we all know well: bold and/or underlined texts are links, and headers are almost never links. Secondly, the header text is not in an active voice; there's no indication to the user that this is an actionable item. If I'm going to break the first convention and use a header as a link, then the only way the user is really going to know that it's a link and thus goes somewhere is to indicate that with language that indicates motion or transition. A better phrasing of this header would have been something like, "Go To Sharing Setup." But even with this fix we're still violating consistency rules, and we're also doing something else that's one of my pet peeves: using the language "click here" to tell a user where to click. That's very previous-century web design; links should always be self-evident in today's web design and should never need a paragraph next to it explaining that you should click it.

At this point you've probably read the paragraph included in this box and said to yourself, "didn't you read what it said? It said 'click sharing setup.' It's your own fault you didn't follow directions." And in a sense you'd be right. But here's the thing: UI design is all about patterns and consistency, and when users work with web apps we scan for familiar UI patterns. We really don't read. It would be nice if we did but we're using an application, not reading fiction; we want to work fast and we assume that things we're familiar with will act in ways that are familiar even if we don't read the text surrounding them. It's a fact of technological life.

I didn't have any linked notebooks at the time that I originally went looking for the sharing functionality, but I eventually linked the shared Evernote Support notebook -- the notebook housing the confusing note about how to import notebooks into your account -- and the resulting functionality of the Sharing widget became even more baffling.

Why would the Sharing widget look almost perfectly identical to the Notebooks widget right above it, but not list my linked notebooks exactly like my own notebooks? Every other widget in this column is expandable; why this one is not and shows a popup with little information is baffling. But at least the "Sharing Setup" link looks a little more like a link now.

The worst part about all of this? I've gone through this process before and it was just as confusing then as it is now. I had shared out my Wedding Planner notebook a couple of months ago, but because the process was so convoluted and took me down so many non-obvious paths there was no way I could remember how to go through all of that again, so I was just as confused the next time I went to share a notebook.

The User Experience Redesigned

The first thing I did was do some brief, small sketches of ways the left-hand area could be redesigned to be clearer. There's nothing revolutionary here. Evernote already designed the app this way -- they just left it in the upper "Notebooks" area and didn't carry it through to the Sharing functionality. (You'll have to forgive the poor quality -- these are cellphone snaps instead of scans I'm afraid.)

The first thing I did was change the Sharing widget to a Linked Notebooks widget and change the Notebooks label to read Your Notebooks. By doing this we immediately separate out the two kinds of notebooks we can have in Evernote: our own, and those that other people own that we've imported into our account. The new Linked Notebooks widget deals only with linking, which turns out to be kind of different from sharing -- sharing is the process of making your own notebooks readable by other people, and linking is the process of importing other people's notebooks into your account. These two different functionalities shouldn't be housed under the single title of Sharing.

The actual sharing functionality can now be moved into something more logical. Do you see the "Edit" box at the bottom of the Your Notebooks widget? It seems pretty logical that sharing is a setting we can edit, and if we pull down the Edit box we'll see things we can do with our notebooks that also seem logically grouped with the ability to set a notebook's sharing properties.

You might think at first that the "Properties..." option would be the group to hold any share settings. But on clicking "Properties..." we're presented with a tiny dialog that only contains two options: setting the name of the selected notebook and setting this to your default notebook. But the main "Edit" dialog already has an option to rename the selected notebook, so why are we doubling up this option in a popup that only contains two options?

Why not replace the "Properties..." option with a "Set as default notebook" option and add "Sharing..." as an option below that? The "Sharing" option would then take you to the existing page we've been trying to get to all along in this exercise.

We can take this user experience redesign a step further, though. Why require the user to click a notebook and then make a second click on the Edit box at the very bottom of that list, followed by a third click for the option they want? We can see that each Notebook widget allows you to maximize and minimize it, so why not carry that same functionality through and give each notebook an expandable list of options? Horizontal spacing is not an issue since the width of the left column of the Evernote web app is dynamically resizable.

This dropdown would eliminate another curious part of the sharing experience design. When we click "Sharing Setup" we're presented with this page:

You must click the button to edit a notebook's sharing properties to get to the page we've been trying to reach. If the sharing option were integrated as previously described, clicking on "Sharing..." would take the user directly to the sharing options for the individual notebook instead of an interim page that doesn't seem to do much but require an extraneous click.

This would also eliminate one more small design issue with this page: differentiating the two currently similar "Edit" buttons on the page. One is for notebooks and is contained within the Notebooks widget, and the other is in a row of buttons at the top of the notebook contents itself on the right.

When I was looking for notebook options I saw two "Edit" buttons on the page and didn't immediately associate the row on the top with the notebook contents -- for a second or two I thought that row of buttons pertained to the master notebook I was in because the names of the buttons were fairly generic ("New", "Edit", "Delete" instead of "New Note", "Edit Note", and "Delete Note"). Then I realized why that was the case, apart from the text labels themselves: there isn't enough visual spacing to help our eyes associate the buttons with their appropriate content, which is the notes below them. Attaching the options for each Notebook tightly to the notebook title itself would clear up this ambiguity. Pushing the spacing and detaching the notebook contents into its own visual container with the buttons would also help.

If we followed these steps, the act of sharing a notebook publicly, which is a pretty cool feature of Evernote, could be done in just a couple of easy-to-find clicks, and the options for each notebook would not only be more quickly accessible but more tightly integrated, making them easier to find. The concepts of linking and sharing would be cleanly separated and easily identified.

A Note On Hubris

Now, I know what you're thinking. It's pretty gauche to just start dictating to some other designer or company how they should do things. Trust me, I've been on that end of the stick -- as a game developer you have gamers constantly telling you how you should have done things in your last game with all the confidence of someone who knows your job way better than you do. I can't tell you how many armchair game UI designers are out there -- I've met too many to count. It's impossible not to sound like you're breezing in, slapping a design solution down on the table with a sarcastic "you're welcome," and then pushing up your fake horn-rimmed glasses while taking out your iPhone 4 and pretending you just got a call from Steve Jobs asking if you wanted to grab some tapas. (Note to self: get some fake horn-rimmed glasses. Also, befriend Steve Jobs.)

I'm not trying to tell Evernote how to design. Okay, I suppose I am. But I'm probably not telling them anything they don't already know -- UI and UX is complicated stuff, and things slip through the cracks or sometimes get designed in ways that were intuitive once but feel broken later, and this is probably all stuff that's already on their list. And of course those who live in glass houses and all that. Really, I'm just looking at this as a homework assignment for myself -- as a devoted fan of Evernote, I see a usability problem that makes my usually wonderful experience less than wonderful, and since I'm a UI designer/developer, why shouldn't I put my money where my mouth is and use this as a learning tool in how to design what I think would be a better experience?

So...you're welcome. Now excuse me, I've got to take this call.

"Yo, Steve, what is up, my man? Hell yeah I know a kickin' tapas place..."

2 Comments

Comment

My User Experience: Blackberry.

I upgraded my phone several months ago and since I'm on Verizon I don't get my first choice in phones, which would be the iPhone. Since I didn't really like the Droid when I used it in the store I went with the Blackberry Curve. For the most part the phone has been easy enough to use -- "easy enough" meaning that the UI had issues, and it may take a mistake or two to get a setting right but eventually I figured it out. While looking for answers to questions I had online I saw more than one post that mentioned that Blackberries are well known for their steep learning curve but that the reward for having surmounted it was mastery of a lot of advanced options and a highly configurable device.

Well, that learning curve really decided to come back and bite me the other day: I had what was possible the worst user experience with a device I've ever had. I'll tell you the story, and then I'll tell you what questions it raised in my mind about the psychology of user interfaces and experiences.

The Contacts list on my phone has been gathering duplicate contacts for a while now. I have the phone set to sync with Gmail, and it's been causing duplicate contacts to show up in both places. To compound the issue the Facebook app on the Blackberry asked to sync my Contacts with my Facebook contacts, and doing so caused a bunch of contacts to be merged that shouldn't have been merged -- two different people's information suddenly began crossing over into each other's Contacts entry. So now I had no idea if I had the right phone number for any of my contacts.

I tried changing the contacts in Gmail or on the phone but since it's set to sync with Google sync that simply did nothing. So I looked online and the first thing I saw was that many people had problems with Facebook's contacts issue. The solution to this problem was posted several times in different forums: I needed to go deep into the advanced settings for the phone and delete the CiCAL service book for Facebook from the list.

Now, if you know what a service book is I'm going to bet money that you work for Blackberry. My ordeal didn't stop here, but this was the first warning sign: a consumer should never have to see something so jargon-y like "CiCAL service book" in their entire history of using the phone to solve what should be very easy problems to solve like duplicate contacts.

So I deleted the service book -- whatever a service book is -- but I still had duplicate contacts. I found more forum answers that said I had to install the Blackberry Desktop Manager to delete my contacts and resync with my Gmail contacts. So I downloaded it, tried to install it, and it hung on the last 20% of installation. I tried again; same result, only this time I kept getting popups that said the software couldn't install because another installation was already in progress, and when I tried to stop these processes and start fresh I discovered that the software was still listed as being installed under my Programs list and that I had to edit registry entries to remove it. And I discovered that many other users had the same result.

Frustrated with the desktop software I decided to go with a more brute force route that I saw in another forum post -- and I should mention here that forum posts were the only source of information on these problems that I could find -- and that was to just wipe the phone. There's an option to save third party data so I figured I'd take the chance and see if it worked. And it did remove all of my contacts...except that after setting up my email accounts again on my phone, it refused to let me send email.

I was set up properly with my email accounts but if I tried to send an email it insisted I wasn't registered on the network and that I had to set up my email. When it took me to the settings page I could clearly see that my email information was there and accurate. So I checked some more forums. There were two answers I tried: one was to go deep into the advanced settings (again) and go into the Host Routing Tables menu (?!), find the entry in the long list that was bold, and then choose to Authenticate it.

Really, Blackberry? This is something you expect users to be able to logically find somehow? Oh, and that didn't work. Neither did the battery pull that was also recommended.

The next answer had to do with service books again -- forum posts said that my service books simply needed to be resent (again, whatever "service books" are). I was to log into the BIS web site for my cellphone provider -- because each provider has a different BIS, or Blackberry Internet Service site -- and select the "Resend Service Books" option.

I had never been given a log in to that web site and hadn't had to use it, so I tried to set up an account and was told by the site that I was not allowed to use this service. By now I'd had it and decided to call Verizon support. I explained my frustration to the lady and she was surprised that the web site hadn't given me an account, so she set one up for me. And she had my service books resent, and within minutes my email was working on my phone.

By the end of all of this I was nearly ready to smash my Blackberry against a wall and vow never to buy them again, and I'm still pretty sure about the latter part. There was no reason at all for the hoops I had to jump through, nor for the incredible amount of jargon I encountered along the way. I'm a very tech-savvy person and I'm not afraid of jargon, but there's simply no reason why I should have ever had to see that kind of meaningless jargon for the simple case of duplicate contact fixes.

Yet I've seen people talk about the Blackberry as being "challenging" but having a hugely devoted fan base. Why? It's pretty clear that Apple and maybe Droid are destroying them in the mobile phone department. The features I'm using on my Blackberry are no more complex than the features I'm using on my iPad and iPod Touch, yet the Blackberry UI is horribly unapproachable and the entire user experience doesn't come close to Apple or Droid. Could Blackberry users have simply invested too much into the process of learning about the phone they chose that, like Stockholm Syndrome, they had to believe they'd been rewarded with some kind of mythical level of advancement or else all that time and effort would otherwise have been wasted?

I'm curious how much Blackberry is learning, if at all, from their competitors, and I'm really curious if there's a psychology of UI that talks about these issues. Can a UI or user experience ever be too simplistic? Is there any value in providing a "more challenging" UI like Blackberry does? Where is the sweet spot on the UI/UX development spectrum that sits between "so complex that it's frustrating" and "simple enough for anyone to use but deep enough for advanced users to feel they get more value"?

Comment