Designing User Interface

Human Computer Interaction

8/29/2019 HCI 1
Content

Managing Design Evaluating Interface Software

Introduction Processes Designs Tools

1 2 3 4

8/29/2019 Human Computer Interaction 2

Computer-software development

Text Editor Programming Applications

Languages

Complex interfaces were accepted and even appreciated

8/29/2019 HCI 3
User Population Requirement

Mobile devices Instant e-business

messaging

Current users are not Their background is

dedicated to the more tied to their
technology work needs

Digital libraries

8/29/2019 HCI 4
UI Design: User

Accommodate the users Direct interaction with Early testing of low-

skills, goals, and users during the design fidelity prototypes,
preferences phase, the development revisions based on
process, and throughout feedback from users,
the system lifecycle and incremental
refinements

8/29/2019 HCI 5
UI Design: Usability

Usability engineering is Active participation from Usability test reports are

becoming a recognized large corporations and becoming standardized
discipline numerous small design,
test, and build firms

8/29/2019 HCI 6
 Managing Design
Processes
Designing User Interface

8/29/2019 HCI 7
Strategies
Three pillars of The Logical User-
Organizational successful user- Centered
design interface Interaction Design
development (LUCID)
Guidelines
Ethnographic
documents and
observation
processes
That gives
appropriate User-interface Participatory
emphasis to software tools design
support usability.

Expert review and Scenario

usability testing. development

8/29/2019 HCI 8
Organizational Design
Design should be

Creative Changeable Technical Appealing

Feasible Sense

Blend
that attracts users

8/29/2019 HCI 10
Carroll and Rosson design
characterization

Design is a process, not a state.

The design process is nonhierarchical.

The process is radically transformational

Design intrinsically involves the discovery of new goals.

8/29/2019 HCI 11
Effective Interface: Basic Questions

Who is the user? What is the task? What is the

environment in
which the system
will operate?

8/29/2019 HCI 12
The Three Pillars of Design

Successful User Interfaces

Expert
Guidelines User interface
reviews and
documents & software and
usability
processes tools
testing

Algorithms & Controlled

Theories & Models
Prototypes Experiments
Academic Research

8/29/2019 HCI 13
Guidelines should be considered for

Words, Icon, Graphics Screen Layout Input / Output Devices

Actions Sequence Training

8/29/2019 HCI 15
Guidelines

• Terminology (objects and

actions), abbreviations, and
Words, capitalization
Icons, • Character set, fonts, font sizes,
and styles (bold, italic, underline)
and • Icons, buttons, graphics, and line
thickness
Graphics • Use of color, backgrounds,
highlighting, and blinking

8/29/2019 HCI 16
Guidelines

• Menu selection, form filling, and dialog-

box formats
• Wording of prompts, feedback, and error
Screen- messages
• Justification, whitespace, and margins
• Data entry and display formats for items
layout and lists
• Use and contents of headers and footers
• Strategies for adapting to small and large
displays

8/29/2019 HCI 17
Guidelines

• Keyboard, display, cursor

Input control, and pointing
devices
and • Audible sounds, voice
feedback, touch input, and
Output other special devices
Devices • Response time for a variety
of tasks

8/29/2019 HCI 18
Guidelines

• Direct-manipulation
clicking, dragging, dropping,
and gestures
Action • Command syntax, semantics,
sequences and sequences
• Programmed function keys
• Error handling and recovery
procedures

8/29/2019 HCI 19
Guidelines

• Direct-manipulation clicking, dragging,

dropping, and gestures
Action • Command syntax, semantics, and
sequences
Sequences • Programmed function keys
• Error handling and recovery procedures

• Online help and tutorials

Training • Training and reference materials

8/29/2019 HCI 20
Preparing Guidelines Consider the 4Es
Education: Enforcement:
• Provide training • Guidelines distribution and
opportunities, give chances communication among
to discuss guidelines. stakeholders, establish
procedures that ensure
enforcement.

