Web Dizajn

Web Page Design The Anatomy of High-Performing Web Pages

Kara McCain Nielsen Norman Group

Usability Week 2012

Instructor Kara McCain is a User Experience Specialist with Nielsen Norman Group. For more than 15 years, she has been creating innovative brand and user experiences in the search, social media, luxury, hotel, travel, jewelry, telecommunications, professional sports, ecommerce, government, and food-service industries. Her expertise has allowed her to develop and implement highly successful web and print design strategies for Fortune 500 companies. Before joining Nielsen Norman Group, McCain was a senior visual and interaction designer for Yahoo!'s Search and Social Media division, working on Yahoo! Answers, Local search, and defining the way people integrate social media into search. Prior to Yahoo!, she also led the Web design effort for clients such as Verizon, Pizza Hut, The Ritz-Carlton hotels, the Dallas Stars, Radio City Entertainment and the Zale Diamond Corporation. McCain holds a B.A. in Graphic Design from Abilene Christian University.

Conference Hashtag: #nnguw Follow me

@karacita1

2

Icons you will encounter in this seminar:

This is a good idea, or website implemented this idea well

This is a bad idea, don t do this; or the website did not implement this well

Keep in mind or Remember to do this

Tips to help you

Dangerous idea, do not implement–you re asking for trouble…

This will guarantee failure and/or your users will hate you. AVOID.

3

How Users Approach Web Pages Scanning, eye-tracking, scrolling & the fold

4

If you begin every new design (or redesign) with the common behaviors of users in mind, it will make design decisions a lot easier. Generally, people move through a page relatively quickly, faster than most of us would prefer. It’s only in certain cases that a person is willing to spend more of their precious time and attention on a site.

5

Scanning vs. a Thorough Review On the Web, users are impatient with short attention spans…they only spend an average of 27 seconds on a page. They don’t read much, they scan, seeking information quickly. So how you communicate (and allow users to communicate with you) matters. Q: So when do they actually read? A: When it s content they’re interested in (i.e. news story)

6

Scanning vs. a Thorough Review What do users pay attention to? •  Headlines

(usually the first several words) •  Subheadings •  Bold/emphasized text •  Short, important paragraphs •  Lists What do they ignore? •  Intro/marketing/welcoming

copy •  Long or heavy paragraphs of text •  Irrelevant images 7

www.turningpointlv.org

8

Little hierarchy makes it difficult to scan around for important information – everything has nearly equal weight, demanding equal attention

www.socialsecurity.gov

9

Headlines are bold, larger than body copy & easy to scan

Short paragraphs are easy to read quickly

www.latimes.com

10

Where Users Look – The Eyetracking Evidence F-Pattern of reading: The way users scan a page with little content hierarchy, in the shape of a letter F (sometimes E). More attention is paid to: •  Words at beginning of line than the end •  Words toward the top of text section

(vs. middle or bottom)

11

Where Users Look – the Eyetracking Evidence

F-pattern scanning!

12

Scrolling and the Fold It’s 2012. There is no one (or two) strictly defined “fold” anymore. The fold existed when virtually everyone had a 640 x 480 (or even a 1024 x 768) monitor. Now people access websites from all kinds of devices–with varying viewports–and you can’t always predict which one they will use to access your site.

1997: 640 x 480

2012: It could be anything! 13

Scrolling and the Fold But there is an ever-present “fold” on every device–it just depends on the screen size & mode the user is in. The area on a page that is viewable on the screen without having to manipulate the page by scrolling/using arrow keys (usually referred to in the vertical sense) is your fold. Design with that in mind. People spend 80% of their attention in that area. Do users scroll? Yes, but they only spend 20% of their time looking at information below the fold.

14

80% of attention 20% of attention

www.nytimes.com

Realistically, users read about 20% of the text on an average page

15

--------------------------------------

----------------------------------------------

Main navigation is right above the fold If you click a main nav button, content shows up here (below the fold, where user may not ever see it).

www.zennaware.com

16

What about long articles?

Article broken into multiple page views

VS. Single canvas with scrolling www.mayoclinic.com

17

Scrolling beats paging It’s easier for users to keep scrolling rather than decide if they want to click through various pages, foraging for information. If you choose a single canvas, you still must prioritize information and implement good hierarchy.

www.mayoclinic.com

18

Horizontal Scrolling What about horizontal scrolling? First – note that people spend more than twice as much time looking at the left side of the page as they do the right Left side: 69% of time Right side: 30% Most attention between the 300-500 pixel markers On a 1024 x 768 screen only 1% was viewed past 1024 pixels (that s worse than below-the-vertical fold s 20%) So, keep the most important information on the left: between 1/3 and 1/2 way across the page) 19

