strategy by design - User Interface Engineering

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


WHY THE CHANGE?


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


WHY THE CHANGE?


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


34

17


35

Understanding Perception


• 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


• 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…


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


63


64

32


65


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


73


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


83


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