INTERFACE DESIGN

1
IMS9001 - Systems Analysis and Design

• INTERFACE DESIGN

2
HumanComputer Interface Design
The interface is the link between the users and
the computer
To many users, the interface is the system
3
Designing Interfaces and Dialogues

• The process of defining the manner in which
  humans and computers exchange information
• Analogous to a conversation between 2 people
• Interface and dialogue design is critical for
  successful information systems
• ...to the user the interface is the system
• Should provide a uniform structure for finding,
  viewing, and invoking different components of an
  information system

4
Inputs and Outputs Forms and Reports

• Form and report design are key ingredients for
  successful information systems - especially
  for users
• Each input data flow to a process will be
  associated with a form
• Each output data flow from a process will be
  associated with either a form or a report
• Forms and reports can be paper-based or
  screen-based

5
Forms and Reports

• FORM is a business document containing some
  predefined data and also some areas for other
  data to be filled in
• typically based on one database record
• turnaround document is produced by a system and
  then returned with input data
• REPORT is a business document that contains only
  predefined data - a passive document for reading
• typically contains data from many different
  database records

6
Designing Forms and Reports

• 1. Collect initial requirements
• who will use the form or report
• what is its purpose
• when is it needed or used
• where does it need to be delivered
• how many people need to use it
• 2. Construct initial prototype
• 3. Users review and evaluate prototype
• Iterate

7
Design Specifications

• Narrative overview
• Form name, users, task, system, environment
• Sample design
• Testing and usability assessment
• user ratings on perceptions of usability
  dimensions - consistency, sufficiency, accuracy,
  etc
• testing objectives, procedures and results
• - time to learn, speed of performance, rate of
  errors, retention over time, user satisfaction
  and other perceptions
• See Fig 13.4 p 438 and Fig 14.2 p 462 in Hoffer
  et al (2002)

8
Formatting Forms and Reports

• General guidelines
• Meaningful titles
• clear and specific, revision-no, date
• Meaningful information
• needed and useable information
• Balanced layout
• spacing, margins, balanced and clearly labelled
• Easy navigation
• easy forward/backward moves, current position
  clear

9
Poor Form Design
10
Good Form Design
Clear Title
Intensity differences, boxing, font sizes
Easy to read, Clear balanced layout
Clear navigation information
11
Highlighting Information

• Blinking and audible tones
• Colour, intensity, size and font differences
• Reverse video
• Boxing
• Underlining
• Capital letters
• Offsetting

12
Colour vs No Colour

• Benefits of colour
• strikes the eye, draws attention to warnings
• accents an uninteresting display
• facilitates discrimination
• Problems with colour
• colour blindness/eye strain
• resolution may degrade
• printing or conversion to other media may not
  easily translate

13
Displaying Text

• Case
• display text in mixed upper and lower case
• Spacing
• double spacing if possible, leave line between
  paragraphs
• Justification
• left justify with ragged right margin
• Hyphenation
• do not hyphenate words between lines
• Abbreviations
• use only when widely understood

14
Poor Text Design
Vague title
HELP SCREEN H2356 ADD A FORM WITHIN A REPORT IN
THE DATABASE WINDOW, CLICK THE FORM THAT IS
BOUND TO THE TABLE ON THE MANY SIDE OF THE ONT TO
MANY RELATIONSHIP AND HOLD DOWN THE MOUSE
BUTTON. DRAG THE FORM INSIDE THE MAIN FORM, AND
THEN RELEASE THE MOUSE BUTTON. MICROSOFT ACCESS
INSERTS THE SECOND FORM AS A SUBFORM WITHIN THE
MAIN FORM. IF YOU NEED TO YOU CAN PRESS F1 T
ORETURN TO THE MAIN MENU, F2 TO GO TO THE
PREVIOIS CARD AND F3 TO GO TO THE NEXT CARD.
Fixed, upper case text
Single spacing
15
Good Text Design
Clear title
Spacing between sections
Mixed case
Clear navigation information
16
Designing Tables and Lists