Do not take control away from the user. Scrollbar has been disabled, so user must use arrow keys (unless on iPad or touchscreen phone) to scroll or move around on the site

(default viewport)

www.yourauxiliary.com

(entire canvas)

20

Right-to-Left Languages What about languages that read right to left? More attention paid to the beginning of the line…the right side of the text It’s not a mirror image, though, unless the layout of a site mirrors the left-to-right layout.

21

True right-to-left layout

Mixed layout, but with right-to-left reading

www.emaratalyoum.com

www.haaretz.co.il 22

So if you add it all up…

300-500 pixels 80% of attention up here

Your most important content should lie within this area

www.nytimes.com

20% of attention down here

23

Other things to note •  Users will fixate on an item that is interesting, even if it’s far

below the fold. It helps if the layout is designed to encourage scanning. •  The last element in a list often attracts more attention ! the last

thing a person sees stays in the mind (the recency effect ). Put something good there! •  Intensity in viewing degrades the farther the user scrolls !

dependent on motivation and interest

24

Remember this little guy? If you have long pages with a lot of content, it’s nice to provide users with a quick way to jump back to the top of the page if they’d like.

www.thefancy.com

Bagcheck.com/mobile

25

Remember Design for scanning behavior •  Most important information at the top of the page •  Group related sections of content together •  Use descriptive headlines/subheadings •  Use bullets for lists •  Only use images that are relevant

Design for scrolling behavior •  80/20 attention range •  Most important info on the left •  No horizontal scrolling •  Consider leaving long content on 1 page rather than paginating •  Consider adding a “Back to Top” link for long pages 26

Working with Visuals & Typography How to guide users’ attention to the important stuff

27

Rules of Typography: General Some conventions from print also apply to the Web • Legibility and contrast

If people can’t see it, they can’t read it • Usage and number of fonts

Decide which font is truly appropriate; try to stick to two fonts (three max) • Usage of serif & san-serif

Use one for headlines, the other for body copy • Leading and kerning

Spacing between letters, spacing between lines of text • Hierarchy, grid & scale

Balance between sizes of fonts, images & eye rest

28

Rules of Typography: Web • USING ALL CAPS (except for headlines) THIS IS CONSIDERED SHOUTING! Please don’t " • Font Stacks If custom font can’t display, back-up safety fonts step in • Pixels, ems & percentages Fonts need ability to scale up or down…points can’t do this! • Color differences Dependent on monitor resolution & quality ! test on multiple machines • Text inside images ! if used for information, bad idea You can’t select it (to copy/paste) and screen readers can’t read it

29

Typography – Font size • Points are absolute (which is why they aren’t good for Web) For most sites you want to use relative font sizes. Use %, smaller/bigger, or ems ems: do not have an absolute size–they size themselves based on where they reside (i.e. the browser), so if the default browser font size is 16 px., then 1 em = 16 px. ; also relative to parent element’s font size %: Percentages are relative to another value (such as the width of a containing block) Smaller/bigger: relative to the default browser size and parent element’s font size

• Be nice – keep font sizes above 10 pt type 14-16 pt type is best for readability • Check your page’s type at 90%, 125% or higher See if type overflows and breaks the container space. Use CSS to control column widths/heights and font sizes. Remember, some users increase their font size via the browser/OS so plan for possible fluid containers. 30

2011: No hierarchy This site has lots of useful information but the typography (and layout & colors) make it difficult to scan or read

www.baking911.com, 2011

31

2012: Better! The layout has structure, better typography and a softer color palette.

www.baking911.com, 2012

32

Design for readability Main navigation is in tiny type that could be hard to read for most users

www.dailyexpress.co.uk

33

The main user goals & selling points are designed for prominence among the rest of the content

www.natureair.com

34

Highlight important & useful information Use typographic hierarchy to direct users attention. Tip: If you stand back from the page (or squint your eyes), the most important, relevant information should easily stand out.

www.everyblock.com

35

Typography – Font color A high-performance design requires good choice of font colors in addition to good typography. • No more than 4 colors (to avoid the rainbow effect) • Avoid dark backgrounds + bright text Unless it’s a headline or title, this is tough to read • Avoid color-on-color combinations that can’t be read •  Red on blue •  Yellow on red •  Light on light •  Dark on dark

Tip: De-saturate your website to black & white (or print it out in black & white) and look at the contrast. It should still be easy to read. If not, adjust the colors and repeat the process. 36

Gold text would be okay for a single headline…not okay for multiple lines of text, especially on a black background

www.bloomberg.com (old site, 2010)

37

Much better! •  Text is easier to read •  Headlines stand out from body copy •  Cleaner overall

www.bloomberg.com (updated in spring 2011)

38

Extreme color contrast + bolding entire page makes reading painful

