DMA 188 – Interactivity
Mathew R. Graham
Aida Aguilar
Aug. 08/2012
User Interface Principles of Design Assignment
1 – The Structure Principle:
One of the 6 fundamental design principles required for the design of user interfaces. The interface should communicate the information in a direct and efficient manner. There should not be any ambiguity in the function of the interface, and it should organize information in grouping, keeping similar things together and unlike things apart. The design structure should focus on also keeping the visual themes organized, just as the information is structured.
3 Key techniques that support this principle:
- Consistency
- Word your messages and labels effectively
- Don’t create busy interfaces.
Example of User Interface: Adobe Photoshop.
Adobe’s Photoshop program is a ‘Structure’ example of the User-Interface (UI) Principles of Design. The rigid design of Adobe’s user-interface demonstrates the key UI techniques of: consistency, label effectively, and don’t create busy interfaces. The consistency of Photoshop’s functions never changes throughout navigation. The buttons and tools always stay in the same place and never move when clicked on, creating a clear and concise framework. The colours that Photoshop uses for its design are quite simple and clean, it rarely varies from 2-3 main colours. The labeling and wording of messages in Photoshop is just as clear, also maintaining the consistency. The menu headings and drop-down buttons always keep the same wording, allowing the user to effectively use the interface. There is no created confusion from badly worded or abbreviated messages. The only hesitation that the use might have may be the unfamiliarity of the technical function and tools of the program. Lastly, Photoshop has clearly understood the key design technique of ‘not creating busy interfaces’. Since studies have shown that that overall design of the UI should not exceed 40%, Adobe Photoshop demonstrates that they have done their homework. By not overcrowding the UI with unnecessary information or widgets they allow the user to enjoy a more open experience of using their program.
2 – The Simplicity Principle:
The Simplicity Principle is relatively simple. Repetitive, common tasks should be easy for the user to do. It should communicate it’s function clearly so that the user may easily understand. Providing hot key and shortcuts is essential form of simplicity, so that the user can navigate easier and save time.
3 Key techniques:
- Word your messages and labels effectively.
- Set standards.
- Your design should be intuitive.
Example of Simplicity: Adobe Photoshop
The drop down menus in Adobe Photoshop, are a good example of the Simplicity Principle. They provide the user with a quick and easy function to access information. The quick command hot key shortcuts in Photoshop also give the user a higher level of usability. This allows the user to focus their attention on the task at hand, rather than getting bogged down with tool functions that are hard to understand and complicated to navigate. The hot key functions are what enables Photoshop to become time-effective, without them productivity would be lost.
3 – The Feedback Principle:
The Feedback Principle informs the user of the consequence of their actions. The result of the user’s input is communicated back to them in a clear message. This informs them of any changes they have made, or errors that have resulted from their action.
3 Key techniques:
- Explain the rules.
- Expect your users to make mistakes.
- Your design should be intuitive.
Example of Feedback: Windows ‘Yes/No’ messages.
The messages the user received when using the Windows OS, are an example of the Feedback Principle. Windows constantly bombards the user with ‘Are you sure’, ‘Yes/No’, ‘Allow/Deny’ type questions. Although exemplifying the principle, the messages are almost ineffective as they are counter-productive; too much feedback distracts the user from their task in this particular case. Windows could also be much more usable without all of the ‘allow/deny’ questions that arise when programs are initiated, as well as ‘leave the page/stay on the page.’
4 – The Tolerance Principle:
The Tolerance Principle says that the design of the UI should be understanding and reasonable of the users actions. It should interpret incorrect actions, and recommend a suitable substitute. It should allow the user to perform easier tasks by being tolerant and allowing variable input, and allow the user to go back and correct their mistakes.
3 Key techniques:
- Consistency.
- Set standards.
- Expect your users to make mistakes.
Example of Tolerance: Advanced Search
An example of the Tolerance Principle is the ‘Advanced Search’ function. It allows the user to vary the input of their search. It also recommends search results from the users input. This enables the user to get better results from their actions, by not ending in error or ‘no result’. By interpreting the search results to suggest the correct spelling or other alternatives empowers the user and gives them a higher degree of control. Boolean search strings such as ‘and/or/not’ give the user an advanced method of searching and more tolerance to the search.
5 – The Reuse Principle:
The Reuse Principle takes elements and redistributes them to create a theme. This is helpful in branding by maintaining consistency and promoting clear design. It also useful by ensuring that functionality remains the same across different applications.
3 Key techniques:
- Consistency.
- Set standards.
- Your design should be intuitive.
Example of Reuse: Adobe Illustrator
The Reuse Principle of Adobe Illustrator demonstrates this across all of its Adobe programs. By keeping the key design elements and functions the same in its different applications, it allows greater usability. The core menu items are the same, as well as the basic functionality, colours and theme. This provides the user in saving time with regards to having to learn new navigation of menu items. While not all the functions of Adobe’s programs transfer into the next (some tools function a little differently and should be noted to their fault), the basic elements are reused. It is troubling though, as to why some of their tools function differently in different programs.
6 – Visibility Principle
The Visibility Principle is very similar to the Simplicity Principle. The visual information provided should be very clear and simple, and not overwhelming to the user. Menu items and items should be very easily seen and understood. The UI should also not overwhelm the user with too many visual options.
3 Key techniques:
- Consistency.
- Don’t create busy interfaces.
- Word your messages and labels effectively.
Example of Visibility: iPad
The iPad demonstrates the Visibility Principle. The visual consistency of the buttons and menu functions stay the same screen to screen. The information is very well organized, and not overwhelming for the user to look at. There are a certain number of limited options, which is very easy to understand what functions do what. The graphics are very simple, with simple symbols to represent the function. It is a very clean graphic user interface (GUI), which is not overcrowded with too much information, and is effectively labeled.
builtforspeed 