Exemption: Enhancement:
• Allow for exemptions, install • Constantly improve/refine
a process that allows for guidelines.
rapid adaptation if
necessary.

8/29/2019 HCI 21
The Three Pillars of Design

Successful User Interfaces

Expert
Guidelines User interface
reviews and
documents & software and
usability
processes tools
testing

Algorithms & Controlled

Theories & Models
Prototypes Experiments
Academic Research

8/29/2019 HCI 22
User-Interface Software Tools
Proposed displays is helpful for pilot tests

Difficulty in designing Realistic impression

• Customers / users may not • Printed version
have a clear idea of what the • On-screen display
system will look like. • Prototype of a menu system
8/29/2019 HCI 23
User-Interface Software Tools

Drawing or word processing tools

• Paint, Word, PowerPoint
8/29/2019 HCI 24
User-Interface Software Tools

Graphical environment
• Macromedia Director or Flash
8/29/2019 HCI 25
User-Interface Software Tools

Development environment
• Microsoft Visual Basic, C++, Eclipse,
Android Studio
8/29/2019 HCI 26
The Three Pillars of Design

Successful User Interfaces

Expert
Guidelines User interface
reviews and
documents & software and
usability
processes tools
testing

Algorithms & Controlled

Theories & Models
Prototypes Experiments
Academic Research

8/29/2019 HCI 27
Expert Reviews & Usability Testing

Expert review Tests with Surveys

methods intended users

Automated
analysis tools
8/29/2019 HCI 28
Development Methodology

LUCID

• Logical User-Centered Interactive Design

• Design Framework was developed at Cognetics
Corporation under the leadership of Dr. Charles
Kreitzberg
• Well-tested and widely used method
• It is a methodology for designing the interactional
components or “front end” of a software product
• Integrated with other software engineering
methodologies

8/29/2019 HCI 29
Development Methodology

LUCID
Logical User Centered Interactive Design
• The design process • The design model • Look and feel
builds on a strong fits the user's • Language
conceptual model. mental model rather • Screen objects &
than the technical layout
implementation • Navigation
model. • User assistance

8/29/2019 HCI 30
LUCID Stages

Envision Analyze Design

Release Build Refine

8/29/2019 HCI 31
LUCID Stages

8/29/2019 HCI 32
Stage 1: Envision
Objective: Develop a product concept

UI Roadmap
• Design team, project plan and budget
• Product vision among stakeholders
• Business objectives and needs
• Manage technical constraints
• Design process at “concept sketch level”

8/29/2019 HCI 33
Stage 2: Discovery/ Analyse
objective: Learn about the needs and skills of users

Plan
• Determine the types of user analysis
• Dividing the target population into user segments
• Prepare the team with background research in the subject domain as
appropriate

8/29/2019 HCI 34
Stage 2: Discovery/ Analyse
objective: Learn about the needs and skills of users

Gather Data
• Contextual observations
• User interviews
• Participatory explorations
• Usability tests
• Satisfaction surveys or benchmark testing
• Reuse of previous analysis.

8/29/2019 HCI 35
Stage 2: Discovery/ Analyse
objective: Learn about the needs and skills of users

Analyze User Requirements

• Current or ideal interactions
• Workflow or task interaction descriptions
• work-style observations
• Task matrix matching user segments to key tasks
• User assistance required to support performance

8/29/2019 HCI 36
Stage 3: Design Detail/ Refine
objective: Particularize the UI design

8/29/2019 HCI 37
Stage 4: Design Detail/ Refine

Complete the design Conduct usability Create design

Create the style guide
for all functionality evaluations specifications

• provide design • heuristic reviews • visual design rules • key screen

solutions for all • task walk-throughs • detailed screen prototype
tasks and functions with users design work • describe each
• formal usability • must conform to screen
testing for task industry or • the placement and
success corporate style functionality of each
• timed metrics or guides object on it as well
other scenarios as menus,
shortcuts.
8/29/2019 HCI 38
Stage 5: Build/ Implement

