3 User Interface Principles From Code to Product - PowerPoint PPT Presentation

Instructions From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course

Instructions From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course

Comparisons From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course

Offer, don’t ask From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course

Offer, don’t ask Car$ /bin/set-temperature 73f Temperature set OK Car$ /bin/rear-demister on COMMAND NOT RECOGNIZED From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course

Overviews From Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course

Autosuggest From Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course

Show what’s old From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course

Show what’s new From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course

Consistency Source: bhc3.com From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course

Learned mapping From Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course

Learned affordance From Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course

Learned idioms From Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course

Lecture 3 • Introduction • Vision • Cognition • Memory • Action • Emotion From Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course

Action http://www.85qm.de/up/BigRedButton.swf From Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course

Goals and subgoals Make my friend feel better Wait for flowers Call Send flowers to friend online to arrive friend up Find a flowers website Order the flowers Open web Go to Type in Choose the best site browser google.com “flowers” f l o w e r s From Code to Product Lecture 3 — UI Principles — Slide 82 gidgreen.com/course

Execute—Evaluate Try Was the Next Define something subgoal YES! subgoal… subgoal NO sensible reached? From Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course

Execute—Evaluate Choose the best site Wikipedia Looks OK, but Seems to be UK only first. Back! only. Back! Looks perfect. Seems really We’re done! pricey. Back! From Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course

Enabling evaluation • Every user action – Key presses and mouse clicks • Instant results, or… – Waiting cursor (0.1s … 1s) – Progress bar (>1s) • If invisible… – Confirmation message – Activity logs From Code to Product Lecture 3 — UI Principles — Slide 85 gidgreen.com/course

Evaluation From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course

Information scent • Information = food – We follow a ‘scent’ • Links and category names – Don’t make up words! • Provide feedback – Scent getting stronger • Gain vs cost – Good content, easy to find From Code to Product Lecture 3 — UI Principles — Slide 87 gidgreen.com/course

Direct manipulation Photo by garryknight From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course

Direct manipulation From Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course

Reversibility From Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course

Dangerous actions From Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course

Dangerous actions From Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course

Common actions From Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course

Common actions From Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course

Lecture 3 • Introduction • Vision • Cognition • Memory • Action • Emotion From Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course

Emotion From Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course

Waiting… From Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course

Time limits Moment of perception 0.01 sec Stylus input on screen Hand–eye coordination 0.1 sec Clicks, drags, keys Gap in conversation 1 sec Waiting without progress bar Concentration on mini-task 10 sec Wizard step, field entry From Code to Product Lecture 3 — UI Principles — Slide 98 gidgreen.com/course

Avoid insults From Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course

Bestow achievements From Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course