INDE/TC 455:User Interface Design

Module 5.4 – Phase 4 –TaskAnalysis, System Maps, & Screen

Designs

Project sequence

8 DecFinal Report95 DecClass Presentation83 DecFinal Interface Configuration71 DecInterface Evaluation: Field Trial - 26B

21 NovInterface Representation: Prototypes5B17 NovInterface Evaluation: Field Trial - 16A7 NovInterface Representation: Flip or Simulations5A3 NovTask Analysis, Maps, Screen Designs427 OctScenario Generation3B20 OctPersona Generation3A15 OctProject Characterization26 OctProject Prospectus126 SepProject Assignment0

Due DateActivityPhase

Task Analysis, System Maps, & ScreenDesigns

• Starting Phase 4:– A - Task Analysis– B - System Map– C - Screen Design

Task Analysis

Task Analysis - 1• WHAT?

– The actions a user must take with a tool to perform aspecific task leading to an overall goal.

– Includes:• Steps of a task

– What the user does– What the tool does

• Knowledge users must have to perform each step• Tools (of interface) used to perform• Constraints or boundaries of the task• Environment in which task is performed

Task Analysis - 2• HOW?

1. Use storyboard to identify the overall goal(s)2. Separate goals into specific objectives (maybe with

different starting conditions3. Use persona to perform specific tasks with a

hypothetical tool

Task Analysis - 3

4. Use Post-It Notes to identify specific objectives,actions (what the user does vs. what the tool does)

use a different color Post-It for different aspects oftask

-what the user is trying to accomplish-what is the user thinking-what does the user need to know-what action does the user take-what does the tool do as a response

Task Analysis - 45. Identify what the user needs to know to

perform each step-Does the tool give this information-Does the user know this information (a priori,

training etc.)6. Rearrange post-its into a hierarchy of

equivalent levels and into each category

Task Analysis TemplateTask to be performed:

Step#

Step to be performed What need to know How know it Way performed Feedback

SMIT Storyboard

Student projectSeattle Movies, Information &

Tickets

Smit-1

Smit-2

Smit-3

Smit-4

Smit - 5

Smit-6

Smit-7

SMIT - 8

SMIT-9

SMIT - 10

SMIT - 11

SMIT - 12

SMIT - 13

SMIT - 14

SMIT - 15

SMIT Task Analysis

• Option A:– Already know movie want to attend but

don’t know where it is playing• Option B:

– Don’t know which movie to attend butwant to select from what is playing

Task to be performed:

At home. Don’t know which movie to attend. Want to select movie by type and content.

Step#

Step to be performed What need to know How know it Way performed Feedback

1Determine whatmovies are playing atSeattle Theaters

How to get a list ofmovies

Read instructionsfrom screen

Use SMIThandcontroller onhome TV set andselect from menu ofoptions (e.g. currentmovies, genre)

See menu list and thenlist of movies with generalgenre of movie type (e.g.horror, drama, comedy,etc.)

2 Select a list of moviesfrom a particulargenre

How select a genre ofmovies

See genre typesfrom screen

Use SMIT controllerto scroll down list ofgenre

See movie list in selectedgenre

3Review content ofmovies playing withina specific genre

How look at contentof movies

Read instructions Use SMIT controllerto select a particularreview

Written critic review givenfor each movie selected

4

Option…decide toview a trailer of themovie

How look at trailers Read instructions(e.g. do you want tosee a trailer of thismovie?)

Use SMIT controllerto select movie trailer

See movie trailer

5

Decide what moviewant to attend andselect theatre basedon location

How select particulartheatre

Reading instruction Use SMIT controllerto select specificmovie

List of theaters and theirlocations where selectedmovie is playing andplaying times

6Option…get directionsto theater

How select map &driving directions

Reading instruction Use SMIT controllerto select map and/ordriving instructions

Get directions to moviefrom current location (e.g.mapquest)…option toprint

Project: Seattle Movies, Information, Theaters (SMIT)

System Maps

System Maps - 1• WHAT?

– A hierarchical representation of all the possible statesand routes through a user’s interface

• Top level = entry screen• Each available function represented somewhere on the

hierarchy• Related functions are grouped and represented at equal

levels on system map• Functionality gets more specific as you transverse down

through hierarchy

System Maps -2• WHY?

– Use the system map to:• Understand the scope of the system• Begin to specify functionality and relationships between functions• Group similar functions on related screens• Test usability

• WHEN?– After defining the tasks that the application will support and

before designing screens for the system

System Maps - 3• HOW?

1. Conduct a task analysis to understand what the toolneeds to do.

2. At top level: show primary choices the user hasavailable to accomplish the task.

3. Each choice on the top level will branch to a lower levelof the system map or enable the user to leave theapplication.

System Maps - 4• HOW?

4. Use Post It notes again as in the task analysis to grouprelated functions on separate pieces of paper whichrepresent individual screens in you system. (Note:screen may be virtual or imaginary)

5. Each function should point to a route through thesystem which enables the user to accomplish the tasks.

System Maps - 5• HOW? (cont.)

7. Cluster graphically related functions (this willhelp with screen layouts).

8. Provide a way to backtrack, go to other places,or to escape out of the system in a consistentmanner.

9. Decide if the user needs a new screen todisplay new information without leavingcurrent screen.

System Maps - 6• HOW? (cont.)

10. Try out your system map with users:• Can the find their way around?• Can they do what they want to do?

SMIT System MapMain Menu

Movie Titles Theaters Category Time

Movie Summary

Movies by Time/Date

Movies in categoryDirections

Critic’sReviews

PreviewClip

Order Tickets

Movies at theater x, y, z

Print Directions

=primary screen

=popup screen

See Kitchen MaestroSystem Map

Screen Designs

About Task Analysis & systemmaps

• Chicken & egg problems (what comes first..taskanalysis or system map)

• System maps need to show all functionalityprojected for system

• Only need to do detailed task analysis and screendesigns for 3-4 of most criticalfunctions/features

• ‘Reasonable’ level of detail in task analysis