Complete Detailed Create User Support Software

Screen Designs Assistance Material Development
• dialogs or pages • screen text, tool • core software
• Icons or other tips, embedded development
graphics help, cue cards, • interface design
reference team supports
• tutorials, the developers as
documentation, necessary with
and quick start reviews and
guides design decisions
8/29/2019 HCI 39
Stage 6: Release/ Support

Create Design the Plan and Planning for

introduction installation implement the next
plan procedures follow-up version
evaluations

8/29/2019 HCI 40
8/29/2019 HCI 41
LUCID Project Development Process

8/29/2019 HCI 42
LUCID Project Development Process

8/29/2019 HCI 43
Self Study For You

 Ethnographic Observation
 Participatory Design
 Scenario Development

8/29/2019 HCI 44
 Evaluating Interface
Design
Designing User Interface

8/29/2019 HCI 45
Evaluation Method

Expert Usability Acceptance Evaluation During

Reviews Testing Tests Active Use

1 2 3 4

8/29/2019 Human Computer Interaction 46

Evaluating Interface Designs

Is it Ever Usable?
Assessment our designs
1. Behave as we expect
2. Meet user requirements.

8/29/2019 HCI 47
Evaluation

Evaluates Tests System

• Design • Usability
• Implementation • Functionality

Occurs
• Laboratory, Should be considered
• Field at all stages in the
• In collaboration with users design life cycle

8/29/2019 HCI 48
Evaluation Goal

Assess level of Assess effect of Identify specific

system functionality interface on user problems

8/29/2019 HCI 49
Evaluating
Usability
• Real User Doing real Task
Prototype / Product
Observe, not guide
Functionality:
• Observation of the output certain input
No attempt to analysis the code

Acceptability:
• Customer is satisfied software meets their requirements

8/29/2019 HCI 50
Evaluation during design life cycle.
GUI
Requirement
Specification

GUI User
GUI Testing
Analysis

GUI Design & GUI Task

Implementation Analysis

8/29/2019 HCI 51
Evaluation Where ?

Laboratory Working field

8/29/2019 HCI 52
Evaluation Plan

Stage of design Number of expected Criticality of the

users interface

Costs of product and Time available Experience of the

finances allocated for design and evaluation
testing team
8/29/2019 HCI 53
 Expert Review
Evaluation Method

8/29/2019 HCI 54
Expert Review
When: Who:
• Time depending on progress, • The same or new experts for
availability of experts, design every review
team ready?, budget?

Duration: Outcome:
• From a couple of hours to weeks • Formal report including
or more identified problems and
recommendations for changes
• Presentation and discussion with
the design team

8/29/2019 HCI 55
Expert Reviews Methods
Heuristic Evaluation:
• Review UI to determine compliance with a short list of design
heuristics (e.g., “The 8 golden rules of UI design”).
Guidelines Review:
• Checks a design against established guidelines documents.
Consistency Inspection:
• Verify consistency across several UI’s and within a UI,
Cognitive Walkthrough:
• The experts simulate users walking through the interface to carry
out typical tasks.
Formal Usability Inspection:
• Experts participate in a meeting/discussion with a moderator who
presents the interface and asks specific questions.
8/29/2019 HCI 56
Heuristic Evaluation

Give Expert heuristic, ask them to evaluate

• Eight Golden Rules

Specific to application area

• Box 4.1 Heuristics for gaming (Pinelle 2008)

• Provide consistent responses to user’s actions
• Allow users to customize video and audio setting,
difficulty, and game speed
• Provide users with information on game status.

8/29/2019 HCI 57
Guidelines Review

Interface is checked against organizational guidelines.

• Military
• Government
• Security
• Education

8/29/2019 HCI 58
Consistency Inspection

Verify consistency across family of interfaces

Check terminology, fonts, color, layout, i/o formats

Look at documentation and online help

