6 User Interface Design Fundamentals

I was recently tasked with redesigning an outdated and rather cumbersome shopping portal. Over time, what had once been a trendy and even uniquely clever interface, had grown tired and clunky. The goal was to bring it up-to-date and simplify the experience so it would be more intuitive for the user from start to finish, especially considering the savviness of today’s typical online shopper.

As I worked my way through the design process, I made sure to refer to some UI fundamentals I’ve come to trust over the years.

Here they are for you:

1. Know Your User & What They Want

A lot of what we are doing is getting design out of the way.” – Jonathan Ive

Users are on your site to do one thing: accomplish something. Make sure you’ve clearly outlined what that ‘something’ is and the shortest route/action for getting the user to it. But you’ll also need to pay attention to the user group as well since the route a 12-year-old takes will be considerably different from the route chosen by a thirty or seventy-year-old user. That means it might be necessary to simplify the design or forego trendy UI in order to create an interface your user will understand. By focusing on your user first, you’ll create an interface that lets them achieve their goals.

2. Pay Attention to Other Sites

The main goal is not to complicate the already difficult life of the consumer.” – Raymond Loewy

Users spend an inordinate amount of time on interfaces outside of your website (Facebook, news or banking sites, their phone, etc.). Some of those sites have spent a ton of money refining and perfecting user experiences. Others have just done a great job at building bad habits and low expectations. Either way, it’s what users all over the globe have come to anticipate. You don’t need to reinvent the wheel to build an intuitive interface. You just need to employ familiar UI patterns people are accustomed to encountering.

3. Stay Consistent

People react positively when things are clear and understandable.” – Dieter Rams

Users love consistency. They want to feel once they’ve learned how to do something, they’ll be able to do it again and again. That means language, layout and design needs to be consistent throughout. Consistency breeds efficiency.

4. Use Visual Hierarchy

The only intuitive interface is the nipple. After that it’s all learned.” – Bruce Ediger

I’m a big believer in hierarchical design. It allows users to focus on what is most important and helps them navigate the interface. Plus, the more time spent designing a clear and intuitive hierarchy means you’ll naturally reduce the complexity of the interface and have a cleaner final product. Think of it as road signs pointing the way to a destination; concise, clear, colored when appropriate and accurate.

5. Allow for Mistakes

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.” – Douglas Adams

You might think your interface is foolproof, but people will make mistakes. Therefore, your design should always allow for and tolerate user error. Make sure to include ways for users to undo actions, and permit varied inputs—after all, no one likes starting over because they entered text in the wrong format. (And in a large percentage of those occasions the user will abandon as opposed to starting over.) Make sure the messaging you serve up in the case of a user error is constructive and (politely) teaches the user how to correct and avoid the error again.

6. Keep it Simple

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”Antoine de Saint-Exupery

The best interface designs are completely invisible to the user. Make sure you have that notion in the forefront of your mind when you are designing or redesigning an interface. Nothing should be added that isn’t absolutely necessary for getting the user to the end goal. And, anything that slows the user down should be removed. UI isn’t the place to show-off cool tricks or fancy design.

WordPress’ cool reblogging capability. If you haven’t yet, you should give it a whirl.

The WordPress.com Blog

Have you ever come across a blog post that you enjoyed so much you wanted to easily share it with the readers of your own blog? Sure, you can copy and paste the link and perhaps even a snippet of text with your own comments, but overall it’s not a particularly enjoyable experience. We wanted to change this and make sharing other posts with your readers as easy as posting to your blog.

Today we’re introducing a new like and reblog feature enabled across the whole of WordPress.com. When you’re logged in to WordPress.com and viewing a post you’ll notice a new link in the admin bar at the top of the page. If you really enjoyed the post then you can click the “Like” link to signify this. This will then show the author how many readers liked the post.

You Like ThisOnce you’ve liked the post, the link will…

View original post 345 more words

It’s Always About the User Experience

I recently wrote about an almost perfect example of interface design, the London Underground map. It was Harry Beck, an electrician with London Transport, who came up with the design based on an electronic circuit diagram. Part of the genius of Beck’s design is that he removed everything that was superfluous and even altered the true topography of the rail lines to make the information more visually digestible. The most important principle of design that Beck employed was thinking of the information as a user.

