WEB USABILITY BASICS UX = User Experience. LAURIE DUDASIK Owner/DesignerDirector of Marketing Web Designer and Social Media Coordinator

WEB USABILITY BASICS UX = User Experience

LAURIE DUDASIK Owner/DesignerDirector of Marketing Web Designer and Social Media Coordinator

OVERVIEW 1.What is Usability? 2.The Importance of Navigation 3.General UX (User Experience) Tips 4.Your Home Page vs. Landing Page 5.Mobile Usability 6.Usability Tests 7.If there is time --- Some bad examples

People dont like to puzzle over how to do things. If people who build a site dont 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 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 NAVIGATION IS YOUR WEBSITE No mystery-meat navigation, please

ONLINE BROWSING No sense of scale. Even after weve used a website extensively, were still not certain just how big it is. 50 pages? 1,000? 17,000? For all we know there could be huge corners weve never explored. No sense of direction. In a website, theres 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 #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!

DESIGN TIP #2 Dont confuse your main navigation with Utilities Utilities 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 TIPS 1. 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 TIPS 2. Make it obvious whats clickable vs. Carousels are popular right now. But make sure its obvious that theyre interactive; otherwise they just look like a static image Affordance: visual clues in a design

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. Dont 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 thats not making a real contribution. In the face of limited time and attention, everything thats not part of the solution must go.

GENERAL UX TIPS 4. Dont pre-determine categories for your users You want to buy printer supplies. The online shop asks you to choose between two gateways before continuing: HomeOffice 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 RFPs Sign Me Up! Read our terms and conditions.

THE HOME PAGE Prime real estate and everyone in your company will want a piece of the canvas Some universities dont have the full name of the school on the home page xkcd.com

THE HOME PAGE Think of all the things you may want to put into your home pages design: Site identity and mission Site hierarchy Search Teases Content promos Featured promos Timely content Deals Shortcuts Registration Examples: Show me what Im looking for and what Im not looking for Show me where to start Establish credibility and trust

DESIGN TIP #3 As 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? Its true. Users rarely enter your site through the home page anymore. Thats 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 dont have cursors, so dont depend on hover features Allow zooming. If youre not using a responsive design, at least make sure that your site doesnt 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 affordanceNot so much Submit Tradeoff: A clean, uncluttered look vs. providing sufficient visual clues Visual clues in an objects design that suggest how to use it

REMEMBER YOUR SPEED The neighborhood I am moving into only has 3G, and my boyfriends 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 users 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 dont like about websites. So. What can we do??

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.

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

USABILITY TESTS Can I afford it? There is such a thing as DIY Usability Testing If you can afford to hire a professional, do it. Odds are theyll be able to do a better job than you can. But if you cant hire someone, do it yourself!

USABILITY TESTS Traditional TestingDIY 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 moreThree 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 ReportingSomeone 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 teams 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 purposeIdentify 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 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.

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 youre 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. Ill share with you the strategies, processes, and tactics for creating or revising content for the web. Slides are available at sandiapixels.com

Documents

WEB USABILITY BASICS UX = User Experience. LAURIE DUDASIK Owner/DesignerDirector of Marketing Web Designer and Social Media Coordinator