Web Usability basics

1. Web Usability basics UX = User Experience

2. Laurie dudasik Web Designer and Social Media Coordinator Owner/Designer Director of Marketing

3. overview • What is Usability? • The Importance of Navigation • General UX (User Experience) Tips • Your Home Page vs. Landing Page • Mobile Usability • Usability Tests • If there is time --- Some “bad” examples

4. Usability means… …A person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated. 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.

5. Navigation is your website No “mystery-meat” navigation, please  Retail Store: 1. Enter Store 2. Look For Department 3. Look For Aisle 4. Look for Product 5. 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

7. Online browsing Sensory underload? • No 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.

8. Design tip #1 • Navigation 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!

9. Design tip #2 Utilities can include: • Don’t confuse your main navigation with Utilities • 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

10. 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?

11. General ux tips • 1. Break up pages into clearly defined areas. Products this company sells! Things I can do on this site! Links to the top stories! How I can login or sign up!

12. General ux tips • 2. 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

13. General ux tips • 3. 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.

14. General ux tips • You want to buy printer supplies. The online shop asks you to choose between two “gateways” before continuing: • 4. Don’t pre-determine categories for your users Home Office • You want to read an article on a news website: Already an online member? Already a subscriber but not an online member? Not a member or a subscriber yet? Enter E-mail Address: Get FREE Access Online Instantly! Enter 6-digit Account Number: • 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 Enter Password: Enter Last Name: Keep me logged in Continue Log In Sign Me Up! Where can I find my account number? Did you forget your password? Read our terms and conditions.

15. The home page Prime real estate and everyone in your company will want a piece of the canvas xkcd.com Some universities don’t have the full name of the school on the home page

16. The home page Think of all the things you may want to put into your home page’s design: Examples: • Site identity and mission • Site hierarchy • Search • Teases • Content promos • Featured promos • Timely content • Deals • Shortcuts • Registration • Show me what I’m looking for • …and what I’m not looking for • Show me where to start • Establish credibility and trust

17. Design tip #3 As quickly and clearly as possible, the Home Page should answer these 4 questions: Why should I be here? (and not somewhere else) What is this? What do they have here? What can I do here?

18. 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

19. 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

20. Flat design • Clean, open spaces • Crisp edges • Bright colors • Two-dimensional/flat illustrations affordance Visual clues in an object’s design that suggest how to use it Submit Submit Submit Submit Strong affordance Not so much Tradeoff: A clean, uncluttered look vs. providing sufficient visual clues

21. 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

22. “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??

23. Usability tests • Usability 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.

24. Usability tests • If 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

25. Usability tests There is such a thing as DIY Usability Testing • Can I afford it? 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!

26. Usability tests Traditional Testing DIY Testing Time Spent For Each Round of Testing 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. Continually, throughout the development process When do you test? When the site is nearly complete Number of rounds of testing? Typically only one or two per project, because of time and expense One every month Number of participants in each round 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

27. Usability tests • Example 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.

28. Who killed jfk?

29. Mit center for advanced visual studies

30. DS+R New York (design studio)

31. Touch of modern

32. mimarch

33. 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