5 Principles of User-​​Centered Interface Design

Oh Google Maps… where would I be without thee?

Probably still driving down a back road half way to New Mexico by now. And all I wanted was to go to the corner store.

But this isn’t an article on my lack of navigational skills. It’s about how we all like to know how to get around without getting lost. And when I’m using a website, computer program, video game, or anything else that requires me to interface with a piece of software, I also like to know how to get around without getting lost.

Thankfully, we live in a world where subjects like user-​​experience design and user-​​interface design are established enough disciplines that we feel inclined to shorten them to UX/​UI design and people still know what we are talking about. Yet it’s amazing how many times I still find myself on a website and feel my frustration level rising because I can’t figure out how to do what seems to me should be a simple task. Sometimes I really do want to go to New Mexico, but all I’m given is directions to the corner store.

I’ve outlined below 5 principles of user-​​centered interface design, principles to help our websites and applications keep us on track. I am most familiar with website and mobile interfaces, but really these principles can be applied to any interface, or anytime someone has a point of contact with a digital or mechanical system. An interface can be a navigation menu, a search field, a dialog box, a selection pointer, a tools palette, a drag-​​and-​​drop feature, a web form, a simple button, and so much more. An interface is also the power button on your computer, and the volume knob on your stereo. And the touchscreen of your iPad. Interfaces are the layers through which we humans interact with our machines. In my world of web design, interfaces are so important because regardless of a website’s content, if someone can’t navigate easily around your site, that great content may never be found. And the world may never know about the video of your seriously… cutest… kitten… ever.

Now at first glance the principles below may seem rather obvious. Even so, it never hurts to re-​​emphasize the obvious when it comes to web design best practices. How many times have you needed to just get a website out the door and been tempted to skip over providing alt attributes for those last couple of images you’re using? Resist the temptation! And sometimes even things that seem to be obvious turn out to have been not so obvious at first. If this wasn’t true then all the interfaces out there would be easy to use and there wouldn’t be any need for people like me to write an article stating the obvious. Okay, you’ve waited long enough, on to the principles…

Principle #1: Understand Your Users and Support Their Goals
Mitchell Kapor wrote a Software Design Manifesto back in 2002, and there is a quote from this paper that I still like to use:

“If a user interface is designed ‘after the fact’ it is like designing an automobile dashboard after the engine, chassis, and all other components and functions are specified.”

Now at first glance you might be thinking no big deal, a car’s dashboard or website’s interface can be designed once you have all your core components and functionality built. But this will usually get you into trouble. Why? Because your users aren’t interacting directly with your core components — they are experiencing your system, and all that it can do for them, through the interfaces that you provide. And if these interfaces are designed after the fact, it’s almost impossible for them to be able to meet all your users’ goals. In other words, you need to first understand your users — their needs and objectives — in order to create an interface that allows them to effectively access your system’s functionality.

The important questions to ask then in creating a user-​​centered interface are: Who are the users? What are the main functions that the user will need? Why is the user using this particular piece of software/​hardware and what are their goals? Is the software/​hardware accessible by users of different experience levels? What is the most intuitive way that the user could interact with the software/​hardware?

Principle #2: Make Your Interface Easy to Learn and Enjoyable to Use
For the typical iPhone owner, they don’t care about the brilliance of the software and hardware engineering that went into creating their device, they just know that it is easy and enjoyable to use. Finger swipe, tap, two-​​finger pinch, slingshot an angry bird. You can bet that Apple never creates anything without first considering how people will interface with their products, and I would guess that a prevailing philosophy of user-​​centered design at all levels of their product development lifecycle is a big reason for Apple’s success.

For websites, creating an interface that is enjoyable to use may seem less obvious, unless you are creating a complex interface for a Flash game, but being enjoyable can be as simple as a navigation structure that is straight-​​forward and intuitive. Even so, with more and more applications moving to the cloud and our browser becoming our operating system, creating effective, easy and enjoyable interfaces for our web products has never been more important. I recently switched from desktop based wireframing software (Axure, Omnigraffle) to an online application called Lucid Chart, and the transition was seemless because the authors made sure to create a web interface that is easy to use and familiar to those migrating from desktop programs.

