1. Design Sketching and Prototyping

2. Facets of Design

3. Need to design at multiple levels
Low Level vs. High Level
Need to design at multiple levels
High level: Overall metaphors, styles, approaches
Low level: Detailed interactions and content

4. High Level Conceptual Models, Mental Models, Mappings
Designer’s vision of the system
Overall metaphors and organization
Often inspired by other designs, e.g.
“Folders like Outlook” (vs. Gmail’s search, later tags)
“Scrolling like iPhone”

6. Low Level Design How the specific Interactions work Widget Choice
E.g., types of menus
Pull-down
Cascading
Tear off
Pop-up menus
Context menus
Physical buttons

7. First Mouse (Douglas Engelbart and William English, 1964)

8. Norman’s Refrigerator

9. Movement time
Reaction time
Response time
Response time = reaction time + movement time
Can you give an example in sport for each of above?

10. Hick’s Law (Reaction Time)
William Edmund Hick
British Psychologist 1952
Ability of a human to quickly predict an outcome based on the number of simultaneous stimuli
Software Example
n options and constant b then time is

11. How much time to choose

12. How much time

14. Fitts’ Law
Paul Fitts
Psychologist at Ohio State University 1954
Mathematical model used to predict how long it takes a user to move from one point on a screen to another
Movement time T, a&b stands for the inherent speed of the device, D is the distance from the starting point to the center of the target, W is the width of the target measured along the axis of motion

15. Toolbars This is annoying not useful Edges and corners?
ARMH: Fitts' Law

18. Mini case study #1 The original “Macintosh 7”
Macintosh (1984) was first big success of GUIs
Originally came with 7 interactors built into toolbox (hence used for majority)
Most not actually original w/ Mac
Xerox Star (+ Smalltalk & earlier)

19. Fitts’ Law (cont’d)
Farther away an object is, the longer it takes to acquire with a mouse
In order to keep the average acquisition speed, object needs to be larger

20. Aside: a different scrollbar design
Openlook scroll bar
“Elevator” bar
Thumb (with up/down buttons)
Page extent indicator

22. Windows menus at top of windows, vs. Mac menus at top of screen
Fitts’ law effects
Windows menus at top of windows, vs. Mac menus at top of screen
Interesting Fitts’ law effect
thin target vertically (direction of move)  high required accuracy
hard to pick
but… (anybody see it?)

24. Determining the Constants in Fitt’s Law
To determine a and b design a set of tasks with varying values for D and S (conditions)
For each task condition
Multiple trials conducted and the time to execute each is recorded and stored electronically for statistical analysis
Accuracy is also recorded
Either through the x-y coordinates of selection or
Through the error rate — the percentage of trials selected with the cursor outside the target

25. Sketching and Prototypes
Sketch – used to decide what to design
“Prototype” – Simulation of interface
Buxton differentiates:
Getting the right design, vs. Getting the design right

26. Sketches & Ideation Designers invent while sketching
Don’t have design in their head first and then transfer it to paper
Aristotle: “The things we have to learn before we do them, we learn by doing them”
Everyone sketches
Whiteboards, paper
Don’t have to be “artistic”
Be creative!

27. Examples of Sketches

28. “Storyboards” Multiple sketches of a behavior = “storyboards”
Comic strip of what happens
Example: a photo browser

29. Movie Ticket,
3 different example designs

30. Movie Ticket, 2

31. Movie Ticket, 3

32. Sketches vs. Prototypes
Different purposes:
Sketch for ideation, refinement
Prototypes for evaluation, usability
Prototypes: more investment, more “weight”
More difficult to change, but still much easier than real system

33. Sketches vs. Prototypes
Differences in intent and purpose
Sketch
Prototype
Suggest
Describe
Explore
Refine
Question
Answer
Propose
Test
Provoke
Resolve
Tentative
Specific
Noncommittal
Depiction

34. Using PowerPoint to Prototype
Add a shape, with a label
Add a hyperlink:
Select “Place in this document”
Create a slide for each mode of the application
Can add nice animations
Limitations: no text entry, no scripting, no data validation
Go back
Go first

35. Html editing Can use web editors to prototype any kind of interface
Tricky for detailed layout
Can edit html using
Microsoft Word (not recommended)
Microsoft Expression Web (Blend)
free for students:
Adobe Dreamweaver
free trial:
Dreamweaver CS5 (Adobe) in Clusters
Many others

36. modes lock to prevent accidental use … if lock forgotten
remove lock - ‘c’ + ‘yes’ to confirm
frequent practiced action
if lock forgotten
in pocket ‘yes’ gets pressed
goes to phone book
in phone book … ‘c’ – delete entry ‘yes’ – confirm … oops !

37. Digital watch – User Instructions
two main modes
limited interface buttons
button A changes mode

38. International UIs International graphical interfaces
Resemblance icons
Reference icons
Arbitrary icons
Non-iconic graphics can also be problematic
International usability engineering
Follow same usability engineering process for each interface
Avoid complicated language, idiom, or local culture references
Simply change language?
use ‘resource’ database instead of literal text … but changes sizes, left-right order etc.
Font Substitution?

39. International UIs Guidelines for internationalisation
Time and measurement vary
Dates are problematic (e.g., D/M/Y, M/D/Y, Y.M.D, Y-M-D, etc)
Perhaps force month to be written (e.g., 17-Sep-01)
Metric or imperial units (e.g., °C or °F)
Use the appropriate character set
Difficulties translating between lowercase and uppercase (Ǽ & ǽ)
Sorting order can be different (e.g., ß)
Numbers and currency vary
Separators differ (e.g., $10, and ,00 kr)
Separate interface resources from system’s functionality
Allow users to specify locale for their interface (e.g., Fiji or NZ)

40. Gestural Interfaces
Gesture recognition is a topic in computer science and language technology with the goal of interpreting human gestures via mathematical algorithms.
Gestures can originate from any bodily motion or state but commonly originate from the face or hand.
Many approaches have been made using cameras and computer vision algorithms to interpret sign language.

41. Gestures
Hitch hiking (thumb up, hand moving sideways)

42. Gestures
Pointing to real and abstract objects and concepts (index, hand)

43. Gestures
Finger Counting
Thumb often used for “1”, esp abroad

44. Gestures-8
I beg of you …
I hope so …

45. Gestures
Let’s hope its true

46. Gestures

47. Gestures

48. Gestures
Terminate / cut

49. Gestures
Love (Am Sign Language)

50. Gestures
Whoa, stop, …
End

51. Gestures
Trading Floor Hand Signals 1
100 10
Fall 2010

52. Gestures
Conducting an orchestra (variety of both gestures with arms and body)
Traffic control of cars and airplanes (hands flat pointing or moving)
Shaping of imagined objects (hands tracing out curves and shapes)
Martial arts, fighting (variety of movements of arms and body)

53. Pictograms

54. Pictograms

55. Pictograms

56. Pictograms

57. Example
You have been asked to design an application for the next generation of mobile phones. The precise technology has yet to be decided upon. The aim of the system is to enable users to book tickets for sports events and for concerts using their phone. Briefly explain how you would go about designing the interface to this system and how you would conduct formative evaluation during the initial stages of development