If you have ever been on a subway or underground railway then you know that you really have no concept of where you are going. When you look out the windows you see either blackness or tunnel walls. So there is no real relationship with where you are and what may be above you. Beck realized that the actual physical location of the stations was irrelevant to someone who just wanted to know how to get from one station to another. At some point during his design process he was able to remove himself from all the details he knew about the rail lines and concentrate on developing a map strictly from a user’s standpoint.

Good interface design always centers upon the user’s experience.

That statement is pretty obvious. But the focus on the user gets lost a lot of the time on either the drive for a particular aesthetic or the need to fulfill certain interactive functions (i.e., registering or buying something). The design process gets much more complicated when you have multiple people involved: designer, developer, programmer, DBA, security analyst, CEO! Many times the user is completely forgotten as the web application evolves and all the stakeholders and participants ensure their needs are met and make their individual contribution.

Designing for the web is all about making things as easy as possible for the end user without requiring the completion of special training or reading of instructions. I am sure we all remember ten years ago when someone would roll out a redesigned website and have a link to the “site tutorial!” That is a perfect example of disregard for user interface design in favor of making something cool (and complicated).

Web users need to be able to intuitively navigate, use and accomplish tasks on a site.

Web interface design needs to take people’s general interactions with everyday life into account. You enter an elevator and you push the button for a particular floor. You didn’t need to read instructions. You didn’t need a tutorial. Maybe the buttons look a little different from other elevators you have been in…maybe they are on a different side of the car or have a different shape. But intuitively you know that when you push the button it will light up and you will be carried to the floor you selected, and when you arrive, the button will turn off and the door will open. Users expect the same sort of intuitive experience on the web.

In the broad sense of things, web interface design should:

  • Present the information to the user in a clear and concise way.
  • Give users choices that are obvious.
  • Ensure that an expected action occurs through any action taken (clicking a button).

In theory, we will always want to engage a user focus group to evaluate anything that we are going to design, especially in the case of web applications. However, that is not always possible based on budget, time constraints, or a myriad of other business pressures. No matter how well thought out, you will always learn something about your design from a focus group that you would never have imagined. But on those occasions when a focus group is just not possible, we can take a moment and think of Harry Beck, and ensure that we have the user’s experience as our guiding design principle.

The London Underground: An Example of Perfect User Interface Design

Interface design is the art of making the user’s interaction as simple and efficient as possible with regard to accomplishing specific tasks or goals. As designers we facilitate user experience. Good design means we do so without compromising the usability of the application or information and that we include natural intuition into the design process. The more intuitive the user interface, the easier the application is to use or the information to understand.

Steve Jobs, the late and great, visionary CEO of Apple, once said, “design is not just what it looks like and feels like. Design is how it works.“ That is actually pretty basic thinking, but it is the core principle behind good interface design.

Let’s look at an example of interface design in print that changed forever the way that Londoners have viewed their city for nearly a century…the Underground logo and map.

The first line of the London Underground system opened in 1863 and ran between Paddington and Farringdon. Over the next 70 years there would be over 160 separate and independent companies simultaneously running busses and underground trains on the rapidly expanding network of station and rail lines. While each company had its own branding of sort with unique uniforms, an advisory committee suggested in 1924 to the Minister of Transportation that the current conditions were confusing to travelers and that something should be done about the “acute and wasteful competition.” In 1931 London Transport was born and with it came the challenge of demonstrating efficiency and unified purpose to London travelers.

Frank Pick, the first managing director, did something quite unheard of in his day…he created the very first unified corporate identity. He felt that a unified operating system with a new single visual identity would not only create easily recognizable stations but would come to represent consistent and reliable service as well. The visual framework that he foresaw being employed across the city would send a clear message that the rail lines and busses were now under a single managing and integrated entity. With this vision in mind, Pick solicited Edward Johnston, a Uruguay-born calligrapher and professor at London’s Royal College of Art, to design the original Underground logo and its san-serif typeface.

1930’s Logo

Today’s Logo

While the new logo accomplished exactly what Pick had intended, one might still find the map detailing the rail lines confusing and hard to visually digest. As we can see now, it failed to serve the simple function of any informational graphic since it did not communicate the complex information quickly and clearly.

Harry Beck, an electrician for London Transport, designed a map based on the layout of an electronic circuit diagram. Beck realized that since the railway ran mostly underground, the physical locations of the stations were irrelevant. Only the topology of the railway mattered and there was no need to replicate the true geographical locations of stations or lines. To further simplify, Beck only ran lines vertically, horizontally, or on 45 degree diagonals with connections differentiated between ordinary stations by tick marks and interchanges with diamonds. Because the scale of Beck’s map was not fixed, he was able to provide more space around crowded stations making information easier to understand and providing a more intuitive representation for the user.