Principle #3: Remain Consistent
An important concept to help the user maintain a sense of spatial orientation, and sanity, is to remain consistent. From the user’s perspective, this means not only a consistent look and feel to a system’s interfaces, but also that actions performed on the interface result in expected outcomes. If the same action is repeated, the system needs to respond in a consistent manner.

I still occasionally come across the odd website that actually changes the order of its nav bar or sub-​​nav links depending on what page you are on on their site. To me this is the equivalent of switching your car’s gas and brake pedals depending on whether you are driving on the highway or a side road. Interfaces need to remain consistent so that they can fade into the background and not require any higher level of concentration to use.

Principle #4: Form a Dialog with Your Users
I like an interface that speaks to me. Not literally speak to me (although that might be nice too), but an interface that uses terms that make sense and gives me feedback when I need it.

In order to ensure that we don’t get lost and can always find what we are looking for, it’s important for an interface to be labeled properly. Everyone understands what a “home” button should do in a nav bar, but not every menu label is always this obvious. For example, let’s say you have a multi-​​user game on your website that allows people to compete against each other, move up and down leaderboards, chat, form groups, etc. Do you put this game under the “Multimedia” or “Community” category in your nav if those are your only two options? This is when techniques like card sorting can help you figure out the best navigational structure.

A feedback mechanism is also crucial for effective interface design: the user needs to feel that their actions have meaning. We are all familiar with filling out and submitting an online form, for example, but have you ever clicked the submit button and just had the page refresh and be presented with the empty form again? Then you are forced to ask if your information went through, was there an error, should I fill out the form again to make sure? Don’t leave any doubt in your user’s mind — give them feedback for their actions. Thank you for your inquiry, someone will get back to you just as soon as we get back from our Starbucks run.

Principle #5: Be Problem Free
The quickest way to inhibit enjoyment is to create frustration over simple interface and navigation issues. If you’re like me, testing is never the most fun part of the process, but it is vitally important. It’s a competitive marketplace out there, and if your system’s interface has noticeable bugs you risk losing your users, perhaps forever, no matter how good your content is. Interface problems can be more than just software bugs, however, as a poorly designed interface is still a major issue. A good way to test your interface is by watching people use your system in a real-​​world scenario. Are they able to navigate around and achieve their objectives with relative easy? Is your interface intuitive to both experienced and less experienced computer users?

I will forgive a website for having small interface problems that may make me shake my head a little, but time is a limited resource, and if too many problems are interfering with the tasks I am trying to accomplish, sorry, but I’m moving on.

Conclusion
I have a secret to share. I’m a sucker for a beautiful looking website. But the truth is, at the end of the day, a site’s visual aesthetics will more than likely have nothing to do with it’s success or failure. If a site looks good, my attention is captured and I can take pleasure in the design, but then it quickly boils down to whether the site can do for me what I want it to. Key factors for determining a website’s success are its usability and utility. Content is king, of course, but content needs to be found and accessed.

So I hope that you will consider these 5 principles of user-​​centered interface design on your current and future projects. There are, of course, many more principles than just these five, but that’s what books on UX design are for. I’m just hoping to give you some food for thought, or to re-​​emphasize what you already know, so we can all work towards building a world with better interfaces!

The great thing about user-​​centered interface design is that it never sits still. It incorporates so many different disciplines — hardware and software engineering, ergonomics, psychology, sociology, linguistics, computer science, etc. — that it is an evolving and ever-​​growing subject, and to fully grasp the intricacies involved means that we can never stop researching and learning about it.

A Critique of Google Plus: The Good, the Evil and the Ugly

