Friday, February 24, 2012

Principles of UI design


The Structure Principle
User interface designs must be structured in order for users to easily understand and operate.  It’s important for users to be able to access what they need to, in a well-organized interface.  Grouping similar tasks and separating them from different ones would be an example of making things more visibly clear.

Techniques

Consistency – Keeping certain things constant on an interface will help users easily identify ready to use functions over time.  In the internet browser, “Mozilla Firefox,” they keep the tab button consistent on every Firefox interface, so that users will be able to see and find this tab button every time they have the browser open.

Look at other applications with a grain of salt – Internet Explorer and Mozilla Firefox may show striking resemblances in regards to user interface, but Firefox will outperform Internet Explorer on any given day.  So when the developers of Firefox were creating the browser, they could have possibly received ideas from IE, but knew how to capitalize on IE’s flaws.

Contrast Rule –The contrast rule is important to keep in mind when designing user interfaces because the last thing you need is an interface with unreadable text.  For example, in Firefox, dark text is always placed with a lighter background, and a darker background is always comprised of lighter text.



Mozilla Firefox is a good example of a structured user interface design because the content areas are well organized and easily accessible.  Similar tasks can be found close to each other, and unlike tasks are separated to provide clear paths for users to follow.  An example would be how the tabs for new windows and the tool-bars are well organized.


The Simplicity Principle
The simplicity principle is straight forward and easy to follow, but very important. The user interface should be familiar to the user, so that the tasks are easy, for example if the user double clicks to open a file, it should be the same to open any file. The interface should also be programmed in the user’s language, or should have the option to switch to the users language of choice, which in that case, the user should be able to easily navigate by simple and common symbols or images if the user can’t understand the language. The interface should also have shortcuts and hot keys to simplify and shorten long tasks.

Techniques:

Consistency- For the simplicity principle, consistency plays a big role. You want your interface to be easy to use by using information that is consistent throughout you interface. For example, if your minimize, expand, and exit buttons are on the right side of the screen, then they should stay consistently on the left side throughout your interface so that the user does not get confused. You should also use the same color scheme so that the user can understand.

Navigation within the screen- The design of your interface should easily be read the way that the user usually reads and understands information. This is (in Western societies) from left to right and up to down.

Explain the Rules- When your applications are similar, then you do not need to explain the rules on how to use it over and over again, the simpler the way to navigate or use a function, the simpler it is for the user to understand your interface.



This screenshot is a good example of simplicity. The internet tabs are read from left to right, left being the first tab you had opened across to the right where the newest tabs are. There is also a smaller tab which enables you to open a new tab, which you can also use your hotkey to open. Your minimize, expand, and exit options are at the top right and your opened programs are on the bottom left. This interface shows simplicity in its most simple form.


The Visibility Principle
This principle has similarities to the reuse principle, your interface should be clean and consistent so that your user can identify and navigate through easily. Making your interface cluttered with unneeded information will confuse and distract the user; instead, make your interface to the point, avoiding redundancy.

Techniques:

Group Objects effectively – Files that are connected by relativity should be grouped together so that the user can easily access alike files. As with files that are different from each other should not be connected and should be apart from each other.

Justify Data appropriately – To keep your interface clean and organized, data columns should be placed to the right. 

Follow the Contrast Rule- Make sure that the user is able to read your text; the contrast rule is to use dark text on light backgrounds and light text on dark backgrounds.

This screenshot is a perfect example of the Visibility Principle. WalMart’s website shows clear and consistent design. Each section is organized by department, in which their sub-menu that’s pops out to the right specifies that category. Their use of dark colored text onto a white background makes it easy for the user to read and understand.


 
The Feedback Principle
In the Feedback principle, user interfaces must keep the users informed of the outcome in which the user input created.  It must inform the user of any errors, changes, and responses in a manner that can be understood clearly.

Techniques

Navigation within the screen – In Western society, we read from left to right, top to bottom, and because most people are used to this, a well-organized user interface should display text the same.

Word your messages and Labels effectively – The choice of words used to inform users are critical.  Using inappropriate wording can affect the users decision on whether this is a suitable application.

Expect your users to make mistakes – Being able to tolerate varied inputs is key.  Users most often will make mistakes when using interfaces, so finding ways to reduce certain mistakes, and recover from them, would help create a better UI.



 
In the image above, Google Chrome shows a good example of the feedback principle.  It displays a feedback error, showing that the site that was typed in may have been incorrect.  Google Chrome has great user feedback, telling the user in clear text that an error has occurred, and shows other suggestions that might help the user.

 
The Tolerance Principle
User interface designs must be lenient enough to allow users to make mistakes and also give the users the capability to recover from them.  Tolerating varied inputs and being able to redo and undo in varying tasks is also important.

Techniques

Expect your users to make mistakes – Many user interfaces today include an option to undo and redo tasks.  Humans make mistakes every day while working with different interfaces, so users should be able to recover from mistakes caused by the user.

Set project standards – To ensure consistency throughout an interface, standards must be set.  For example, Microsoft Word puts a standard “spell check” in place while a user is creating a document.  With the spell check function consistently on, users will never have to go and turn on the standard set function.

Use colour appropriately – Using colour effectively in an interface can help tremendously with user visibility.  When using colour, there should be a primary and secondary colour.  When a user is colour-blind, another option can be put in place to help identify something without colour.  For instance, Microsoft Word uses the colour red to tell the user there is a spelling mistake, blue or green to imply a grammar mistake, and an underline for those who can’t see colour.

 
Microsoft Word is a good example of a user interface that follows the tolerance principle.  Many mistakes can be made while typing in this interface, but they can be undone, redone, or removed.  Word also implements a great function called the “spell check,” which is active and consistent throughout the entire document, and displays errors on screen for easy user visibility.


 
The Reuse Principle
This principle is very important regarding the uniformity of your interface design. The user must be able to easily know the functions of the interface, and the purpose for them. Reusing the files internally and externally, such as being able to edit files, delete or add documents into a folder is a key element. Making things too complicated and intricate for the user makes them have to recollect for that function. Your user should be able to put less thought into things, and be able to do the tasks without thinking. Using hot keys is a good example to make things simpler for the user.

Techniques:

Consistency- In order for your interface to be easy to handle, consistency is a significant factor. For example, if you are using a certain combination on your keyboard to act as a hot key to zoom in, it should be the exact same configuration to zoom out.

Your design must be intuitable- If the user is stuck at a certain point, they should be able to make an educated guess to try and solve the problem, reusing shortcuts, options and hotkeys will cut down on confusion.

Don’t create busy interfaces- Your interface should be clean and not too busy for your user to be able to navigate through. If it becomes too crowded, the user may get easily jumbled or disoriented.


 
This screenshot is an example of the Reuse Principle. Here, you are able to access documents easily in a clean, organized manner. You can go back to the previous sub-menus, and are able to edit folder names after they have been created.


Completed by: Rocky Tang and Sarah Diamond-Jones