CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.
-
Upload
lee-gibson -
Category
Documents
-
view
220 -
download
0
Transcript of CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.
![Page 1: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/1.jpg)
CS5714 Usability Engineering
Design
Copyright © 2003 H. Rex Hartson and Deborah Hix.
![Page 2: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/2.jpg)
Design2
Topics
Usage scenarios Conceptual design Participatory design Detailed screen design Customized style guide Team exercise on design
![Page 3: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/3.jpg)
Design3
Introduction to Design
Revisiting the usability engineering life cycle
![Page 4: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/4.jpg)
Design4
Design
Scenarios bring to light:– Interaction objects, properties, relationships– Different views– Access and operations
Conceptual design – Overview of how system will work
Screen designs– Screen pictures– Labels and notes
Iteration
Copier design
![Page 5: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/5.jpg)
Design5
Design
Approaching interaction design Do NOT start with screen designs, widgets Do start with tasks, usage scenarios Need independent designers
– Expert users as designers might design for themselves, but not others
![Page 6: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/6.jpg)
Design6
Usage Scenarios
Scenarios: stories about people and their work activities
Work-oriented: focus on the needs and concerns of users– What customers and users would rather talk about
(than abstract models, specifications)– Relate functionality to business process
![Page 7: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/7.jpg)
Design7
Usage Scenarios
Scenarios reveal requirements – Scenarios facilitate agreement on requirements– Show how tasks will be carried out and how system
will provide functionality to enable tasks Also called design scenarios Where do they come from?
– Brainstorming– Ethnographic field studies– Participatory design– Reuse of similar designs
![Page 8: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/8.jpg)
Design8
Usage Scenarios
Scenarios highlight work-oriented user goals Scenarios make use the object of design Scenarios are envisioned design solutions! Scenarios evoke thought and discussion about
design
Delete button design scenario
![Page 9: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/9.jpg)
Design9
Usage Scenarios
Relationship to design specifications – Design situations are fluid; written specifications are
rigid– Scenarios offer a working design representation tied
directly to situation of use– Scenario-based design is bottom-up (the way
people usually think) Needs to be mixed with top-down structuring of task
analysis
![Page 10: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/10.jpg)
Design10
Usage Scenarios
Relationship to task analysis
– Same general goal– Complementary is
almost every way
Task Analysis Scenarios
General Specific
Formal Informal
Abstract Concrete
Completeness is goal
Deliberately incomplete
Addresses design structure
Addresses design details
![Page 11: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/11.jpg)
Design11
Usage Scenarios
Scenarios should capture and make obvious in design:– Tasks and task threads
Common, representative
Mission critical
Error and recovery situations
![Page 12: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/12.jpg)
Design12
Usage Scenarios
Scenarios should capture and make obvious in design:– User roles
– User actions on objects/artifacts
– User planning, thoughts, and reactions to system
– Environmental and work context (e.g., phone ringing)
Scenarios should drive preparation of representative tasks for usability evaluation
![Page 13: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/13.jpg)
Design13
Usage Scenarios
Scenarios go hand-in-hand with screen designs
How many scenarios should we expect?– Number of scenarios can be large, if product is
large, complex– Need different set of scenarios for each user class– May need tools to manage and maintain large set of
scenarios and correlate with screen designs
![Page 14: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/14.jpg)
Design14
Scenario Creation – Example
Example of usage scenario for Calendar:Sue, a patient with an existing appointment with Dr. Kevorkian for next Tuesday, calls secretary at the physician’s office. Sue is unable to keep her appointment, and needs to reschedule it. The secretary must locate the current appointment, find an open time slot that also is a time the patient is available, and re-enter patient information into the new time slot. While the secretary is doing this, another phone line is ringing and another patient is standing at the desk waiting to schedule a follow-up appointment with Dr. Kevorkian.
![Page 15: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/15.jpg)
Design15
Scenario Creation – Example
Note that scenario is just one instance of task thread
Note that temporal order of locating current appointment and finding open time slot could be reversed
Don’t let specificity of scenario force rigid design
![Page 16: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/16.jpg)
Design16
Scenario Iteration
Iteratively refine scenarios and screen designs via design walk-throughs
Sometimes it takes a large number of iterations to work out a consistent look and feel and to organize the functionality
Next: as exercise, identify user roles, actions, objects, object attributes, tasks, work context– The idea: extract these to drive design
![Page 17: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/17.jpg)
Design17
Marking Scenario Components – Example
Example of usage scenario for Calendar:Sue, a patient with an existing appointment with Dr. Kevorkian for next Tuesday, calls secretary at the physician’s office. Sue is unable to keep her appointment, and needs to reschedule it. The secretary must locate the current appointment, find an open time slot that also is a time the patient is available, and re-enter patient information into the new time slot. While the secretary is doing this, another phone line is ringing and another patient is standing at the desk waiting to schedule a follow-up appointment with Dr. Kevorkian.
Marked up scenario
![Page 18: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/18.jpg)
Design18
Scenario Creation – Exercise
Goal: to gain understanding of tasks, user roles, actions, and objects
Target system: Calendar Management System
Activities:
– Select one good representative task for each user class
– Construct a usage scenario.
– Make it up as you go!
– Get detailed and refer to actions and objects.
![Page 19: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/19.jpg)
Design19
Scenario Creation – Exercise
– Try to capture deep design issues, such as: Application objects, their properties, and
relationships among them How objects will be viewed conceptually (not
necessarily details of appearance) in interaction design
How user will access those objects Operations to be performed on the objects as
a result of user tasks How users will invoke and carry out those
operations, including navigation
![Page 20: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/20.jpg)
Design20
Conceptual Design
Conceptual design– At last: transition from information gathering to
design – Early sketch of how it all works– Where screen designs emerge
Develop conceptual model/metaphor– A chance to be creative with a “theme” for your
interaction design – Metaphor is analogy with something existing in real
world with similarities that can be leveraged for learning new system
![Page 21: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/21.jpg)
Design21
Conceptual Design
Develop some design details– Include navigation, screen layout, visual design
Uses initial design to encourage critical comments and iteration– Start evaluation this early with team, client, and key
users
![Page 22: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/22.jpg)
Design22
Conceptual Design – Example
Goal: to create a conceptual design from a scenario
Target system: Calendar Management System Activities:
– Tease out as much conceptual design information as possible, extrapolating from scenario where useful
Identify application objects: appointments
![Page 23: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/23.jpg)
Design23
Conceptual Design – Example
Identify application object properties: Date, time,
description, length (?), alarm or not
Relationships: only one object so far
– How objects are represented conceptually in user interaction design
By month, week, day, hour, time slots– Time slots can be empty or contain appointment– Implication: these are all “container objects”
– Access methods: how user get at objects
![Page 24: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/24.jpg)
Design24
Conceptual Design – Example
– Accessing an existing appointment By viewing, possibly preceded by search or navigation
through viewsGot “search” from needs analysis rather than from scenario
– Invoking and carrying out operations on objectsEventually more of this kind of detail needs to get into the scenarios
Menu? Pull-down? Small, fixed number of commands Implication for interaction style: Buttons or icons?
![Page 25: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/25.jpg)
Design25
Screen Design – Example
Goals:– To develop together initial screen designs, from
conceptual design, scenarios– To perform an early cognitive-based evaluation of
conceptual and screen designs
Assumptions:– Generic desktop platform (not specific to Windows,
Mac, etc.)
![Page 26: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/26.jpg)
Design26
Screen Design – Example
Activities– Draw pictures of screens, including menus, buttons,
icons, application objects– Label objects with behavior as appropriate– Do intuitive evaluation of design
Deliverables:– A few representative screen designs
![Page 27: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/27.jpg)
Design27
Screen Design – Example
Conceptual design might lead to something like
Cognitive/human factors analysis
– Design does not closely match user’s concept of a calendar
Paper calendar not necessarily the criterion. Be creative.
VIEW CONTROL
HOUR
DAY
WEEK
MONTH
VIEW ADD DELETE MODIFY
Note: Appointment
object in some view
container
Pull-down Menu?
VIEW CONTROL
HOUR
DAY
WEEK
MONTH
VIEW ADD DELETE MODIFY
Note: Appointment
object in some view
container
Pull-down Menu?
![Page 28: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/28.jpg)
Design28
Screen Design – Example
Can do better with direct manipulation – Eliminate explicit view control by selecting view
object – Add and modify by typing (editing) directly on text of
appointment
Lotus Notes design
![Page 29: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/29.jpg)
Design29
Screen Design – Example
Iteration: conceptual design revisited Access appointment objects by
– Selection and navigation on desk top– Search on content
Decisions about container objects Several months overlapped; current on top In month view select week or day to view
![Page 30: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/30.jpg)
Design30
VIEW LEVEL NAVIGATION
DAY
TIME SLOT
SELECT (ANY WEEK)
SELECT (ANY DAY)
SELECT (ANY MONTH)
SELECT (ANY DAY)
SELECT (ANY TIME SLOT)
SELECT (ANY TIME SLOT)
USE KEY-BOARD
SELECT (ANY MONTH)
SELECT (ANY WEEK)
SELECT (ANY MONTH)
SELECT (ANY WEEK)
FWD/BACK
BACK
FWD/BACK
SELECT (ANY DAY)
FWD
SELECT (ANY DAY)
START
TYPE/ EDIT
DESIGN DECISION: KEEP AT LEAST ONE INSTANCE EACH OF MONTH, WEEK, DAY ON SCREEN
FWD/BACK
WEEK DAYMONTHSELECT (ANY WEEK)
SELECT (ANY MONTH)
VIEW LEVEL NAVIGATION
DAY
TIME SLOT
SELECT (ANY WEEK)
SELECT (ANY DAY)
SELECT (ANY MONTH)
SELECT (ANY DAY)
SELECT (ANY TIME SLOT)
SELECT (ANY TIME SLOT)
USE KEY-BOARD
SELECT (ANY MONTH)
SELECT (ANY WEEK)
SELECT (ANY MONTH)
SELECT (ANY WEEK)
FWD/BACK
BACK
FWD/BACK
SELECT (ANY DAY)
FWD
SELECT (ANY DAY)
START
TYPE/ EDIT
DESIGN DECISION: KEEP AT LEAST ONE INSTANCE EACH OF MONTH, WEEK, DAY ON SCREEN
FWD/BACK
WEEK DAYMONTHSELECT (ANY WEEK)
SELECT (ANY MONTH)
VIEW LEVEL NAVIGATION
DAY
TIME SLOT
SELECT (ANY WEEK)
SELECT (ANY DAY)
SELECT (ANY MONTH)
SELECT (ANY DAY)
SELECT (ANY TIME SLOT)
SELECT (ANY TIME SLOT)
USE KEY-BOARD
SELECT (ANY MONTH)
SELECT (ANY WEEK)
SELECT (ANY MONTH)
SELECT (ANY WEEK)
FWD/BACK
BACK
FWD/BACK
SELECT (ANY DAY)
FWD
SELECT (ANY DAY)
START
TYPE/ EDIT
DESIGN DECISION: KEEP AT LEAST ONE INSTANCE EACH OF MONTH, WEEK, DAY ON SCREEN
FWD/BACK
WEEK DAYMONTHSELECT (ANY WEEK)
SELECT (ANY MONTH)
StateDiagram
![Page 31: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/31.jpg)
Design31
Screen Design – Example
Try to show as much appointment information as possible at each level (page preview idea)
![Page 32: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/32.jpg)
Design32
Iterated Screen Design – Example
Past Month
Search Help
Future Month
DeleteAppointment
May 1999
April 1999
March 1999
SUN MON TUE WED THU FRI SAT
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
SUN 11 MON 12 TUE 13 WED 14 THU 15 FRI 16 SAT 17
25 26 27 28 29 SATURDAY MARCH 17,1999
8:00
8:30
9:00
9:30
10:00
10:30
Select Week
Select Week
Select Week
Past Month
Search Help
Future Month
DeleteAppointment
May 1999
April 1999
March 1999
SUN MON TUE WED THU FRI SAT
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
SUN 11 MON 12 TUE 13 WED 14 THU 15 FRI 16 SAT 17
25 26 27 28 29 SATURDAY MARCH 17,1999
8:00
8:30
9:00
9:30
10:00
10:30
Select Week
Select Week
Select Week
Past MonthPast Month
Search Help
Future Month
DeleteAppointment
May 1999
April 1999
March 1999
SUN MON TUE WED THU FRI SAT
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
SUN 11 MON 12 TUE 13 WED 14 THU 15 FRI 16 SAT 17
25 26 27 28 29 SATURDAY MARCH 17,1999
8:00
8:30
9:00
9:30
10:00
10:30
Select WeekSelect Week
Select WeekSelect Week
Select WeekSelect Week
![Page 33: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/33.jpg)
Design33
Iterated Screen Design – Example
Day view No close box; keep on desk top
Scroll up or down to midnight
MONDAY, OCTOBER 2, 1999
8:00
8:30
5:00HELP DELETE APP'T
Click here to edit, type
No close box; keep on desk top
Scroll up or down to midnight
MONDAY, OCTOBER 2, 1999
8:00
8:30
5:00HELP DELETE APP'T
Click here to edit, type
No close box; keep on desk top
Scroll up or down to midnight
MONDAY, OCTOBER 2, 1999
8:00
8:30
5:00
MONDAY, OCTOBER 2, 1999
8:00
8:30
5:00HELP DELETE APP'T
Click here to edit, type
![Page 34: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/34.jpg)
Design34
Iterated Screen Design – Example
Search dialogue box
CANCELSEARCH
ENTER STRING TO SEARCH FOR:
MAY
....
CANCELSEARCH
ENTER STRING TO SEARCH FOR:
MAY
....
![Page 35: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/35.jpg)
Design35
Participatory Design
Active involvement of all roles, especially users, during early design
People around table with post-Its, pencils Pros: More accurate information about tasks,
work context; lets users influence design decisions; builds rapport/buy-in with users
![Page 36: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/36.jpg)
Design36
Participatory Design
Cons: Costly; may create antagonism; users not trained designers
Nevertheless, experiences are usually positive, helped by:– Good, experienced leadership– Careful selection of users
![Page 37: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/37.jpg)
Design37
Participatory Design
PICTIVE (Plastic Interface for Collaborative Technology Initiatives through Video Exploration)
Users actually sketch UI design Democratic – everyone has same say about
things Use paper, plastic, tape, sticky notes, etc. Video recording of scenario walk-through
shown to other users, designers, managers
![Page 38: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/38.jpg)
Design38
Participatory Design
What can we get from talking users?– Some of what users need in tasks– Usually very incomplete, unintegrated– It’s just an input; you are still the designer– Need to extend to design that works for all users
over all tasks– You are asking users what they do, not what they
think is best for them
![Page 39: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/39.jpg)
Design39
Custom Style Guide – An integral Part of Design
Every project needs one! Style guide documents visual and
other general design decisions that apply in multiple places
Major force for consistency Develop iteratively in parallel with product and
maintain throughout UI development process
![Page 40: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/40.jpg)
Design40
Custom Style Guide
Documented internally within an organization Must be accepted by team members, not just
author(s) Very specifically worded Support re-use of design decisions,
consistency Describes specific interaction styles, layouts,
formats, wordings, button labels, etc. Include sample screen sketches; make it visual
![Page 41: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/41.jpg)
Design41
Custom Style Guide
Details about:– Fonts and text usage– Color usage, background graphics, other common
design elements– Icon usage, position, design– Widget usage, position, design – dialogue boxes,
menus, message windows, toolbars, etc.– Formats (e.g., for dates)– Consistent use of defaults
![Page 42: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/42.jpg)
Design42
Team Exercise – Scenarios and Screen Designs
Goal: To develop some usage scenarios and an initial design for the screen(s) and interaction objects for your ticket kiosk system
Assumptions– Specialized remote workstation
Generic interaction style Hardened against vandalism, etc.
– Don’t assume much computer, browser knowledge
![Page 43: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/43.jpg)
Design43
Team Exercise – Scenarios and Screen Designs
Keep it simple– Tons of functionality doesn’t necessarily help learn
the process
Make it different from Web applications of the same type that you already know
![Page 44: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/44.jpg)
Design44
Team Exercise – Scenarios and Screen Designs
Activities– Write one or two usage scenarios for your kiosk
Make it up on the fly Do this quickly; you can clean them up as you go Get detailed and refer to user roles, tasks, actions, and
objects
– Start your screen designs with home page Show broad functionality as user tasks Draw pictures of screens, including menus, buttons, nav
bars, icons Add text labels to explain things as appropriate
![Page 45: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/45.jpg)
Design45
Team Exercise – Scenarios and Screen Designs
Activities– Design one main task thread over a few more
pages/screens– Don’t go into much breadth for the whole system yet
Cautions– Don’t get too involved in human factors issues yet
(e.g., icon appearance or menu placement) Control time spent arguing; learn the process!
– Keep it simple and cut corners (e.g., from CMS: number of days in a month, what day each month starts on)
![Page 46: CS5714 Usability Engineering Design Copyright © 2003 H. Rex Hartson and Deborah Hix.](https://reader036.fdocuments.us/reader036/viewer/2022062309/5697bfef1a28abf838cba0b7/html5/thumbnails/46.jpg)
Design46
Team Exercise – Scenarios and Screen Designs
Hints– If team members have different ideas for a feature,
consider offering both via "preferences" – Use yellow "stickies" to be flexible in design
Deliverables– A few representative screen designs on paper; be
sure to do home page
Schedule: due by end of class or bring to next class