Designing User Interfaces and Dialogues: Guidelines and Methods

1. Chapter 3c Designing Interfaces and Dialogues

2. Learning Objectives • Explain the process of interface and dialogue design and the deliverables. • Contrast and apply methods for interacting with a system. • Describe guidelines for designing interface layout, data entry field structure, feedback, and system help. • Design human-computer dialogues and understand how dialogue diagramming can be used.

4. Deliverables and Outcomes A typical interface/dialogue design specification: Similar to form design, but includes multiple forms and dialogue sequence specifications

5. INTERFACE METHODS • Interface: the method by which a user interacts with the information system • Common interaction methods • Command line • Menu • Form • Object-based • Natural language

6. Command Line Interaction • Users enter explicit statements into a system to invoke operations • Example from MS DOS: • COPY C:PAPER.DOC A:PAPER.DOC • This copies a file from the C: drive to the A: drive • Includes keyboard shortcuts and function keys

7. Menu Interaction • A list of system options is provided and specific command is invoked by user selection of a menu option • Two common menu types: • Pop-up: menu placed near current cursor position • Drop-down: access point to menu placed at top line of display, menu drops down when access point clicked

8. Pop-up menu

12. Guidelines for Menu Design • Wording: meaningful titles, clear command verbs, mixed upper/lower case • Organization: consistent organizing principle • Length: all choices fit within screen length • Selection: consistent, clear and easy selection methods • Highlighting: only for selected options or unavailable options

13. Contrasting Menu Designs

14. Visual editing tools help designers construct menus.

15. Form Interaction • Allows users to fill in the blanks when working with a system • Measures of an effective design: • Self-explanatory title and field headings • Fields organized into logical groupings • Distinctive boundaries • Default values • Displays appropriate field lengths • Minimizes the need to scroll windows

17. Object Interaction • Symbols are used to represent commands or functions. • Icons: • Graphic symbols that look like the processing option they are meant to represent • Use little screen space • Can be easily understood by users

19. Natural Language Interaction • Inputs to and outputs from system are in a conventional speaking language like English • Based on research in artificial intelligence • Current implementations are tedious and difficult to work with, not as viable as other interaction methods • Both keyboard and voice entry

20. DESIGNING INTERFACES • Use standard formats similar to paper-based forms and reports • Left-to-right, top-to-bottom navigation • Flexibility and consistency: • Free movement between fields • No permanent data storage until the user requests • Each key and command assigned to one function

21. Guidelines for Structuring Data Entry Fields

22. Options for Entering Text

23. Controlling Data Input • Objective: reduce data entry errors • Common sources data entry errors in a field: • Appending: adding additional characters • Truncating: losing characters • Transcripting: entering invalid data • Transposing: reversing sequence of characters

24. Class or Composition Combinations Expected Values Missing Data Pictures/Templates Range Reasonableness Self-checking Digits Size Values Types of Validation Tests

25. Feedback Messages • Status information: keep user informed of what’s going on, helpful when user has to wait for response • Prompting cues: tell user when input is needed, and how to provide the input • Warning or Error: inform user that something is wrong, either with data entry or system operation

26. Providing Help • Place yourself in user’s place when designing help • Guidelines: • Simplicity • Help messages should be short and to the point • Organize • Information in help messages should be easily absorbed by users • Show • It is useful to explicitly show users how to perform an operation

27. DESIGNING DIALOGUES • Dialogue: A sequence of interactions between the system and a user • Dialogue design involves: • Designing a dialogue sequence • Building a prototype • Assessing usability

28. Consistency Shortcuts and Sequence Feedback Closure Error Handling Reversal Control Ease Guidelines for Dialogue Design

29. Designing the Dialogue Sequence Dialogue diagramming: A formal method for designing and representing human-computer dialogues using box and line diagrams. See Figure 12-19 for example.

30. Dialogue diagrams depict the sequence, conditional branching, and repetition of dialogues.

31. Summary • In this chapter you learned how to: • Explain the process of interface and dialogue design and the deliverables. • Contrast and apply methods for interacting with a system. • Describe guidelines for designing interface layout, data entry field structure, feedback, and system help. • Design human-computer dialogues and understand how dialogue diagramming can be used.