Human Computer Interaction

Week 3 User Interface Design

Topics of Interest
User Interface Design Tips and Techniques Prototyping Interface Flow Diagrams

User Interface Design Tips and Techniques (1)

Consistency
Consistent placement of components Consistent color scheme Consistent in everything

Set standards and stick to them

Adopt an industry standard (IBM/Microsoft) Fill any missing guidelines specific to your needs

User Interface Design Tips and Techniques (2)

Explain the rules
Users need to know how to work with the application. Consistency explain the rules only once

Support both novices and expert

Library catalog for casual users, complex search systems for expert users (librarians)

User Interface Design Tips and Techniques (3)

Navigation between screens is important
The flow between screens should match the flow of work the user is trying to accomplish Different users work in different ways, your system need to be flexible enough to support their various approaches

User Interface Design Tips and Techniques (4)

Navigation within a screen is important
Left to right, top to bottom Navigation between widgets

Word your messages and labels appropriately

Poor words, poor perception Full words and sentences are better than abbreviations and codes

User Interface Design Tips and Techniques (5)

Understand your widget
Use the right widget for the right task Read and understand the user interface standards and guidelines adopted by your organization

Look at other applications with a grain of salt

It is a good idea to look at the work of others to get ideas Be careful not to follow poorly designed user interface

User Interface Design Tips and Techniques (6)

Use color appropriately
Color problem: color blind users Combine color with something else, such as a symbol to make it stand out Cautions: Color generally does not port well between platforms Dark text on light background, Light text on dark background Good Example: Blue text on white background Bad Example: Blue text on red background

Follow the contrast rule

User Interface Design Tips and Techniques (7)

Use Fonts appropriately
Use easy to read fonts such as serif fonts A screen with two/three fonts looks better than a screen with five/six fonts User should know which function is available and which is not. User can build an accurate mental model as to how your application works Example: Object must be selected before they can be deleted. The delete button should be grayed when there is no object selected

Gray things out, do not remove them

User Interface Design Tips and Techniques (8)

Use non destructive default buttons
Default button: the button invoked when the user presses the Enter key Do not use Delete as the default button

Alignment of fields
Right justify label fields, left justify edit fields

User Interface Design Tips and Techniques (9)

Justify data appropriately
Right justify integers Decimal align floating point numbers Left justify strings

Do not create busy screens

Mayhew (1992): Overall density of the screen <= 40% Local density within groups <= 62%

User Interface Design Tips and Techniques (10)

Group things on the screen effectively
Logically connected items should be grouped together Use white space between groups, or add boxes around groups

Open window in the center of the action

Open a window in the spot where the user clicks / double clicks on an object

User Interface Design Tips and Techniques (11)

Pop-up menus should not be the only source of functionality
Avoid the misuse of pop-ups / contextsensitive menus, because users cannot see the major functionality of your applications

Prototyping
Prototyping is an iterative analysis technique in which users are actively involved in the mocking-up of screens and reports.

Prototyping Stages
Determine the needs of your users Interviews, CRC (Class Responsibility Collaborator) sessions, Use-case sessions Build the prototype Use a prototyping tools as fast as possible Evaluate the prototype Goal: verify whether the prototype meets the needs of your users (add missing items, fix wrong items) Determine if youre finished yet Should there be any changes required, repeat step one Stop the prototyping process when there is no more significant requirement changes

Prototyping Tips and Techniques

Look for real-world objects Work with real users Set a schedule and stick to it Use a prototyping tool Get the users to work with the prototype Understand the underlying business There are different levels of prototype Dont spend a lot of time making the code good

Interface Flow Diagrams

Interface Flow Diagrams show the relationships between the user interface components, screens and reports, that make up your application.

Further Reading
Ambler, S.W. 2000, User Interface Design: Tips and Techniques, http://www.ambysoft.com