• Use meaningful labels
• for all rows and columns relabel after change of
  page
• Formatting columns, rows and text
• sort in meaningful order
• place blank row after every 5 lines in long
  columns
• be consistent with typefaces and fonts
• Formatting numeric, textual and alphanumeric data
• right justify numeric data, left justify textual
  data

17
Good Table Design
Clear separate column labels
Numeric data Right justified
18
Designing Dialogues

• 3 major steps
• 1 Designing the dialogue sequence
• based on how the user wishes to use the system
• 2 Build a prototype
• use tools such as CASE tools, Visual Basic,
  Access
• 3 Assess Usability
• use same approach as with forms and reports -
  time to learn,speed of performance, rate of
  errors, retention over time, subjective
  satisfaction
• Design specification can be completed as for
  forms and reports

19
Interaction Methods and Devices

• Common interface methods are
• Command language interaction
• Menu interaction
• Form interaction
• Icon/object-based interaction

20
Command Language Interaction

• Users enter explicit commands to invoke
  operations
• users must therefore remember syntax and
  semantics
• MSDOS, UNIX commands
• copy Amyfile.doc to Bmyfile.doc
• Complex applications such as word processors and
  spreadsheets may have many commands
• ltCTRL-Pgt print
• ltCTRL-Sgt save
• ltCTRL-Cgt copy

21
Menu Interaction

• Users select from a list of system options and a
  specific operation is executed
• Menu interaction is still the most widely used
  interaction method
• Menus can differ greatly in their design and
  capability
• simple single menu
• hierarchy of menus
• pop-up menus
• drop-down menus
• graphic menus

22
Simple Single Menu
TEXT-BASED SYSTEM MENU OF CHOICES
---------------------------- 1 BOOKINGS 2 CUSTOMER
S 3 TOURS 4 MAINTENANCE 5 LOGOUT
Whats wrong with this one?
23
Menu Hierarchy
Main Menu
24
Guidelines for Menu Design

• Wording
• meaningful title, clear, unambiguous command
  verbs
• Organisation
• consistent, eg. related options should be grouped
  together
• Length
• use sub-menus to break up very long menus
• Selection
• methods should be clear and consistent
• Highlighting
• should be minimised and used to convey selected
  options (marked) or unavailable options (dimmed)

25
Form Interaction

• Users fill in blanks on a form when they
  interact with the system
• Screen format is similar to paper-based forms
• Effective for both input and presentation of data
• Form interaction is common on many applications,
  the World Wide Web
• Form-based programming languages
• VB, Delphi, CGI(?)

26
Icon/Object-Based Interaction

• Often based on metaphor
• Icons are graphic symbols that look like the
  processing option they represent
• Operations are selected by pointing at and
  clicking on the desired option
• Easily understood and take up little screen
  space
• Many icons appear in the form of buttons or
  controls

27
Common Interaction Devices

• Keyboard
• Mouse
• Joystick
• Trackball
• Touch screen
• Light pen
• Graphics tablet
• Voice

28
Structuring and Validation of Data Entry

• Entry
• never require data to be inserted that is already
  known
• Defaults
• always provide defaults where appropriate
• Format
• provide format details (decimal points, dollar
  signs, dates ...)
• Provide help
• for help, concepts, procedures, messages, menus,
  function keys, commands, etc.
• Validation tests are usually handled by DBMS or
  by programs
• Type
• proper type of data (eg. numeric, alpha )
• Combinations
• do values in several fields combine in a sensible
  way
• Missing data
• eg. must have quantity for each customer order

29
Interface Design Principles

• Five principles
• Support Transportability of Knowledge
• Be Consistent
• Provide Feedback
• Use Drab Colours
• Make the User Boss

30
Transportability of Knowledge

• Make use of what the user already knows
• eg FilegtExit quits Windows applications
• Answers lots of design questions for you
• What are menus? - things that drop down from the
  top
• Whats the first menu option? - File
• Whats the last menu option? - Help
• What does the word exit mean? - quit the
  application.

