Human Computer Interaction

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 lt
  40Local density within groups lt 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 youre 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
• Dont 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