User Interface Design Principles

0 Comments | This entry was posted on May 29 2014


Clarity is job #1

  • Clarity is the first and most important job of any interface.
  • Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one.


Interfaces exist to enable interaction

  • Interfaces exist to enable interaction between humans and our world.
  • The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.


Conserve attention at all costs

  • Don’t litter the side of your applications with destructible material…remember why the screen exists in the first place.
  • Honor attention and not only will your readers be happier, your results will be better.


Keep users in control

  • Humans are most comfortable when they feel in control of themselves and their environment.
  • Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn.


Direct manipulation is best

  • The best interface is none at all, when we are able to directly manipulate the physical objects in our world.
  • Strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures.


One primary action per screen

  • Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary.


Keep secondary actions secondary

  • Screens with a single primary action can have multiple secondary actions but they need to be kept secondary!
  • Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved.


Provide a natural next step

  • Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface.
  • Just as we like in human conversation, provide an opening for further interaction.


Appearance follows behavior

  • Humans are most comfortable with things that behave the way we expect.
  • Designed elements should look like how they behave.
  • Someone should be able to predict how an interface element will behave merely by looking at it.
  • If it looks like a button it should act like a button.


Consistency matters

  • Elements that behave the same should look the same.


Strong visual hierarchies work best

  • A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen.
  • Most people don’t notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.


Smart organization reduces cognitive load

  • John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few.
  • Group together like elements, show natural relationships by placement and orientation.
  • Don’t force the user to figure things out…show them by designing those relationships into your screens.


Highlight, don’t determine, with color

  • Color should not determine much in an interface. It can help, be used for highlighting, be used to guide attention, but should not be the only differentiators of things.
  • It can help, be used for highlighting, be used to guide attention, but should not be the only differentiator of things.


Progressive disclosure

  • Show only what is necessary on each screen.
  • Avoid the tendency to over-explain or show everything all at once.
  • When possible, defer decisions to subsequent screens by progressively disclosing information as necessary.


Help people inline

  • In ideal interfaces, help is not necessary because the interface is learnable and usable.
  • The step below this, reality, is one in which help is inline and contextual, available only when and where it is needed, hidden from view at all other times.


A crucial moment: the zero state

  • The first time experience with an interface is crucial, yet often overlooked by designers.
  • …it should provide direction and guidance for getting up to speed.
  • Much of the friction of interaction is in that initial context…once people understand the rules they have a much higher likelihood of success.


Great design is invisible

  • A curious property of great design is that it usually goes unnoticed by the people who use it.
  • If the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation.
  • Great designers are content with a well-used design…and know that happy users are often silent.


Build on other design disciplines

  • Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design.
  • Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on.


Interfaces exist to be used

  • As in most design disciplines, interface design is successful when people are using what you’ve designed.
  • Interface design can be as much about creating an environment for use as it is creating an artifact worth using.
  • It is not enough for an interface to satisfy the ego of its designer: it must be used!


I’ve grabbed these facts from this great article.

Principles of User Interface Design

Reading: March 2010

0 Comments | This entry was posted on Apr 06 2010

Day 44 of 365

0 Comments | This entry was posted on Mar 17 2010

 Day 44 of 365 Days

Date: 02.04.2010

Tools: Photoshop, Artise Golden Section, The Font Thing, ColorPic

Large Version @ Flickr

Open or Save As dialog box flickers then disappears (Photoshop CS3 on Windows)

11 Comments | This entry was posted on Jan 09 2009


When you choose File > Open or File > Save As in Adobe Photoshop CS3 on Windows, the dialog box flashes on screen and then disappears, or Photoshop appears to freeze.

This issue may occur when you use OS dialog boxes, you have or had a dual-monitor setup, and Photoshop was displayed on the secondary monitor.


Press the Esc key, and then choose File > Open or File > Save As.

If the Open or Save As dialog’s position is not reset, then continue with the following solutions.

Get the full solution at Adobe site please.


IE hover bug SOLVED!

Comments Off | This entry was posted on Jul 09 2007

“In the page listed below, a two part horizontal menu is displayed, indented
from the left. The first part of the menu is left justified and the second
part is right justified. It looks correct in both IE6 and FireFox…. until
you move your mouse over one of the left hand links. Then, in IE6, the
change in background color causes a reflow. This causes the NavContainer div
to expand, pushing the right hand menu item off the page. Refreshing or
resizing the page gets it redrawn correctly.

I’ve read about various hover bugs in IE, but I could do with some pointers
as to which may be causing my problem and if there is a workaround.”

<style type=’text/css’ media=’all’>
border: solid 1px white;
margin: 0 1em 0 2em;



#PrimaryNav ul, #SecondaryNav ul
padding: 0;
margin: 0;

#PrimaryNav li, #SecondaryNav li
list-style: none;
margin: 0;
display: inline;

#PrimaryNav li a, #SecondaryNav li a
border: solid 1px #036;

#PrimaryNav li a:hover, #SecondaryNav li a:hover
background-color: #036;
<div id=’MainBody’>
<div id=’NavContainer’>
<div id=’PrimaryNav’>
<li><a href=”>Link 1</a></li>
<li><a href=”>Link 2</a></li>
<li><a href=”>Link 3</a></li>
<li id=’Current’><a href=”>Link 4</a></li>
<div id=’SecondaryNav’>
<li><a href=”>Link 4</a></li>

This is the result of my search term “IE hover bug”. I got thousands like them. But no where the answer to solve the problem. And I really needed a quick solutions. The clients need it As Soon As Possible. The reporters were waiting for the release and the the release was waiting for the solve of this bug.

I found a quick & tiny solution for the problem.

Just add “width:80%;” at MainBody ID. ( the % of width may be 1-100)

It solves the hover problem at IE. It also looks cool at Firefox.

There is another way to solve the problem at IE only. But causes the menu items bring left together at Firefox.

Just add “float:left;” at MainBody ID insted of “width:80%”.

Category: Tutorials

Blog Home