www.tacobell.com

39

Red-on-blue text is tough to read, even as a headline

www.houstontexans.com, 2011

40

Design for good color contrast between type and background

www.mariecatribs.com

www.lbdsociety.com

41

Using Images Effectively Users approach images in one of two ways Totally ignore them •  Giant marketing photos •  Pictures irrelevant to the content or subject •  Stock photos (customer service lady on a headset)

- OR Fixate on & judge them •  Product photos •  Photos of real people (CEO of company, celebrities, etc)

42

Using Images Effectively On the Web, people only look at 42% of images presented to them. They look at those images for less than 2/10 of a second. Photos can give a person’s eyes rest from lots of text, but too many of them can add to a user’s cognitive load ! obstacle course behavior

43

Using Images Effectively Which ones get the most attention? •  High quality, high contrast •  Captivating, emotionally moving •  Cropped for smaller space constraints (not squashed to fit) •  Easy to understand •  Highly relevant •  Smiling, happy people; people facing the camera •  Sexual in nature •  Appetizing food

44

Images are highly relevant to content and help tell the story

www.bbc.co.uk

45

Photos that don’t match the headline/content may cause confusion or get ignored

www.bbc.co.uk

46

High quality, attractive product photos draw users in

www.teavana.com

47

Appetizing food + well-cropped photos

www.tastespotting.com

48

Black & white historical images need good, high contrast

www.sfcityguides.org

49

When people look happy, are smiling and looking at the camera, it catches the user’s attention

www.zappos.com

50

Using Images Ineffectively Which ones get the least attention? •  Looks like an ad (even if it’s relevant to your content) •  Too busy, too much going on •  Irrelevant to content, used as a filler •  Obvious stock photo, fake looking •  Black & white photos that are too gray

(not enough contrast) •  “Boring”

51

Image used as a filler, doesn’t help visualize parking options

www.nycballet.com

52

Hats are photographed from different distances, causing them to look like hats for children rather than women

www.bluefly.com

53

2011: Images are entirely too small to decipher

http://www.fedex.com/us/office/index.html

54

2012: A little better–images are larger and used more sparingly.

http://www.fedex.com/us/office/index.html

55

Mega Menus Organizing a large amount of navigation

56

Mega Menus Benefits: • Allows users to navigate larger portion of a web site in one

rollover, versus drilling down through multiple levels • Allows room for growth without compromising a site’s current structure or

design • Allows room for grouping links into categories to show

hierarchy • Illustrates a larger selection of choices

Misused when: • Menu is too long, user has to roll off to scroll (thus losing the menu

altogether) • Crowded with overwhelming amount of navigation 57

Menu is well-organized, in alphabetical order and makes use of highlighted rollovers

gatesfoundation.org

58

Pay attention to how the mega menu works against the area behind it

conservation.org

59

The ad (and the call-to-action button) in the mega menu competes with the ads/call-to-action behind it. A mega menu is not the place for ads)

staples.com

60

Not enough contrast between mega menu & main page so links run together

www.dell.com/us/p/

61

Keep the menu the Pay attention to howwell the above mega menu screen’s edge avoid users works against the to area behind it having to scroll to access lower menu items

www.whitehouse.gov

62

This multi-tasking mega menu houses real-time, at-a-glance data

www.reuters.com

63

Avoid overloading the mega menu Avoid increasing a user’s cognitive load…this makes it difficult to focus.

www.nih.gov

www.carnival.com

64

The mega menu’s photos add to the distinction between products without taking away from the task of navigating

www.steinway.com

65

The mega menu’s photos add to the distinction between products without taking away from the task of navigating

www.iwc.com

66

2011: Menu becomes seamless with the rest of the interface when open, BUT looks like a new page has opened

www.nbc.com, 2011

67

2012: Mega menu is slightly better, but still has issues

www.nbc.com, 2012

68

Paper & Pads is actually 20 listings of Paper, 11 listings of Pads and 13 additional listings ! NO FOCUS

www.staples.com

69

2011: mega menu for the site map was link overload

www.dell.com, 2011

2012: Better! Mega menu has digestible number of links, stays above screen’s edge, much cleaner www.dell.com, 2012

70

Can you spot all the design problems?

www.emc.com

71

This is a mega menu under a screen magnifier

www.whitehouse.gov mega menu

72

Mega Menus Pros: • Everything [in a section] is visible at once ! no scrolling • Links can be grouped in related sets to show hierarchical

relationships; icons, text sizes & colors can differentiate importance • Condenses main navigation into smaller chunks by [better] handling

sub-navigation

73

Mega Menus Cons: • Low-vision users who rely on screen-magnifiers might only see a

portion of the menu. • Touch-screen devices lack hover capability, so on-rollover/on-rolloff

