How to Design a Great User Interface

When designing a web app, functionality is often placed above everything else. For the most part, this is a good thing.

People (mostly) use apps because they’re useful, not because they look pretty. But that doesn’t mean you can ignore good UI design, or just slap together a generic-looking user interface. Good UI design adds to the overall user satisfaction of any web app.

Good UI design is, in many ways, similar to good web design. Principles of color theory, negative space, and layout all still apply. But UI design requires a bit more thought in many cases due to the interactivity it requires.

Visitors won’t just be looking at your site; they’ll be interacting with it, sometimes in ways you didn’t expect. It’s vital that you take the time to really explore UI design prior to embarking on a web app design.

Below are a number of principles and ideas for designing a great user interface.

 

Consistency is Vital

In user interface design, consistency between pages, functions, and options is vital. Users come to expect certain things as they use your program, and if those things change from one page to the next, it’s both confusing and frustrating.

For example, if on the home page for your application users navigate between pages with a top navigation bar, make sure that same top navigation bar appears on subsequent pages, and that the pages linked from it appear in the same order.

Other things that need to be kept consistent include your color scheme and general layout, as well as links to important pages that might not be directly used within the application (such as an account page or an FAQ).

 

Your Users Will Make Mistakes

Regardless of how carefully you design your user interface and how intuitive it is, your users will make mistakes on occasion. Sometimes it’s just because they inadvertently clicked when they didn’t mean to. Other times it’s because they weren’t really paying attention to what they were doing, or weren’t reading the page’s content.

In either case, it’s important that users can easily undo the mistakes they make.

You’ll notice on a number of web apps, including Google Docs, that virtually any time you do something, a link appears to undo the last action. On other apps, you might have to use a menu to undo an action, but the best web apps still make it easy and accessible to go back a step or two at any point.

 

Highlight Changes

When changes are made during the use of a web app, it’s useful to your users if you highlight those changes. For example, if your app includes a feed of information from a variety of sources or users, highlighting new content as it appears is a useful feature.

There are a number of ways you can highlight content. One of the most popular is to put a shaded background behind new content.

Other apps use icons to indicate new content. Whatever you decide to do, make sure the new-content indications don’t interfere with the readability of the content. It’s also important to make these notifications unintrusive, so as not to distract users who aren’t currently concerned with changing content.

titanpad

TitanPad uses color coding to indicate changes made by each user.


 

Enable Keyboard Shortcuts

Not every user out there is going to use keyboard shortcuts, even if you make them available. But for the percentage of users who are used to keyboard shortcuts, not including them can have a disastrous effect on user satisfaction.

Think about the most common actions users will perform on your website and make sure keyboard shortcuts are available for those.

Make sure, too, that whatever keyboard shortcuts you use are logical. Certain shortcuts are already commonly used for certain functions (like Ctrl+Z to undo or Ctrl+V to paste), so make sure those continue to work as they do in other programs.

Choose the keys used in your shortcuts logically, so they’re easy to remember for your users. Make sure you also include them in any drop-down menus next to their respective actions.

 

Use Familiar Standards and Conventions

Widely-used applications have set certain standards for the way things are expected to work in an application. For example, people are used to seeing a folder icon for “Open”, or a clipboard for “Paste”.

They’re also used to having certain options and actions appear under specific application menus (creating a new document or file is almost always located under the “File” menu dropdown; copy and paste are almost always found under the “Edit” menu dropdown).

Think about established apps that do similar things to what your app will do, and look at how they organize actions and what icons they use.

If you see consistencies between various apps, you should seriously consider using the same or similar icons for your own app. It makes it more intuitive for users who are switching from another app to yours and will improve their experience.

 

Offer Personalization Options

A lot of web apps allow users to make customizations to their account. Some sites let you adjust the color scheme or upload custom graphics. Others let you rearrange the layout or what’s shown when you first log in. Still others let you create custom pages or similar content that displays the information you’re concerned with.

Think about the possible customizations that would improve both the functionality and the user experience of your apps.

Some apps might not benefit much from customizations, while others are filled with possibilities. Even simple things like allowing users to upload their own logo or change the color scheme or font to suit their personal preferences can have a drastic impact on user experience and satisfaction.

highrise

Highrise lets users customize the color scheme of their dashboard. Small customization options like this can greatly add to user satisfaction.


 

Use Tooltips and Integrated Help Messages

A lot of app developers include extensive documentation for using their apps, which is incredibly helpful to new users. But in many cases, this documentation is kept in its own, separate section on the website. In order to access it, users have to effectively leave the application.

