SlideShare a Scribd company logo

Interface Fundamentals

Download as PPT, PDF
Christina Wodtke, profile picture
Christina Wodtke

The document discusses interface design principles, emphasizing the importance of clear organization of elements for user understanding and ease of use. It introduces task analysis in web design, mentions design strategies like toolbars and wizards, and stresses clarity in communication with users. The author also reflects on broader philosophical ideas about misunderstanding and creativity in design.

DesignTechnology
Related topics:
Graphic Design • User Experience Design
1 of 106
Downloaded 184 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike @cwodtke INTERFACE DESIGN 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
@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
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike From last week’s homework 5min
@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
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Each task could have a page
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike First Yahoo 1994 1995: first graphic logo Remind you of something?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Including the schedule creator tool…
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Wizards: Many boxes, many pages
@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
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What if we put the tasks with the thing they were modifying?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike It’s a toolbar Tools here Item affected here
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Toolbars Tools here Item affected here And here And here Photoshop: toolbars on steroids
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike The web uses toolbars more sparingly
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike ToolbarsTools here Item affected here A simpler design is better for infrequent use.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@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)
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH PAIR OF PANTS ARE NOW 39.99?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH CAR IS 49.99?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Why is the response so far from the invitation?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@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.
@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
@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
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike BUTTONS HAVE MEANING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike LINKS HAVE MEANING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@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.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike On the product page (apples!) For the company to succeed 2 minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 minutes
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@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/
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM TIMES NEW ROMAN Hey, I’m Arial
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM COMIC SANS I am the devil
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM IMPACT LOL
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Georgia is always welcome
@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.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
@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.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike to be greAt is to be misunderstood.
@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.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike NATURE
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 92 Poetics: Control, power, precision
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 93 Values: Lightweight, easy, sketchy,
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 96 Power, control, precision,
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 97 mWriter uty, peace, zen
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 98
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@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

More Related Content

PPTX
Making the Complex Clear
Christina Wodtke
 
PPTX
Information Architecture Fundamentals
Christina Wodtke
 
PPTX
Designing and Understanding Business
Christina Wodtke
 
PPTX
Designing Brand
Christina Wodtke
 
PPTX
Thinking Like an Optimizer, by Jennifer Ruffner
Christina Wodtke
 
PPT
Coop First: how non-zero-sum games are reshaping our digital landscape
Amy Jo Kim
 
PPT
User Research 101
Christina Wodtke
 
PDF
Yahoo! Pattern Library & Social Design Patterns
Christian Crumlish
 
Making the Complex Clear
Christina Wodtke
 
Information Architecture Fundamentals
Christina Wodtke
 
Designing and Understanding Business
Christina Wodtke
 
Designing Brand
Christina Wodtke
 
Thinking Like an Optimizer, by Jennifer Ruffner
Christina Wodtke
 
Coop First: how non-zero-sum games are reshaping our digital landscape
Amy Jo Kim
 
User Research 101
Christina Wodtke
 
Yahoo! Pattern Library & Social Design Patterns
Christian Crumlish
 

Viewers also liked (19)

PPTX
Designing Social
Christina Wodtke
 
PPTX
Designing Interfaces (and Wireframes)
Christina Wodtke
 
PDF
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
DesignCaffeine, Inc.
 
PPT
Mental Models and Concept Models
Christina Wodtke
 
PPT
Introduction to User Experience
Christina Wodtke
 
PPTX
Designing Structure: Interaction Design
Christina Wodtke
 
PDF
User Insights Start the Design Process
Steve Portigal
 
PDF
Ux aus prototyping
Todd Zaki Warfel
 
PPTX
Understanding User Experience Design & Why It Matters
Christina Wodtke
 
PPTX
Designing Structure Part II: Information Archtecture
Christina Wodtke
 
PPTX
Designing with Personas
Christina Wodtke
 
PPTX
Class5 Business Design
Christina Wodtke
 
PDF
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Chris Sauve
 
