interface fundamentals

of 106 /106
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike @cwodtke INTERFACE DESIGN FUNDAMENTALS

Upload: christina-wodtke

Post on 11-Aug-2014

5.558 views

Category:

Design


13 download

DESCRIPTION

From Stanford BUS 40: User Experience Design for the NonDesigner How do we get from task flows to interface screens? How do we make sure they are clear and effective? Covering key design ideas when designing the user interface.

TRANSCRIPT

Page 1: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

@cwodtke

INTERFACE DESIGN FUNDAMENTALS

Page 2: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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

Page 3: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

A framework is the way elements will be organized on a page for use and understanding

Page 4: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

From last week’s homework 5min

Page 5: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

A task analysis

From Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner

Page 6: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 7: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Each task could have a page

Page 8: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share AlikeFirst Yahoo 1994

1995: first graphic logo

Remind you of something?

Page 9: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Including the schedule creator tool…

Page 10: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Wizards: Many boxes,many pages

Page 11: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

When to Use Wizards• Multi step process

• Must be completed in order

• The audience is not technically savvy

• Bandwidth is low

Page 12: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 13: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

What if we put the tasks with the thing they were modifying?

Page 14: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

It’s a toolbarTools here Item affected

here

Page 15: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

ToolbarsTools here Item affected

hereAnd here

And here

Photoshop: toolbars on steroids

Page 16: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

The web uses toolbars more sparingly

Page 17: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

ToolbarsTools here

Item affected here

A simpler design is better for

infrequent use.

Page 18: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 19: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 20: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 21: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 22: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 23: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?

Page 24: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 25: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Two videos sites.The “meal” is the video, and the tools to consume (or play with) it are arrayed around the main meal.

(P.S. There are toolbars too)

Page 26: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

WHICH PAIR OF PANTS ARE NOW

39.99?

Page 27: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

WHICH CAR IS 49.99?

Page 28: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Why is the response so far from the invitation?

Page 29: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 30: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

When designing the page, group items by similarity and similarity of task (navigation items together, editing items together)

Give them visual importance based on user number, usage frequency and importance to business.

Page 31: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

• Create “zones” for functionality groups.

• You can group them by putting white space around them, or use lines

• Remember to keep tools close to the thing your working on

Page 32: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER

Page 33: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

5 Minutes

Page 34: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

5 Minutes

Page 35: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

10 Minutes

Page 36: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 37: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 38: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 39: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

BUTTONS HAVE MEANING

Page 40: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 41: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

LINKS HAVE MEANING

Page 42: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 43: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Subtlety will send you to the poor house.Tell your users what to do.

Clarity is relaxing, not annoying.

Page 44: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 45: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 46: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 47: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 48: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 49: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

10 Minutes

Page 50: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 51: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 52: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 53: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 54: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 55: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

On the product page (apples!)For the company to succeed

2 minutes

Page 56: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

5 minutes

Page 57: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 58: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

PAINTING

Page 59: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

PAINTING

Page 60: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 61: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 62: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Comics are read in the west left to

right, like a page. However, good

artists add visual elements to help

you flow.

http://samkieth.blogspot.com/

Page 63: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 64: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 65: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 66: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 67: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

I AM TIMES NEW ROMAN

Hey, I’m Arial

Page 68: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

I AM COMIC SANSI am the devil

Page 69: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

I AM IMPACTLOL

Page 70: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 71: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Georgia is always welcome

Page 72: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.

Page 73: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

To be great is to be misunderstood.

Page 74: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.

Page 75: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

To be great is to be misunderstood.

Page 76: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh.

To be great is to be misunderstood.

Page 77: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

To be great is to be misunderstood.

Page 78: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 79: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 80: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 81: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 82: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

NATURE

Page 83: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 84: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 85: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 86: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 87: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 88: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 89: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 90: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 91: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?

Page 92: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

92

Poetics: Control, power, precision

Page 93: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

93

Values: Lightweight, easy, sketchy, imprecise

Page 94: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 95: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?

Page 96: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

96

Power, control, precision,

Page 97: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

97

OmmWriter

Beauty, peace, zen

Page 98: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

98

Page 99: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?

Page 100: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 101: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 102: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 103: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 104: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 105: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Page 106: Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

Q&A"In an architecture of content, the information becomes the interface." -- Edward Tufte