activation does not work • Zoom-capable mobile devices might only show a portion of the menu • Mobile users (without zoom-capability) might see a cut-off version of

the menu • Doesn’t work if JavaScript or CSS is turned off

(only main nav button shows)

74

Mega Menus When to use: • Your site has a great deal of navigation and content

When not to use: •  Mobile version of your site •  Majority of your users will be using screen readers to view your site

75

Mega Menus: Working on the timing Our general rule of thumb: • User’s mouse should remain stationary for 0.5 seconds before

displaying anything hover-dependent • Interface elements must render within 0.1 seconds to show users

action has been taken • After user rolls their mouse off, wait 0.5 seconds before allowing menu

to disappear (except when pointer moves to another destination inside the menu) • Menu must then disappear within 0.1 seconds • Test response time on different computers/browsers

76

Remember Guidelines for using mega menu: • Menu • List

activates via on-rollover

links vertically (maximum 5-7 per column)

• Group

categories together when appropriate, bold category name

• Either

alphabetize links or order them according to most needed

• Do

not allow menu to go beyond the fold

• Consider • Clearly

context of how menu looks over entire page

show which section user is in

• Highlight

rollovers 77

Functional Footers Utilizing the end of a page, better than ever!

78

Functional Footers Not just a hall closet for your legal obligations! (and that one link you forgot to add in the wireframe)

Footers of the past: • The home for legal links (Privacy Policy, Copyright, etc.) • Used teeny, tiny text • Placed at the very bottom of the page where (hopefully) no one noticed it

Not sure where to put that not-really-important-but-still-required link? Violà! Put it in the footer!

79

Functional Footers Footers of today The valuable bottom-most real estate has useful information to help users move throughout the site and complete tasks more efficiently. These links also improve Search Engine Optimization (SEO). These extra links can help search engines (and people) find your content more easily (if links aren’t also in main navigation). Visually, many designers are giving the footer as much visual prominence as the header.

80

CNBC repeats their main navigation, only with subnavigation opened up in the footer

www.cnbc.com

81

Footer’s breadcrumb navigation shows path hierarchy

Footer relates to main section (in this case, “Mac”) www.apple.com

82

Visual treatment to divide footer from rest of the page Social calls-to-action

GOOD IDEA: Contact information is expanded (rather than just a “contact us” link) www.traveltex.com

83

Navigation within section Links to other sections user is in currently

finance.yahoo.com

Most popular links inside section

84

If your site has a large amount of content to navigate through, having a search box in the footer can be helpful

foodnetwork.com

85

Visual style of footer maintains continuity with the header and overall design concept Header = above ground Footer = below ground

floridaflourish.com

86

Remember Guidelines for implementing functional footers: • List

links vertically (maximum 5-7 per column)

• Group

categories together when appropriate, bold category name

• Either

alphabetize links or order them according to most needed

• Consider

adding a search box if appropriate

• Breadcrumb • If

trail should show where page lies in hierarchy of site

possible, expand contact information rather than making a link

• Make

footer unique to the audience/purpose

87

Designing on a Grid Implementing structure to the content

88

The Grid-Based Layout: a Tool, Not a Rule What it is Roots from print design, a layout based on a defined number of columns & rows spaced at regular intervals ! creating order out of chaos.

How it’s created Mathematical ratios of columns, rows and gutters are created to ensure consistency, that the typography scales well and content is easily read. Columns are [groupings of grid units] used to align page elements. Gutters are the spaces between the columns ! same width throughout the layout. Note: Content’s typography should be addressed before implementing a grid-based layout. Do not adjust type size for the sake of fitting content inside a grid.

89

Why a Grid-Based Layout Works • Creates an orderly framework for designer/developer, can even make

the design/development process faster • Gives website structure, consistency & logic for users • Lots of layout options, many different kinds of grids

Myth: Following a grid restricts creativity Fact: Music, language and architecture all have order/rules but that does not stop the output from being diverse and beautiful A grid is not meant to define a design, it’s meant to work with the design… your design does not have to look grid-like.

90

Columns (thick dark areas)

BBC s website based on a grid

Gutters (thin light areas)

91

9 Columns, 10 Gutters

www.waterworks.com

92

www.thegridsystem.org

93

Tips for a Grid-Based Layout Before working with a grid: • Address content/typography & image issues first Do not adjust fonts & type size or shrink/expand images in order to force content into a grid

• Determine the constraints of the project •  Advertising accommodations •  Device(s) website needs to work on •  CSS framework being used ! check the default dimensions of framework

Pixels are your base unit of measurement • Use increments of pixels, not individual pixels • Increments of 10 px is a good start (but not a rule, of course)

Align page elements to columns Think of columns as guides 94

