UI Design Introduction & Basics

By James Cauchi | Tech Articles | Comments are Closed | 18 November, 2015 | 1

Basic Principles of UI Design

Appearance – the interface should be divided into different areas grouped by purposes.
Content Awareness – the interface should inform user of their current location and the meaning of the presented information.
Aesthetics – the interface should provide a balance between the amount
of the information presented and its visual attractiveness.
User Experience – the interface should take into account both ease of
learning for beginners and at the same time provide robustness for experienced users.
Consistency – the interface should be consistent in order to facilitate user
with prediction of the consequences of each taken action.
Minimizing Effort – the interface should facilitate user interaction, bringing number of steps leading to a goal to minimum.

Each area should have clearly defined boundaries.
Each area should have a clearly defined purpose.
Each area should contain only the information that is need to accomplish a specific purpose.
Information areas should be ranked in order of being processed by the user (from
top to bottom, left to right).

The user interface should be both functional and aesthetically pleasing.
The amount of space between interface elements
should be tailored to the user’s requirements (eg. 50% for novice and 10% for advanced users).
Forms should be kept simple and should contain sane amount of items. Forms should be displaying only the amount of information possible to be processed by the user in one go.
It’s advisable to avoid using more than two different fonts. Decorative fonts should be avoided, as they are often difficult to read.
Colors should be subdued (contrast brings attention but is tiring).
Color shouldn’t be the only differentiator. Interface should be friendly for the people suffering from color blindness.

The user interface should be easy to learn, especially for novice users.
The user interface should facilitate and accelerate execution of actions by advanced users.
The menu should consist of no more than three levels for the main menu and no more than two levels
for context menus.
The menu should present all available functions, ie. there shouldn’t be any function that’s inaccessible through the menu.
The menu should contain no more than a few positions at every level. For more sophisticated menus items should be logically grouped and more frequently used functions should be highlighted in some way.
Frequently used functions should be available directly and be easily accessible.
Buttons should have an icon resembling performed action and name of the action assigned to them. If the name of the action can’t be shown directly on the button it should be shown as a tooltip upon hovering over the button.
It is advisable for more complex applications to have their capabilities presented by using hints.
If hints take considerable amount of space on the screen, app should allow tips to be disabled and re-enabled once again on demand.

User interface should be consistent to ensure the predictability of actions taken by the user.
All elements of the application should be designed in a uniform manner, ie. using homogenous conceptual (terminology) and using homogenous forms (the same layout, fonts and colors) and clear navigation.
The user interface should be consistent with other applications used in the same field.