Maximize Website Visitors with Usability Best Practices

CERTIFICATION WORKSHOP
https://dmanc.org/certification/© Copyright 2018 The Direct Marketing Association of Northern California. All rights reserved.
Web Usability:
Maximizing the Visitors to Your Site
John Thyfault,
Vice President of Search Engine & Social Media
Marketing, Beasley Direct and Online Marketing
Adjunct Professor, University of California, Santa
Cruz, Silicon Valley Extension
June 1, 2018 | 10:00 AM - 12:00 PM PST

© Copyright 2018 The Direct Marketing Association of Northern California. All rights reserved.
https://dmanc.org/certification/
How To Redeem Your $1,000 of Free B2B
Data
▪ Contact: Sky Cassidy
▪ MountainTop Data
▪ scassidy@mtd-email.com
▪ (818) 252-8140 x2788
▪ www.MountainTopData.com

The Direct Marketing Association of
Northern California
▪ The Direct Marketing Association of Northern California
was formed to educate, inform and provide networking
opportunities for Direct and Online Marketing
professionals in the San Francisco Bay Area.  
 
We hold monthly seminar meetings, certification
workshops, periodic half-day seminars, and provide
opportunities for the best in learning and job networking
in the Northern California marketing community

DMAnc Certification Requirements
▪ A certificate requires the completion of any 8 courses,
taken within two years of starting.
▪ Of course, if a certificate isn’t in your immediate plan,
you can take as few or as many of the courses as you’d
like.
▪ Students who complete a certification program will
receive a frameable Certificate of Completion as well as
a digital badge to include on your website, blog, email
signature, or social profiles.

Upcoming Certification Workshops
Jun 15, 2018 10:00am-12:00pm PST Nurturing Using Personas & Journey
Mapping
Jun 22, 2018 10:00am-12:00pm PST Social Media Advertising Best Practices
Sept 14, 2018 10:00am-12:00pm PST Demand Generation and Lead Conversion
Fundamentals
Sept 21, 2018 10:00am-12:00pm PST Advanced Demand Generation Training &
Lead Conversion Training
Oct 12, 2018 10:00am-12:00pm PST Search Engine Optimization Fundamentals
Oct 19, 2018 10:00am-12:00pm PST Advanced Search Engine Optimization
Nov 2, 2018 10:00am-12:00pm PST Improving Email Marketing Response Rates
Dec 7, 2018 10:00am-12:00pm PST Pay Per Click Advertising Fundamentals
Dec 14, 2018 10:00am-12:00pm PST Advanced Pay Per Click Advertising
http://www.dmanc.org/certification.htm

About The Instructor
John Thyfault, Vice President
Search Engine & Social Media Marketing at Beasley Direct & Online Marketing
John Thyfault has more than 20 years of marketing, sales and product development
experience. His knowledge of search engine optimization (SEO), pay per click (PPC)
marketing and social media marketing, combined with an in-depth understanding of
customer identification, market analysis and segmentation, allows him to deliver high
returns on client marketing investment.
Prior to working with Beasley Direct, John was Senior Client Services Project Director at
ThirdAge.com, a first wave baby boomer lifestyle and community website. At ThirdAge
he successfully led major client sponsorships for Tylenol, American Century, Intel, IBM,
and Revlon.
John has led workshops for the Silicon Valley American Marketing Association, the
Direct Marketing Association in Northern and Southern California and the Business
Marketing Association. He also teaches Search Engine Marketing at University of
California, Santa Cruz, Extension in Silicon Valley and is currently leading day long
seminars as part of the Online Marketing Summit's 2011 International Tour.

Workshop Overview
▪ What is website usability & why does it matter
▪ Americans with Disabilities Act Implications on usability
▪ Elements of a usable website
▪ Understanding you user
▪ Accessibility
▪ Identity
▪ Navigation
▪ Content
▪ Tools for usability testing
▪ Mobile Sites

What Is Usability
Making the interface between people & technology
seamless
“Usability is the science of making technology work for
people.”
Dr. Peter J. Meyers, President of UserEffect
(www.usereffect.com)

Dr. Jakob Nielsen
▪ Ph.D. computer-human interaction, Principal at Nielsen
Norman Group
▪ Sun Microsystems Distinguished Engineer, All
Around Guru
▪ Major Components of Usability
▪ Learnability
▪ Efficiency
▪ Memorability
▪ Errors
▪ Satisfaction

“Designers Are Not Users”
▪ Jakob Nielsen says it best
▪ “One of usability’s most hard-earned lessons is
that you are not the user. This is why it’s a
disaster to guess at the users’ needs.”
▪ “Across 33 rich countries, only 5% of the
population has high computer-related abilities,
and only a third of people can complete medium-
complexity tasks.”
The Distribution of Users’ Computer Skills: Worse Than You Think, Nielsen,
Jakob, https://www.nngroup.com/articles/computer-skill-levels/, 11/13/16

User Computer Skills By Country
Nielsen Norman Group / OCED 2011-2015