Integrating Music, Video & other Multimedia Elements When it’s appropriate and how it should work

95

Aside from avoiding automatically playing music, make volume controls easy to find

www.fergie.com

96

Allow the user to choose when to play something

ge.com

97

Use correct, standardized icons for players

clickmix.com

98

Use correct state for icons

johnnyrockets.com

Music is actually not on

99

If showing advertisements, show how long ad will be

cnn.com

100

Avoid using technical terms only some users will understand (unless you are targeting video/audio professionals)

hulu.com

101

•  Avoid using tiny icons for

file types & be clear about what icon represents

•  Offer more than one

format so user can select the one they want

investors.yum.com

102

Displaying Videos in Search Results On a general search results page: Thumbnails are on right side of results because they are complementary to the query focus

yahoo.com

103

Displaying Videos in Search Results On video-only search results page Thumbnails are displayed in a gallery rather than a list to maximize space

yahoo.com

If user clicks play button, video plays at top rather than opening a new window or going to another page

Video name Length Date Source 104

Integrating Other Multimedia Elements Make sure multimedia addresses the design problem you are trying to solve. Sometimes it can enhance an experience, other times it can become over designed and make it worse. Know your audience, their needs and technical knowledge base.

105

World of Warcraft’s audience is very tech savvy but the website chooses to keep instructions and interactivity simple Simple rollovers help explain game mechanics to new players

http://us.battle.net/wow/en/game/guide/getting-started

106

Entire website is exploratory so finding basic information about jeans is difficult. Product images are not helpful.

http://www.mediaboom.com/prospectdenim/

107

Alternate product views are available and simple to use

www.zappos.com

108

Multimedia overkill

Important information is hard to read in small text box Scroll bar has also been redesigned so not as noticable

www.gotmilk.com

109

Information is easy to find and read; animations are kept to a minimum and only activate on rollover

www.8thcontinent.com

110

Recap: Integrating Music & Video Do NOT auto-play (especially in a pop-up) •  Allow users to decide when they want to play something; they might not want

to listen to it at all or are already listening to their own music •  Consider users who have multiple browser tabs open (and have no idea

where music/audio is coming from ! irritating) •  Consider users who might not be in an optimal place to project sound (work,

public place) •  Music & video interferes with screen readers ! accessibility problem

Keep videos under 3-5 minutes • Break up longer videos into several digestible segments • Our data shows people’s interest tends to wane after 24 seconds

Choose files that are designed for your audience’s connection speed & device • Not everyone has broadband so content may load slowly 111

Recap: Integrating Music & Video Implement correct usage of music/video player controls • Avoid designing new & different ones–stick with convention (users see these

controls on lots of other sites besides yours)

When possible, host your own content (vs. putting it on YouTube) • You want to maintain strict control over your content & how it’s shared • If allowing comments, you should have them on your site where your audience will contribute vs. the larger YouTube audience

Avoid being too technical or too vague with options • Not everyone understands what 480p means (unless site is for specific audience)

If showing ad, display how long it will play/time left to play •  Better to show ad after initial clip rather than before, if possible

Use text markup for accessibility and SEO 112

Within-Page Updates for Dynamic Pages How to use them & when to avoid them

113

Within-page updates give users timely information without having to reload the page or click to another page entirely, saving the user time and effort. Other Advantages •  Information is stored in a database rather than being hardcoded into static HTML

pages, allowing for quicker updates •  Better customization ! server can create a page based on user-input •  Large sites do not have to build thousands of HTML files. Templates are used

instead and display custom information based on user input ! saves time and server space.

Disadvantages •  Dynamic pages are not always indexed well by search engines •  Bookmarking can be difficult because same resources might not exist next time

user visits the page •  Some users will not have JavaScript enabled to see updates 114

Shopping cart dynamically updates when user adds a product to their cart. BONUS: User can calculate shipping costs inside the cart Note: user must notice even small changes that occur www.skincarerx.com

115

User can mouse over a product image to easily zoom in on product features

www.burton.co.uk

116

Instant feedback can be helpful to prevent user errors

www.twitter.com

117

User can manipulate layover duration, trip leg & price range via the slider bars

Good: Be specific about criteria being used

Rather than using $ $$$$ which is vague www.kayak.com

118

Give feedback to let users know content is updating

Changes should occur very close to where a user’s focus already is But be specific: The wording should reflects user’s filtering choice: “Filtering by price”

www.kayak.com

119

Map choices to user selections (and removal) when involving location

www.hotwire.com

120

Tips for Within-Page Updates Optimize pages for search engines • Keep the parameters short and few • Keep your URLs short • Use a [static] site map/site index to encourage deep indexing

