INDE/TC 455: User Interface Design. Module 5.4 Phase 4 Task Analysis, System Maps, & Screen Designs

Transcription

1 INDE/TC 455: User Interface Design Module 5.4 Phase 4 Task Analysis, System Maps, & Screen Designs

2 Project sequence Phase A 3B 4 5A 6A 5B 6B Activity Project Assignment Project Prospectus Project Characterization Persona Generation Scenario Generation Task Analysis, Maps, Screen Designs Interface Representation: Flip or Simulations Interface Evaluation: Field Trial - 1 Interface Representation: Prototypes Interface Evaluation: Field Trial - 2 Final Interface Configuration Class Presentation Final Report Due Date 26 Sep 6 Oct 15 Oct 20 Oct 27 Oct 3 Nov 7 Nov 17 Nov 21 Nov 1 Dec 3 Dec 5 Dec 8 Dec

3 Task Analysis, System Maps, & Screen Designs Starting Phase 4: A - Task Analysis B - System Map C - Screen Design

4 Task Analysis

5 WHAT? Task Analysis - 1 The actions a user must take with a tool to perform a specific 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

6 HOW? Task Analysis Use storyboard to identify the overall goal(s) 2. Separate goals into specific objectives (maybe with different starting conditions 3. Use persona to perform specific tasks with a hypothetical tool

7 Task Analysis 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 of task -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

8 Task Analysis 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

9 Task Analysis Template Task to be performed: Step # Step to be performed What need to know How know it Way performed Feedback

10 SMIT Storyboard Student project Seattle Movies, Information & Tickets

11 Smit-1

12 Smit-2

13 Smit-3

14 Smit-4

15 Smit - 5

16 Smit-6

17 Smit-7

18 SMIT - 8

19 SMIT-9

20 SMIT - 10

21 SMIT - 11

22 SMIT - 12

23 SMIT - 13

24 SMIT - 14

25 SMIT - 15

26 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 but want to select from what is playing

27 Project: Seattle Movies, Information, Theaters (SMIT) Task to be performed: At home. Don t know which movie to attend. Want to select movie by type and content. Step # 1 Step to be performed What need to know How know it Way performed Feedback Determine what movies are playing at Seattle Theaters 2 Select a list of movies from a particular genre Review content of 3 movies playing within a specific genre How to get a list of movies How select a genre of movies How look at content of movies Read instructions from screen See genre types from screen Read instructions Use SMIT handcontroller on home TV set and select from menu of options (e.g. current movies, genre) Use SMIT controller to scroll down list of genre Use SMIT controller to select a particular review See menu list and then list of movies with general genre of movie type (e.g. horror, drama, comedy, etc.) See movie list in selected genre Written critic review given for each movie selected Option decide to view a trailer of the movie Decide what movie want to attend and select theatre based on location Option get directions to theater How look at trailers How select particular theatre How select map & driving directions Read instructions (e.g. do you want to see a trailer of this movie?) Reading instruction Reading instruction Use SMIT controller to select movie trailer Use SMIT controller to select specific movie Use SMIT controller to select map and/or driving instructions See movie trailer List of theaters and their locations where selected movie is playing and playing times Get directions to movie from current location (e.g. mapquest) option to print

28 System Maps

29 System Maps - 1 WHAT? A hierarchical representation of all the possible states and 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

30 System Maps -2 WHY? Use the system map to: WHEN? Understand the scope of the system Begin to specify functionality and relationships between functions Group similar functions on related screens Test usability After defining the tasks that the application will support and before designing screens for the system

31 System Maps - 3 HOW? 1. Conduct a task analysis to understand what the tool needs to do. 2. At top level: show primary choices the user has available to accomplish the task. 3. Each choice on the top level will branch to a lower level of the system map or enable the user to leave the application.

32 HOW? System Maps Use Post It notes again as in the task analysis to group related functions on separate pieces of paper which represent individual screens in you system. (Note: screen may be virtual or imaginary) 5. Each function should point to a route through the system which enables the user to accomplish the tasks.

33 HOW? (cont.) System Maps Cluster graphically related functions (this will help with screen layouts). 8. Provide a way to backtrack, go to other places, or to escape out of the system in a consistent manner. 9. Decide if the user needs a new screen to display new information without leaving current screen.

34 HOW? (cont.) System Maps Try out your system map with users: Can the find their way around? Can they do what they want to do?

35 SMIT System Map Main Menu Movie Titles Theaters Category Time Movies at theater x, y, z Directions Movies in category Movies by Time/Date Preview Clip Movie Summary Order Tickets Critic s Reviews Print Directions =primary screen =popup screen

36 See Kitchen Maestro System Map

37 Screen Designs

38

39

40

41

42

43 About Task Analysis & system maps Chicken & egg problems (what comes first..task analysis or system map) System maps need to show all functionality projected for system Only need to do detailed task analysis and screen designs for 3-4 of most critical functions/features Reasonable level of detail in task analysis