WEB USABILITY BASICSUX = User Experience

LAURIE DUDASIK

Owner/Designer Director of Marketing Web Designer and Social Media Coordinator

OVERVIEW1. What is Usability?2. The Importance of Navigation3. General UX (User Experience) Tips4. Your Home Page vs. Landing Page5. Mobile Usability6. Usability Tests7. If there is time --- Some “bad” examples

People don’t like to puzzle over how to do things.

If people who build a site don’t care enough to make things obvious it can erode confidence in the site and its publishers.

USABILITY MEANS……A person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated.

Retail Store:1. Enter Store2. Look For Department3. Look For Aisle4. Look for Product5. Find it?

If No = frustration

6. start over or ask for help

If Yes = Look for cashier, leave happy

Online:Your customers (users) will either search or browse

NAVIGATION IS YOUR WEBSITENo “mystery-meat” navigation, please

ONLINE BROWSINGNo sense of scale. Even after we’ve used a website extensively, we’re still not certain just how big it is. 50 pages? 1,000? 17,000? For all we know there could be huge corners we’ve never explored.

No sense of direction. In a website, there’s no left and right, no up and down. We may talk about moving up and down, but we mean up and down in the hierarchy – to a more general or more specific level.

No sense of location. In physical spaces, as we move around we accumulate knowledge about the space. We develop a sense of where things are and take shortcuts to get to them.

Sensory underload?

DESIGN TIP #1Navigation should be on EVERY page--- 1 exception: forms ---

Site ID should be on EVERY page--- no exceptions ---

This is the logo or title of the website, usually in the upper left corner

Site ID acts as your users’ reset button

This site Sections of this site Subsections Sub-subsections, etc. This page Areas of this page Items on this page

Effective visual hierarchies!

DESIGN TIP #2Don’t confuse your main navigation with UtilitiesUtilities can include:

• Archives• Checkout• Contact Us• Downloads• Help• How to Shop• Jobs/Careers• My Account• Privacy Policy

• Press Releases• Store Locator• Sign In• Shopping Cart• Site Map• Register• Order Tracking• Directory• Investor Relations

As a general rule, only 4 or 5 utilities that YOUR users most often need should be placed into your main/top navigation

From NM Dept. of Health

HOW TO TEST FOR A WELL DESIGNED WEBSITE• What site is this? (Site ID)• What page am I on? (Page Name)• What are the major sections of this site? (Sections)• What are my options at this level? (Local

Navigation)• Where am I in the scheme of things?

(“You are Here” indicators)• How can I search?

GENERAL UX TIPS1. Break up pages into clearly defined areas.

Things I can do on this site!

Links to the top stories!

Products this company sells!

How I can login or sign up!

GENERAL UX TIPS2. Make it obvious what’s clickable

vs.

Carousels are popular right now. But make sure it’s obvious that they’re interactive; otherwise they just look like a static image

Affordance: visual clues in a design

GENERAL UX TIPS3. Reduce Visual Noise

Shouting. Lots of invitations to buy! Lots of exclamation points! Lots of different typefaces, bright colors! OMG slideshows! OMG animation! OMG pop-ups!

Disorganization. Don’t make your page look like a ransacked room. Use grids to align the page, please.

Clutter. When editing your web pages, start with the assumption that everything is visual noise (the “presumed guilty until proven innocent” approach), and get rid of anything that’s not making a real contribution.

In the face of limited time and attention, everything that’s not part of the solution must go.

GENERAL UX TIPS4. Don’t pre-determine categories for your users

• You want to buy printer supplies. The online shop asks you to choose between two “gateways” before continuing:

Home Office

• You want to read an article on a news website:

Already a subscriber but not an online member?

Already an online member? Not a member or a subscriber yet?

Enter 6-digit Account Number:

Enter Last Name:

Continue

Where can I find my account number?

Enter E-mail Address:

Enter Password:

Keep me logged in

Log In

Did you forget your password?

Get FREE Access Online Instantly!

• Subscribe to the print edition• Gain access to all the articles in our

online database• Post and reply to research

discussion groups• Create and post job openings• Send RFP’s

Sign Me Up!

Read our terms and conditions.

THE HOME PAGEPrime real estate and everyone in your company will want a piece of the canvas

Some universities don’t have the full name of the school on the home page

xkcd.com

THE HOME PAGEThink of all the things you may want to put into your home page’s design:

• Site identity and mission• Site hierarchy• Search• Teases• Content promos• Featured promos• Timely content• Deals• Shortcuts• Registration

Examples:

• Show me what I’m looking for• …and what I’m not looking for• Show me where to start• Establish credibility and trust

DESIGN TIP #3As quickly and clearly as possible, the Home Page should answer these 4 questions:

What is this? What do they have here? What can I do here? Why should I be here? (and not somewhere else)

BUT… THE HOME PAGE? REALLY?It’s true. Users rarely enter your site through the home page anymore.

