pageheirarchy - lukew

8/12/2019 PageHeirarchy - LukeW

1/91

1

WEB PPLIC TIONP GE HIER RCHYLUKE WROBLEWSKIWEB VISIONS 2 7


2/91

2

Luke Wroblewski

Yahoo! Inc. Senior Principal, Product Ideation & Design

LukeW Interface Designs Principal & Founder

Product design & strategy services

Author Site-Seeing: A Visual Approach to Web Usability (Wiley

& Sons)

Form Design Best Practices (Rosenfeld Media) -Upcoming

Functioning Form: Web applications, product strategy, &interface design articles

Previously eBay Inc., Lead Designer

University of Illinois, Instructor

NCSA, Senior Designer

http://www.lukew.com


3/91

3

Outline

Why does page hierarchy matter? How do we construct a hierarchy?

Enable usability

Reflect priority

How do we use hierarchy to: Communicate messages

Illuminate actions

Organize information

Present data


4/91

2

Luke Wroblewski

Yahoo! Inc. Senior Principal, Product Ideation & Design

LukeW Interface Designs Principal & Founder

Product design & strategy services

Author Site-Seeing: A Visual Approach to Web Usability (Wiley

& Sons)

Form Design Best Practices (Rosenfeld Media) -Upcoming

Functioning Form: Web applications, product strategy, &interface design articles

Previously eBay Inc., Lead Designer

University of Illinois, Instructor

NCSA, Senior Designer

http://www.lukew.com


5/91

3

Outline

Why does page hierarchy matter? How do we construct a hierarchy?

Enable usability

Reflect priority

How do we use hierarchy to: Communicate messages

Illuminate actions

Organize information

Present data


6/91

4

How We Use the Web

Look around feverishly for anything that is interesting or vaguelyresembles what you are looking for, and is clickable. -Steve Krug

-Steve Krug, Dont Make Me Think: A Common Sense Approach to Web Usability


7/91

5Squidoo Eye-tracking study (by etre)


8/91

6

Design Considerations

Presentation: How your application appears to your audience

Interaction: How your application behaves in response to user actions

Organization: The structure of your application

Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability


9/91

7

Presentation

All interactions occur through the presentation Inform users

Establish relationships between content

Guide users through actions

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


10/91

8

What Makes a Great Presentation?

Visual Organization Communicates the

relationships between userinterface elements

Enables Interaction Design

Information Design

Personality

Communicates the brandessence of a product

Visceral design

Color, font, image, pattern

selection


11/91

9

The End Goal

Quickly Communicate

What is this? Usefulness How do I use it? Usability

Why should I care? Desirability


12/91

10

BEFORE AFTER


13/91

11

After Visual Hierarchy


14/91

12

Before Visual Hierarchy


15/91

13

After Visual Hierarchy


16/91

14


17/91

15

Before & After Visual Hierarchy

AQD

esign,

Japan


18/91

16

PRINCIPLES OF VISUALCOMMUNICATION

PHOTO BY MATTEO PENZO


19/91

17

How We See

How we make sense ofwhat we see

Recognizing similarities &differences

This allows us to group

information And give it meaning

Relationships

Between individualelements

To the whole (story)

Flickr: Uploaded on August 19, 2006 by Tom-Tom


20/91

18

Understanding Perception

Several principles tell us how (why) we groupvisual 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



21/91

19

Forming Relationships

Creating relationships requires an understanding ofwhat makes things different

Introducing variations in one or more of the abovecategories creates visual contrast

Also created through positioning



22/91

20

Using Relationships

Use visual relationships to

Add more or less visual weightto objects

Difference is created by contrast between objects Why do we want to vary the visual weight of objects



23/91


24/91

22

Hierarchy Applied

Visual weight guides you through Image

Title

Date & Location

Ticket Information

Building an effective hierarchy

Involves use of visual relationships toadd more or less visual weight toelements


25/91

23

Building Effective Hierarchies

Distribution of visual weight

Visually dominant images get noticed most

Focal point, center of interest

Distinct visual weight guides you through the narrative

Essential to keep it balanced



26/91

24

Effective Hierarchy


27/91

25

No Clear Hierarchy


28/91

26

No Clear Hierarchy


29/91

27

No Hierarchy


30/91

28

Effective Hierarchy


31/91

29

To Summarize

Visual Communicationis part

Visual Organizationand part personality.

Visual Hierarchyis a deliberate prioritization of

Visual Weightenabled by the manipulation of

Visual Relationshipsto create Meaningfor users.


32/91

30

WHATS THEPRIORITY?

NOW WE KNOW HOWTO CONSTRUCT A

VISUAL HIERARCHY

BUT WHAT SHOULD ITCOMMUNICATE?


33/91

31

Enable Usability

Once you understand hierarchy, you can Guide users through a sequence

Suggest distinct choices

Answer Key Questions What is this?

Where am I?

What do I do now?


34/91

32

Explain What

Lots of different elementson each page

Communicate differencesbetween elements

Their relative importance

Their meaning

Apply consistently throughoutan application


35/91


36/91

34

Scanning Part 2


37/91

35

Explaining Where

Visual hierarchy within navigation systems

You are here indicators (s.e.d.)

Indication of structure (size, color, etc.)


38/91

36

How Do I ?

Go to the next step?


39/91

37

Building a Hierarchy

Effective page hierarchies map toprioritized user/business needs

Building an effective hierarchy1. List out required content & actions

2. Prioritize the list

3. Start at the top and give each element equal or lessvisual weight as the previous element This ensures there is enough contrast between elements