While extensive documentation is still a good idea for complicated apps, incorporating tooltips and integrated help messages in modal windows or in a sidebar within the page increases usability for the majority of users.

It’s a seamless way of offering help while someone is actually using your application, which saves them time and makes the entire experience more enjoyable.

 

Use Tabbed Navigation and Buttons for Actions

Tabbed navigation has a number of advantages over buttons or text links. The most important, though, is the subtle psychological effect it has.

Tabs evoke using a notebook or binder. Each tab denotes a new section or topic. The same is true online. Tabs make people subconsciously think of physically moving to a new section of a site or app.

Buttons, on the other hand, evoke an action. Using buttons for things like submitting a form makes sense psychologically, as people associate pushing a button with doing something. So for optimal user experience, remember tabs = navigation, buttons = action.

 

Shade Everything Behind a Modal Window

This is one of those really basic things that sometimes gets overlooked. When opening a modal window, make sure you shade out everything in the background behind the window. This makes the window stand out more and eliminates distractions.

nirvana

A good example of a modal window with a shaded background.


 

Use Relevant Icons and Labels

A lot of developers opt to use icons in their apps without labeling those icons. Other than the absolute most common icons, this is often a mistake and only confuses the user.

Adding in alt tags that appear when icons are hovered over isn’t a good solution to avoid confusion, as it still requires too much effort on the part of the user.

Placing labels next to your icons means they’re instantly recognizable. As users become familiar with the meaning of each icon, they’ll be able to more quickly find what they’re looking for, and until then they can easily see exactly what each icon stands for.

Another option is to make it possible for your users to hide the labels, though make sure the default option is for them to be shown.

 

Keep Things Simple

The best interfaces are as simple as they can effectively be. Don’t add bells and whistles for the sake of adding bells and whistles. If a function has a clear purpose, then add it. If it doesn’t, then don’t.

The same goes for design elements. If there’s a purpose to an element, then it’s okay to add it. But avoid adding things that just look pretty. They’ll only add visual clutter and confuse your users. Choose the simplest solution that gets the job done.

This doesn’t necessarily mean your app needs to be minimalist. But remember that most people use apps for their functionality, not for their design. As long as the design doesn’t interfere with their ability to efficiently use your app, then they’re unlikely to even pay much attention to the visual elements of the app.

 

Efficient Workflow

When designing a user interface, you need to consider the workflow of your users. People have predetermined ways they use particular types of software and particular apps, and you’ll need to design your interface to conform to those patterns.

For example, if certain actions are generally taken in association with each other, group them together in the same area of the app.

Study the workflow of a number of users to see what seems to be getting in the way of their efficient completion of tasks, and then figure out how to improve the UI to cater to their needs. In some cases, UI alone can’t solve these issues, but sometimes it can.

 

15 Examples of Great User Interfaces

There are hundreds or even thousands of web apps out there with fantastic user interface designs. Here are more than a dozen to give you some ideas.

Shoply

Shoply makes it quite easy for users to delete, edit, or view products they’ve already uploaded, as well as to add new products.

shoply


Invoicera

Invoicera uses tabbed navigation and buttons to perform actions. It also keeps a relatively simple and straight-forward layout and color scheme.

invoicera


Pandora

It’s obvious that the designers behind Pandora took into account the interfaces present on MP3 players and other media devices in designing their user interface. It’s an intuitive and easy-to-use design with virtually no learning curve.

pandora


Wufoo

Wufoo’s form design interface is about as intuitive as an app can get. Help messages are displayed when you start designing a new form to explain exactly what to do without having to leave the page.

wufoo


Grooveshark

Grooveshark uses icons to help with navigation and functionality. Commonly recognized icons like the “play” and “skip” buttons aren’t labeled, but others, like the Home and Favorites icons, are.

grooveshark


Wridea

Wridea uses an intuitive interface that lets you edit anything just by clicking on it. They also use menus that only expand when you hover over an idea, which reduces visual clutter, and they let users choose between two color schemes.

wridea


Backpack

Backpack uses buttons for actions and tabs for navigation, making it more intuitive to use.

backpack


Remember the Milk

Remember the Milk uses tabbed navigation and buttons for actions. They also include helpful notations that mostly negate the need for separate documentation.

rememberthemilk


Ta-da List

Ta-da Lists keeps their interface as simple as possible. There’s no extra information, just the task at hand. It’s incredibly intuitive and makes for an excellent user experience.

tadalist


Relenta

Relenta uses tabbed navigation and labeled icons. They also stick to standard conventions for email programs, so there’s virtually no learning curve for their users.

relenta


Viviti

