The Principles of Interface

Slide 1

Slide 1 text

Designing Interface Core Principles And Considerations

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Sentence diagramming

Slide 4

Slide 4 text

Interface diagramming Product (noun) Buy (verb) Costs (adverb) Look (verb) Costs (adjective)

Slide 5

Slide 5 text

The Language of Interface Graphical (understanding) • Layout • Objects • Type • Color • Line • Hierarchy • Relationships Interactive (doing) • Affordances • HUD • Feedback • Modes • Input • Navigation

Slide 6

Slide 6 text

DOING Interactive Interface Design

Slide 7

Slide 7 text

Affordances

Slide 8

Slide 8 text

Buttons Look Pushable

Slide 9

Slide 9 text

Buttons with meaning

Slide 10

Slide 10 text

Links Look Clickable

Slide 11

Slide 11 text

Links Have Hierarchy

Slide 12

Slide 12 text

On Subtlety When you don’t want to interrupt an action, be subtle (think of footnotes). If they are reading, don’t bother them. When you need to prompt an action, subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.

Slide 13

Slide 13 text

HUD Heads Up Display: Information user needs nearby to be effective

Slide 14

Slide 14 text

A integrated approach

Slide 15

Slide 15 text

An email HUD All HUD, no content

Slide 16

Slide 16 text

A social HUD

Slide 17

Slide 17 text

Feedback

Slide 18

Slide 18 text

Inputs

Slide 19

Slide 19 text

Form Principles • Consider Context • Set expectations • Use appropriate inputs • Give sift and clear feedback • Ask for less • AB test

Slide 20

Slide 20 text

Forms http://www.lukew.com/ff/entry.asp?1502

Slide 21

Slide 21 text

21 Navigation IA made visible “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper

Slide 22

Slide 22 text

22 Most IA is invisible • A lot of work no one sees • Synonym rings, etc • If it was seen, is would be too much • We show only a subset

Slide 23

Slide 23 text

23 The magic number? • 13 tabs– no one saw them. Six tabs, everyone saw them

Slide 24

Slide 24 text

24 But not everything is simple masthead Global links Folders Mail tools ad Other properties upsell Web search Related Services tip inbox ads ad Related Services upsell Mail tools Log out inbox Write mail And there isn’t even content!

Slide 25

Slide 25 text

25 Navigation orders complex pages

Slide 26

Slide 26 text

26 Understanding Navigation Message and Access Where Am I? What's Nearby? What's Related To What's Here? Global Navigation Local Navigation Content Lives Here, With Contextual Navigation Inline Or Separate.

Slide 27

Slide 27 text

27 Global navigation • Where you are – Brand/masthead • Where you can go (site offering) – Top level categories • Safety nets – Where’s my (shopping cart/account/help???)

Slide 28

Slide 28 text

28 Global Navigation ‘03 vs ‘12

Slide 29

Slide 29 text

29 Global navigation

Slide 30

Slide 30 text

30 Global navigation ‘03 vs ‘12

Slide 31

Slide 31 text

31 Local Navigation • I’ve started down the path • Now what? – What are the categories of items? – What are the siblings of what I see? – What are the subcategories?

Slide 32

Slide 32 text

32 Local Navigation ‘03 vs ‘12

Slide 33

Slide 33 text

33 Local Navigation 2003

Slide 34

Slide 34 text

Secondary navigation is now temporal

Slide 35

Slide 35 text

35 Local Navigation

Slide 36

Slide 36 text

36 Contextual navigation • Inline links • Related items • Document management

Slide 37

Slide 37 text

37 Inline links

Slide 38

Slide 38 text

38 Related items

Slide 39

Slide 39 text

39 Pagination Useful to reduce page download speed and cognitive overload. Annoying for printing. Impossible to predict what you’ll get Users would rather scroll than click

Slide 40

Slide 40 text

40 Ad negotiation

Slide 41

Slide 41 text

41 Print/email/clip

Slide 42

Slide 42 text

42 Sort

Slide 43

Slide 43 text

43 Secondary Navigation • Site Maps • Indexes • Table of Contents

Slide 44

Slide 44 text

44 Have you ever seen this page?

Slide 45

Slide 45 text

45 How about this one?

Slide 46

Slide 46 text

46 How about this one?

Slide 47

Slide 47 text

47 You can make it helpful “After testing several different sitemap designs on users, I decided to try putting one on every page of my small Columbian web site. I then decided to track how often it was used for navigation. It turns out the sitemap is used for over 65% of all navigation done on the site.” -- Usability Report by Peter Van Dijck of poorbuthappy.com (Guide to Columbia) http://www.webword.com/reports/sitema p.html

