View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Quick Guide to a Great UI Design!

Here are some tips that will really help your UI Design. Remember that no matter how great you UI may seem to you... you are NOT the user and this page will help you make the user happy :)

1. Be Consistant
This sounds simple, but it can actually take up a lot of time to achieve. I believe that this is very important to ensure that your user interface works consistently. If you can double-click on items in one list and have something happen, then you should be able to double-click on items in any other list and have the same sort of thing happen. Put your buttons in consistent places on all your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models mean a lot more to users than you would think.
One way you can ensure consistency within your application is to set user interface design standards, and then stick to them.

2. Make Navigation Between Major User Interface Items Logical
This is a bit more complicated since your logic may be different than the user's logic. I would recommend going by the most common scenario and then structure the order of the interface items accordingly. If most users first create CRC Cards and then usually they usually create UML Cards, than placing the CRC Card tab first and placing the UML tab second makes a big difference to the user. When the flow between screens matches the flow of the work the user is trying to accomplish, then your application will make sense to your users.

3. Word Messages and Labels Effectively
This problem is a lot more common than you would think. The text you display on your screens is a primary source of information for your users. If your text is worded poorly, then your interface will be perceived poorly by your users. Using full words and sentences, as opposed to abbreviations and codes, makes your text easier to understand. Your messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly.

4. Align Fields Effectively
When a screen has more than one editing field, you want to organize the fields in a way that is both visually appealing and efficient. It is usually best to left-justify edit fields: in other words, make the left-hand side of each edit field line up in a straight line, one over the other. The corresponding labels should be right-justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.

5. Group Things Effectively
Items that are logically connected should be grouped together on the screen to communicate they are connected, whereas items that have nothing to do with each other should be separated. You can use white space between collections of items to group them and/or you can put boxes around them to accomplish the same thing.
With the example above: You want to make sure that the editing field and its corresponding label and/or buttons are clearly related so that the user does not get confused.


These are some UI Principles that I found that are actually pretty helpful.

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.

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.

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.

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.

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.

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.



Other Tips (From Lecture):



UI References:
http://www.sylvantech.com/~talin/projects/ui_design.html
http://www.isii.com/ui_design.html#User%20Interface%20Design%20Style%20Guides
http://www.ambysoft.com/essays/userInterfaceDesign.html
http://www.cc.gatech.edu/classes/AY2007/cs2340_fall/ Lectures 10/23 and 10/25

Links to this Page