Beck’s design and the process for arriving at it is a lesson for all designers. Antoine de Saint-Exupery, the French poet said, “a designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” This is exactly how Beck approached his map. He removed the elements that were extraneous to the information being communicated and even altered the true geographical locations to focus the user on the relevant specifics of the railway system. His depiction of London and the surrounding area became a graphical depiction of true information in an abstract way, which, in essence, takes advantage of the visual language of communication which is far more universal. Beck’s information is no less true, but far easier for our minds to grasp.

Today Beck’s design and Johnston’s Underground logo are instantly recognizable as representing London. Both are plastered on t-shirts, postcards, and other touristy stuff. In 2006, Beck’s map design came second in a televised search for the most well known British design icon.

From this we, as designers, can learn to never forget that we are responsible for making the user’s interaction as simple and efficient as possible. If we can do so, as Beck did, without compromising the information, the tasks, or goals, then we have properly facilitated user experience. We can apply this principle to every single project we undertake whether it be print, web or signage.

eBay’s User Experience Blunder

Good, or bad, user experiences really come down to a few simple things: intuitive design, clarity and execution. If you mess one of those up you have a confused user who is likely to experience problems and get frustrated. This can be anything: a website, a cell phone or information about trains at a subway stop. If you need to catch that train, for a job interview, let’s say, and the map on the wall is utterly confusing, then you’re probably going to get angry, get more confused and have a terrible interview when you finally get to your destination. Frustration with hard to use cell phones lead to a phone being thrown against the wall in the extreme, and a new phone in most cases. In either example, the brand is damaged. You probably won’t buy that cell phone brand the next time around and for the subway commuter you will think, in perpetuity, that [fill in the blank] Metro System is staffed with morons. With a website it’s much easier. You click away. And, you probably won’t come back. Maybe not ever again.

eBay, for some reason, began including a CAPTCHA as part of their online registration process this summer, and they did so in such a shoddy way that they made a whole bunch of users pretty darn frustrated. Their mistake was that they broke two of the cardinal rules — clarity and execution.

For those who might be unfamiliar with the expression, a CAPTCHA is an acronym based on the word “capture” that stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” It’s the little jumble of words or letters that you are asked to type before submitting a form. The sole purpose is to make sure you are a human being, who can decipher the jumble, as opposed to a computer application, program or bot that cannot. CAPTCHA’s, while annoying at times, prevent automated abuse of forms.

Here’s a couple CAPTCHA style examples I am sure you have seen:

I first heard about the problem with eBay’s CAPTCHA from my 80 year old father-in-law. Yes, I have included his age because it is an important part of the story. While he is 80, he is a very savvy computer user. He sends email, reads the news, listen to music and even shops online. Over the course of several months he was looking for something in particular and started perusing Craigslist and eBay to see if he could find the item there. Viola! The thing he wanted was on eBay so he decided to register an account and start bidding.

Although he told me later he had no clue why he had to type in the scrambled words when he filled out forms online, he was not unfamiliar with CAPTCHA’s. He had, after all, seen them on Craigslist. But eBay’s was different, and confusing, and he wasn’t able to figure it out. The next time I visited him, he took me into his computer room and asked me to explain it to him. This is what I saw:

It seemed pretty clear cut to me. Enter the numbers in the box, I told him. It’s a CAPTCHA…, I began to explain.

And he said, I don’t see an image.

Then I read the instructions, because I hadn’t actually read them before. I had seen that sort of set up a million times and knew what I was supposed to do. Intuitively. Just, I am sure, as the designer who had laid out that section of the form had seen millions of times as well.

But for my father-in-law, who is 80, and was actually reading the instructions since it was a new experience for him, it was confusing. The numbers didn’t look like an image. They didn’t even look hidden. They were numbers out in the open. He didn’t realize they were the thing he was supposed to type into the box.

An absolutely perfect example of a user experience design fail, where the designer forgot the most important element of user design: You must always think like the user.

How many other 80 year olds, or 40 year olds, ran across that and were absolutely baffled by the wording?

Pretty incredible, especially from a company like eBay!

I mentioned there was another problem with their CAPTCHA, one involving execution. As it turned out, the “image” with the numbers didn’t show up in the FireFox browser. The user was confronted with a blank space and nothing they to type into the box.

Within a month or so eBay removed the CAPTCHA from the registration form.