1 Human Computer Interaction Week 3 User 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,