Last night I was finally sent an invitation to try out Google+.  And, after a quick examination, I’m glad I didn’t believe the hype.  Don’t get me wrong… I was very pleased and excited to get my invitation.  It’s just that, judging by the entirely uncritical response I’d seen from my online communities, I was almost convinced that it was actually going to be the best thing since sliced silicon.  The marketing department was working overtime to build up expectations about this product in a way that only Google marketers could.  And scores of diehard Google fans were more than eager to help them out — regardless of how good the latest Google product actually was.  Anyway, deep down, I knew it wouldn’t be everything that everyone was making it out to be.  

The problem, at first glance, is simply that Google+ is stylistically sterile and cold.  The main page simply doesn’t make good use of screen space and it’s largely just an empty white blankness.  On a large white screen the actual content is relatively easy to focus upon, but there is still a lot of blank space next to pictures and photos (in addition to the general emptiness of other areas on the screen).  That’s fine for a search engine, and okay for email, but terrible for social media which is supposed to be more about people engaging and expressing themselves.  Perhaps customizable themes will help out in that regard — but Facebook was not quick to implement such a feature (it never did) and it’s up in the air as to whether or not more personalization is going to being available any time soon for this product.

Beyond that… I’m not certain that Google Plus offers what Facebook doesn’t.  It’s certainly not as engaging with the Apps (and, like them or not, that is a draw for many people).  Again, engaging Apps may come… but they may not.  And, after everything Google should have learned from Facebook, there is still no “dislike” button (or the option for “-1” vote)!

One thing I do like about Google Plus is that the content created on the service will continue to belong to the user(s) who created it.  That’s no small thing, but it’s not really an issue for most people either — as most people merely disperse content rather than create it.  People don’t generally use Facebook to create their artistic works.

In any case… I suppose I might, effectively, end up being forced to use this product (at least peripherally) — but I don’t like it.  I simply don’t like the feel of the service.  I don’t like the letdown from the hype, and I don’t like the fact that even more information is being cycled through one corrupt corporation.  As I said… Google presents a pretty good search engine, a ubiquitously convenient email service, and even Reader & Blogspot are decent services (I use both) — but sometimes Google just tries too hard and hypes too much before disappointing utterly (re: Orkut, Buzz, iGoogle, etc.).

Another primary thing I don’t like about potentially sharing content on Google+ is in regard to it’s political application.  Again… another lesson which should have been learned from Facebook (and Twitter).  Shared posts via this new service should have the option of not revealing who shared them before and who gave them a +1 vote.  This would allow sharing to continue with ease while not alerting the authorities (of some despotic regime) about who the proponents of a certain message are (when they inevitably stumble upon it).  This is a feature which could, and should, be added — and it’s largely why I’m writing this critique.  It’s one thing to let people know that a post got a large number of +1 upvotes (that can be important to show that a movement is growing or that a post is valuable), but it’s another to let everyone down the line know who gave those +1 upvotes or shared the article.  And it’s naive to assume that all those who upvote an article aren’t themselves naive about potential political ramifications.  Even online circles can, and will, be infiltrated by agents of oppressive governments.  There is no reason to make their list-making easier.

Furthermore, along those lines of political privacy and potential repercussions, it would be a slightly different matter if Google wasn’t known to cooperate with the U.S. government in terms of readily complying with the flimsiest of digital search warrants.  As Wikileaks founder Julian Assange made clear recently… Google, along with Facebook & Yahoo, “have built-in interfaces for U.S. intelligence.”  This is no small issue, globally or within the United States, but more pressure needs to be put on these corporations about this issue — and that really hasn’t happened yet, at all.