Also can be used in conjunction with software tools

8/29/2019 HCI 59
Cognitive Walkthrough
Experts “simulate” being users going through the interface

Tasks are ordered by frequency

Good for interfaces that can be learned by “exploratory browsing”

(Wharton 1994) [novices]

Usually walkthrough by themselves, then report their experiences

(written, video) to designers meeting

Useful if application is geared for group the designers might not be

familiar with:
• Military, Assistive Technologies
8/29/2019 HCI 60
Formal Usability Inspection

Experts hold courtroom-style meeting

Each side gives arguments (in an adversarial format)

There is a judge or moderator

Extensive and expensive

Good for novice designers and managers

8/29/2019 HCI 61
Metaphors of human Thinking (MOT)

Experts consider metaphors for five aspects of human

thinking
• Habit
• Stream of thought
• Awareness and Associations
• Relation between utterances and thought
• Knowing

Appears better than cognitive walkthgrough and

heuristic evaluation

8/29/2019 HCI 62
Expert Review Approach

Ranked Recommendation

Bird’s-eye view:

Automated tools may be used. Eg.

WebTango

8/29/2019 HCI 63
Ranked Recommendation
Example

Drawbacks
• Expert reviewers may have lack of domain knowledge.
• Expert reviewers may not know user community.
• Different experts may say different things.
8/29/2019 HCI 64
Expert Review Approach
Bird’s-eye view:

• Put up print outs of the entire UI on a wall or a floor.

• Good for detecting unusual patterns, inconsistencies, etc..

8/29/2019 HCI 65
Evaluation

Evaluation
Expert Usability Acceptance During
Review Testing Testing Active Use

1 2 3 4

8/29/2019 Human Computer Interaction 66

 Usability Test
Evaluation Method

8/29/2019 HCI 67
Usability Testing
Measure
• User Performance

Task

System Design
8/29/2019 HCI 68
Usability Test Measures 5E’s
Effective:
• How completely and accurately the work is completed or goals reached

Efficient:
• How quickly this work can be completed

Engaging:
• How pleasant and satisfying it is to use

Error Tolerant:
• How the product prevents errors and can help user recover from mistakes

Easy to Learn:
• How well the product supports both the initial and continued learning
8/29/2019 HCI 69
Usability
Usability The idea is to place users in front of some
Testing version of the system under test and watch
Lab how these users try to use it.

As the users perform these tasks, they are

watched and recorded on video and by
logging their interactions with software

Actual users test the UI, commonly in a

lab-environment

8/29/2019 HCI 70
Usability Testing Lab

8/29/2019 HCI 71
Usability Testing Lab
Eye-tracking setup: the participant wears a helmet that monitors
and records where on the screen the participant is looking

8/29/2019 HCI 72
Usability Testing Lab

8/29/2019 HCI 73
Usability Testing
When?

8/29/2019 HCI 74
Usability Testing

8/29/2019 HCI 75
Usability Testing

8/29/2019 HCI 76
Usability Testing

8/29/2019 HCI 77
8/29/2019 HCI 78
Usability Testing
How?
Plan

Document
Choose
Recommen
participant
dation

Analyze Perform
Result Test

8/29/2019 HCI 79
Usability Testing Process
Purpose, goals, and objectives
Plan
Participant characteristics

Method (test design)

Task list
Test environment, equipment and logistics
Test moderator role
Evaluation measures (data to be collected)
Report contents and presentation

Collaboration with the design team, also consider

deadlines and budgets.
8/29/2019 HCI 80
Usability Testing Process
Orientation script
Test
Material Background questionnaire

Recording consent

Pre-test questionnaire

Data collection tools

Task scenarios

Post-test questionnaire

Debriefing topics
8/29/2019 HCI 81
Usability Testing
How?
Plan

Document
Choose
Recommen
participant
dation

Analyze Perform
Result Test

8/29/2019 HCI 82
Usability Testing Process
Choose Background, motivation, education
Participant
Experiences with the tasks