Develop with progressive enhancement • Your site should look and work well in HTML ! add enhancements as a bonus so viewers of either get the information they need

Give feedback when content is updating based on user input • Specifically reflect user s parameter choice Use: Filtering by location Not: Fetching Results…

Don’t over notify users when content updates frequently • Ex: Flashing icon every time an email is received (bad when user receives many emails in a short period of time)

Response time should be fast • Ideally less than 0.1 seconds 121

When to Avoid Using Within-Page Updates If poor performance & caching issues hinder user experience If significant % of users are using screenreaders and/or screen magnifiers to view site • Screenreaders announce when a new page loads, not when new content within the page loads • Screen magnifiers only show portion of the page, which user might miss

If the feature doesn’t really support user need • If your site has few repeated actions, creating a complex GUI isn’t worth the time or money • A non-dynamic feature that works just as well or better should be used instead

If the user experience is not improved by using update • Test the features against a replicated page that doesn’t use them and evaluate success/failures

122

Advertising & User Behavior How people react to ads online

123

The worst thing you can do when advertising online is neglect the user experience

Fake dialogue box – Most hated #3

Measurements for traffic & click-through rates do not include user dissatisfaction or drop in credibility/opinion. Using correct design techniques can improve the impact of your ads and keep your credibility in tact. 124

Most-hated ad techniques (in order of disgust) 1.  Popup ads ! associated with unsavory content 2.  Ad loads slowly 3.  Ads that look like system messages or real content with no clear distinction between the two ! unethical! 4.  Does not have a close button 5.  Covers what you are trying to see 6.  Doesn’t say what it is for 7.  Moves content around 8.  Occupies most of page 9.  Blinks on and off 10.  Floats across the screen 11.  Automatically plays sound 125

Disdain for ads has led to banner blindness. Q: But what if it’s not an ad, it’s real content? A: You’re still in trouble if it has: •  Heavily formatted areas of text •  Made up terms, branded descriptions, fancy marketing speak •  Promotional copy or images + copy, even for your own information/products •  Design elements that look like ads

In addition to banner blindness, bad advertising techniques •  Create a poor user experience ! users lose trust •  Degrade credibility/opinion of your site •  Degrade credibility/opinion of your company (if it’s your ad on another site)

126

Specials or promotions that look like your average banner ads will most likely be ignored

www.schwans.com

127

If you want to promote your content on your site, design it to blend in with the rest of the site so users know it’s from your company

www.carnival.com

128

Banner takes up most of page

Irony: this is on an advertising news site, right above an article about good design

www. http://advertising-information.com.com

129

Video news: looks like ad

News report: looks like ad

Website poll: looks like ad

www.webmd.com

130

This is the equivalent of a pop-up ad, but worse…user has to close the modal dialog before accessing page

designtutorials4u.com

131

Designing for Evil: purposefully abusing UI behavior, knowing some (or many) users will mistaken the interaction for something else – like an important alert

Irony: the article under there is about annoying, intrusive ads bizreport.com

132

Q: Are there any successful ads? A: Yes! •  Text-based ads on search engines (This could follow into the category of making ad look like content but it is content and many times is relevant, even if paid for…only most relevant ones will show up)

•  Classified ads •  Ads that: •  Indicate what happens if clicked •  Relates to user s activity online •  Identifies itself as advertisement •  Presents information about what is being advertised •  Provides additional information without having to leave the page

Ads most effective at attracting user attention •  Plain text •  Faces •  Cleavage/”private” body parts (sex sells) 133

Search ads are designed to look like the rest of search results page Why isn’t this designing for evil? Because the ads only display when they are truly relevant to the user’s query

www.google.com

134

Tips for Using Advertising Online Use ethical advertising practices • Don’t design for evil just because you know something works • Consider your long-term reputation

Speak plainly, make options clear, provide useful information Avoid pop-ups (and modal boxes that act like pop ups) Don’t accept ads on your site that 85% of the population hates If using other companies’ ads on your site, put them in the periphery of the page. If on the home page, they should be as small & discreet as possible.

Work with the medium Take mobile users into consideration. Many ads don’t cross over from desktop to mobile well, causing a bad experience. 135

Productive Use of the Twilight Zone Using the right-hand column to your advantage

136

What we know about horizontal attention •  • 

Users spend 69% of their time viewing the left side of the page They only spend 30% viewing the right side (remaining 1% is if they have to horizontally scroll…which they tend to avoid doing)

Study done on 1024 x 768 monitor

137

How to make use of this Twilight Zone of the page •  Provide supplemental–not crucial–tools or information relevant to main content •  Maintain consistency…once users learn where to look for tools/ information they will look there again and expect to find it •  Area should be looked at as a place to enhance user experience ! you should be able to remove the elements on the right side of the page and still have a successful task completion

