1. 8.1 INTERFACE DESIGN IMS9001 - Systems Analysis and Design

2. 8.2 Human–Computer Interface Design The interface is the link between the users and the computer end user direct user INTERFACEINTERFACE INTERFACEINTERFACE Programs Database To many users, the interface is the system

3. 8.3  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 Designing Interfaces and Dialogues

4. 8.4  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 Inputs and Outputs: Forms and Reports

5. 8.5  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 Forms and Reports

6. 8.6  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 Designing Forms and Reports

7. 8.7  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) Design Specifications

8. 8.8  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 Formatting Forms and Reports

9. 8.9 TEACHING RESOURCE INFORMATION BORROWER NUMBER7712255 BORROWER NAMEDR. JIM SMITH LOAN NUMBER12753 DUE DATE30-5-98 ITEM CODEKS H1 ITEM AVAILABILITYYES REQUIRED ITEMYES ITEM CODE- ITEM AVAILABILITY- REQUIRED ITEM- ITEM CODE- ITEM AVAILABILITY- REQUIRED ITEM- CONFIRMED?NO Vague Title Difficult to read, Information Packed tightly No navigation information No use of different intensity, fonts etc. Poor Form Design

10. 8.10 Clear Title Easy to read, Clear balanced layout Intensity differences, boxing, font sizes Clear navigation information Good Form Design

11. 8.11  Blinking and audible tones  Colour, intensity, size and font differences  Reverse video  Boxing  Underlining  Capital letters  Offsetting Highlighting Information

12. 8.12  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 Colour vs No Colour

13. 8.13  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 Displaying Text

14. 8.14 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. Vague title Fixed, upper case text Single spacing Poor Text Design

15. 8.15 Clear title Mixed case Spacing between sections Clear navigation information Good Text Design

16. 8.16  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 Designing Tables and Lists

17. 8.17 Clear separate column labels Numeric data Right justified Good Table Design

18. 8.18  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 Designing Dialogues

19. 8.19  Common interface methods are:  Command language interaction  Menu interaction  Form interaction  Icon/object-based interaction Interaction Methods and Devices

20. 8.20  Users enter explicit commands to invoke operations  users must therefore remember syntax and semantics  MSDOS, UNIX commands  copy A:myfile.doc to B:myfile.doc  Complex applications such as word processors and spreadsheets may have many commands  print  save  copy Command Language Interaction

21. 8.21  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 Menu Interaction

22. 8.22 TEXT-BASED SYSTEM MENU OF CHOICES ---------------------------- 1BOOKINGS 2CUSTOMERS 3TOURS 4MAINTENANCE 5LOGOUT What’s wrong with this one? Simple Single Menu

23. 8.23 Main Menu Menu Hierarchy

24. 8.24  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) Guidelines for Menu Design

25. 8.25  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(?) Form Interaction

26. 8.26  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 Icon/Object-Based Interaction

27. 8.27  Keyboard  Mouse  Joystick  Trackball  Touch screen  Light pen  Graphics tablet  Voice Common Interaction Devices

28. 8.28  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 Structuring and Validation of Data Entry

29. 8.29 Interface Design Principles  Five principles:  Support “Transportability of Knowledge”  Be Consistent  Provide Feedback  Use Drab Colours  Make the User Boss

30. 8.30 Transportability of Knowledge  Make use of what the user already knows  eg File>Exit quits Windows applications  Answers lots of design questions for you  What are menus? - things that drop down from the top  What’s the first menu option? - File  What’s the last menu option? - Help  What does the word exit mean? - quit the application.

31. 8.31 Be Consistent  Always do the same thing in the same way  it’s 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. 8.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. 8.33 Consistency in Appearance and Performance These aren’t 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. 8.34 Provide Feedback  Feedback Lets the User Know What’s Going on  Examples  A button goes down when you click it  The mouse pointer turns into an hourglass while short tasks run  There’s a progress bar for long tasks  Objects always respond to actions on them. Something always shows you that it’s worked  Negative Example  Fill in a form, click on the Save button  Nothing happens……The user is left in doubt.

35. 8.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 won’t necessarily look good to many others  Drab colours are best

36. 8.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 there’s 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. 8.37 There’s 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. 8.38  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 Controlling User Access

39. 8.39  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 Assessing Usability

40. 8.40  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 Contextual Issues

41. 8.41  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 Measuring Usability and Collecting Usability Data

42. 8.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