Presentation on theme: " To get a better understanding about designing a website that is user friendly No programming (Yes, bummer I know) Analyzing and Discussing I want."— Presentation transcript:
To get a better understanding about designing a website that is user friendly No programming (Yes, bummer I know) Analyzing and Discussing I want your opinions!
Chapter 1 - Don’t Make Me Think! Usability basics Chapter 2 - How We Really Use the Web Scanning, satisficing, and muddling through Chapter 3 - Billboard Design 101 Designing for scanning, not reading Chapter 4 - Animal, Vegetable, or Mineral Why users like mindless choices Chapter 5 - Omit Needless Words The art of not writing for the Web Chapter 6 - Street signs and Breadcrumbs Designing Navigation
Chapter 7 - The Big Bang Theory of Web Design Chapter 8 – “The Farmer and the Cowman Should Be Friends” Chapter 9 - Usability testing on 10 cents a day Chapter 10 – Mobile: It’s not just a city in Alabama anymore
Introduction [ 6 ] Like a lot of common sense, though, it’s not necessarily obvious until after someone’s pointed it out to you.
Useful: Does it do something people need? Learnable: Can people figure out how to use it? Memorable: Do they have to relearn it each time they use it? Effective: Does it get the job done? Efficient: Does it do it with a reasonable amount of time and effort? Desirable: Do people want it? Delightful: Is using it enjoyable, or even fun? Introduction [ 9 ]
Chapter 1 [ 11 ] Don’t make me think! Krug’s first law of usability Self-evident Obvious Self-explanatory
Chapter 1 [ 18 ] If you can’t make something self-evident, you at least need to make it self-explanatory.
Chapter 1 [ 19 ] Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.
Chapter 2 [ 20 ] How We Really Use the Web Scanning, satisficing, and muddling through
Chapter 2 [ 21 ] “We’re thinking “great literature, while user is closer to ‘billboard going by at 60 miles an hour.”
Chapter 2 [ 22 ] We don’t read pages. We scan them. Fact of Life 1 of 3.
Chapter 2 [ 22 ] Why do we scan? We’re usually on a mission We know we don’t need to read everything We’re good at it
Chapter 2 [ 23 ] We tend to focus on words and phrases that seem to match the task at hand or our current or ongoing personal interests.
Chapter 2 [ 24 ] We don’t make optimal choices. We satisfice. Fact of Life 2 of 3.
Chapter 2 [ 24 ] Satisficing – a cross between satisfying and sufficing. Term created by Economist Herbert Simon We choose the first reasonable option.
Chapter 2 [ 25 ] Why don’t users look for the best choice? We’re usually in a hurry Not much of a penalty for guessing wrong Weighing options may not improve chances Guessing is more fun
Chapter 2 [ 25 ] We don’t figure out how things work. We muddle through. Fact of Life 3 of 3.
Chapter 2 [ 26 ] What do you think a web browser is?
Chapter 2 [ 26 ] Why does this happen? It’s not important to us (unless you are a web developer that is) If we find something that works, we stick to it
Chapter 2 [ 27 ] If people manage to muddle through, does it matter if they ‘get it’?
Chapter 2 [ 27 ] Of course it matters! It increase the changes that they will: Find what they’re looking for Understand the full range of your site Be steered towards the parts you want them to see Feel smarter, more in control, and trust your site more
Chapter 2 [ 27 ] If your audience is going to act like you’re designing billboards, then design great billboards.
Chapter 3 [ 28 ] Billboard Design 101 Designing for scanning, not reading
Chapter 3 [ 29 ] Take advantage of conventions Create effective visual hierarchies Break pages up into clearly defined areas Make it obvious what’s clickable Eliminate distractions Format content to support scanning
Chapter 3 [ 29-30 ] Conventions are your friends Users have come to expect: Where things will be located on a page How things work How things look
Chapter 3 [ 31] One problem with conventions, though: Designers are often reluctant to take advantage of them.
Chapter 3 [ 32 ] If you’re NOT going to use existing conventions, be sure that what you’re replacing it with either: is so clear and self-explanatory that there’s no learning curve – so it’s as good as a convention Or adds so much value that it’s worth a small learning curve http://harlem.org/
Chapter 3 [ 33] Consistency is always good BUT Clarity Trumps Consistency
Chapter 3 [ 33 ] Create Effective Visual Hierarchies Use visual cues to accurately portray relationships between things on a page
Chapter 3 [ 34 ] The more important something is, the more prominent it is. Things that are related logically are related visually. Things are “nested” visually to show what’s part of what. http://wgntv.com/ http://www.nbcnews.com/ http://www.cnn.com/
Chapter 3 [ 35 ] If everything looks equally important, the user now has to organize the web content. That’s too much work!
Chapter 3 [ 36 ] Looks like major sections of site belong to Computer Books section. Moving the heading where it belongs makes the relationship clearer.
Chapter 3 [ 36 ] Break Up Pages Into Clearly Defined Areas Users decide very quickly which parts of a page have useful information and then rarely look at other parts.
Chapter 3 [ 37 ] Make It Obvious What’s Clickable
Chapter 3 [ 38 ] Make It Obvious What’s Clickable Stick to one color for all text links or make sure their shape and location identify them as clickable.
Chapter 3 [ 38 ] Keep the Noise Down to a Dull Roar Eliminate Distractions Shouting Disorganization Clutter http://arngren.net/ http://www.amazon.com/
Chapter 3 [ 39 ] Keep the Noise Down to a Dull Roar Start with the assumption that everything is visual noise and get rid of anything that’s not making a real contribution.
Chapter 3 [ 39 ] Format Text to Support Scanning Which one would you rather scan?
Chapter 3 [ 39-40 ] Format Text to Support Scanning Use plenty of headings (correctly) Bad Better
Chapter 3 [ 40-41] Format Text to Support Scanning Keep paragraphs short Use bulleted lists Highlight key terms But not too much or effectiveness is lost
Chapter 4 [ 42 ] Animal, Vegetable, or Mineral? Why users like mindless choices
Chapter 4 [ 43 ] How many clicks is too many? Scent of information Information foraging User’s confidence of being on the right track
Chapter 4 [ 44 ] Which one do you choose for your home office? Which mailbox does this go in, Stamped Mail or Metered Mail?
Chapter 4 [ 45 ] You’re making me think too much! Hmmm…is it even worth it at this point?
Chapter 4 [ 46 ] Choices are put in different pages, not as overwhelming.
Chapter 5 [ 48 ] Omit Needless Words The art of not writing for the web
Chapter 5 [ 49 ] Get rid of half the words on each page, then get rid of half of what’s left. A bit extreme, but is meant for you seriously think about your content.
Chapter 5 [ 49 ] Benefits to a leaner page Reduces the noise level of the page Makes the useful content more prominent Makes pages shorter, users see more without scrolling http://www.pixar.com/ http://movies.disney.com/
Chapter 5 [ 50 ] Happy Talk Must Die Self-congratulatory writing You start to hear “blah blah blah…” as you are reading it No real information, just about how great we are; not what makes us great.
Chapter 5 [ 51 ] Instructions Must Die Don’t need them if everything is self- explanatory When necessary, use short, concise wording
Chapter 5 [ 52 ] Reformatted from page 51 Please help us improve the site by taking 2-3 minutes to complete this survey. NOTE: If you have comments or concerns that require a response, don’t use this form. Instead, please contact Customer Service.
Chapter 6 [ 54 ] Street Signs and Breadcrumbs Designing navigation
Chapter 6 [ 55-56 ] Scene from a mall. I need to buy a chainsaw. Hmm...Where do they keep the chainsaws? I’ll try TOOLS. Hmm...POWER TOOLS? Doh! Start again.
Chapter 6 [ 56 ] Scene from a mall navigation flow chart.
Chapter 6 [ 57 ] Scene from a mall navigation flow chart including asking for help.
Chapter 6 [ 58 ] Web Navigation 101 You’re usually trying to find something You decide whether to ask or browse first If you choose browse you make your way through a hierarchy, using signs to guide you. Eventually, if you can’t find what you’re looking for, you’ll leave.
Chapter 6 [ 61-62 ] Virtual Browsing No sense of scale Just how many pages are there? No sense of direction Only hierarchy No sense of location Physical store
Chapter 6 [ 62 ] Virtual Browsing Home Page Virtual North Star Gives users escape hatch to start fresh Ensure users can easily get to home page
Chapter 6 [ 63 ] Virtual Browsing Without navigation, there is no website, so it better be good.
Chapter 6 [ 63 ] Navigation Besides telling us where we are and helping to get to our target, navigation also: Tells us what’s here Reveals content Tells us how to use the site Won’t need to add further instructions that most people will ignore Gives us confidence in the people who built it
Chapter 6 [ 64 ] Web Navigation Conventions Certain things we’ve come to expect Horizontal street signs on corners Huh?
Chapter 6 [ 66 ] Persistent Navigation Set of navigation elements that appear on every page 4 elements you most need on hand at all times
Chapter 6 [ 67 ] Persistent Navigation Except…(there’s always an exception) on pages with forms. Keep a minimal persistent navigation But not so minimal that the page becomes a usability issue to the user Example…next slide please
Chapter 6 [ 67 ] Persistent Navigation This is a little TOO minimal navigation (logo & nav go nowhere)
Chapter 6 [ 67-68 ] Persistent Navigation Site ID Ensures the user they are still on your website Should it somewhere in the top of the page Should NOT be the most prominent thing on the page Should match the same logo that is used in advertising
Chapter 6 [ 69 ] Persistent Navigation The Utilities Things that help with using the site Should be smaller than Sections and Site ID No more than four or five Anything more than 5 looks messy Should be placed in page footer
Chapter 6 [ 71 ] Persistent Navigation Searching Keep it simple and avoid: Fancy wording Stick with “search”, not “find” or “keywords” Instructions Unnecessary these days, like using “click here” for link Options Link to options on the side or after the first query if returned list is large https://www.google.com/cse/
Chapter 6 [ 73 ] Consistent Navigation Users usually end up spending as much time on lower-level pages as they do at the top. Make sure you design for ALL levels of navigation at the start.
Chapter 6 [ 75-76 ] Page Names Four things you need to know: 1. Every page needs a name Highlighting the nav bar is not enough 2. Name needs to be in the right place Framing the content 3. Name needs to prominent Largest text on the page 4. Name needs to match what was clicked on May seem trivial, but VERY important
Chapter 6 [ 76 ] Page Names Name needs to match what was clicked on Feels like a “bait & switch”
Chapter 6 [ 77 ] “You are here” Highlight nav bars to keep users informed of where they are in the hierarchy.
Chapter 6 [ 76 ] “You are here” Examples of highlighting... Go extreme and obvious. Subtle visual cues may look good design wise, but if it’s not obvious to the user then it’s a usability issue.
Chapter 6 [ 79 ] Breadcrumbs Another way to show “you are here” Makes it easy for user to back up without have to use the back button multiple times.
Chapter 6 [ 80 ] Breadcrumbs Self-explanatory, useful for deep level sites. Best practices: Put them at the top Use > between levels Symbol visually represents moving forward Boldface the last item Again, tell the user where they are
Chapter 6 [ 80-81 ] Using Tabs Physical metaphor that works very well Why tabs are awesome: They’re self-evident Just about everyone knows what they are for; separating and organizing content They’re hard to miss People will recognize tabs and know how to use them They’re slick When designed correctly (see next slide)
Chapter 6 [ 81 ] Using Tabs Example of well designed tabs
Chapter 7 [ 84 ] The Big Bang Theory of Web Design The importance of getting people off on the right foot
Chapter 7 [ 85-87 ] The Home Page Design Needs to accommodate: Site identity and mission Site hierarchy Search Teases Hints of good stuff Content promos Newest, popular Feature promos Explore additional stuff Timely content Signs of life content Deals Shortcuts Downloads Registration
Chapter 7 [ 87 ] The Home Page Design AND Needs to: Show me what I’m looking for It’s obvious to find what I want ..and what I’m not looking for Show me wonderful new stuff Show me where to start Give me direction Establish creditability and trust Create a good first impression
Chapter 7 [ 87-88 ] The Home Page Design AND deal with: That everyone wants a piece of it (complex sites) Most desirable real estate of website Too many cooks Because it’s the first impression, everyone has an opinion on how it should look and what should be on it One size fits all Must appeal to all users
Chapter 7 [ 88 ] The Home Page Design Stakeholders vs. Reality design
Chapter 7 [ 88-89 ] The Home Page Design Reality Will involve compromise Main point to remember Home page is conveying the big picture
Chapter 7 [ 88-89 ] The Home Page Design Answers the following questions at a glance, correctly and with very little effort.
Chapter 7 [ 90 ] The Home Page Design If people are lost when they start out, they usually just keep getting…loster. Spell out the big picture. What you mean and what they think can be different.
Chapter 7 [ 92 ] But…the Home Page? Really? Yes, really. Even though people may not start there, they eventually always end up there.
Chapter 7 [ 93 ] How To Get the Message Across The tagline Next to the Site ID (more on this coming up) The Welcome blurb Concise description The “Learn more” Having a video to explain things is more common now
Chapter 7 [ 94-95 ] How To Get the Message Across Guidelines: Use as much space as necessary Convey “what is the purpose of this site for?” …but not too much space Keep is short, the most important features Don’t use the mission statement as a Welcome blurb It’s one of the most important things to test Show the home page to people outside of your organization See if they can see the “main point” of the site
Chapter 7 [ 96-97 ] Nothing beats a good tagline! TM Taglines are efficient ways to get your message across Good ones are clear and informative; explains what your site/organization does Just long enough, 6-8 words Convey differentiation and a clear benefit Are NOT generic (not mottos) Are personable, lively, and sometimes clever
Chapter 7 [ 96-97 ] Nothing beats a good tagline! TM http://jquery.com/http://www.w3schools.com/
Chapter 7 [ 98 ] We Don’t Need No Stinking Tagline If you are a household name Amazon.com, google.com Site is well known from its offline origin Target, Walmart, Barnes & Noble
Chapter 7 [ 98 ] The Fifth Question Well, now that I know what I’m looking at, where do I start? After a quick once over, user should be able to say: Here’s where to start if I want to search Here’s where to start if I want to browse Here’s where to start if I want to sample their best/featured stuff http://www.target.com/http://www.walmart.com/
Chapter 7 [ 99 ] Golden Geese Targeting Don’t overcrowd the Home page with promotions. It will lower the overall page effectiveness. Tip: Set aside 1-2 spots for promotions and change them up monthly. This also gives more evidence of “signs of life”
Chapter 8 [ 102 ] The Farmer and the Cowman Should be Friends Why most arguments about usability are a waste of time, and how to avoid them
Chapter 8 [ 105 ] “Everybody Likes.” Like all web users, we tend to have strong feelings about what we like and don’t like about web sites. When working on a web team, it’s very hard to check those feelings at the door.
Chapter 8 [ 106 ] Farmer vs. Cowmen The ideal web page as seen by someone whose job is…
Chapter 8 [ 107 ] Farmer vs. Cowmen Designer vs. Developer Designer & Developer vs. Upper Management, Marketing, Business Development
Chapter 8 [ 108 ] The Myth of the Average User There is no Average User ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC
Chapter 8 [ 109 ] The Real Question Don’t ask “Do most people like pull-down menus?” Ask “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?
Chapter 8 [ 109 ] The Answer… Usability Testing. More coming up…
Chapter 9 [ 110 ] Usability Testing on 10 cents a day Keeping testing simple –so you do enough of it
Chapter 9 [ 112-113 ] Focus Groups are Not Usability Tests Focus Group: A small group of people talk about experiences and reactions of products. They are quickly getting samples of users’ feelings and opinions about things. Usability Tests: Involve watching one person at a time try to use something to do typical tasks so you detect an fix things that confuse or frustrate them.
Chapter 9 [ 114-115 ] Truths About Usability Testing If you want a great site, you’ve got to test Testing one user is 100% better than testing none Testing one user early in the project is better than testing 50 near the end
Chapter 9 [ 117 ] Truths About Usability Testing
Chapter 9 [117 ] Truths About Usability Testing
Chapter 9 [ 124-125 ] How Do You Choose the Tasks to Test? Will depend on what you have available to test Choose enough tasks to fill up the allotted testing time Word the tasks carefully. Include descriptions like “Find a book you want to buy or a book you recently bought” instead of “Find a cookbook under $14.” (Set a scene.)
Chapter 9 [ 125-126 ] What Happens During the Test ? Welcome – Explaining the test. The questions – In case participant is confused. The Home page tour – Show participant and ask for their first thoughts. The tasks – Watch participant and continually ask them to say what’s on their mind. Keep notes. Probing – After tasks, as participant questions about their experience. Wrapping up -
Chapter 9 [ 137 ] Typical Problems Most common usability problems: Users are unclear on the concept Users don’t get what the site is about/offering or get it wrong The words they’re looking for aren’t there The wording on the site doesn’t match with wording they typically use There’s too much going on The site is too cluttered with content
Chapter 9 [ 138-139 ] Deciding What to Fix Make a collective list Choose the 10 most serious problems Rate them Create an ordered list Keep a separate list of low-hanging fruit (easy fixes) Resist the impulse to add things Take “new feature” requests with a grain of salt Ignore “kayak” problems (user goes astray but comes back quickly)
Chapter 9 [ 140 ] Alternative Lifestyles Remote testing Participant tests from home with screen sharing software and microphone. Unmoderated remote testing Services like UserTesting.com, you send in tasks and link to prototype, site, mobile app. Then you get a video back of a person performing tasks. No interaction with participant though.
Chapter 9 [141 ] Top 5 Plausible Reasons For Not Testing
Chapter 10 [ 143 ] Mobile: It’s Not Just a City In Alabama Anymore Welcome to the 21 st Century – You may experience a slight sense of vertigo
Chapter 10 [ 144 ] What’s the Difference? Not much. Basic usability principles still apply. BUT there are new added challenges for a smaller, touch based screens. What to do?
Chapter 10 [ 145 ] It’s All About Tradeoffs Constraints Things you have to do and things you can’t do Tradeoffs The less-than-ideal choices you make to live with constraints No hovering allowed
Chapter 10 [ 145-147 ] It’s All About Tradeoffs Constraints actually make design easier and foster innovation… Having something pinned down can have a focusing effect… IF you always remember to think about the user experience
Chapter 10 [ 148 ] Need To Prioritize Even More Things used in a hurry or frequently should be close at hand Should be an obvious path to get to them Tapping 3-5 levels acceptable on mobile devices as long as the scent of information is strong
Chapter 10 [ 149 ] Remember… managing real estate challenges shouldn’t be done at the cost of usability.
Chapter 10 [ 150 ] Things That Help Allow zooming (CSS3 book, page 456) Don’t force a user onto a mobile site and leave them at the home page when they originally clicked on a link to a specific page Always provide a link to the “full” website. Tablet users may not want the mobile version.
Don’t Hide Your Affordances Chapter 10 [ 151 ] Affordances are visual cues that suggest how things can be used. Like doorknobs/handles They are the meat and potatoes of a visual user interface The more clear the cues, the more unambiguous the signal
Chapter 10 [ 152 ] Remember… No cursor = No hover = No clue It’s up to you find ways around non-hover environments like the touch screen. (Label everything!)
Chapter 10 [ 152 ] Flat Design: Friend or Foe? Affordances require visual distinctions. Flat design looks nice and clean, but be careful not to hurt usability for a super clean design
Chapter 10 [ 154 ] Be Mindful of Unreliable Speeds Connection speeds are not constant Be careful not to overload mobile devices with large images (like when using responsive web designs)
Chapter 10 [ 155-156 ] Is It Delightful? Comes from marrying an idea about something people would really enjoy being able to do, but don’t imagine is possible, with a bright idea about how to use some new technology to accomplish it. Sort of like the extra credit assignment of user experience design https://popapp.in/ Another example:
Chapter 10 [ 157-158 ] Is It Learnable? The more features/options, the harder it can be to learn Remember to create help features that are easy to get to
Chapter 10 [ 157-158 ] Is It Memorable? Once you figured out how to use the app, will you remember how to use it? What if you only use that app once in a while? If you have to look for help/directions each time, what are the chances that you will abandon the app?
Chapter 13 [ 190-191 ] A Few Last Tips Don’t use small, low-contrast type Don’t put labels inside form fields Preserve distinction between visited and unvisited links Don’t float headings between paragraphs.