138

Relevant facets also containing results from user’s search query listed on right

www.flickr.com

139

Photo remains focus of page. Secondary attributes and features of photo are placed at the right Photo attribute: where photo was taken

Photo carousel: other photos from user Other places in site where photo appears

Photo attribute: tags associated with photo Privacy settings for photo (owner can toggle) www.flickr.com

140

Customers who purchased this item also purchased these items If item is new or there are no related items, informational (but not crucial) content moves up

www.zappos.com

141

Supplemental–but not critical– information on the right side

Users can quickly learn where tags and Related Questions live in the UI because they are consistently placed

http://ui.stackexchange.com/

142

Design Criteria for Special Purpose Pages Home • Category • Product • Gallery • SERP listings

143

Design Criteria: The Home Page The home page is the front door to your website and it gets more views than any other page. When users land on another page in your site from a search engine or deep link, one of the first places they go to is the home page.

Top Things to Improve Home Page • Don’t literally welcome” users to your site ! use a good tagline instead • Design the home page to look differently than all other pages (should still fit with

overall look-and-feel) • Make sure the search box is prominent

Top area of page is best (right or left) ! should be about 27-30 characters long • Avoid putting any top horizontal navigation (primary or otherwise) above graphical

treatments such as horizontal rules or banner areas ! might invoke banner blindness

144

Design Criteria: The Home Page Top Things to Improve Home Page (con’t) • Use graphics & photos to show real content ! label photos that aren’t

obvious in their relation of the story. • Edit photos and diagrams appropriately for the display size • Avoid animation on the home page ! too distracting, too many other things

competing for user’s attention • Do not force an animated intro on your users ! give them an option to skip

it (better yet, don’t use one) • Limit font styles to 2 (one serif, one san-serif)

145

Take the red pill or the blue pill?…

http://www.motorola.com/us

146

Allow room for white space – don’t fill every pixel on the page with content ! hard for users to focus

www.tigerdirect.com

147

Use photos of people that have a real connection to the content, not generic stock photos

www.telestream.net

148

Label people in the photo (even if they are ‘famous’) Also cite the source of the photo

www.espn.com

149

Don’t shrink down large images to fit a small space. Crop the photo and offer link to see larger version.

Way too small to read!

www.nycballet.com

150

If you offer a link to see a larger version of a map (or image) make sure it is, in fact, significantly larger…

www.goodsam.org

151

Avoid overlydecorative fonts Keep number of fonts to a minimum (1-2)

dollardreadful.com

152

Design Criteria: Category Pages Top Things to Improve Category Pages • Keep options to a comfortable minimum to avoid crowding the page and

overwhelming the user with choices • Be careful in how you display featured items ! it can look like those are

the only things you offer • Avoid designing navigational options look like product listings • Distinguish similar items from each other • Don’t automatically move users into a subcategory of products • Keep main categories to a minimum so users aren t overwhelmed with

choices

153

Avoid making navigational options look like product listings ! page can be confused with an actual product page

www.crateandbarrel.com

154

What are the differences between these televisions?

www.tigerdirect.com

155

Featured items look like only items available

www.staples.com

156

2011: Too much space devoted to descriptive or promotional images, rather than content

www.rei.com, 2011

2012: A little better… descriptive image is removed to elevate content www.rei.com, 2012

157

Design Criteria: Product Pages Top Things to Improve Product Pages •  Use short, descriptive product names •  List the most important information first in product names •  Use high-quality and large/detailed enough images for products •  Indicate if styles, colors or options other than those pictured are available •  If different colors of the same product are listed as unique products, always

present the other color options on the product page •  Show availability information on product listing pages •  Clearly indicate how products are sorted •  Provide a way to compare details of similar items ! show images w/details

158

Short product descriptions tell exactly what makes up each chocolate bar ! no marketing text

www.vosgeschocolate.com

159

Products are listed as individual items, even though it’s the same item in different colors

Product detail page focuses on chosen color while showing additional color options

www.zappos.com

160

Price + available size information are available on product listing page (on rollover), saving the user time

www.yoox.com

161

Design Criteria: Gallery Pages Top Things to Improve Gallery Pages • Use short, descriptive information for each image/video • If relevant, provide image/video size, date created/uploaded, length of time,

source • For video, choose thumbnail/static screen that clearly denotes what the video

is about ! avoid black screen with just a play button • Allow white space between images/videos to give eye rest and time to visually

process images • Let users choose to see a smaller number of larger images or a larger number

of smaller images

162

User can filter by image size, color, and black & white

images.yahoo.com

Image information isn’t available until user rolls over image

163

Thumbnails of videos are screenshots from each episode Episode title, season, episode number and length of clip are given

www.hulu.com

