User Interface Principles of Design

The Structure Principle:

We have to structure our product or service to understand quickly. It is very important thing to fulfill our customer/visitor to find information easily. The design should be organized in a meaningful and useful ways. The important or related things should be placed together and separate unrelated things, also needs to have enough information for the customers to make a decision. 

Three Design Techniques are:

• Word your messages and labels effectively
• Align fields effectively 
• Group things effectively 

Photoshop’s toolbar is an excellent example for the “Structure Principle”, because the toolbar was organized well with the similarity groups. The toolbar also has the related tools together for meaningful and useful purposes.

The Simplicity Principle:

The design has to be simple and common. The principle communicates clearly in the user’s common language. Use shortcuts and hotkeys for the important procedures, so it is very easy and comfortable to use in an emergency.

Three Design Techniques are:

•  Consistency
• Set standards
•   Understand the UI widgets

These kind of old mobile phones are still useable for its simplicity. Some users like to use these because it is designed for a simple and common use. They used hotkeys for the important procedures, for example the green button for calling and the red button to exit/end.

The Visibility Principle:

The visibility is all about the clearly the user see. The options and Icons should be visible to the users to use. Too much options and buttons are confusing the users and it is not structured well for the user interface.

 

Three Design Techniques are:

• Don’t create busy user interfaces
• Navigation within a screen is important
• Align fields effectively

An ATM machine is a great example for the “Visibility Principle”. It doesn’t have too many options to confuse the users. The ATM machine clearly designed for users to use it easily, they have each section with pictures and text. For example: a card icon used to let the user know where to insert the card and same idea for the cash and envelop sections, so it is visually an easy way to do.

The Feedback Principle:

The feedback in user interface needs to be work with user’s actions. For the users action the feedback principle should react. It has to inform the result of the user’s actions.

Three Design Techniques are:

• Understand the UI widgets
• Word your messages and labels effectively 
•   Explain the rules

 

We set alarms on alarm clock to wake-up in the morning and it does rings on time that we want it to be. It gives us the feedback/result for our actions and it is also informing the result by ringing the alarm on time.

The Tolerance Principle:

It should be flexible, and designed to reduce the number of user errors. Also make easier ways to recovery from the errors and mistakes.

Three Design Techniques are:

• Expect your users to make mistakes
• Your design should be intuitable
• Explain the rules

When we type in Microsoft Word we notice our spelling mistakes with a red underline and a green underline for our grammar errors. We can correct our mistakes by right clicking on the wrong word and select the right one, also we can use a tool called “spelling & grammar” to change our mistakes. It is a great example for the “tolerance Principle”.

The Reuse Principle:

The concept should be reused, and its behaviors are the same. Consistency used with a purpose and function not just for a visual concept, and try to eliminate the need for users to rethink and remember.

Three Design Techniques are:

• Consistency
•   Set standards
•    Understand the UI widgets

We all know the reaction of red “X” button on the top right corner of windows applications. We can also see the same concept reused on some other devices and it does the same behaviors.