1. Modern Systems Analysis and Design Hoffer, George & Valacich
Chapter 12
Designing Interfaces and Dialogues

2. Learning Objectives
Explain the process of designing interfaces and dialogues and the deliverables for their creation.
Contrast and apply several methods for interacting with a system.
List and describe various input devices and discuss usability issues for each in relation to performing different tasks.
Discuss the general guidelines for interface design.
Discuss the design of human-computer dialogues and the use of dialogue diagramming.
Design graphical user interfaces.
Explain interface design guidelines unique to the design of Internet based e-commerce systems.

3. System Development Life Cycle SDLC

4. Introduction
Interface Design focuses on how information is provided to and captured from users
Dialogue design focuses on the sequencing of interface displays
Dialogues = conversation between two people
Interface = rules followed by each person during conversation.

5. The Process of Designing Interfaces and Dialogues
User-focused activity
Employs prototyping methodology:
Collect info.
Construct prototype
Assess usability
Make refinements
Follows the same questions that are answered in the forms and reports design process
Who, What, When, Where, How.??????

6. Deliverables and Outcomes
Same as the Forms and Reports Deliverables.
Narrative overview: Title (Name), User, Task, System and Environment characteristics.
Sample Design: Form/Report Design and Dialogue Sequence (Storyboard)
Testing and usability assessment: Measuring Usability (Time To learn, rate of error).
With one exception:
Dialogue sequence: the ways a user can move from one display to another.
Specifications
Design

7. Design specification for interfaces and dialogues

8. Interaction Methods & Devices
Interface: a method by which users interface with an information system.
Methods of Interaction for designing usable interfaces include:
Command Language Interaction
Menu Interaction: (Pop-Up & Drop-Down)
Form Interaction
Object Based Interaction
Natural Language Interaction

9. Interaction Methods 1) Command Language Interaction
Command Language Interaction: Users enter explicit statements into a system to invoke operations within a system.
Difficult to interact with – requires remembering commands, names, syntax.
Good for expert users.

10. Interaction Methods 2) Menu Interaction
Menu Interaction: a method in which a list of options is provided and specific command is invoked by user selection of a menu option.
Menu complexity varies according to the needs of a system and capabilities of development environment.
Single menu
Hierarchies (levels)
Two common placement methods:
Pop-up
Drop-down

13. Interaction Methods 2.1) Pop-Up Menu
A menu positioning method that places a menu near the current cursor position
Used to:
Group commands for a certain job
Provide a list of possible use
Fill a table with valid values

14. Interaction Methods 2.2) Drop-Down Menu
A menu positioning method that places the access point of the menu near the top-line of display; when accessed, menus open by dropping-down onto display.
Provide consistency and efficient display space
Toolbars? Input Device Menus?
Most advanced operating environments, such as Microsoft windows or the Apple Macintosh, provide a combination of both pop-up and drop-down menu.

15. Interaction Methods Guidelines for Menu Design
Quit

16. Poor Menu Design

17. Good Menu Design

18. Interaction Methods 3) Form Interaction
A highly intuitive human-computer interaction whereby data fields are formatted in a manner similar to paper-based forms.
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

20. Interaction Methods 4) Object-Based Interaction
A human-computer interaction method in which symbols are used to represent commands or functions.
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
Used to display desktops in modern operating systems and starting interfaces.

22. Interaction Methods 5) Natural Language Interaction
A human –computer interaction method whereby inputs to and outputs from a computer based application are in a conventional spoken language such as English.
Not as viable (practical) as other interface methods.
Can be tedious, frustrating and time-consuming (might require learning).
Used in a narrow domains (database quires, accessibility)
Might be applied using voice entry systems

23. Hardware Options for System Interaction
Keyboard
Mouse
Trackball
Joystick
Touch Screen
Light Pen
Graphic Tablet
Voice