Slide 48

Slide 48 text

48 Conventions It is certainly probable, then, that placing these objects in expected locations would give an e-commerce site a competitive edge over those that do not… -- Examining User Expectations for the Location of Common E-Commerce Web Objects Usability News 4.1 2002

Slide 49

Slide 49 text

49 Conventions If 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability. If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability. If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way. -- Jakob Nielsen, November 14, 1999 Alertbox column "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson

Slide 50

Slide 50 text

50 Conventions • Some things are becoming de rigor • Deviate when you’ve got something better • Not because you are bored "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson

Slide 51

Slide 51 text

51 Now combine • Follow expectations based on conventions • Design a hierarchy based on task importance • Err on the side of simplicity

Slide 52

Slide 52 text

Homework • Analyze two competitors, one complementor – Layout – Inputs/functionality – Groupings – Hierarchy – Trust/reassurance Product (noun) Buy (verb) Costs (adverb) Look (verb) Costs (adjective)

Slide 53

Slide 53 text

UNDERSTANDING Graphic Design

Slide 54

Slide 54 text

Designing to Understand Use • Hierarchy • Layout • Images • Type • Color • Line • Relationships • Progression For • Importance • Sequence • Location • Reassurance • Motivation • Involvement • Seduction

Slide 55

Slide 55 text

WHAT IS THE SINGLE MOST IMPORTANT THING?

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

HIERARCHY GIVES CLARITY Law of Focal Point The idea that a point of interest, something emphasised or different will catch and hold the viewers attention (Chang, 2002). LOOK LOOK LOOK LOOK LOOK

Slide 62

Slide 62 text

WHAT ORDER SHOULD I LOOK?

Slide 63

Slide 63 text

LAYOUT Order and Composition

Slide 64

Slide 64 text

PAINTING

Slide 65

Slide 65 text

PAINTING

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Comics are read in the west left to right, like a page. However, good artists add visual elements to help you flow. http://samkieth.blogs pot.com/

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

TYPE

Slide 73

Slide 73 text

I am a serifed font I am sans-serif

Slide 74

Slide 74 text

I am Times New Roman Hey, I’m arial

Slide 75

Slide 75 text

I am Comic Sans I am the devil

Slide 76

Slide 76 text

I am Impact LOL

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Display fonts aren’t Use them only for titles. (Hi, I’m Georgia, and I’m always welcome!)

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

COLOR

Slide 83

Slide 83 text

Cheaters Tricks • One color, with variations. One accent. Period • Use a generator site http://www.colourlovers.com/ • Use nature http://boxesandarrows.com/natural- selections-colors-found-in-nature-and- interface-design/

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

nature

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

IF PHOTO-HEAVY, USE LITTLE COLOR

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

LINE

Slide 97

Slide 97 text

Warm, hand drawn lines= Artisanal

Slide 98

Slide 98 text

Lines gently reinforce the grid = scientific

Slide 99

Slide 99 text

Simple lined Navigation = Artwork

Slide 100

Slide 100 text

Grid edged with lines=Modrian=Modern

Slide 101

Slide 101 text

RELATIONSHIPS

Slide 102

Slide 102 text

Which pair of pants are now 39.99?

Slide 103

Slide 103 text

Which car is 49.99?

Slide 104

Slide 104 text

If you are putting boxes around things to make it clear, you probably should start over

Slide 105

Slide 105 text

DIFFERENCE & CONTRAST See http://contrastrebellion.com/

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

PROGRESSION Take advantage of the medium

Slide 108

Slide 108 text

This is a very tall page

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

This one too

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

This is a long page

Slide 122

Slide 122 text

Flipboard moves in a variety of directions

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

Even if you use the “wrong” gesture, Flipboard reacts correctly.

Slide 126

Slide 126 text

GRAPHIC DESIGN HACKS Fake it til you make it

Slide 127

Slide 127 text

Minimalist Design • Only use one font. Preferably helvetica. • Only use three, all very very different. Perhaps a fourth for footer text. • Only use one color, with variations, and one “accent” color. • Turn on the grid (if you are using photoshop, etc) • Never align center. • Don’t use stock photography, unless you have awesome taste. It has no soul. • Have a hierarchy

Slide 128

Slide 128 text

Cheats • Patterns • Kits like this • Libraries • Odesk • Conference proceedings You can’t buy taste

Slide 129

Slide 129 text

Homework • Analyze two competitors, one complementor • Do wire frames for three key screens • Optional: begin interfaces