Why Worry About Usability?
▪ It has impact on your bottom line
▪ Visitors
▪ 85% abandon a site due to poor design
▪ 83% leave because it takes too many clicks to get
what they want
▪ 62% gave up looking for an item while shopping
online
▪ 40% don’t return due to a negative content
experience such as hard to use content
▪ Kathy McShea, Usability Testing: Options to Fit Any
Budget, Emerald Strategies, 2008

Why Worry About Usability?
▪ It has impact on your organization’s bottom line
▪ 50% of sales are lost because a visitor can’t find
content
▪ 49% of sites fail to comply with simple usability
principles
Kathy McShea, Usability Testing: Options to Fit Any Budget,
Emerald Strategies, 2008

Major Corporations Live and Breathe
Usability
▪ Adobe, Amazon, Apple, Google, IBM, Nokia, Samsung
and Sony are among just a few major corporations that
are constantly updating and publicly publishing their
usability guidelines for partners and developers
https://usabilitygeek.com/usability-user-experience-user-interface-
guidelines-companies-2016/

National Federation of the Blind vs. Target
Corporation
▪ NFB brought suit against Target for having its site, a
“place of public accommodation” not accessible to the
visually impaired in 2006
▪ Target settled out of court in 2008 - $6 million fund for
claims plus re-working of the site to accommodate the
visually impaired
▪ Taking care of usability up front for everyone is much
less expensive than a forced retro-fit
http://www.aseonline.org/epeopleweek/2008/September/
TargetSettlesAccessibilitySuitADAAppliesto.aspx

10 Usability Heuristics for User Interface
Design
▪ Visibility of system status
▪ Match between system and the real world
▪ User control and freedom
▪ Consistency and standards
▪ Error prevention
▪ Recognition rather than recall
▪ Flexibility and efficiency of use
▪ Aesthetic and minimalist design
▪ Help users recognize, diagnose, and recover from
errors
▪ Help and documentation
https://www.nngroup.com/articles/ten-usability-heuristics/

Step By Step Guide To Designing Your
Website
https://www.usability.gov/how-to-and-tools/resources/ucd-map.html

Elements Of A Usable Website 
Defining The User
▪ Who are your ideal users? You probably will have more
than one
▪ Where are they in the buying cycle?
▪ What do you want them to do on your site?
▪ What will they come to your site?
▪ What parts of the site will they go to?
▪ How do they interact with your site?
▪ How do they speak? What is their most familiar way of
talking about your product or service?

Defining The User
▪ Research the user’s goals
▪ Support call data
▪ Field surveys
▪ Speak with current customers
▪ Look at web traffic patterns
▪ Look at referring data from search engines and
other sites

Understanding User Interactions
▪ Knowing how your user interacts with the site is one of
the keys to building a friendly site
▪ Both quantitative and qualitative info is needed
▪ Methods of info gathering
▪ Eye tracking
▪ Web analytics
▪ Focus groups
▪ Individual user Q&A session

Understanding User Interactions
▪ Useful tools for understanding user interaction
▪ Google Analytics - Content Experiments
▪ HP Optimost - Multivariant, dynamic testing
▪ Clicktale - Full service solution, heat maps, path
maps, attention and psychological mapping
▪ UserTesting.com - Web based user panels
▪ CrazyEgg - Heat map, click map, path map, A/B
testing

Understanding User Interaction 
Eye Tracking vs. Mouse Tracking

Eye Tracking - Heat Maps

Heat Maps

Mouse Tracking

Understanding User Interaction - Eye
Tracking
Before After

Accessibility
▪ Adequate text-to-background contrast
▪ Font spacing/easy to read
▪ Flash and add-ons used appropriately
▪ Images have appropriate ALT tags
▪ Site has a custom 404 (page not found) page
▪ Your average user’s browser size, not screen resolution
▪ Site load speed
▪ https://developers.google.com/speed/pagespeed/
insights/
Sourced from www.usereffect.com’s 25 point website
usability checklist

Accessibility - Page Speed Insights
▪ PageSpeed Insights offers a free review of your site
based on best practices in web development. Based off
of the Chrome User Experience Report
▪ FCP - First Content Paint: measures the time it take
for the user visible content to load
▪ Does not include background content and scripts
▪ DCL- DOM Content Loaded: measures the time it
takes for all content, visible and not, to load and
parse
▪ Option if your site is not part of CUER, use Lighthouse
▪ https://developers.google.com/web/tools/lighthouse/

Accessibility - Page Speed Insights

Accessibility - How Not To Design A Site

Accessibility Design For All Users

Accessibility - Graphics vs. Text

Accessibility
▪ Offer the user selections instead of requiring excess
data entry
▪ Lead forms with drop downs for common areas
▪ Check out forms that can pre-populate fields
▪ User registration that auto-completes forms
▪ Pre-selected common choices

Accessibility
▪ Consistent look and feel among consecutive pages
▪ Headlines on follow-on pages that match previous
pages’ call to action
▪ Progress indicators through multipage funnels

