1

Human Computer Interaction

Week 3User Interface Design

2

Topics of Interest

User Interface Design Tips and Techniques

Prototyping Interface Flow Diagrams

3

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

4

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)

5

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

6

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

7

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

8

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 Follow the contrast rule

Dark text on light background, Light text on dark background

Good Example: Blue text on white background

Bad Example: Blue text on red background

9

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 Gray things out, do not remove them

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

10

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

11

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%

12

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

13

User Interface Design Tips and Techniques (11)

Pop-up menus should not be the only source of functionality Avoid the misuse of pop-ups /

context-sensitive menus, because users cannot see the major functionality of your applications

14

Prototyping

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

15

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 you’re finished yet

Should there be any changes required, repeat step one

Stop the prototyping process when there is no more significant requirement changes

16

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 Don’t spend a lot of time making the

code good

17

Interface Flow Diagrams

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

18

Further Reading

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