PPTX
The Principles of Interface
Christina Wodtke
 
PDF
Laracon Online: Grid and Flexbox
Rachel Andrew
 
PDF
A Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
Silvia Rosenthal Tolisano
 
PPTX
Women in Tech: How to Build A Human Company
Luminary Labs
 
PDF
Mapping & Measuring the Subscriber Journey
cleverbridge
 
PDF
Health and Well-Being on the Social Web
ron mader
 
Designing Social
Christina Wodtke
 
Designing Interfaces (and Wireframes)
Christina Wodtke
 
Virtual Seminar: Cross-Channel Design: Magic Mobile Moments
DesignCaffeine, Inc.
 
Mental Models and Concept Models
Christina Wodtke
 
Introduction to User Experience
Christina Wodtke
 
Designing Structure: Interaction Design
Christina Wodtke
 
User Insights Start the Design Process
Steve Portigal
 
Ux aus prototyping
Todd Zaki Warfel
 
Understanding User Experience Design & Why It Matters
Christina Wodtke
 
Designing Structure Part II: Information Archtecture
Christina Wodtke
 
Designing with Personas
Christina Wodtke
 
Class5 Business Design
Christina Wodtke
 
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
Chris Sauve
 
The Principles of Interface
Christina Wodtke
 
Laracon Online: Grid and Flexbox
Rachel Andrew
 
A Taste of: The Now Literacies, Documenting Learning & Digital Portfolios
Silvia Rosenthal Tolisano
 
Women in Tech: How to Build A Human Company
Luminary Labs
 
Mapping & Measuring the Subscriber Journey
cleverbridge
 
Health and Well-Being on the Social Web
ron mader
 
Ad

Similar to Interface Fundamentals (20)

PPT
Design Thinking Workshop for Innovative Products and Businesses
Christina Wodtke
 
PPT
Design Thinking for Innovation
Christina Wodtke
 
PPTX
05a Fundamentals of UX Workshop: Interface Design
Christina Wodtke
 
PPTX
How to Teach UX Design
Christina Wodtke
 
PPTX
05b Fundamentals of UX Workshop: Interface Design (for Understanding)
Christina Wodtke
 
PPT
02 Fundamentals of UX Workshop: User Research
Christina Wodtke
 
PPTX
04 Fundamentals of UX Workshop: Information Architecture
Christina Wodtke
 
PDF
Pure CSS By Yahoo
Nathan O'Hanlon
 
PPTX
Don Stanley's Web Design 101 LSC 532 lecture 3
Don Stanley
 
PPTX
Design Thinking for Educators Discovery through Prototyping
Melissa Goodwin
 
PDF
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Frédéric Harper
 
PDF
Introduction to Responsive Design v.2
Clarissa Peterson
 
PDF
Design
robynurdiansyah
 
PDF
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Frédéric Harper
 
PDF
Deploying & operating microservices
Thoughtworks
 
PPTX
03 Fundamentals of UX Workshop: Interaction Design
Christina Wodtke
 
PDF
Coding for Designers
Milly Schmidt
 
KEY
RWD in the Wild
Rich Quick
 
PDF
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Frédéric Harper
 
PDF
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Codemotion
 
Design Thinking Workshop for Innovative Products and Businesses
Christina Wodtke
 
Design Thinking for Innovation
Christina Wodtke
 
05a Fundamentals of UX Workshop: Interface Design
Christina Wodtke
 
How to Teach UX Design
Christina Wodtke
 
05b Fundamentals of UX Workshop: Interface Design (for Understanding)
Christina Wodtke
 
02 Fundamentals of UX Workshop: User Research
Christina Wodtke
 
04 Fundamentals of UX Workshop: Information Architecture
Christina Wodtke
 
Pure CSS By Yahoo
Nathan O'Hanlon
 
Don Stanley's Web Design 101 LSC 532 lecture 3
Don Stanley
 
Design Thinking for Educators Discovery through Prototyping
Melissa Goodwin
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Frédéric Harper
 
Introduction to Responsive Design v.2
Clarissa Peterson
 
