Web UX and Usability Training

CERTIFICATION WORKSHOP
https://dmanc.org/certification/© Copyright 2019 The Direct Marketing Association of Northern California. All rights reserved.
Web Usability
February 13, 2019
Presented by John Thyfault
• Vice President, Search Engine & Social Media Marketing
• Instructor, Direct Marketing Association of Northern California
• Adjunct Professor, University of California, Santa Cruz, Silicon
Valley Extension

© Copyright 2019 The Direct Marketing Association of Northern California. All rights reserved.
https://dmanc.org/certification/
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 luncheon 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

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

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
• Feb 13, 2019: Web Usability
• Feb 15, 2019: Advanced Web Analytics
• Feb 20, 2019: Accelerating Lead Generation Using Meeting Maker Campaigns
• Feb 27, 2019: How to Create Cross-Platform Remarketing Campaigns
• Mar 1, 2019: Improving Email Marketing Response Rates
• Mar 6, 2019: Advanced Email Marketing
• Mar 8, 2019: Demand Generation and Lead Conversion Fundamentals
• Mar 15, 2019: Advanced Demand Generation and Lead Conversion
• Mar 22, 2019: SEO Fundamentals
• Mar 29, 2019: Advanced SEO
• Apr 12, 2019: Social Media Advertising Best Practices
• May 3, 2019: Web Usability
• May 10, 2019: Pay-per-Click Advertising Fundamentals
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-2018

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, 2017

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, 2017

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!”
Let us know how we do! We will be sending out a survey
to get your feedback after the webinar.

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
▪ Prioritizing Web Usability
▪ Homepage Usability: 50 Websites Deconstructed, (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

Web UX and Usability Training

Recommended

Recommended

More Related Content

Similar to Web UX and Usability Training

Similar to Web UX and Usability Training (20)

Recently uploaded

Recently uploaded (20)

Web UX and Usability Training