Natural language ability

Physical abilities

8/29/2019 HCI 83
Usability Testing
How?
Plan

Document
Choose
Recommen
participant
dation

Analyze Perform
Result Test

8/29/2019 HCI 84
Usability Testing Process
Perform Give participants time to work through system
Test Offer appropriate encouragement

Observe user behavior

Listen to user feedback

Facilitator stays quiet, observes, take notes

Exploring and reviewing the participant’s actions

during the test
Understand why every error, difficulty occurred for
session.
8/29/2019 HCI 85
Usability Testing Task
First What is your impression of this home page or
impression application?

Exploratory Open-ended / research-oriented

task
e.g. Find a cellular phone plan for yourself

Directed Specific / answer-oriented

tasks
e.g. Find contact information for customer support

8/29/2019 HCI 86
Usability Testing
How?
Plan

Document
Choose
Recommen
participant
dation

Analyze Perform
Result Test

8/29/2019 HCI 87
Usability Testing Process
Test Task success
Measures User’s ability to complete tasks

User attempts to complete a task or set of tasks

Task time

Errors

Efficiency: Number of steps required to perform a task

Like scale
Self-reported metrics Do you prefer A or B?
Questionnaires
8/29/2019 HCI 88
Usability Testing
How?
Plan

Document
Choose
Recommen
participant
dation

Analyze Perform
Result Test

8/29/2019 HCI 89
Usability Testing
Testing Summarize testing data in a usability specification
Report Optimal performance levels

Minimal levels of acceptance.

Benefits Test future prototypes or versions of the product

against it.
Provide confirmation of the progress and
recommendations for changes,
speeds up the development process and reduces costs.

8/29/2019 HCI 90
Usability Testing and Laboratories (cont.)

 Different Forms of Usability Testing:-

1. Paper Mockups
2. Competitive Usability Testing
3. Universal Usability Testing
4. Field Tests and Portable Labs
5. Remote Usability Testing
6. “Can you break this” Test

8/29/2019 HCI 91
Evaluation

Evaluation
Expert Usability Acceptance During
Review Testing Testing Active Use

1 2 3 4

8/29/2019 Human Computer Interaction 92

 Acceptance Test
Evaluation Method

8/29/2019 HCI 93
Acceptance Test

What Software system has met the

Determine requirement specifications

The system's compliance with the

Evaluate business requirements

System has met the required criteria

Verify for delivery to end users.

8/29/2019 HCI 94
Acceptance Test

Who Client

End User

Usually sets objective and

measurable goals for hardware and
software performance.
8/29/2019 HCI 95
Acceptance Test
Prerequisite Business Requirements must be available.

Application Code should be fully developed

Unit Testing, Integration Testing, System Testing,

Usability Testing should be completed
All the reported defects should be fixed and tested
before User Acceptance Test (UAT)

UAT Environment must be ready

Communication from System Testing Team that the

system is ready for UAT execution
8/29/2019 HCI 96
Acceptance Test

When

8/29/2019 HCI 97
Acceptance Test

8/29/2019 HCI 98
Acceptance Test
Measurable
Criteria Time to learn specific functions

Speed of task performance

Rate of errors by users

Human retention of commands over time

Subjective user satisfaction

8/29/2019 HCI 99
Acceptance Tests
An acceptance test for a food-shopping web site might specify the
following
Test A
The participants will be
 35 adults (25-45 years old)
 Native speakers with no disabilities
 Hired from an employment agency
 Moderate web-use experience (1-5 hours/week) for at least one
year
At least 30 of the 35 should complete the benchmark tests within 30
minutes

8/29/2019 HCI 100

Acceptance Tests
Test B
 Ten participants will be recalled after one week
 Carry out new set of benchmark tests
In 20 minutes, at least 8 should be able to complete tasks

In a large interface, there may be 8 or 10 such tests to carry out on

different components of the interface and with different user
communities.