You are likely to end up with more unique visualtreatments than your design actually needs

4. Work through the elements on the page again tobring more visual consistency to related elements


40/91


41/91

39

Data-driven Prioritization


42/91

40

SitesHierarchies: management, military

Examples: closed, expensive, complex,accurate

IMAGES BASED ON ANDREW HILTONS ARCHITECTURES OF PARTICIPATION

Content ObjectsEmergent Networks: open, inexpensive,

simple, close enough

Examples: crowds, friends, incidental

networks,


43/91

41


44/91

42

24% CONTENT76% SITE OVERHEAD


45/91

43


46/91

44

COMMUNICATING ACENTRAL MESSAGEDifferentiate

Explain


47/91

45

Central message


48/91

46

Not enough hierarchy


49/91

47

Not enough contrast


50/91

48

Central Message


51/91

49

What is this?


52/91

50

Communicate function


53/91

51

Web Transitions

1. Locomotion to digital representations ofphysical entities Directories & portals, Yahoo!

Company sites & brochure-ware

2. Digital manipulation of physical goods E-commerce everywhere

Amazon, eBay

3. Digital services Enable conversation & manipulation

Display surfaces

Content creation

Aggregation Entertainment

-Types of digital services: TOM CHI, YAHOO!


54/91

52

Packaging Design for Web Apps

Meaningful Shout Differentiate

Attract

Embody the Brand

Back of Pack Support the Story

Outline Benefits & Features

Unpacking Experience


55/91

53

TAKE ACTIONWhat do I do now?

User Needs &Business Goals


56/91

54

Take action?


57/91

55

Take Action: Sign Up


58/91


59/91

57

Email call to action


60/91

58

Take action?


61/91

59

Take action: download


62/91

60

Take Action: complete a form


63/91

61

Take action


64/91

62

Take action


65/91

63

One primary action


66/91


67/91

65

One primary & one secondary action


68/91

66

Two primary actions


69/91

67

ORGANIZEINFORMATION What can I find here?


70/91

68

No clear hierarchy


71/91

69

Hierarchy mapped to goals


72/91

70

Limited hierarchy


73/91

71

Clear hierarchy


74/91

72

PRESENT DATAFocus on information

Enable discovery


75/91

73

A Simple Table


76/91

74

After Visual Communication?

Labels and their values havebeen divided into rows andcolumns Requires horizontal and vertical

movement

Need to look across for one label andup for the second label

Compounded by the increasedseparation of the data - the labels arefurther away from their values.

Potentially better for lookingup a particular value in thetable

Makes taking all the data in atonce more difficult.


77/91

75


Are people looking for aspecific value (i.e. dischargesthis month)

One of Devas layouts hit themark.

Do they simply need a sense ofall the information at once?

The original redesigned tablemakes scanning easier

Is there a prioritization of thedata

One of Devas layouts hit themark.

Is everything equallyimportant?

Introducing size and colorvariations might add visual noiseinstead of bringing extra attentionto really important data


78/91

76


If the purpose of the "last month" data isto calculate the monthly mutation, the lastcolumn offers faster satisfaction.

Styling the row and column groupsprovides further importance andemphasizes to the data relations and givemore meaning to the structure of the grid

The foot contains the single mostimportant statistic for this table.

-Robbin van Eijsden

http://www.ict-id.nl/CSSshed/website/html/tablebility_part1.html


79/91

77

Comparison


80/91

78

Focus on the data?


81/91


82/91

80

Focus on the data


83/91

81

Focus on context

F d t


84/91

82

Focus on data

C i t l ti hi


85/91

83

Communicate relationships

C i t l ti hi


86/91

84

Communicate relationships


87/91

85

QUESTIONSANSWERS

Flickr: June 29, 2005 by atomicity

Q&A


88/91

86

Q&A

Question

Id love to have an effective visual hierarchy on my site butevery stakeholder wants their content or feature to beprominently displayed. What can I do?

Answer

Separate the discussion about hierarchy from the actual visualdesign

Create an ordered list of all the content and actions on aspecific page and work with each stakeholder to prioritize it

If you have any data about the usage or importance (for endusers) of the items in the list include it as well

Once you have buy-in on the list- use the language of design toexplain how your design reflects the lists prioritization

If any stakeholders complain about their visual prominence in

the design, offer to revisit the ordering of the list and bring inthe rest of the stakeholders that already agreed to theprioritization

Q&A


89/91

87

Q&A

Question

How do I know if I have the right visual hierarchy in mydesigns? Do I need to test it?

Answer

It is possible to develop successful interfaces without extensiveuser research, if one is adept at understanding generalizedpatterns

Understanding the foundational principles behind visual designenables you create effective designs

Asking users do you like option a or option b? rarely providesany useful information.

Instead ask users to walk through a specific task

This process will help inform whether or not the visual design iseffectively supporting user needs.

Q&A


90/91

88

Q&A

Question Most of my work involves small incremental improvements and

not a full redesign. How I can I incrementally develop effectivevisual communication in this situation?

Answer When adding an element to an application consider how it relates to

the whole:

Is it more or less important than other elements in the application? Is it very similar or very different from other elements in the

application?

Does it logically fit within specific content or actions?

How does it relate to the overall goals and vision of theapplication?

Document these relationships to begin building a visual language

Apply that language each time you make incremental changes

For more information


91/91

For more information

Functioning Form www.lukew.com/ff/

Site-Seeing: A VisualApproach to Web Usability

Wiley & Sons

Drop me a note [email protected]

pageheirarchy - lukew

Documents