31
Be Consistent

• Always do the same thing in the same way
• its always Exit
• Exit only means Leave this application
• Exit never means Go back to the previous
  screen. or Go back to the splash screen.
• The (Drop-Down) Menus are always the same.
• If menu options are inappropriate in particular
  locations, dim them.
• The words you use to refer to objects are the
  same across screens.

32
Transportability and Consistency Work Together

• Any exception means
• The user always has to stop and think
• Is this the exception?
• Do I have to think twice about this one?
• So any breakdown in consistency or
  transportability means
• The user is slowed down
• The user is frustrated
• The user makes more mistakes

33
Consistency in Appearance and Performance

• These arent the same.
• You can see inconsistency in appearance but not
  in performance
• How (and when) does your system respond to an
  input error?
• When do you prompt the users?
• How does the user access the Help system?
  (i.e., does F1 always work?)
• How must the user enter dates, percentages, etc.
  ?
• Where do forms appear on the screen?

34
Provide Feedback

• Feedback Lets the User Know Whats Going on
• Examples
• A button goes down when you click it
• The mouse pointer turns into an hourglass while
  short tasks run
• Theres a progress bar for long tasks
• Objects always respond to actions on them.
  Something always shows you that its worked
• Negative Example
• Fill in a form, click on the Save button
• Nothing happensThe user is left in doubt.

35
Use Drab Colours

• Some colours cause problems eg red
• red seems dim, as very few cones in retina
  sensitive to red
• 3D effect of red on green or green on red for
  everyone
• red seems fuzzy around edges
• Colour perception is personal
• What looks good to you wont necessarily look
  good to many others
• Drab colours are best

36
Make the User Boss

• In traditional computer programs
• The program walks the user through a series of
  steps
• The user has to perform these steps correctly and
  in the required order
• The program (and programmer) knows in advance
  what the user is doing at any time.
• The program and programmer are always in control
  (and theres always a known point, called the
  control point, moving through the program)
• So traditional programmers speak of the flow of
  control through the program.

37
Theres No Point of Control

• Control is passed to the user
• Within reason they can
• Do what they want in the order they want
• Enter partial and incomplete data
• Stop in the middle of a task
• Leave blank and incorrect data on the screen for
  awhile
• The computer program is passive
• The user is active
• The user becomes the boss

38
Controlling User Access

• Mechanisms to control user access include
• views
• particular users see subset of DB in the
  interface
• authorisation rules
• restrictions to access and actions on data
• encryption procedures
• encryption and decoding procedures are necessary
  for highly sensitive data
• authentication schemes
• access restrictions controlled by passwords,
  biometric devices and smart cards

39
Assessing Usability

• Usability typically refers to
• speed - efficient completion of task
• accuracy - output provides what is expected
• satisfaction - output is liked
• Design guidelines for usability
• Consistency - of operation
• Efficiency - related to user task
• Ease - output self explanatory
• Format - consistent format between entry and
  display
• Flexibility - must be convenient to user

40
Contextual Issues

• User
• experience, skills, motivation, education,
  personality
• Task
• time pressures, costs of errors, work duration
  (fatigue)
• Systems
• platform will influence interaction styles and
  devices
• Environment
• social issues and role should be considered

41
Measuring Usability and Collecting Usability Data

• Measures of usability
• Time to learn
• Speed of performance
• Rate of errors
• Retention over time
• Subjective satisfaction
• Usability data can be collected by
• observation
• interviews
• keystroke capturing
• questionnaires

42
References

• HOFFER, J.A., GEORGE, J.F. and VALACICH (2005)
  Modern Systems Analysis and Design, (4th
  edition), Pearson Education Inc., Upper Saddle
  River, New Jersey, USA. Chapters 11, 12
• WHITTEN, J.L., BENTLEY, L.D. and DITTMAN, K.C.
  (2001) 5th ed., Systems Analysis and Design
  Methods, Irwin/McGraw-HilI, New York, NY. Chapter
  15