Contact Us
Name:
Email Address:
Phone Number (optional):
Subject:
Message:
    
 
 
FAQs Contact Us Contact us
Sign in
Email Address
Password
small business login arrow  Forgot Password?
 
 

Jared Tame

Blog Post Detail
The Seven Laws of User Interface (UI) Design
March 10, 2008
Although it’s not common knowledge, there is a list of Laws to Interface Design (which is credited to Jef Raskin, the author of The Human Interface).  Most of us designers and developers “play it by ear” but end up forgetting a lot of these things (or just downright taking them for granted).

Interface Design is more practically used when developing any type of application since that is the time when users will spend most of their interaction.  Websites can take on most of these laws, although I would argue that this list holds a lot more importance for startups that are building products, particularly web applications.

You can also use these laws to “fine tune” your applications at any point in their development.  Most startups will rapidly prototype and push their alpha and beta versions, which are just as good a time as any to implement these strategies (in fact, it may cause your early adopters to appreciate your apps even more if you do).

  1. Visibility – How clear are you being with the user?  What is the goal expected of the user?   Are icons being used to portray this?  The underlying psychology shows that icons become very important for repetitive tasks when many choices are available.  Give clear icons and a clear path to portray what the user should be doing.
  2. Feedback – Are you sending information back to the user after a certain action is performed?  What type of feedback is given when a user does something right, or wrong?  Does a sound play?  Is there a visual cue (ie graphical or textbox) that will indicate, and if so, does it suggest an alternative for the user?
  3. Affordance – Are particular elements clear and obvious to the user?  Do you clearly define what something does for the user?  A great example: you’re going to the movie theaters, and you have no idea whether the door is supposed to be pulled or pushed.  Half of the time you push it, look like an idiot, and realize that you’re supposed to pull.  Affordance would mean putting a “Push” sign on the doors.  Don’t get fancy or creative, just design for the lowest common denominator (think kids).
  4. Simplicity – Are you keeping it simple, stupid?  Are you adhering to the old high school KISS rule?  A classic example in desktop applications is to put an “Open File” option on a menu, underneath the “File” tag.  Nothing complicated, nothing fancy, nothing overly created or overanalyzed.  Keep it deadly simple.
  5. Structure – Are you organizing the information in a way that makes sense to the user?  Is your information cluttered or is it grouped into sensible and related chunks?  Include all similar information within a dialogue box, separate from other distinguishable groups of information.
  6. Consistency – Do you have a uniform and constant theme to your product?  Are the elements positioned thoughtfully?  You will see an X in the top right corner of this screen, don’t get fancy and try to put it in the bottom left because you want to be “different.”  That’s just being confusing.  If there is already a popular way of positioning something, try to follow it so that your software is easy to pickup and doesn’t create any unnecessary tension on the user.
  7. Tolerance – Are you proactively trying to prevent users from making errors?  Are you giving them an easy way out if they do?  See #2.  Hide options that aren’t appropriate in a certain context, and don’t give more information to the user than is absolutely necessary at any point in time (although provide a means to get access to it).
Trackbacks to this story
There are no trackbacks...

Comments About this story
If this post piqued your interest in any small way, I strongly encourage you to check out a professor/published writer on the subject, Lev Manovich. It's one of the few text books that I've kept around well after graduation.
Posted by: Will S. 4/25/2008 at 9:28 AM



Add a Comment (Not logged in)  Register / Sign in

Name:
 
Email Address:
 
Homepage:
  (ex. http://www.gobignetwork.com)

 

Enter the Text in the Image Below (to confirm you're not a robot)

 


(Wil is immediately notified of your comment)


© Copyright 2008 Go Big Media, LLC. All Rights Reserved
Go BIG Blogs
Email this blog post to a friend.


Your Name:


Your Email Address:


Friend's Email Address:

Send entry to friend   Cancel