24. Usability Problems with Hardware Devices
Adequate Feedback
(extent to which device provides adequate feedback for each operation)
keyboard, mouse, joystick, trackball, graphics tablet, voice
Speed( cursor movement speed)
keyboard
Pointing Accuracy( ability to precisely direct cursor)
joystick, touch screen, light pen, voice
Visual Blocking (extent to which device blocks display when using)
touch screen, light pen
User Fatigue( potential for fatigue over long use)
Movement Scaling (extent to which device movement translates to equivalent screen movement)
keyboard, mouse, joystick, trackball, graphics tablet, voice
Durability (lack of durability or need for maintenance (e.g., cleaning)
trackball, touch screen

26. Designing Interfaces Guidelines for: Designing Interface Layouts
Structuring Data Entry fields
Controlling Data Input
Providing Feedback
Providing Help

27. 1. Designing Interface Layouts
Use Standard formats similar to both paper-based forms and reports.
Forms have several general common areas :
Header information
Sequence and time-related information.
Instruction or formatting information
Body or data details
Totals or data summary
Authorization or signatures
Comments.

28. paper-based form for reporting customer sales activity.

29. computer-based activity form reporting customer sales activity.

30. Users should be able to move freely between fields
Another concern when designing the layout of computer-based forms is:-
Screen navigation on data entry: screens should be left-to-right, top-to-bottom as on paper forms
Flexibility and consistency :
Users should be able to move freely between fields
Data should not be permanently saved until the user explicitly requests this
Each key and command should be assigned to one function:
Cursor capabilities.
Editing capabilities.
Exit capabilities.
Help capabilities.

31. 2. Structuring Data Entry Rules
Never require data that are already on-line or that can be computed (time,date,….)
Defaults
Always provide default values when appropriate (loan)
Units
Make clear the type of data units requested for entry
(currency)
Replacement
Use character replacement when appropriate (lookup value/autocomplete)
Captioning
Always place a caption adjacent to fields
Format
Provide formatting examples(decimal points,.$,…)
Justify
Automatically justify data entries (text to left,numbers to right)
Help
Provide context-sensitive help when appropriate

32. Entering Text

33. 3. Controlling Data Input
One objective of interface design is to reduce data entry errors
Achieved by anticipating user errors and designing features into the system’s interfaces to avoid, detect and correct data entry mistakes
Sources of data errors:
Appending: adding additional characters
Truncating: losing characters
Tran scripting: entering invalid data into a field
Transposing: reversing the sequence of characters

35. Controlling Data Input
Although DBMS can ensure data validity, it is faster and easier to correct erroneous data before they are stored. If a DBMS cannot perform these tests, then you must design the tests into program modules. An example of one item that is a bit sophisticated, self-checking digits, is shown in Fig 12-14

37. Studies single errors: a becomes b (60% to 95% of all errors)
J. Verhoeff (Error Detecting Decimal Codes, Mathematical Centre Tract 29, The Mathematical Centre, Amsterdam, 1969, cited in Wagner and Putter, "Error Detecting Decimal Digits“.
single errors: a becomes b (60% to 95% of all errors)
omitting or adding a digit (10% to 20%)
adjacent transpositions: ab becomes ba (10% to 20%)
twin errors: aa becomes bb (0.5% to 1.5%)
jump transpositions: acb becomes bca (0.5% to 1.5%)
jump twin errors: aca becomes bcb (below 1%) [lower for longer jumps]
phonetic errors: a0 becomes 1a [since the two have similar pronunciations in some languages, e.g. thirty and thirteen] (0.5% to 1.5%)

38. Schemes for detecting decimal number errors
ISBN mod 11 check
IBM check (used with most credit cards)
Electronic Funds Transfer routing number check
UPC check (used on product bar codes)
Verhoeff's dihedral group D5 check

39. 4. Providing Feedback
Feedback is very important in any conversation between people!
Similarly, in a human-computer interaction, system feedback is vital for a satisfactory interaction
There are three types of system feedback
Status Information
Prompting Cues
Error and Warning Messages

40. Error and Warning Messages
Status Information
Keeps users informed of what is going on in system
Displaying status information is especially important if the operation takes longer than a second or two
Using different textual and visual effects
Progress Bars, Status Bars, Mouse Icons
Prompting Cues
Best to keep as specific as possible
ID ____________
Enter Student ID: _ _ _ _ _ _ _ _
Error and Warning Messages
Messages should be specific and free of error codes and jargon
User should be guided toward a result rather than scolded
Use terms familiar to user
Be consistent in format and placement of messages

42. 5. Providing Help
Place yourself in user’s place when designing help Guidelines:
Simplicity
Help messages should be short and to the point
Organization
Information in help messages should be easily absorbed by users
Demonstration
It is useful to explicitly show users how to perform an operation (Tutorials, Animation)

43. Poor Design of a HELP display

44. Hypertext-based help system for Microsoft’s Internet Explorer 5.

45. Providing Help Context-Sensitive Help
Enables user to get field-specific help
Users should always be returned to where they were when requesting help
Help and Support technologies
Built-in help files.
HTML Help (CHM files: Windows Compiled Help)
Online Help and Support
Knowledge Based (KB) and User Forums
Virtual Assistants

46. Many commercially available systems provide extensive system help.

47. Designing Dialogues
Dialogue: The sequences of interaction between a user and a system.
Dialogue design: The process of designing these overall sequences .

48. Guidelines for the Design of Dialogues
1. consistency: same labels, and same information locations on all displays.
2. Shortcut &sequence: allow short cuts for advanced users.
3. Feedback
4. Closure: indication of dialogue ending.
5. Error handling: reasons and suggestions.
6. Reversal: undo and double confirmation.
7. Control: acceptable timing for data dealing.
8. Ease

49. The dialogue design process has three major steps:
Designing the dialogue sequence
Building a prototype
Assessing Usability
Define the dialogue sequence. How?
By having a clear understanding of the user, task, technological and environmental characteristics.
Transform this activities into Dialogue Diagramming.
Dialogue Diagram: A formal method for designing and representing human-computer dialogues using box and line diagrams

50. Dialogue Diagram Consists of a box with three sections
Top: Unique display reference number
Middle: Contains the name or description of the display
Bottom: Contains display reference numbers that can be accessed from the current display

52. Dialogue diagram for Customer Info System User can choose any item
Reference No of display
Reference No of return display
Description of display
Item 2
User can choose any item
User can choose different customer

53. Step 2: Building Prototypes Step 3: Assessing Usability
Often optional activities
Task is simplified by using graphical design environment
Assessing usability was discussed in the previous chapter:
Time to learn
Speed of performance
Rate of errors
Retention over time
Subjective satisfaction

54. Designing Interfaces and Dialogues in Graphical Environments (GUIs)
To become an effective GUI designer, you need to:
Become an expert user of the GUI environment
Understand how other applications have been designed
Understand standards for menus and forms
Gain an understanding of the available resources and how they can be used
Become familiar what can be done for each control
Improve flexibility (more than one way to archive a task)

55. Dialogue Design Issues in GUIs
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 – e.g. Installation process.
Dialogue diagramming helps analysts better manage the complexity of designing graphical interfaces