Design Sketching and Prototyping

1. DesignSketching and Prototyping

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

3. Facets of Design

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

5. 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”

7. 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

8. Norman’s Refrigerator

9. Norman’s Gulf of Evaluation

10. Norman’s Two Gulfs

11. 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

12. How much time to choose

13. How much time

15. 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 • Based on the distance between two points • 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

16. 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

17. Fitt’s Law • Models movement time for selection tasks • The movement time for a well-rehearsed selection task • Increases as the distance to the target increases • Decreases as the size of the target increases

18. Fitt’s Law Time (in msec) = a + b log2(D/S+1) where a, b = constants (empirically derived) D = distance S = size ID is Index of Difficulty = log2(D/S+1)

19. Illustration of Fitt’s Law Time (in msec) = a + b log2(D/S+1) Same ID → Same Difficulty

20. Illustration of Fitt’s Law Time (in msec) = a + b log2(D/S+1) Smaller ID → Easier

21. Illustration of Fitt’s Law Time (in msec) = a + b log2(D/S+1) Larger ID → Harder

22. 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

23. 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!

24. Examples of Sketches

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

26. More Examples

27. Movie Ticket, • 3 different example designs

28. Movie Ticket, 2

29. Movie Ticket, 3

30. 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

31. Sketches vs. Prototypes • Differences in intent and purpose

32. Example of Full Prototype • Prototype of interface for controlling the paths of a robot

33. Resulting Prototype andFinal Design

34. Another Example • washing machine • Default->Temperature->Level->Mode • Do you want to use the default settings? • Water Temperature: Cold 10 ̊C • Water Level: Low 1/3 • Wash Mode: Delicate • Make sure you loaded clothes and added detergent. Tech Support Change Settings Yes START BACK Please contact 1-800-JNJ-WASH for any questions or feedbacks.

35. Principles of UI design • Focus on the user • Standards Example – Phone number • We uses 10 characters • Europe can be up to 15 characters • Color • 1 in 12 people are colorblind in some way • Red / Green is most common • Occurs mostly in males • Icons as a means of communication

36. Push Buttons • You click it, and something happens • Choose the title text carefully • Apple: • “Button names should be verbs that describe the action performed” • Microsoft: • “Aim for the shortest possible label; one word is best.” • “If possible, use label text that makes sense when read out of context — for example, when a user reads or hears only the label of the current control.”

37. Form Layout and Formatting • Prototype various alternatives and allow users to test them to ensure good layout and ease of use • Design considerations • Consistency of all forms in look and feel • Clear headings, labels, and logos • Distribution and order of data-entry fields and buttons according to traditions • Judicious or careful use of font sizes, highlighting, and colors

38. Examples of data-entry controls on an input form

39. Layout

40. Name: Alan Dix Address: Lancaster Name: Alan Dix Address: Lancaster Name: Alan Dix Address: Lancaster entering information • forms, dialogue boxes • presentation + data input • similar layout issues • alignment - N.B. different label lengths • logical layout • use task analysis (ch15) • groupings • natural order for entering information • top-bottom, left-right (depending on culture) • set tab order for keyboard entry  ?

42. The shopping cart page from the Rocky Mountain Outfitter Web site

43. Produce Final-Looking Graphics • Alternatively, could use Photoshop, Illustrator, etc. and produce final graphics • Designers want to show what real UI will look like • Details of the “look” • Web pages often use final graphics • Add “click-through”behaviors • Usually limited mostlyto screen transitions

44. Using PowerPoint to Prototype Go back • Add a shape, with a label • Add a hyperlink: • Select “Place in this document” • Create a slide for each mode of theapplication • Can add nice animations • Limitations: no textentry, no scripting, nodata validation Go first

45. 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

46. modes • lock to prevent accidental use … • 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 !

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

48. Navigation and Support Controls • Standard window interface contain controls for navigation and window manipulation • Maximize, Minimize, and Close buttons • Scroll bars • Record selection and record navigation arrows • Designers should add controls to move screens, close open windows, and to find and search • Browser forms also provide navigation and support controls that applications should support

49. a) The Main Menu form b) The Order Summary form Prototype forms for an order-centered approach to the dialog

50. 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?