Viviti uses an intuitive user interface that takes into account the needs of their non-designer users. Tips are provided whenever you log in, and the documentation is easily accessible and user-friendly, allowing you to choose what type of help you want before actually leaving the page you’re working on.

viviti


Bounce

Bounce’s interface is very straight-forward and simple. The tools available are intuitive (just drag over an area to make a note, write feedback, and then share).

bounce


Meetifyr

Meetifyr uses such an intuitive interface that virtually no documentation is needed. Looking over the app, it takes only seconds to instantly recognize both how to use it and what the different icons and color codes mean.

meetifyr


DoingText

DoingText simplifies use by not requiring any type of signup process. Documents are simply URL-based and collaborators only need the URL. It makes collaboration an almost-instantaneous process.

doingtext


Writeboard

Writeboard includes useful styling help in the sidebar next to the main content area.

writeboard


Written exclusively for WDD by Cameron Chapman.

What’s your favorite UI design? Have any other tips for designing outstanding user interfaces? Please share them in the comments!

0 shares
  • http://www.designerslist.info/ Marc

    Nice tips, great article.

  • http://webidentity.pl Sebastian

    Wonderful text. I like such comprehensive surveys. Good job.

  • http://www.curtisscott.com Curtis Scott

    I like the part about keeping things simple. In my career I’ve worked with many levels of design talent and the number 1 thing I see with designers starting out is they are ready to reinvent the wheel for UI design. Our goal as a designers should be create somehting unique but not at the sacrifice of user experience. There are many proven methods of layout that have worked for years and a few that very trendy right now like the top nav, slider/header area, and the 3 columns layout for example.

    These layouts are proven to be effective, why not take advantage of this and design a simplistic UI with in theses user friendly layouts instead of trying to reinvent the wheel?

  • http://www.towerofjade.com/ mb

    “Shade Everything Behind a Modal Window”

    This is a good idea, but an even better idea is to not use modal windows at all. Desktop applications frequently abuse them, and it would really suck if we repeated this behavior.

    Please only use modal windows when absolutely necessary, and even then think twice about it.

    • http://www.aboutadirk.com Dirk

      Disagree.

      Use them smart, and by no means overuse them, but staying away from them equals cutting yourself in the fingers.

      Modal windows can be very useful to display content for a user without having them leave the website. As an example, take contact information. Instead of letting a user load an entire page (cashed or not) to view an address, 2 contact form input boxes and a submit box, you could chuck it in a lightbox. This way, a user will not “leave the page”, you won’t take them out of the flow of the site, they’ll remember where they were on your website when they came up with the idea of contacting you, and can continue whenever they want.

      I think there are a lot of reasons why you *should* use them, and could certainly see it adding a lot to websites and web-based applications.

      Cheers,

  • http://www.vivoocreative.co.uk Nottingham Web Design

    Absolutely love bounce! Use it all the time :-)

  • http://www.xcubelabs.com/ iPhone App Development

    Probably the best article on building the ultimate user interface I have ever read..
    Thanks for the share.

  • http://www.antoineguedes.com Antoine Guédès

    I started designing some UI for a web app this morning. Thanks for this post!

  • http://www.iconfinder.com Martin LeBlanc

    Great post. I miss more of these high level guidelines. In general spending too much time on pixel perfect design is irrelevant – it’s the big decisions about the interface concept that counts. Many people except for designers don’t care about e.g. small shadows – they care about getting something done or getting entertained. Give them what they are looking for and get out of the way!

  • http://gr8code.blogspot.com Julian Vargas

    Very good post, thank you

  • http://www.ampseo.net Drew

    Thanks for the tips & examples.

    Two aspects that I find essential in UI design are:

    1) Clarity of intended use (you could think of this as “intuitiveness,” and you touch upon this when you advise to use standard conventions, buttons for actions, etc). When I get to a screen, I don’t want to have to think “what am I supposed to do?” To most users, having to wonder about that in the first place is enough to doom a UI from the get-go. I love Grooveshark: “Search for Music” in a single text box — pretty clear. On the flip side, just make sure you don’t assume you know what a user wants when they would actually prefer a choice.

    2) Be responsive & provide excellent feedback — you mention this also (“use tooltips and integrated messages”). Providing excellent orientation to the user is key in helping them make sense of an unfamiliar system. Don’t allow them the chance to “get lost.” Provide a relevant response for any action they can take, and be transparent about what response a given action will trigger.

    Anyway, great tips, thanks again!

  • http://FullVoiceMedia.com Mark

    Although I generally agree with most of this post as to the convenience and rationality of using commonly encountered traits in website design as a way to make it easy for users, this is also a recipe for bland, undistinguished, cookie cutter design. We, as designers, have to be careful of not getting too complacent in our work and just falling back on the tried and true. As well as a means of communication, websites should be intriguing, beautiful and entertaining to some degree. We should always be looking for new ways to stretch the envelope and innovate while at the same time avoid alienating visitors with bewildering navigation or other necessary features. This post is all about what has worked in the past. We must also evolve and discover what can work in the future.
    Sorry, I’ll get off my soapbox now…

  • http://www.morganandme.net Morgan and me

    Keeping it simple…is the key. Great article!

  • http://art-a-designer.ru andry

    Grooveshark excellent site

  • http://visual-blade.com Daquan Wright

    Bravo, I love this tutorial. ;)

  • http://www.how-to-asp.net Ryan

    Great article! I really enjoyed the examples of good UI. Thanks

  • http://simonmeisinger.at Simon

    very userful an interesting post, i will definitely use this thing with those “button” on my next project. keep it tight!

    sorry that i haven’t got somr random hot chick as avatar.

  • http://www.bassmasta.net Dan Christopher

    “Even simple things like allowing users to upload their own logo or change the color scheme or font to suit their personal preferences can have a drastic impact on user experience and satisfaction.”

    Can you explain this more? I don’t buy it.

    • http://www.bassmasta.net Dan Christopher

      I know for a fact that both Apple and 37signals would disagree with that statement, Their philosophy of UI design says not to overwhelm the user with superfluous choices. But that’s not to say that Apple and 37signals are always 100% right. What example do you have that says that helps the user experience?

  • http://www.wdf.gr Kostas

    Great article.Enjoy reading it.Keep up

  • http://www.webdesigner-michigan.com Kevin Mist

    Well written although most of the UI design things are fairly common sense.. I guess our world does lack common sense so it is a worthwhile post.. what I really found interesting is the examples.. some of these are fantastic resources..

    Thanks

    Kevin

  • http://www.globalcssgallery.com/ Selva

    Great Tips to read!

  • http://www.nyamok.com astho – web design

    nice tips…
    thanks..,

  • Shankar

    Coolest Article. It shows me the real meaning of Simplicity.

  • http://www.webdesignerhouston.com Houston SEO

    the challenges and idea mentioned here is brilliant. I wonder how people think of that.

    The idea in Designing a Great User Interface totally depends on the logic of that person.
    Thanks for sharing. I really liked it.

  • http://gauravmishra.com Gaurav Mishra

    Stunning post. Had a nice team reading it

  • Jagdish

    Nice Aritcle

  • http://twitter.com/hiteshmehta Hitesh Mehta

    Interesting stuff and some good take away leanings from here.

    @HiteshMehta

  • http://www.colddesign.com Giacomo Colddesign

    Great and useful post.. thanks for sharing!!!!

  • http://pixeno.com Andy Johnson

    Brilliant article cameron,

    Some user interfaces you have included here look really stunning!

  • http://www.webdesignability.com Terry Dunn

    Cameron has created a really interesting and unique article. I particularly like the examples. I notice 37 signals software features a lot. They are the masters of useable web-based applications.

    Terry

  • VKG

    Great article !I would like to add one more example http://www.actionmethod.com

  • http://www.benstokesmarketing.co.uk Ben Stokes

    The Wufoo interface is so simple, just the way things should be :)

    “The best interfaces are as simple as they can effectively be. Don’t add bells and whistles for the sake of adding bells and whistles. If a function has a clear purpose, then add it. If it doesn’t, then don’t.”

    Thanks guys :)

  • http://www.maiconweb.com Maicon Sobczak

    Important points. A well designed interface is as important as the funcionality of the app.

  • http://www.webdesigndispatch.com/ Web Design Dispatch

    Great user interface design tips. I think the most important thing to keep in mind is testing. You never know what the users will like better or what will get increased conversions without split testing.

  • http://theloudfew.com Robin Rath

    Some great tips for web apps, thanks for sharing!

  • http://www.loremipsum.at Werner

    Pretty good article!
    I believe there is a need to figure out some general Rules for Webinterfaces. Users can’t evaluate the quality of your code but they do evaluate your work based on the Usability of your UI.

  • http://jinkato.com Jim

    I love Backpack

  • http://www.mkldesign.co.uk Web Design Nottingham

    some great example of usuablity, thanks for sharing.

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    Solid list of great UI’s. WuFoo and 37Signals have really mastered the task and are great companies to model.

  • http://www.brettwidmann.com Brett Widmann

    These were really great tips! I love all the different effects.