Design Sketching and Prototyping

Facets of Design

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

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”

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

First Mouse (Douglas Engelbart and William English, 1964)

Norman’s Refrigerator

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

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

How much time to choose

How much time

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

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

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)

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

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

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?)

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

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

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!

Examples of Sketches

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

Movie Ticket, 3 different example designs

Movie Ticket, 2

Movie Ticket, 3

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

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

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

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: www.dreamspark.com Adobe Dreamweaver free trial: https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver Dreamweaver CS5 (Adobe) in Clusters Many others

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 !

Digital watch – User Instructions two main modes limited interface - 3 buttons button A changes mode

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?

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,000.00 and 10.000,00 kr) Separate interface resources from system’s functionality Allow users to specify locale for their interface (e.g., Fiji or NZ)

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.

Gestures Hitch hiking (thumb up, hand moving sideways)

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

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

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

Gestures Let’s hope its true

Gestures

Gestures

Gestures Terminate / cut

Gestures Love (Am Sign Language)

Gestures Whoa, stop, … End

Gestures Trading Floor Hand Signals 1 100 10 Fall 2010

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)

Pictograms

Pictograms

Pictograms

Pictograms

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