Design
robynurdiansyah
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Frédéric Harper
 
Deploying & operating microservices
Thoughtworks
 
03 Fundamentals of UX Workshop: Interaction Design
Christina Wodtke
 
Coding for Designers
Milly Schmidt
 
RWD in the Wild
Rich Quick
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Frédéric Harper
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Codemotion
 
Ad

More from Christina Wodtke (20)

PDF
Game Design Fundamentals: The Formal Elements
Christina Wodtke
 
PDF
Comunication & Storytelling for Product Managers (and anyone else)
Christina Wodtke
 
PDF
Influence Without Authority
Christina Wodtke
 
PDF
Make the Complex Clear with Maps and Models
Christina Wodtke
 
PDF
It's complicated
Christina Wodtke
 
PPTX
Reboot Your Team
Christina Wodtke
 
PDF
Design Strategies for Understanding
Christina Wodtke
 
PDF
Visual Thinking Stanford Continuing Studies
Christina Wodtke
 
PDF
Lecture 010 Polishing the UI
Christina Wodtke
 
PDF
WIAD Boston
Christina Wodtke
 
PDF
Lean Teams are Learning Teams
Christina Wodtke
 
PDF
Game Design Fundamentals Megadeck
Christina Wodtke
 
PPTX
Visual Thinking: Working with Pictures
Christina Wodtke
 
PDF
Design the team you need to succeed
Christina Wodtke
 
PPTX
Class 6 Identifying and Validating Assumptions
Christina Wodtke
 
PDF
Teaching Game Design to Teach Interaction Design
Christina Wodtke
 
PPT
The Creative Entrepreneur: Stanford Class2 Needfinding
Christina Wodtke
 
PPT
The Creative Entrepreneur: Stanford Class4 From story to offering
Christina Wodtke
 
PPT
The Creative Entrepreneur: Stanford Class3 New Product Ideation
Christina Wodtke
 
PDF
In Defense of Childish Things
Christina Wodtke
 
Game Design Fundamentals: The Formal Elements
Christina Wodtke
 
Comunication & Storytelling for Product Managers (and anyone else)
Christina Wodtke
 
Influence Without Authority
Christina Wodtke
 
Make the Complex Clear with Maps and Models
Christina Wodtke
 
It's complicated
Christina Wodtke
 
Reboot Your Team
Christina Wodtke
 
Design Strategies for Understanding
Christina Wodtke
 
Visual Thinking Stanford Continuing Studies
Christina Wodtke
 
Lecture 010 Polishing the UI
Christina Wodtke
 
WIAD Boston
Christina Wodtke
 
Lean Teams are Learning Teams
Christina Wodtke
 
Game Design Fundamentals Megadeck
Christina Wodtke
 
Visual Thinking: Working with Pictures
Christina Wodtke
 
Design the team you need to succeed
Christina Wodtke
 
Class 6 Identifying and Validating Assumptions
Christina Wodtke
 
Teaching Game Design to Teach Interaction Design
Christina Wodtke
 
The Creative Entrepreneur: Stanford Class2 Needfinding
Christina Wodtke
 
The Creative Entrepreneur: Stanford Class4 From story to offering
Christina Wodtke
 
The Creative Entrepreneur: Stanford Class3 New Product Ideation
Christina Wodtke
 
In Defense of Childish Things
Christina Wodtke
 

Recently uploaded (20)

PDF
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
trilochangauli5
 
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
nikitasaraf21isbms
 
PPT
Machine printing techniques and plangi dyeing
SANGEETHA PRIYA B
 
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
barkatbushra9
 
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
PDF
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
PPTX
rapid fire quiz in your house is your india.pptx
rishikjjwala
 
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PRITTHAKKAR7
 
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
cyclohex75
 
PPTX
EDP Competencies-types, process, explanation
SANGEETHA PRIYA B
 
DOCX
actividad 20% informatica microsoft project
fernandeznibesky
 
PPTX
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
SauravAggarwal12
 
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
navilasatheesh
 
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
gameon41
 
