Sato and Salvador, interactions 6(5)

1. Jeff Hawkins, the inventor of the Palm Pilot, was said to have carried a small block of wood around in his shirt pocket … As various everyday situations arose, he would take out the block of wood and imagine how he would use the device. Sato and Salvador, interactions 6(5)

2. Task Centered System Design • An end-users perspective • exactly who would use the system to do exactly what? • Phases: • 1. Identification identify specific users and articulate their concrete tasks • 2. Requirements decide which of these tasks and users the design will support • 3. Design base design representation & dialog sequences on these tasks • 4. Walkthrough Evaluations using your design, walk through these tasks to test the interface Adapted from Lewis, C. and Rieman, J. (1993) Task-Centered User Interface Design: A Practical Introduction. http://hcibib.org/tcuid/

3. What is Task Analysis? Methods to analyse human actions: • what people do • what things they work with • what they must know

4. An Example • in order to clean the house • get the vacuum cleaner out • fix the appropriate attachments • clean the rooms • when the dust bag gets full, empty it • put the vacuum cleaner and tools away • Person must know about: • vacuum cleaners, their attachments,dust bags, cupboards, rooms etc.

5. Approaches to task analysis • Task decomposition • splitting task into (ordered) subtasks • general method • Observe the task • Collect unstructured lists of words and actions • Organizeusing notation or diagrams • Aims: • describe the actions people do • structure them within task / sub-taskhierarchy • describe the order of subtasks

6. Textual HTA description Hierarchy description ... 0. in order to clean the house 1. get the vacuum cleaner out 2. get the appropriate attachment 3. clean the rooms 3.1. clean the hall 3.2. clean the living rooms 3.3. clean the bedrooms 4. empty the dust bag 5. put vacuum cleaner and attachments away ... and plans Plan 0: do 1 - 2 - 3 - 5 in that order. when the dust bag gets full do 4 Plan 3: do any of 3.1, 3.2 or 3.3 in any order depending on which rooms need cleaning Note: only the plans denote order

7. Types of plan fixed sequence - do 1 then 2 then 3 optional tasks - if hall needs cleaning but other rooms do not then do 3.1 wait for events - when dust bag is full do 4 cycles - do 3 while there are still dirty rooms time-sharing - do 0; at the same time …(listen to music) discretionary - do any of 3.1, 3.2 or 3.3 in any order mixtures - most plans involve several of the above

8. Hierarchical Task Analysis Method: • get list of tasks • group tasks into higher level tasks • decompose lowest level tasks further Problem: Stopping rulesHow do we know when to stop?Is “empty the dust bag” simple enough?expand only relevant tasksMotor actions: lowest sensible level

9. HTA for programming a VCR.

10. What can we use task analysis for? In General: Requirements capture and systems design • lifts focus from system to use • suggests candidates for automation • uncovers user's conceptual model

11. What can we use task analysis for? Detailed interface design!! • object/action lists suggest interface objects • task frequency guides default choices (for text boxes / drop down lists) • existing task sequences guide the order of the dialogue design

12. Existing task sequences guide dialogue design • Using our tasks and plans we can begin to build user / system dialogues…

13. From user tasks to screen interactions • A key task in developing interactive systems is taking our analysis of ‘concrete’ or real tasks and ‘mapping’ them on to an interaction sequence. • We need to know about actions (commands), objects to be controlled, information to be input (all of which can be captured in the task analysis)

14. Example: buying a book in town • I enter a book shop • I use the labels on the shelves to select the type of book: “science fiction” • The books are presented alphabetically – I choose the author: “William Gibson” • I select the book “Neuromancer” • I could browse for more books, but I decide to leave and pay. • I visit the till, present the book and my debit card. • The book is scanned. • My debit card is validated. • The book is wrapped and given to me. • I leave the shop.

15. Example: Buying a book online • I enter the URL of the shop • I follow a link to browse by genre – selecting “science fiction” • OR I use the search facility to find books by “William Gibson” • I select the book “Neuromancer” • I am given the choice: “add to shopping cart and continue browsing” or “check out now” – I choose to check out. • I am presented with a form to enter my email address, delivery address and debit card number. I do this and click “buy” • The site shows me a “confirm” page – with all the details I entered – it allows me to correct any mistakes in my data. I click “confirm”. • An email is sent to me confirming all the details given, promising delivery within 48 hours.

