Web Application design research, articles, and presentations ... BUSINESS, PEOPLE, AND. TECHNOLOGY ARE ... What Makes a
STRATEGY BY DESIGN USING VISUAL COMMUNICATION TO ARTICULATE STRATEGIC DIRECTION
LUKE WROBLEWSKI USER INTERFACE 11, 2006
1
Luke Wroblewski Yahoo! Inc. • Principal Designer, Social Media
LukeW Interface Designs • Principal & Founder • Product Design & Strategy services
Author • Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) • Web Application design research, articles, and presentations
Previously • eBay Inc., Lead Designer • University of Illinois, Instructor • NCSA, Senior Designer
http://www.lukew.com 2
1
THE PERCEPTION OF DESIGN IS CHANGING…
3
DESIGN =STYLING
“MAKE IT LOOK GOOD.”
RAYMOND LOWEY, FATHER OF INDUSTRIAL DESIGN
4
2
WANT TO INNOVATE?
DESIGN =INNOVATION
WANT TO FORGE LASTING CONNECTIONS WITH CUSTOMERS? WANT TO OUTFLANK COMPETITORS? WANT TO GROW? BUSINESSWEEK, DAVOS, FASTCOMPANY, ETC.
5
MARKETS MATURE FASTER
WHY THE CHANGE?
CONTINUOUS FLUX INFORMATION OVERLOAD
6
3
Faster Adoption
7
Faster Customer Acquisition
8
4
Faster Revenue Growth
9
Faster Competition
LAUNCHED IN FEB 2005
100+ DIRECT COMPETITORS
10
5
WHEN MARKETS MATURE…
FUNCTION IS INCREASINGLY ASSUMED AND NO LONGER A DIFFERENTIATOR DESIGN BECOMES MORE IMPORTANT
11
Technology Meets Basic Needs
12
6
IN MARKETS THAT MATURE FAST…
DESIGN BECOMES A KEY DIFFERENTIATOR SOONER PRODUCT DESIGN, THAT IS
13
MARKETS MATURE FASTER
WHY THE CHANGE?
CONTINUOUS FLUX INFORMATION OVERLOAD
14
7
OVERLAPS BETWEEN BUSINESS, PEOPLE, AND TECHNOLOGY ARE INCREASING
15
HALF THE WORLD’S POPULATION WILL BE USING A CELL PHONE BY 2009
16
8
“…the potential to vastly expand the creative powers of tinkerers and usher in a revolution in do-it-yourself design and manufacturing that can empower even the smallest of communities."
CROWDSOURCING FAB LABS PERSONALIZATION
17
A CHANGE IN TECHNOLOGY HAS A BIGGER IMPACT ON PEOPLE & BUSINESS & VICE VERSA
18
9
“I have thus been able to observe from first hand experience how the nature of strategy in the IT industry has changed over the last twenty five years. Most apparent is the increasing pace of change…
CHANGE HAPPENS RAPIDLY
Everything is moving quite a bit faster.” -Irving Wladawsky-Berger
19
RAPID PROTOTYPING & “BUILD TO THINK”
PROBLEM SOLVING WITH DESIGN
ABDUCTIVE THINKING DESIGN IS NEVER DONE
20
10
IN A STATE OF FLUX…
DESIGN ENABLES COMPANIES TO ADAPT DESIGN THINKING, THAT IS
21
MARKETS MATURE FASTER
WHY THE CHANGE?
CONTINUOUS FLUX INFORMATION OVERLOAD
22
11
MORE THAN 60 BILLION EMAILS SENT
EVERY DAY…
ESTIMATED ONE BILLION TEXT MESSAGES (SMS) SENT 1.2 MILLION NEW BLOG POSTS, ABOUT 50,000 PER HOUR
23
“Design has gained in importance in direct proportion to information overload.” -Tom Mulhern
24
12
WHEN THERE’S COMPLEXITY…
DESIGN ENABLES COMMUNICATION DESIGN PRINCPLES, THAT IS
25
THE PRINCIPLES THAT HELP US COMMUNICATE… ALSO HELP US ARTICULATE & DEFINE STARTEGY
26
13
VISUAL COMMUNICATION 27
Visual Communication • What communicates visually • Anything you can make sense of with your eyes • Maps, posters, books, etc.
• Combinations of visual elements form a language • Visual Organization • Personality (look & feel)
• The Web is a communication medium • Does lots of “talking” visually • Graphic vocabulary (links, buttons, icons, images, etc.)
28
14
Web Design Considerations
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Presentation •
How your site appears to your audience
• Interaction •
How your site behaves in response to user actions
• Organization •
The structure of your site
29
Presentation • All interactions occur through the presentation • Educate users • Establish relationships between content • Guide users through actions • Focus user attention
• Make organizational systems clear • Provide situational awareness • Maintain consistency to create a sense of place
• Effectively convey brand message to your audience • Emotional impact • Engage and invite • Provide a unique personality
30
15
What Makes a Great Presentation? • Visual Organization • Communicates the relationships between user interface elements • Enable Interaction Design • Information Design
• Personality • Communicates the brand essence of a product • Visceral design • Color, font, image, pattern selection
31
Before Visual Communication
32
16
After Visual Communication
33
Before Visual Communication
34
17
After Visual Communication
35
Understanding Perception
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Several principles tell us how (why) we group visual information • Proximity -elements close together are perceived as a group • Similarities -of shape, size, color can group elements • Continuance -grouped through basic patterns • Closure -group elements by space filled between them
36
18
Forming Relationships
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Creating relationships requires an understanding of what makes things different • Introducing variations in one or more of the above categories creates visual contrast • Also created through positioning
37
Using Relationships
• Use visual relationships to • Add more or less visual weight to objects • Difference is created by contrast between objects • Why do we want to vary the visual weight of objects…
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
38
19
Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention • Creates a sense of order and balance • Establishes a pattern of movement to guide a viewer through a composition • In other words, it tells a story • Like all good stories it has a beginning, end, and a point.
39
Effective Hierarchy
40
20
No Clear Hierarchy
41
Prioritizing Content
42
21
Summary • • • • • •
Visual Communication is part Visual Organization and part personality. Visual Hierarchy is a deliberate prioritization of Visual Weight enabled by the manipulation of Visual Relationships to create Meaning for users.
43
IT’S NOT ALL ADDITION. 44
22
A Simple Table
45
Focus on the Data?
46
23
Focus on the Data?
47
Focus on the Data
48
24
PERSONALITY
49
What is Personality • “The effectiveness with which one can receive positive reactions.” • “The reaction of other individuals to a person is what defines his personality.” • “[Personality] designates those things about an individual that are distinctive and set him apart from other persons.”
-Hall and Lindzey, Theories of Personality, 1970 50
25
Look and Feel
• Colors, type treatment, photos, and shapes • Work together to tell a consistent story • Create a feeling of sophistication
51
Feels Like…
52
26
…Rugby?
53
Diamond Shopping
54
27
Diamond Shopping
55
Diamond Shopping
56
28
Diamond Shopping
57
The Power of Personality • Tells the right story • Audience expectations
• Provides distinction • Structure, interaction, presentation,
• Appeals to and engages your audience • Emotional impact
• Unifies your site • Sense of place, perception
58
29
Using Color “Color adds tremendous meaning to communication as it vitalizes the visual message, delivering an almost instantaneous impression that is, most often, universally understood.”
• • • •
•
Color psychology Warm vs. Cool Contrasting Colors Analogous Colors
-Guide to communicating with color, 2000 59
Warm vs. Cool • Warm colors • Welcoming and cheerful • Too much = stuffy
• Cool colors • Calming and composed • Too much = cold, unfriendly
60
30
Using Type • Communicates visually • Distinct character • Tell different story
• Lots of choices • Sans-serif & serif is just the beginning
• Lots of adjustments • Tightening- complete • Spacing- delicate, open
61
Using visual elements • Images • Hold your attention (detail) • Communicate quickly
• Abstract shapes • Distinct visual characteristics • Square, circle, triangle, organic
• Textures and patterns • Provide a tactile sense • Eyes are drawn to areas of complexity
62
31
Before Visual Communication
63
After Visual Communication
64
32
Before Visual Communication
65
After Visual Communication
66
33
Visual Communication • Importance of presentation • Front door to content & actions
• Perception is based on visual relationships • Manipulating visual relationships creates visual hierarchy • Visual hierarchy tells a story • Personality draws the right audience to the story
67
VISUAL COMMUNICATION & STRATEGY
68
34
COMMUNICATE A VISION…
69
70
35
Tell a Story • Focus on the big idea • Quickly communicate key concepts
• Use visual relationships to: • Illustrate content relationships through • Deliberate visual similarities & differences
• Provide context • Visualize the rationale
71
GLOBAL ASSET MANAGEMENT
ASSET LIFECYCLE
72
36
Before Visual Communication
73
After Visual Communication
74
37
Illuminate • Reveal the problem or opportunity • Visualize the impact of data • Provide information in context
• Use visual Hierarchy to communicate • A prioritized narrative
• Enable • Faster consensus • Better decisions
75
Reveal the Problem • Usability Testing • Errors, issues, assists, completion rates, time spent per task, satisfaction scores
• Customer Support • Top problems, number of incidents
• Best Practices • Common solutions, unique approaches
• Site Tracking • Completion rates, entry points, exit points, elements utilized, data entered
Business of Design, eBay Inc. April 2004
76
38
77
Business of Design, eBay Inc. April 2004
78
39
Visual Communication
79
Engage Your Audience • Select an Appropriate Personality • Colors, Fonts, Images, Textures, Shapes
• Inviting presentation • Consider emotional impact
80
40
81
82
41
Before Visual Communication
83
After Visual Communication
84
42
Visual Communication & Strategy • Importance of presentation • Front door to content & actions
• Perception is based on visual relationships • Manipulating visual relationships creates visual hierarchy • Visual hierarchy tells a story • Personality draws the right audience to the story
85
For more information… • UI11 Seminar Tomorrow! • Functioning Form • www.lukew.com/ff/
• Site-Seeing: A Visual Approach to Web Usability • Wiley & Sons
• Drop me a note •
[email protected]
86
43