Designing
Part-2 Designing Interfaces and Dialogues
1
Designing Interfaces and Dialogues
User-focused activity
Prototyping methodology of iteratively:
Collecting information
Constructing a prototype
Assessing usability
Making refinements
2
Designing Interfaces and Dialogues (Cont.)
Systems development life cycle (SDLC)
3
Interaction Methods and Devices
Interface: a method by which users interact with an information system
All human-computer interfaces must:
have an interaction style, and
use some hardware device(s) for supporting this interaction.
4
Methods of Interacting
Command line
Includes keyboard shortcuts and function keys
Menu
Form
Object-based
Natural language
5
Command Language Interaction
Command language interaction: a human-computer interaction method
whereby users enter explicit statements into a system to invoke operations
Example from MS DOS:
COPY C:[Link] A:[Link]
Command copies a file from C: drive to A: drive
6
Menu Interaction
Menu interaction: a human-computer interaction method in which a list of
system options is provided and a specific command is invoked by user selection
of a menu option
Pop-up menu: a menu-positioning method that places a menu near the current
cursor position
7
Menu Interaction (Cont.)
Drop-down menu is a menu-positioning method that places the
access point of the menu near the top line of the display.
When accessed, menus open by dropping down onto the display.
Visual editing tools help designers construct menus.
8
Various types of menu configurations
9
Menu Interaction (Cont.)
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
10
Menu Interaction (Cont.)
Menu building with Microsoft Visual Basic .NET
11
Form Interaction
Form interaction: a highly intuitive human-computer interaction
method 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.
12
Form Interaction (Cont.)
Example of form interaction from the Google
Advanced Search Engine
13
Object-Based Interaction
Object-based interaction: a human-computer interaction method in which
symbols are used to represent commands or functions
Icons: graphical pictures that represent specific functions within a system
Use little screen space and are easily understood by users
14
Object-Based Interaction (Cont.)
Object-based (icon) interface from the Option
menu in the Firefox Web browser
15
Natural Language Interaction
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
Based on research in artificial intelligence
Current implementations are tedious and difficult to work with, not as viable as
other interaction methods.
16
Hardware Options for System Interaction
Keyboard
Mouse
Joystick
Trackball
Touch screen
Light Pen
Graphics Tablet
Voice.
17
Designing Interfaces
Forms have several general areas in common:
Header information
Sequence and time-related information
Instruction or formatting information
Body or data details
Totals or data summary
Authorization or signatures
Comments
18
Providing Feedback
Three types of system feedback:
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
Error or warning messages: inform user that something is wrong,
either with data entry or system operation
19
Designing Dialogues
Dialogue design involves:
Designing a dialogue sequence.
Building a prototype.
Assessing usability.
20
Designing the Dialogue Sequence
Typical dialogue between user and Customer Information System:
Request to view individual customer information.
Specify the customer of interest.
Select the year-to-date transaction summary display.
Review the customer information.
Leave system.
21
Guidelines for Designing Human-
Computer Dialogues
Dialogue diagramming: a formal method for designing and representing
human-computer dialogues using box and line diagrams
22
Guidelines for Designing Human-
Computer Dialogues
Three sections of the box:
Top—contains a unique display reference number used by other
displays for referencing it
Middle—contains the name or description of the display
Bottom—contains display reference numbers that can be
accessed from the current display
23
Guidelines for Designing Human-
Computer Dialogues (Cont.)
Sections of a dialogue diagramming box
24
Guidelines for Designing Human-
Computer Dialogues (Cont.)
Dialogue diagram illustrating sequence, selection,
and iteration
25