27 August, 2008

UI Design Principles

Let’s start with the fundamentals of user interface design. Constantine and Lockwood describe a collection of principles for improving the quality of your user interface design. These principles are

1. The structure principle : Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.


2. The simplicity principle : Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.


3. The visibility principle : Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.


4. The feedback principle : Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.


5. The tolerance principle : Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.


6. The reuse principle : Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

25 August, 2008

Good User Interface Design Tips

• Always use cute icons, buttons, and graphics. Everyone loves big red hearts, pink bunnies, and yellow smily faces.

• Don't be afraid to experiment with colors!

• Your application should play fun sounds while operating to keep the users entertained.

• Never, ever, under any circumstance use the OS-native graphical controls or widgets. Users get bored of the same old buttons, text boxes, and stuff.

• When possible, disable window management and use unusual, oddly placed graphics for the windowing functions such as the window close option.

• When writing your own controls or widgets, make absolutely sure they look and feel nothing like the OS-native widgets or anything else the user might expect. Otherwise you might accidentally make the user think that your application is actually designed for their OS.

• Use your own creative ideas on how a "save as" dialog should look and work. Built in ones are always too limiting.

• It is important that the user should never be able to tell the difference between a checked and unchecked check box or option box.

• Always use obscure or poorly drawn graphics for your tool bar buttons, and never put text on them.

• Avoid including a preferences or options dialog. Instead, let the user use the standard OS provided text editor or an editor of their choosing to edit text configuration files. .

• Users need time to think about what they are doing and get coffee. Your application should always take at least 5 minutes to load even on the fastest available computer.

• Make sure an accidental double-click on a single-click item does something really nasty or unexpected.

• Tool tips are the perfect way to display critical information.

• To get the most screen space, force your application to always run maximized.

• Always make the default positions of floating properties windows cover something important.

• Use the most exotic fonts you can find.

• Your application's user interface should be flexible and customizable to the point where if the user accidentally sneezes on the mouse or keyboard they will have to spend the next half an hour setting things back.

• Let a 5-year old draw your graphics, including your corporate logo.

• File browsing dialogs are not needed, users can easily remember and type in long file paths.

• Design your application so it requires the user to set their tiny monitor to 10512*7430.

• Always crash at a critical step and then display a fake apology to the user.

• It is a mistake to make use of application hooks in the native desktop environment such as new file templates, file associations, or program menu icons.

• The exception to the above is placing icons in the system tray. Place as many icons as you can in the system tray and make sure that the user can not remove them.

• If your program implements keyboard shortcuts be original and make them completely different from any other applications.

• Rent extra UI space in your application out for advertising. Advertising benefits the users and your wallet.

• Never underestimate the power of nudity.

• Don't forget to embed a hidden video game as an "easter egg".