1. Chapter 12 Designing Interfaces and Dialogues

2. Objectives:  Explain the process of interface and dialogue design.  Contrast and apply methods for interacting with a system.  List and describe various input devices and factors affecting their usability.  Describe guidelines for designing interface layout, data entry field structure, feedback, and system help.  Design graphical user interfaces.

4. Interface/Dialogue Design  Layout (of widgets, text, and table data)  Structuring data entry (tab order)  Controlling data input (validation and format controls)  Feedback (prompting, status, warning, and error messages)  Dialogue sequencing

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

6. 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

7. 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  Experienced users and for rapid interaction with a system  User interface standards

8. 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 List of commands or possible values Drop-down: access point to menu placed at top line of display, menu drops down when access point clicked

11. Guidelines for Menu Design  Wording: meaningful titles, clear command verbs, mixed upper/lower case Quit  prior menu or exit program?  Organization: consistent organizing principle Related options grouped together Same option should have the same wording  Length: all choices fit within screen length Use submenus to break up exceedingly long menus

12. Guidelines for Menu Design  Selection: consistent, clear and easy selection methods How to select and the consequences of each option – will another menu appear?  Highlighting: only for selected options (check mark) or unavailable options (dimmed text)  Use menu building tools

13. Poor Menu Design

14. Good Menu Design

16. 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

18. 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

20. Hardware Options for System Interaction  Keyboard  Mouse  Joystick  Trackball Make selection during logical design!!!  Touch Screen  Light Pen  Graphics Tablet  Voice Different interfaces require different devices

21. Types of Interaction Device Usability Problems  Visual Blocking: extent to which device blocks display when using  User Fatigue: potential for fatigue over long use  Movement Scaling: extent to which device movement translates to equivalent screen movement  Durability: lack of durability or need for maintenance (e.g., cleaning) over extended use

22. Types of Interaction Device Usability Problems  Adequate feedback: extent to which device provides adequate feedback for each operation  Speed: cursor movement speed  Pointing accuracy: ability to precisely direct cursor

23. Usability Problems with Hardware Devices  Visual Blocking touch screen, light pen  User Fatigue touch screen, light pen  Movement Scaling keyboard, mouse, joystick, trackball, graphics tablet, voice  Durability trackball, touch screen  Adequate Feedback keyboard, mouse, joystick, trackball, graphics tablet, voice  Speed keyboard  Pointing Accuracy joystick, touch screen, light pen, voice

25. Designing Interfaces  Use standard formats similar to paper-based forms and reports  Consistently format across applications  Left-to-right, top-to-bottom screen navigation  Areas of screen not used for data entry should be inaccessible to users

26. Designing Interfaces  Flexibility and consistency: Free movement between fields, forward and backward No permanent data storage until the user requests Each key and command assigned to one function and this should be consistent across the entire system and across systems, if possible  Data entry screen functional capabilities (Table 12-5): Cursor control  forward, backward, first, last field, etc. Delete the character to the left of the cursor, under the cursor, etc.

27. Structuring Data Entry Entry Never require data that are already online or that can be computed Defaults Always provide default values when appropriate Units Make clear the type of data units requested for entry Replacement Use character replacement when appropriate – look up value in table or automatically fill in Captioning Always place a caption adjacent to fields Format Provide formatting examples – show embedded symbols Justify Automatically justify data entries Help Provide context-sensitive help when appropriate

28. Entering Text

29. 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

30. Types of Validation Tests  Class or Composition  Combinations  Expected Values – match with existing  Missing Data  Range  Reasonableness  Self-checking Digits  Size - # of characters  Values – standard (state codes)

31. 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 Should be specific  Warning or Error: inform user that something is wrong, either with data entry or system operation: Specific, no jargon, don’t scold user Same format, placement

32. Providing Help  Place yourself in user’s place when designing help  Guidelines: Simplicity Help messages should be short and to the point Use complete sentences and words that enable understanding Organize Information in help messages should be easily absorbed by users – bulleted or ordered list Show It is useful to explicitly show users how to perform an operation  Use tools to design system help HTML help environment – text editor to construct help pages that can be easily linked

33. What is a Dialogue?  A sequence of interactions between the system and a user  Dialogue design involves: Designing a dialogue sequence Building a prototype Assessing usability

34. Guidelines for Dialogue Design  Consistency  Shortcuts and Sequence (natural)  Feedback for every user action (confirm add, delete)  Closure – there are no more screens  Error Handling – detect, report, make suggestions  Reversal – undo a delete  Control  Ease of use

35. Dialogue Diagramming A formal method for designing and representing human-computer dialogues using box and line diagrams

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

37. Designing Interfaces and Dialogues in Graphical Environments  Become an expert user of the GUI environment. Understand how other applications have been designed. Understand standards.  Gain an understanding of the available resources and how they can be used. Become familiar with standards for menus and forms File menu is always first Help is always last Right arrow shows that item leads to a submenu

39. GUI Window Properties That Can Be Turned On or Off  Modality: require user to finish action before proceeding  Resizable: allow user to change size of window  Movable: allow user to reposition window  Maximize: allow user to make window take entire screen  Minimize: allow user to completely hide window  System menu: allow window to have access to system level functions

40. GUI Dialogue Design Issues  Goal is to establish the sequence of displays that users will encounter when working with system.  Ability of some GUI environments to jump from application to application or screen to screen makes sequencing a challenge.  One approach is to make users always resolve requests for information before proceeding, although this doesn’t take advantage the GUI’s task-switching capability.  Dialogue diagramming helps analysts better manage the complexity of designing graphical interfaces.