Now… to further back up my earlier claims about Google being a corrupt corporation, I unwittingly searched Google for criticism of itself to provide some embedded hotlinks for this article… but guess what I found?  Unsurprisingly, not as much as I found when subsequently searching Yahoo with the same terms.  In fact… criticism of Google was largely buried in their own search results (with only the conspiracy fringes usually rising to the top of various search results).  There were no prominent articles featured aboutGoogle’s original compliance with China’s censorship policies.  No prominent articles about European antitrust and privacy orsurveillance complaints.  No prominent mention of how Google revealed contact lists via Buzz.  It was relatively difficult to find anyreal criticism featured at the top of many search results.  This makes some obvious sense (as the corporation is protecting itself), but it goes to show that Google is not always interested in returning the most relevant search results.  And that, in itself, is somewhat problematic.  Other issues of privacy and corrupt corporate influence abound around Google — just don’t use Google to search for information about these issues (unless you want your research seriously stymied).Beyond that… consider that Google has the power of potential retribution against any of its critics.  If a brief little comment like this one gained popularity (perhaps via Twitter or Backlinks) the author and their other works would still risk being knocked down a few levels in relevant search results.  You might want to make the most of any supposed “free speech” and try to facilitate the free flow of ideas… but Google has the power to stifle that process — and is apparently willing to do so.  How does that jive with their primary function as a search engine and their motto of “Don’t be evil”?

Now, I don’t entirely blame Google for all of these issues — it’s just another psychopathic multi-national corporation willing to do whatever it can to increase its power and profit margins.  Part of the blame for its ethical and stylistic shortcomings lie with us, the users of Google products.  We need to stop uncritically accepting everything Google offers us (as if it really cared about our personal interests).  We need to demand accountability from this corporation (and all of the powerful corporations that hold so much power over our daily lives).  We need to look past the brand and the marketing to see if Google is really helping to make positive changes in the world.  Anywhere it’s doing harm and violating it’s motto is where we need to be pointing and demanding change.  Google will only be as accountable as we demand it to be.  At least… ideally.

I suggest that the only way Google could really start to redeem itself is if it bumped up my blog’s pagerank by a full point and then made these comments appear prominently on all searches for criticism about it.  But I don’t think Google has the guts.  So, Google, the ball is in your court… or are you afraid?

TL;DR — Google Plus is only slightly better than Facebook, at best.  It’s interface is somewhat unsightly.  Key features, which should be available, are not.  The dubious ethical actions and policies of Google, as a multi-national corporate entity, should not go unchallenged.  Google users, if they truly want to make it more user-friendly, should look past the brand and marketing, attempt to hold it accountable, and promote criticism of the company.  Prominent placement of this article within Google’s search results does not necessarily indicate capitulation.  Feel free to repost this content for the sake of posterity. 

Beyond Emotion : Designing for Visceral Allure

When we think something is cute, why do we feel that way? What is “cute”? What is it inside of all of us that is inexorably drawn to puppies, stuffed animals, and garden gnomes? We all know that we think things are cute, but few of us can explain why, or for what purpose.

Before I get much further, I’d love to reference and give credit to Aarron Walter’s excellent post on Emotional Interface Design. To summarize, Aarron discusses how our digital lives have become more public, and that “as users let their humanity show online, frontiers of communication are opening for web designers.” He also speaks to the deeper needs of users, advising us to not simply be satisfied with “usable,” but to provide an experience that touches our users on an emotional level. While I agree wholeheartedly with Aarron, I think it goes even deeper than emotion to a place that we as humans cannot control. It’s in our DNA, and understanding why that connection affects and influences us is the key to successfully and meaningfully reaching our users.

I recently stumbled across the answer to my initial question: Disney. Yes, that Disney. More specifically, something Disney animator Preston Blair discovered long before I was born: we can’t deny cute.

You may have seen this before, but I think many underestimate just how profound this illustration is:

We are magnetized by anything that meets these characteristics—we simply cannot help ourselves. It’s in our very makeup as humans.

This mysterious force is why so many formulas and principles such as the Golden Ratio, the Fibbonaci numbers, the rule of thirds, and grid systems attract us to well-designed products. Throughout history, we’ve even seen ancient cultures use these principles to, without modern tools, craft history itself into stone. These principles have been described as the “mathematical formulas for beauty.” They’re proven, meta-emotional blueprints to visual captivation.