8/29/2019 HCI 101

Acceptance Test

Fails

8/29/2019 HCI 102

Evaluation

Evaluation
Expert Usability Acceptance During
Review Testing Testing Active Use

1 2 3 4

8/29/2019 Human Computer Interaction 103

 Evaluating During Active Use
Evaluation Method

8/29/2019 HCI 104

Evaluation During Active Use
When After the release of the product.

Who Dedicated managers

User-services personnel
Maintenance staff.
Expected Perfection is not attainable

Percentage improvements are possible.

Considering Feedback

Improvements will be made in a future release

8/29/2019 HCI 105
Evaluation During Active Use
Strategies Interviews and focus-group
discussions
Continuous user-performance data
logging
Online or telephone consultants

Online suggestion box or e-mail

trouble reporting
Discussion groups and
newsgroups
8/29/2019 HCI 106
Evaluation During Active Use
Interviews and focus-group discussions
Pros Focus on specific issues of concern

Specific constructive suggestions can be obtained,

Possible to uncover hidden problems or usage pattern,

Cons costly, time consuming,

only consider a small fraction
of the user community

8/29/2019 HCI 107

Evaluation During Active Use
Continuous user-performance data logging

The patterns of system usage

Data
Speed of user performance
about
Rate of errors
Frequency of request for online assistance

8/29/2019 HCI 108

 Nielsen SiteCensus

8/29/2019 HCI 109

Evaluation During Active Use
Online or telephone consultants

Purpose Personal assistance

User problems, suggest improvements and potential

extension
Phone or Live chat or Remote desktop

Services builds customer loyalty and lead to better

UIs.

8/29/2019 HCI 110

Evaluation During Active Use
Online or telephone consultants

Example Netflix has 8.4 million customers, how many

telephone customer service representative?
375: Expensive, but higher customer satisfaction

Cheaper version are Bug Report systems

Windows, Chrome, Bugzilla

8/29/2019 HCI 111

Evaluation During Active Use
Online suggestion box or e-mail trouble reporting

Online e-mail or websites

error Automatic reporting tools
reporting
Online suggestion boxes

8/29/2019 HCI 112

Online Employee Suggestion Box Software by
Vetter

8/29/2019 HCI 113

Bugzilla Main page

 Bug report using Google’s Chrome browser