PDF
Chalkpiece Annual Report from 2019 To 2025
ramyaux
 
PDF
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
yash131101123110
 
PDF
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
PDF
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
trilochangauli5
 
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
nikitasaraf21isbms
 
Machine printing techniques and plangi dyeing
SANGEETHA PRIYA B
 
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
barkatbushra9
 
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
SEVA- Fashion designing-Presentation.pdf
Maya243315
 
rapid fire quiz in your house is your india.pptx
rishikjjwala
 
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PRITTHAKKAR7
 
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
cyclohex75
 
EDP Competencies-types, process, explanation
SANGEETHA PRIYA B
 
actividad 20% informatica microsoft project
fernandeznibesky
 
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
SauravAggarwal12
 
Tenders & Contracts Works _ Services Afzal.pptx
navilasatheesh
 
DOC-20250430-WA0014._20250714_235747_0000.pptx
gameon41
 
Chalkpiece Annual Report from 2019 To 2025
ramyaux
 
UNIT 1 Introduction fnfbbfhfhfbdhdbdto Java.pptx.pdf
yash131101123110
 
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 

Interface Fundamentals

  • 1. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike @cwodtke INTERFACE DESIGN FUNDAMENTALS
  • 2. @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
  • 3. @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
  • 4. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike From last week’s homework 5min
  • 5. @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
  • 6. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 7. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Each task could have a page
  • 8. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike First Yahoo 1994 1995: first graphic logo Remind you of something?
  • 9. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Including the schedule creator tool…
  • 10. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Wizards: Many boxes, many pages
  • 11. @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
  • 12. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 13. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What if we put the tasks with the thing they were modifying?
  • 14. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike It’s a toolbar Tools here Item affected here
  • 15. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Toolbars Tools here Item affected here And here And here Photoshop: toolbars on steroids
  • 16. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike The web uses toolbars more sparingly
  • 17. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike ToolbarsTools here Item affected here A simpler design is better for infrequent use.
  • 18. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 19. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 20. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 21. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 22. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 23. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
  • 24. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 25. @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)
  • 26. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH PAIR OF PANTS ARE NOW 39.99?
  • 27. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH CAR IS 49.99?
  • 28. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Why is the response so far from the invitation?
  • 29. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 30. @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.
  • 31. @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
  • 32. @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
  • 33. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  • 34. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  • 35. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  • 36. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 37. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 38. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 39. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike BUTTONS HAVE MEANING
  • 40. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 41. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike LINKS HAVE MEANING
  • 42. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 43. @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.
  • 44. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 45. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 46. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 47. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 48. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 49. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  • 50. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 51. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 52. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 53. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 54. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 55. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike On the product page (apples!) For the company to succeed 2 minutes
  • 56. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 minutes
  • 57. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 58. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  • 59. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  • 60. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 61. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 62. @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/
  • 63. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 64. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 65. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 66. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 67. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM TIMES NEW ROMAN Hey, I’m Arial
  • 68. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM COMIC SANS I am the devil
  • 69. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM IMPACT LOL
  • 70. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 71. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Georgia is always welcome
  • 72. @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.
  • 73. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  • 74. @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.
  • 75. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike to be greAt is to be misunderstood.
  • 76. @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.
  • 77. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  • 78. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 79. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 80. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 81. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 82. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike NATURE
  • 83. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 84. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 85. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 86. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 87. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 88. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 89. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 90. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 91. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?
  • 92. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 92 Poetics: Control, power, precision
  • 93. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 93 Values: Lightweight, easy, sketchy,
  • 94. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 95. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?
  • 96. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 96 Power, control, precision,
  • 97. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 97 mWriter uty, peace, zen
  • 98. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 98
  • 99. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?
  • 100. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 101. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 102. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 103. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 104. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 105. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • 106. @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

Editor's Notes

  • #50: 2 songs (jazz)
  • #93: You can change the same kind of software with different values
  • #94: You can change the same kind of software with different values