It’s also not just about cuteness. Advertisers have worn the sole thin on the adjective “sexy” when it comes to describing products. Why have so many car commercials aired featuring this word? Why are products described as “gorgeous,” “beautiful” and “hot“? The most effective tactic of marketing and sales professionals wield is to play on human emotions. This includes (non-sexual) physical attraction, even to products. People often become infatuated and connected to these items to a point that they begin to refer to them as if they were living things. They genuinely love these products.

Aesthetic pleasure is in fact an emotional need that is met by appealing to what Don Norman calls the “visceral” layer of emotional design. I’d add that beauty is a function. Fun is a function. Something that is attractive or enjoyable to us makes us want to find any excuse we can to use it or be around it. This is why we want to use beautiful products, and why we love “cute” things. We’re actually fulfilling our own emotional needs. As experience designers, this concept is the foundation of understanding our own behavior and, more importantly, the needs of the people who use our products.

We tend to label the people we’re designing for as “users,” but I fear the term is distancing and a little too clinical. It removes us from them, creating a subconscious, indirect “us vs. them” attitude. The truth is that we’re all human, and we need to admit that we’re all at least a little bit guilty of judging on appearance. While this can have varying consequences in social situations, designers can take advantage of this to make compelling first impressions with their products.

This aesthetic layer is the first point of emotional contact with our users, like a first date. We don’t dress for function when we’re meeting someone for the first time. Otherwise, we’d have napkins built into our pants and cushions sewn on for optimal movie-watching comfort. We want to look as attractive as possible.

To be truthful, I typically won’t use a poorly designed product unless it works for a very specific task (think FileMerge). It’s purely utilitarian and based on whether or not it can get the job done. I will close an ugly app as soon as I’m done with it, but I’ll leave an attractive one such as TextMate open for days, even when I’m not using it.

I love TextMate because of its simple but powerful UI and its remarkable level of readability. I want to find any excuse to open it. It’s beautiful, but I don’t love how it functions in the contexts in which I want to use it. That doesn’t stop me from launching it when I want to view a readme file. It’s unassuming, yet elegant. I’d rather deal with its shortcomings and be able to experience its design.

Good design makes people happy, which is an emotion. Bad design frustrates people, which is also an emotion. Good visual design can make us overlook flaws in the way attractive things behave, much as we do with people. Aarron Walter mentions this in his article:

Babies create bonds with their parents through an interesting feedback loop. When they cry their parents respond by soothing them, which releases calming neurotransmitters in their brains. As this cycle repeats, the baby begins to trust that their parents will respond when they need them.

A similar feedback loop happens in interface design. Positive emotional stimuli can build a sense of trust and engagement with your users. People will forgive your site or application’s shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.

The lesson here is not that we should ignore usability in favor of cosmetic benefits when we design experiences. Rather, it’s that beauty promotes usability, but not necessarily by making your product more useful. It promotes usability by influencing users to want to interact with it.

Don Norman also reminds us that the design of products serves as the vehicle through which we emotionally connect and communicate with those in our lives:

Our attachment to those objects is entirely shaped by memory. Because past experiences are no longer recoverable except through recollection, we value objects by the emotions they provide rather than their intrinsic worth. It’s why the memories surrounding them often transcend everything else about them.

But creating a product with emotional resonance does not require Jonathan Ive and his band of merry pranksters, or a team of German automotive engineers. It is not about technology or elaborate styling. Our love of objects is not even about the objects themselves. It is always about us. We grow to love the objects that connect us to other people, create meaning, and remind us that we’re alive.

That last sentence is what drives this concept home. On a genetic level, we strive to enjoy as much beauty and cuteness as we can in our lifetimes because they “remind us that we’re alive.” To me, being human is about making connections with people, learning, and loving. These are all things that make us alive. When we create emotional touchpoints in our products, we are providing people with moments in which they can feel alive, connected, and reminded of the beauty in their own lives and those closest to them. They may not even realize why they feel the way they do about your product, but they will remember it.

Comprehending these principles of functional aesthetics, and understanding why the “faces” of the things we make need to appeal to, and even go beyond human emotions, is how truly great products are born. Beauty and cosmetic interest serve the purposes of visual enticement and emotional draw.