User Interface Principals of Design

Principal #1: Structure

The organization of the the interface. The organization of the interface should have a purpose. For example links that may be popular or important to the user should be organized in a way that is clear and one of the first things they see. Content that is related should be together and content that is not should be separate. Also similar things should share the same and consistent look with with each other, while differentiating content that isn’t similar.

Techniques:

#1 Group Things Effectively:

#2 Consistency:

#3 Navigation between major user interface items is important:

The star is a good example for the structure principle because as a news site, it follows a certain structure and hierarchy which allows ease of reading their articles for their users. It follows the technique of Consistency as everything seamlessly transitions to the next scene in the same manner. What needs to be made clear is more important thant the other, for example, a top story rather than a regular one is as well.

Principal #2: Simplicity

The intuitive and simple navigation of the interface. Common tasks completed daily by the user should be streamlined while the user should be able to understand  without difficulty. Shortcuts for tedious procedures are beneficial to the user. The interface should communicate to the user in a way that the user will understand clearly and understand the tools provided to him.

Techniques:

#1 Explain the rules

#2 Word your messages and labels effectively

#3 Use Color appropriately

Giantbomb.com provides a good example of the Simplicity principal. All the content of the site is laid out on the main page. The user can move to each part of the site through the main pages navigation bar. Since the site is also a editable wiki, the site also provides links and tools on each article that the user will find and use easily.

Principal #3: Visibility

When designing an interface, items and options for a given task should be easily visible. It is important to not distract the user with by cluttering the page with redundant information. Do not overwhelm the user with too many alternatives for certain task, or confuse them with excess information.

Techniques:

#1 Follow the contrast Rule

#2 Your design should be intuitive

#3 Don’t create busy interfaces

All the options and links are clearly visible to the user. Links on navigation bar are clear and easy to understand , Links to other content such as videos, news, screens, and twitter are easily accessible. Text and information is clear and contrasts from the background. The site is organized and provides just enough information for the user without overwhelming the user with excess an excess amount.

Principal #4: Feedback

It is important to give the user feedback so that they are actively involved and know what happens if they take such an action.  Providing the user with information of actions, interpretations, change of state, conditions, errors or exceptions by constantly keeping them up to date. Alongside that, explain clearly to the user in a familiar language.

Techniques:

#1 Expect users to make mistakes

#2 Design should be intuitive

#3 Explain the rules

The Windows interface is constantly giving you feedback to the actions you do. From basic tasks like moving windows to error messages. Windows always provide a visual feedback in your actions and informing you of errors or problems that may occur. The interface is constantly changing in real time based on the users actions.

Principal #5: Tolerance

The design should be flexible to provide ease of usability and a design that the user can tolerate. Redo and Undo actions provide opportunities to reduce mistakes for the user. There should be a tolerance level for varied inputs from the user to prevent errors and interpret actions and recommend certain actions to aid the user.

Techniques

#1 Don’t create busy interfaces

#2 Expect your users to make mistakes

#3 Set Standards

Microsoft Word is a good example of Tolerance. The interface provides tools to undo and redo his/her actions. It provides solutions and suggestions for any spelling or grammar mistakes. the interface also auto corrects mistakes by interpreting the users intended inputs. It has a high tolerance in mistakes giving the user the tools to correct and go undo any type of mistake they may make.

Principal #6: Reuse

This principle states that it is benefitial to reuse assets internally and externally.  Also, give importance to a functioning UI with consistency and purpose rather than just aesthetically pleasing. Benefitial to the user – allow the user to stay at ease and reduce the amount of processing tasks he/she must do.

Techniques:

#1 Consistency

#2 Set standards

#3 Justify data appropriately

The OS on Apples products have always kept a consistent user interface that reuses and recycles elements in previous versions. This provides users the ease of use to newer products. When a new product is released, users will instantly know how to use it because it shares the same characteristics in looks and design with the previous integration’s.