That’s so 2004.

Because of this, every page of your site should do as much as it can to orient them properly:

Give them the right idea about who you are, what you do, & what your site has to offer

Remember that the Site ID is the reset button. Your site ID should navigate back to the home page, so your home page still has a lot of importance in the full design

MOBILE USABILITY• One-size-fits-all solutions:

• aka: Scalable, dynamic, fluid, adaptive, responsive• Your web site should be usable on ANY size screen. The trend is to

move towards this instead of having a separate mobile version.

• Mobile devices don’t have cursors, so don’t depend on “hover” features

• Allow zooming. If you’re not using a responsive design, at least make sure that your site doesn’t resist efforts to view it on a mobile device.

xkcd.com

FLAT DESIGN• Clean, open spaces• Crisp edges• Bright colors• Two-dimensional/flat illustrations

AFFORDANCE

Strong affordance Not so much

Submit Submit Submit Submit

Tradeoff: A clean, uncluttered look vs. providing sufficient visual clues

Visual clues in an object’s design that suggest how to use it

REMEMBER YOUR SPEED• The neighborhood I am moving into only has 3G, and my boyfriend’s phone

can only connect to the 2G EDGE network.

• Be careful that your responsive-design solutions are not slowing down load-time with huge amounts of code and images that are larger than necessary for the user’s screen.

Google PageSpeed:

Free. Gives a general score for • desktop speed• mobile speed• user experience

“EVERYBODY LIKES _____”Everyone of us who works on Web sites have a one thing in common:We are also Web users.

And thus, we have strong feelings about what we like and don’t like about websites.

So…. What can we do??

USABILITY TESTSUsability Tests ARE NOT Focus Groups

In a focus group, a small group of people (5 – 10) sit around a table and talk about things, like their opinions about products, their past experiences with them, or their reactions to new concepts.

In a usability test, you watch one person at a time try to “use” your website. You give them typical tasks so you can detect and fix the things that confuse or frustrate them.

USABILITY TESTSIf you want a great site, you have to test.

Testing one user is 100% better than testing none.

Testing one user early in the project is better than testing 50 at the end

USABILITY TESTSCan I afford it?

There is such a thing as DIY Usability Testing

If you can afford to hire a professional, do it. Odds are they’ll be able to do a better job than you can.

But if you can’t hire someone, do it yourself!

USABILITY TESTSTraditional Testing DIY Testing

Time Spent For Each Round of Testing

When do you test?

Number of rounds of testing?

Number of participants in each round

1-2 days of tests, then a week to prepare a briefing or report, followed by some process to decide what to fix

1 morning/month includes testing, debriefing, and deciding what to fix.

When the site is nearly complete Continually, throughout the development process

Typically only one or two per project, because of time and expense

One every month

Eight or more Three

How do you choose the participants?

Recruit carefully to find people who are like your target audience

Recruit loosely, if necessary. Frequent testing is more important than testing “actual” users

Where do you test? Off-site, in a rented facility with an observation room with a one-way mirror

On-site, with observers in a conference room using screen sharing software to watch

Who watches? Full days of off-site testing means not many people will observe firsthand

Half day of on-site testing means more people can see the tests “live”

Reporting Someone takes at least a week to prepare a briefing or write a Big Honkin’ Report (25-50 pages)

A 1-2 page email summarizes decisions made during the team’s debriefing

Who identifies the problems?

The person running the tests usually analyzes the results and recommends changes

The entire dev. team and any interested stakeholders meet over lunch the same day to compare notes.

Primary purpose Identify as many problems as possible (sometimes hundreds), categorize and prioritize them by severity

Identify the most serious problems and commit to fixing them before the next round of testing

Out-of-Pocket Costs $5,000 - $10,000 per round if you hire someone to do it A few hundred dollars or less per round

How to Recruit Participants for Usability Studies: nngroup.com/reports/tips/recruiting

USABILITY TESTSExample questions:

• What strikes you about it?• What you can do here?• What is for?• Just look around and provide a narrative of your thoughts.(let them scroll, but not to click on anything until asked)• If you were browsing at your home, what would you click on

first?• Can you think of some service you would need that you could

use this site to get help with?• Please try to find the area where you would _______.

The questions should flow as the participant makes comments and changes his or her behavior. Try to avoid going into the test with too many pre-determined tasks.

WHO KILLED JFK?

MIT CENTER FOR ADVANCED VISUAL STUDIES

DS+R NEW YORK (DESIGN STUDIO)

TOUCH OF MODERN

MIMARCH

DID YOU ENJOY THIS PRESENTATION?If you’re interested in learning more, there can easily be a part 2 to this:

Writing Content for Web Usability

Learn how to create useful and usable content in the form of a conversation.

I’ll share with you the strategies, processes, and tactics for creating or revising content for the web.

Slides are available at sandiapixels.com