16. Example: Buying a book online • In this example the interaction design for the online book shop maps closely onto my experience of buying books in a physical book shop – it matches my ‘mental model’ of the task. • I would have a problem if the online shop asked for my debit card before allowing me to select a book (that wouldn’t happen in a ‘real’ shop) • I would have a problem if I was asked to give unnecessary information about myself when paying (e.g. my income, where I heard about the shop, whether I’d like to sign up to the mailing list) – again this would not happen in a ‘real’ shop.

17. So now we know that: • Task analysis can be used to guide our decisions about the ‘flow’ or order of interaction in interface design – to bring it close to users’ mental models of the task – and to eliminate unnecessary elements from the interaction. But we also need to know about: • The controls and input elements (widgets) that we can use to capture information from users, or to trigger system commands. • and • How to design the visual layout of input forms for maximum clarity and intelligibility.

18. HTML Form elements

19. HTML Form elements • There are literally hundreds of usability errors that can happen if form elements are not used properly. • Please read ‘Using web widgets wisely’ (lecture handout) for an insight to these problems. • User testing is one of the fastest ways of ‘debugging’ forms design.

20. Example form errors • Which is the better interaction? Why?

21. Example form errors • Which is the better interaction? Why?

22. Visual design and layout of forms • ….Is just as important as interaction order, and the correct use form elements. • Page or form layout should guide the user’s eyes – highlighting the primary information, and making the relationship between linked pieces of information visible. • To understand how we perceive visual information it is useful to look at gestalt theories of visual perception.

23. AJAX scripting • Many designers are replacing default HTML form elements with Flash forms, Ajax elements, others – the problem being that users are confronted with limitless numbers of ways to fill a form. • http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php

24. Principles of Visual Perception • Created by the Gestalt school of psychologists • Focused on perception, how the brain interprets stimuli and the resulting judgments about the world • How humans interpret visual stimuli is of particular interest to web designers • Influences interface design

27. Constructs in language, including referents like "those things" and collective nouns like "a bunch of flowers" point to an underlying human cognitive model that represents groups rather than individual items in many cases. Psychological experiments in memory capacity show, too, that humans can remember more items when they encapsulate sets of them in groups than when they attempt to recall all items individually.

28. Gestalt Laws. Similarity - Two visual stimuli that have a common property are seen as belonging together. Proximity -Two visual stimuli that are close to each other are seen as belonging together. Closure - If a set of stimuli almost encloses an area or could be interpreted as enclosing an area, the viewer sees the area. Good-Continuation - Given a juncture of lines, the viewer sees as continuous those lines that are smoothly connected.

29. Gestalt Laws Similarity Two visual stimuli that have a common property are seen as belonging together Proximity Two visual stimuli that are close to each other are seen as belonging together Closure If a set of stimuli almost encloses an area or could be interpreted as enclosing an area, the viewer sees the area Good-Continuation Given a juncture of lines, the viewer sees as continuous those lines that are smoothly connected.

30. Gestalt Laws • These principles explain how users make judgments about what is related and what is unrelated, based on visual cues • Two are of particular importance: • Proximity (items close together are related) • Similarity (items with similar appearance are related)

31. Visual Elements and Proximity

32. Visual Elements and Proximity

33. Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Relating screen elements • Proximity • alignment • white (negative) space

34. Visual Elements and Similarity

36. Closure

37. Closure

38. The Gestalt Toolkit • What you need: • Word processor and printer • Scissors • Pritt Stick or Blu-Tack • Highlighter pen • Method: • Type up all interface elements in the word processor. Print and cut out the elements. Play with rules of proximity, similarity, closure and continuity. • USABILITY TEST THE DESIGN!

39. Hints for prototyping forms: Work out a logical, or task related, information flow Identify the field elements that belong to each task segment Decide about the ‘outliers’ (information that cannot be grouped with other items) – should they be added to a task or given their own ‘space’? Use proximity or colour to separate the task segments (use headings?) Decide whether to break up the task segments onto different pages. (use a linear navigation between segments) Don’t forget about closure