Professional Documents
Culture Documents
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.
This will guarantee failure and/or your users will hate you. AVOID.
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. Its only in certain cases that a person is willing to spend more of their precious time and attention on a site.
(usually the first several words) ! Subheadings ! Bold/emphasized text ! Short, important paragraphs ! Lists What do they ignore?
! Intro/marketing/welcoming
www.turningpointlv.org
Little hierarchy makes it difficult to scan around for important information everything has nearly equal weight, demanding equal attention
www.socialsecurity.gov
Headlines are bold, larger than body copy & easy to scan
www.latimes.com
10
11
F-pattern scanning!
12
14
www.nytimes.com
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
VS.
Single canvas with scrolling
www.mayoclinic.com
17
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
(default viewport)
(entire canvas)
www.yourauxiliary.com
20
Right-to-Left Languages
What about languages that read right to left? More attention paid to the beginning of the linethe right side of the text Its not a mirror image, though, unless the layout of a site mirrors the left-to-right layout.
21
www.emaratalyoum.com
www.haaretz.co.il
22
www.nytimes.com
23
thing a person sees stays in the mind (the recency effect ). Put something good there!
! Intensity in viewing degrades the farther the user scrolls !
24
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
27
Decide which font is truly appropriate; try to stick to two fonts (three max)
!Usage of serif & san-serif
28
29
!Be nice keep font sizes above 10 pt type 14-16 pt type is best for readability !Check your pages 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
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
www.everyblock.com
35
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 headlinenot okay for multiple lines of text, especially on a black background
37
Much better!
! Text is easier to read ! Headlines stand out from body copy ! Cleaner overall
38
www.tacobell.com
39
www.houstontexans.com, 2011
40
www.mariecatribs.com
www.lbdsociety.com
41
42
43
44
Images are highly relevant to content and help tell the story
www.bbc.co.uk
45
Photos that dont match the headline/content may cause confusion or get ignored
www.bbc.co.uk
46
www.teavana.com
47
www.tastespotting.com
48
www.sfcityguides.org
49
When people look happy, are smiling and looking at the camera, it catches the users attention
www.zappos.com
50
51
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
http://www.fedex.com/us/office/index.html
54
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
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
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 well the Pay attention to how the above mega menu screens edge avoid users works against the to area behind it having to scroll to access lower menu items
www.whitehouse.gov
62
www.reuters.com
63
www.nih.gov
www.carnival.com
64
The mega menus photos add to the distinction between products without taking away from the task of navigating
www.steinway.com
65
The mega menus 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
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 screens edge, much cleaner
www.dell.com, 2012
70
www.emc.com
71
72
Mega Menus
Pros:
!Everything [in a section] is visible at once ! no scrolling !Links can be grouped in related sets to show hierarchical
sub-navigation
73
Mega Menus
Cons:
!Low-vision users who rely on screen-magnifiers might only see a
the menu
!Doesnt work if JavaScript or CSS is turned off
74
Mega Menus
When to use:
!Your site has a great deal of navigation and content
75
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
links vertically (maximum 5-7 per column) categories together when appropriate, bold category name alphabetize links or order them according to most needed
not allow menu to go beyond the fold context of how menu looks over entire page
!Consider !Clearly
!Highlight
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)
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 arent 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
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
finance.yahoo.com
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) categories together when appropriate, bold category name alphabetize links or order them according to most needed adding a search box if appropriate trail should show where page lies in hierarchy of site
!Group !Either
!Consider
!Breadcrumb !If
possible, expand contact information rather than making a link footer unique to the audience/purpose
!Make
87
Designing on a Grid
Implementing structure to the content
88
89
90
91
9 Columns, 10 Gutters
www.waterworks.com
92
www.thegridsystem.org
93
95
Aside from avoiding automatically playing music, make volume controls easy to find
www.fergie.com
96
ge.com
97
clickmix.com
98
johnnyrockets.com
99
cnn.com
100
hulu.com
101
file types & be clear about what icon represents format so user can select the one they want
investors.yum.com
102
yahoo.com
103
yahoo.com
105
World of Warcrafts 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
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
public place)
! Music & video interferes with screen readers ! accessibility problem
Choose files that are designed for your audiences connection speed & device
!Not everyone has broadband so content may load slowly
111
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
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
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
www.twitter.com
117
User can manipulate layover duration, trip leg & price range via the slider bars
Changes should occur very close to where a users focus already is But be specific:
The wording should reflects users filtering choice: Filtering by price
www.kayak.com
119
www.hotwire.com
120
122
123
The worst thing you can do when advertising online is neglect the user experience
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
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 its from your company
www.carnival.com
128
Irony: this is on an advertising news site, right above an article about good design
www. http://advertising-information.com.com
129
www.webmd.com
130
This is the equivalent of a pop-up ad, but worseuser 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
Search ads are designed to look like the rest of search results page
Why isnt this designing for evil? Because the ads only display when they are truly relevant to the users query
www.google.com
134
Speak plainly, make options clear, provide useful information Avoid pop-ups (and modal boxes that act like pop ups) Dont 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.
136
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 scrollwhich they tend to avoid doing)
137
138
Relevant facets also containing results from users 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
Users can quickly learn where tags and Related Questions live in the UI because they are consistently placed
http://ui.stackexchange.com/
142
143
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
145
http://www.motorola.com/us
146
Allow room for white space dont 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
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
dollardreadful.com
152
choices
153
Avoid making navigational options look like product listings ! page can be confused with an actual product page
www.crateandbarrel.com
154
www.tigerdirect.com
155
www.staples.com
156
2011: Too much space devoted to descriptive or promotional images, rather than content
www.rei.com, 2011
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 its 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
source
!For video, choose thumbnail/static screen that clearly denotes what the video
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
163
Thumbnails of videos are screenshots from each episode Episode title, season, episode number and length of clip are given
www.hulu.com
164
the right
People expect search results on your page to look and act like results from a major search engine
166
www.gettyimages.com
167
In Conclusion
Creating high performing pages involves applying solid design and usability principles at every stage of your sites development. However, sometimes a tweak here and there can take your regular, its 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!
169
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
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 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.
www.nngroup.com/services
! ! ! ! ! !
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 organizations needs.
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.