Accessibility - custom Error Page

1024x768
800x600

Identity
▪ Company logo is prominently placed
▪ Tagline makes a company’s purpose clear
▪ Home page is digestible in 5 seconds
▪ Clear path to company information
▪ Clear path to contact information
Sourced from www.usereffect.com’s 25 point website usability checklist,
© 2009, 847-708-6007

Identity

Navigation
▪ Main navigation is easily identifiable
▪ Navigation labels are clear and concise
▪ Number of buttons/links is reasonable
▪ Company logo is linked to home page
▪ Links are consistent and easy to identify
▪ Site search is easy to access
© 2009, 847-708-6007

Content
▪ Major headlines are clear & consistent
▪ Critical content and calls to action are above the fold
▪ Styles & colors are consistent within sections and
across site
▪ Bold, italic and other emphasis is used only when
needed
▪ Ads & pop ups are unobtrusive
© 2009, 847-708-6007

Content
▪ Main copy is concise and explanatory
▪ Copy is designed for readers, browsers and skimmers
▪ URLs are meaningful & user friendly
▪ Page titles are explanatory (both on page & in source
code)
© 2009, 847-708-6007

http://reviews.cnet.com/dslr-buying-guide/

Usability & Mobile Devices
A Whole Workshop By Itself
▪ Reduce the amount of content
▪ Single column layouts work best
▪ Present that navigation differently
▪ Minimize text entry
▪ Decide whether you need more than 1 mobile site
▪ Design for touchscreen and non-touchscreen users
▪ Take advantage of inbuilt functionality
http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

▪ Google Webmaster Tools are sending out usability
notices now
▪ A defined viewing area (or viewport) that adjusts to the
device’s screen size.
▪ Content that flows in the viewport, so that users don’t
have to scroll horizontally or pinch the screen in order to
see the entire page.
▪ Fonts that scale for easier reading on small screens.
▪ Easy-to-touch elements (e.g., buttons) that are well-
spaced from other touch elements.
▪ Visual design and motion driven by mobile-friendly
technology.

Facebook

Top, Product Page

Very Bottom, Product Page

Ecommerce and Images Best Practices
▪ Don’t Skimp on the Images
▪ Make Your Images Dynamic with 360° Views
▪ Contextualize Your Product Images
▪ Show products in real life use
▪ Find the Perfect Zoom
▪ Show the Product Texture

Ecommerce and Images Best Practices
▪ Show a Picture for Each Variation in Color or Style
▪ Show the Size of Your Product
▪ Are there any Hidden Features?
▪ Use Videos to Better Convey what the Product Looks
like in Real Life
▪ Conserve the Customers’ Clicks

Do You Want/Need A Responsive Site?
▪ Ask the question, “Do I want a responsive design
(BestBuy) or do I want to have multiple sites
(Facebook)?
▪ Responsive design takes a dedicated team that is very
tuned into maintaining and optimizing across multiple
platforms
▪ Separate sites and can allow for platform specific
content easier

Conclusions
▪ A well designed, usable website is vital to achieving
your online marketing goals
▪ Balance design and usability
▪ Try to stay within accepted conventions
▪ Design your site with your users and their goals in mind
▪ Design for multiple devices......
▪ Don’t get seduced by the latest “Oh, shiny!”

Some Resources From Jakob Nielsen
▪ Column
▪ Alertbox column on Web usability
▪ Usability 101: Introduction to Usability
▪ Top 10 Mistakes in Web Design
▪ Books
▪ Eyetracking Web Usability, 2010
▪ Prioritizing Web Usability, 2006
▪ Homepage Usability: 50 Websites Deconstructed, 2001 (113 guidelines for
homepage design)
▪ Designing Web Usability: The Practice of Simplicity, 1999: a quarter million
copies in print; 22 languages
▪ International User Interfaces, 1996 (co-editor with with Elisa del Galdo)
▪ Multimedia and Hypertext: The Internet and Beyond, 1995: second edition
of textbook on linked online information
▪ Coordinating User Interfaces for Consistency, 1989 (editor): still the best
book on how to get a standard look-and-feel (reprint edition published 2002)

Free SEO & PPC Audits
From Beasley Direct and Online Marketing  
Get a free initial SEO and/or PPC Audit from Beasley
Direct and Online Marketing:
https://beasleydirect.com/free-ppc-advertising-audit/
https://beasleydirect.com/free-seo-audit-offer/
Have us take a quick look at your site and identify some of
the areas in which we can help you improve.

Thank You!!
John Thyfault
Beasley Direct & Online Marketing, Inc.
http://www.beasleydirect.com/search_marketing.html
jthyfault@beasleydirect.com
650-323-1881
@JohnThyfault

Maximize Website Visitors with Usability Best Practices

Recommended

Recommended

More Related Content

Similar to Maximize Website Visitors with Usability Best Practices

Similar to Maximize Website Visitors with Usability Best Practices (20)

Recently uploaded

Recently uploaded (20)

Maximize Website Visitors with Usability Best Practices