views:

332

answers:

15

I am putting together some mock-ups of my first real interface and I am left wondering: What are some basic tenets of good user interface design? I am looking for something like a bullet list summary and maybe some resources that might be useful for each tenet.

+4  A: 

I'd put consistency up there

-- Lee

Lee Englestone
Yes- as long as you are also aware of foolish consistency- http://www.scottberkun.com/essays/5-how-to-avoid-foolish-consistency. A good example of useful inconsistency is the back/forward buttons in FireFox- they are deliberately inconsistent.
RichardOD
How is that inconsistency useful? I always check "Use Small Icons" simply so they *are* consistent.
Alec
+6  A: 

Nielsen provides this list - which I would generally agree with

  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help users recognize, diagnose, and recover from errors
  • Help and documentation
Phil Jenkins
Ask Tog has a good list too- http://www.asktog.com/basics/firstPrinciples.html
RichardOD
Yes but have you seen Nielsens website? Shocking! (IMO) http://www.useit.com/ -- Lee
Lee Englestone
It's not to my taste either ;-) good advice though...
Phil Jenkins
@Lee Englestone - "Do as I say, not as I do."
JasCav
+1  A: 

The one that I always try to remember is "7 items (max) to a page / form." It came up in my GUI class in college (7 or 8 years ago now).

I'm reminded of a web comic where they had an Apple design followed by Google design (both very simple) followed by "our" design with dozens of items littering the form.

Austin Salonen
It's on xkcd somewhere - but I can't find the picture.
Dominic Rodger
+3  A: 

Don't forget keyboard accessibility, and more generally accessibility for vision-impaired people (this is why a great many cool-looking UIs actually suck).

Also, Alan Cooper (of Visual Basic fame) said "don't put might before will", which means you shouldn't make it easy for people to do the things they might do while making it difficult for them to do the things they will do with your software.

MusiGenesis
+2  A: 

Joel Spolsky (who is co-creator of SO :) ) has a book called "User Interface Design for Programmers" as well as a series of articles on his website (Joel On Software) related to that book.

Another great resource to start with is Jacob Nielsen's usablity website.

DVK
+8  A: 

"Don't make me think!", the title and the book are extremely useful when designing a UI. Some of my favorite sections from it include:

  • Create a clear visual hierarchy.
  • Conventions are your friend.
  • Happy talk must die.
  • Instructions must die.
  • Four reasons why I love tabs.
  • The trouble with Rollovers.
  • Farmers vs. Cowmen.
  • The myth of the "Average" user.

Also, check out User Interface Annoyances on SuperUser for what not to do.

Ash
+5  A: 
  1. Don't interrupt the user with pop-up dialogs. Show some feedback that the user can see and provide a way for them to deal with the issue when they choose to.

  2. "The principle of least surprise".

  3. Apply sensible defaults

  4. Show response to user inputs within half a second.

Andrew Bainbridge
+1 for "Show response to user inputs within half a second."
Dominic Rodger
I would actually argue that half a second is too long. I can't find the research at the moment, but humans recognize delay in less than that. However, to be more generic, I would say, "Show response within a reasonable amount of time for the system in question." There are times that fast responses aren't necessary.
JasCav
+1  A: 

Go and read Controlling Your Environment Makes You Happy and then read Don't Make Me Think! A Common Sense Approach to Web Usability.

Keep it simple, don't ignore convention and mimic sites/programs that work well.

cletus
+2  A: 

In no particular order (and off the top of my head):

  • Convention over consistency
  • Affordance (make it clear from the appearance how and what something does)
  • Avoid modes
  • Allow the user to create a correct mental model
  • Protect the data (make it hard to be destructive)
Benedict Cohen
+3  A: 

If you read Asimov, you'll find this easy to remember: an interface should not, through action or inaction, allow the user's work to be inadvertently destroyed.

Paul Brinkley
+1  A: 

User interfaces are frequently for software developers or similarly tech-savvy people, not just laymen. If yours is such an interface, you can benefit from being a user as well as the author.

  1. Write the interface.
  2. Put it away for a while, preferably long enough that you forget exactly how it works.
  3. Use it to do something when you're in a bit of a hurry, or otherwise distracted.
  4. Things will break, or force you to do things manually that weren't covered. For each one, write a bug/feature report. (If you're in that hurry, write just enough to remind you later.)
  5. Fix/address each report.
  6. Go to step 2.

This experience will give you insights to writing better interfaces, some of which may extend to laymen as well as the tech-savvy. Beware, however; not every feature that is good for devs is good for non-devs. Steps 2 and 3 are intended to get you into that non-dev mindset, and get you most of the way; for the last mile, there's no substitute for a real user.

Paul Brinkley
+1  A: 

Using real people: Test, test, test.

plinth
+2  A: 

Know your users.

  • Spend time with them experiencing what they currently do without your software / changes.
  • Get them to try and use as earlier prototype as feasible - maybe it's just paper, see how they react.
  • Keep pushing your prototypes in front of them as development progresses.
Tom
+3  A: 

This doesn't exactly meet your requirements for a bullet list, but I'd still recommend reading Mark Miller's The Essence of Great UI - An Overview, Why is Great UI so hard to achieve?, Great UI, Clarity, and Information Relevance, Great User Interfaces, Clarity, and Information in Parallel and Great UI: Clarity and Color on the Presentation Layer.

He also talks about some of the same concepts in the dnrTV episodes Mark Miller on The Science of a Great User Experience Part 1 and Part 2.

Grant Wagner