164

Design Criteria: Search Result Listings Top Things to Improve Search Result Listings • Mimic the search results layout of major search engines

(Google, Yahoo!, Bing) • If supplementing listing with a photo, place photo to the right of the result • If user does an image or video search •  Many results – display as a gallery •  One or few results – display the image/video first with text-based information to

the right

• If result is a document or article, display date it was written, type of

document (PDF, Word doc, etc.), and weight • Allow sorting for many results ! place sorting options close to results • If there are zero results, provide related query options (as links) to start a

new search ! do not tell them sorry, try again 165

The formula: Search result Title Display text (called the “abstract”) Page URL

People expect search results on your page to look and act like results from a major search engine

Yahoo! Search results

166

Prompt users to clarify a query if different types of results will show up

www.gettyimages.com

167

In Conclusion… Creating high performing pages involves applying solid design and usability principles at every stage of your site’s development. However, sometimes a tweak here and there can take your regular, “it’s not bad” page to one with higher conversions, happier users and higher profits. No matter what design elements you decide to implement, always test and re-test!

168

Thank you!

Need to contact me? e-mail: [email protected]

169

References & Recommended Reading Designing on a Grid Showcase of grid-based designs www.designbygrid.com/showcase

YUI CSS Grid Builder http://developer.yahoo.com/yui/grids/builder/

GridFox Firefox plug-in http://www.puidokas.com/portfolio/gridfox/

Typogridphy – A Typographical & Grid Layout CSS Framework http://csswizardry.com/typogridphy/

The Gridulator – Plug in your numbers and get a grid! http://gridulator.com/

Blueprint CSS Framework http://www.blueprintcss.org/

Book: Ordering Disorder: Grid Principles for Web Design by Khoi Vinh

Responsive Layouts Book: Responsive Web Design by Ethan Marcotte Tutorial: http://www.slideshare.net/AaronGustafson/css-adaptive-layouts-with-media-queries 170

References & Recommended Reading Design Guidelines for Special Purpose Pages Book: Homepage Usability: 50 Websites Deconstructed by Jakob Nielsen & Marie Tahir Reports: E-commerce User Experience Report by Nielsen Norman Group http://www.nngroup.com/reports/ecommerce/

Designing for Various Platforms Report (free): Usability of iPad Apps and Websites by Nielsen Norman Group http://www.nngroup.com/reports/mobile/ipad/

Online Web Fonts Typekit // typekit.com Monotype Imaging //webfonts.fonts.com Fontshop www.fontshop.com

Designing for International Pages IBM s Guidelines to Design Global Solutions: http://www-01.ibm.com/software/globalization/guidelines/

171

! !

! Design Review Are you sure that your website needs help but unsure of why? Do you simply need a credible, outside confirmation of your assumptions? In either case, NN/g can help. In these Design Reviews we leverage the thousands of hours of live usability research our experts have completed to sniff out the usable and unusable elements of your design. Experts will assess the usability of your design — working, wireframe, or prototype — relative to current best practices.

! !

The written report we produce includes:

!

A Sample of Services Offered by Nielsen Norman Group Full information about these and more services at:

www.nngroup.com/services

! !

• • •

a prioritized list of findings the reasoning behind each finding, with examples recommendations for improvements.

Limitations: The design must be in English for us to be able to review it. For an intranet, you must provide us with remote access or give us the pages on CD-ROM or similar format that does not require live access.

Usability Studies NN/g experts have years of experience under their belts in testing not only websites, but intranets, software, mobile devices, and almost anything else that has a user interface. We will test your design, whatever it may be, with the right users, wherever they may be. (If your website markets to the United States but your organization is located elsewhere, we can run studies with American users without the usual extra travel costs of such tests.) NN/g can take care of everything, or help you with just phases of the testing. You decide. Intranets: Testing should be performed at your location. You provide the intranet users, and we can help you with user recruiting.

!

In-House Seminars

!

Any of the full-day seminars presented at this conference, plus various other keynote addresses, by Nielsen Norman Group members are available as in-house events. World-class usability experts come to you and evangelize usability, convert the doubters, and teach the interested. Bring the seminars you enjoyed at our conference back to your office. We can present the content as is to almost any size audience, or adapt the content to best meet your organization’s needs.

! !

3-Day Learning by Doing Workshop This well-received workshop is dual-purpose: Test your design while teaching your team how to conduct usability tests. In this three-day seminar our usability experts guide your team through a fast and simple approach to user testing. And using your design as the case study throughout three days is a very motivating way for your team to learn about usability. We will work with you to: • • • •

plan the study facilitate the sessions analyze the results report the results.

When the seminar is complete your team will have not only produced a usability report about your design, but they will have learned how to do usability tests on their own.

!