(http://www.google.com/chrome/)

8/29/2019 HCI 114

Evaluation During Active Use

 Bug report using Google’s Chrome browser

(http://www.google.com/chrome/)

8/29/2019 HCI 115

Evaluation During Active Use
Discussion groups and newsgroups

Online Discussion forums or newsgroups.

Discussion
Postings of open messages and questions
Comments and suggestions should be encouraged

8/29/2019 HCI 116

Google Discussion Group

8/29/2019 HCI 117

 Bug report using Google’s Chrome browser
(http://www.google.com/chrome/)

8/29/2019 HCI 118

Designing User Interface

Managing Design Evaluating Interface Software

Introduction Processes Designs Tools

1 2 3 4

Organizational Design Expert Review

Three Pillars of Design Usability Testing

LUCID Acceptance Testing

During Active Use

8/29/2019 Human Computer Interaction 119

 Software Tools
Designing User Interface

8/29/2019 HCI 120

Software Tools

Specification Interface-Building Evaluation and

Introduction Methods Tools Critiquing Tools

1 2 3 4

8/29/2019 Human Computer Interaction 121

Software Tools
Introduction Tools are graphical in their user interfaces,.

Build interfaces rapidly by dragging components and linking

functions together

Diverse web environment, interaction-capable machines such as

mobile devises, pocket PCs, game consoles, auditory interfaces, and
appliances with displays

New software tools must support greater plasticity

Universal usability i.e. content transformations

Device-independent programming

8/29/2019 HCI 122

 Software Tools: Mockplus

8/29/2019 HCI 123

 Software Tools: Mockplus

8/29/2019 HCI 124

 Software Tools: Mockplus

8/29/2019 HCI 125

Specification Method
Goal How do we specify the GUI

Natural Default language for specifications in any field is

Language English
Communication: sketchpad, or blackboard
Formal and Mathematics, Physics, Circuit design, Music
Semiformal
languages Grammars for command languages

Other Transition diagrams, Menu-tree structures, State

specification charts, Graphical specifications
methods

8/29/2019 HCI 126

Software Tools

Specification Interface-Building Evaluation and

Introduction Methods Tools Critiquing Tools

1 2 3 4

Grammar

Menu-selection and dialog-box trees

Transition Diagram

State Charts

8/29/2019 Human Computer Interaction 127

Specification Method
Grammar
Used to describe sequences of actions

Specify textual commands or expressions that a

program should understand.

Verify the validity of stereotypical computer forms

filled in by users, such as telephone-book entries

8/29/2019 HCI 128

Specification Method
Grammar In computer programming, Backus-Naur form
(BNF) is used to describe programming languages

High-level components are described as non-

terminals

Specific strings are described as terminals

8/29/2019 HCI 129

BNF Grammar Example- telephone-
book entry.
 <Telephone book entry> ::= <Name> <Telephone number>

 <Name> ::= <Last name>, <First name>

 <Last name> ::= <string>

 <First name> ::= <string>

 <string> ::= <character> | <character> <string>
 <character> ::= A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z

 <Telephone number>::= (<STD code>) <local number>

 <STD code>::= <0><digit><digit><digit>

 <local number>::= <digit><digit><digit><digit><digit><digit><digit>

 <digit>::= 0|1|2|3|4|5|6|7|8|9
8/29/2019 HCI 130
Example of a grammar for UI purposes:

E.g.:- Grammar describes the opening steps in a login process:

 <Session> ::= <U: Opening> <C: Responding>

 <U: Opening> ::= LOGIN <U: Name> < U : Password>
 <U: Name> ::= <U: string>
 < U : Password> ::= <U: string>
 <C: Responding> ::= <C: Successful> | <C : Error >
 <C: Successful> ::= HELLO [<U: Name>]
 <C : Error > ::= < C : String >

U: User C: Computer - Non-terminal depict the actor

8/29/2019 HCI 131

Specification Method
Menu-
Set of options displayed on screen
selection

Options visible:
less recall - easier to use
rely on recognition, so names should be meaningful
Less cognitive effort

Selected by using mouse, numeric or alphabetic keys

Menu systems can be:

purely text based, with options presented as numbered
choices
8/29/2019 HCI 132
Specification Method
Transition Consist of set of nodes (system states), links
Diagram between nodes (transitions), labels.

Many specialized TDs are available with

specific notations for specific application
domains (e.g., word-processing, ecommerce).

8/29/2019 HCI 133

Example
 Figure represents a numbered menu-selection system for restaurant reviews
that shows what happens when the user selects numbered choices: 1 (add a
restaurant to the list), 2 (provide a review of a restaurant), 3 (read a review), 4
(get help, also accessed by a?), 5 (quit), or any other character (error message).

8/29/2019 HCI 134

Specification Method
State Describe the states of different objects in its
life cycle.
Charts
So the emphasis is given on the state changes
upon some internal or external events.

Before drawing Identify important

objects to be analyzed.
Identify the states.

Identify the events.

8/29/2019 HCI 135

Example
 State chart of a simplified bank transaction system showing grouping of
states.

8/29/2019 HCI 136

Software Tools

Specification Interface-Building Evaluation and

Introduction Methods Tools Critiquing Tools

1 2 3 4

Will give as lab assignment

8/29/2019 Human Computer Interaction 137

Evaluation and Critiquing Tools
How to evaluate a UI?
First order Spelling
Link checking
# of displays
Completeness
Second order Menu tree depth

Action redundancies

Consistency
Third order Satisfaction

Task performance
8/29/2019 HCI 138