Presentation is loading. Please wait.

Presentation is loading. Please wait.

 To get a better understanding about designing a website that is user friendly  No programming (Yes, bummer I know)  Analyzing and Discussing  I want.

Similar presentations


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:

1

2  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!

3  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

4  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

5 Introduction [ 6 ] Like a lot of common sense, though, it’s not necessarily obvious until after someone’s pointed it out to you.

6  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 ]

7 Chapter 1 [ 11 ] Don’t make me think! Krug’s first law of usability Self-evident Obvious Self-explanatory

8 Chapter 1 [ 12-13 ]

9 Chapter 1 [ 14-15 ]

10 Chapter 1 [ 16 ]

11 Chapter 1 [ 17 ]

12 Chapter 1 [ 18 ] If you can’t make something self-evident, you at least need to make it self-explanatory.

13 Chapter 1 [ 19 ] Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.

14 Chapter 2 [ 20 ] How We Really Use the Web Scanning, satisficing, and muddling through

15 Chapter 2 [ 21 ] “We’re thinking “great literature, while user is closer to ‘billboard going by at 60 miles an hour.”

16 Chapter 2 [ 22 ] We don’t read pages. We scan them. Fact of Life 1 of 3.

17 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

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

19 Chapter 2 [ 24 ] We don’t make optimal choices. We satisfice. Fact of Life 2 of 3.

20 Chapter 2 [ 24 ] Satisficing – a cross between satisfying and sufficing. Term created by Economist Herbert Simon We choose the first reasonable option.

21 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

22 Chapter 2 [ 25 ] We don’t figure out how things work. We muddle through. Fact of Life 3 of 3.

23 Chapter 2 [ 26 ] What do you think a web browser is?

24 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

25 Chapter 2 [ 27 ] If people manage to muddle through, does it matter if they ‘get it’?

26 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

27 Chapter 2 [ 27 ] If your audience is going to act like you’re designing billboards, then design great billboards.

28 Chapter 3 [ 28 ] Billboard Design 101 Designing for scanning, not reading

29 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

30 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

31 Chapter 3 [ 31] One problem with conventions, though: Designers are often reluctant to take advantage of them.

32 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/

33 Chapter 3 [ 33] Consistency is always good BUT Clarity Trumps Consistency

34 Chapter 3 [ 33 ] Create Effective Visual Hierarchies Use visual cues to accurately portray relationships between things on a page

35 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/

36 Chapter 3 [ 35 ] If everything looks equally important, the user now has to organize the web content. That’s too much work!

37 Chapter 3 [ 36 ] Looks like major sections of site belong to Computer Books section. Moving the heading where it belongs makes the relationship clearer.

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

39 Chapter 3 [ 37 ] Make It Obvious What’s Clickable

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

41 Chapter 3 [ 38 ] Keep the Noise Down to a Dull Roar Eliminate Distractions  Shouting  Disorganization  Clutter http://arngren.net/ http://www.amazon.com/

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

43 Chapter 3 [ 39 ] Format Text to Support Scanning Which one would you rather scan?

44 Chapter 3 [ 39-40 ] Format Text to Support Scanning  Use plenty of headings (correctly) Bad Better

45 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

46 Chapter 4 [ 42 ] Animal, Vegetable, or Mineral? Why users like mindless choices

47 Chapter 4 [ 43 ]  How many clicks is too many?  Scent of information  Information foraging  User’s confidence of being on the right track

48 Chapter 4 [ 44 ] Which one do you choose for your home office? Which mailbox does this go in, Stamped Mail or Metered Mail?

49 Chapter 4 [ 45 ] You’re making me think too much! Hmmm…is it even worth it at this point?

50 Chapter 4 [ 46 ] Choices are put in different pages, not as overwhelming.

51 Chapter 4 [ 47 ] Give Guidance That’s  Brief  Timely  Unavoidable

52 Chapter 5 [ 48 ] Omit Needless Words The art of not writing for the web

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

54 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/

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

56 Chapter 5 [ 51 ] Instructions Must Die  Don’t need them if everything is self- explanatory  When necessary, use short, concise wording

57 Chapter 5 [ 52 ] Breakdown from page 51

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

59 Chapter 6 [ 54 ] Street Signs and Breadcrumbs Designing navigation

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

61 Chapter 6 [ 56 ] Scene from a mall navigation flow chart.

62 Chapter 6 [ 57 ] Scene from a mall navigation flow chart including asking for help.

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

64 Chapter 6 [ 60 ] Web Navigation 101 flow chart.

65 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

66 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

67 Chapter 6 [ 63 ] Virtual Browsing Without navigation, there is no website, so it better be good.

68 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

69 Chapter 6 [ 64 ] Web Navigation Conventions Certain things we’ve come to expect Horizontal street signs on corners Huh?

70 Chapter 6 [ 64 ]

71 Chapter 6 [ 66 ] Persistent Navigation Set of navigation elements that appear on every page 4 elements you most need on hand at all times

72 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

73 Chapter 6 [ 67 ] Persistent Navigation This is a little TOO minimal navigation (logo & nav go nowhere)

74 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

75 Chapter 6 [ 69 ] Persistent Navigation The Sections (Primary Navigation)

76 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

77 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/

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

79 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

80 Chapter 6 [ 76 ] Page Names Name needs to match what was clicked on Feels like a “bait & switch”

81 Chapter 6 [ 77 ] “You are here” Highlight nav bars to keep users informed of where they are in the hierarchy.

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

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

84 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

85 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)

86 Chapter 6 [ 81 ] Using Tabs Example of well designed tabs

87 Chapter 6 [ 82-83 ] Trunk Test Pencils ready!

88 Chapter 6 [ 82-83 ] Trunk Test Pencils down!

89 Chapter 6 [ 81 ] Trunk Test Revealed 1 2 3 4 5 6

90 Chapter 7 [ 84 ] The Big Bang Theory of Web Design The importance of getting people off on the right foot

91 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

92 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

93 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

94 Chapter 7 [ 88 ] The Home Page Design Stakeholders vs. Reality design

95 Chapter 7 [ 88-89 ] The Home Page Design Reality  Will involve compromise  Main point to remember Home page is conveying the big picture

96 Chapter 7 [ 88-89 ] The Home Page Design Answers the following questions at a glance, correctly and with very little effort.

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

98 Chapter 7 [ 91 ] Plausible Excuses…

99 Chapter 7 [ 92 ] But…the Home Page? Really? Yes, really. Even though people may not start there, they eventually always end up there.

100 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

101 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

102 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

103 Chapter 7 [ 96-97 ] Nothing beats a good tagline! TM http://jquery.com/http://www.w3schools.com/

104 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

105 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/

106 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”

107 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

108 Chapter 8 [ 103 ]

109 Chapter 8 [ 104 ]

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

111 Chapter 8 [ 106 ] Farmer vs. Cowmen The ideal web page as seen by someone whose job is…

112 Chapter 8 [ 107 ] Farmer vs. Cowmen Designer vs. Developer Designer & Developer vs. Upper Management, Marketing, Business Development

113 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

114 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?

115 Chapter 8 [ 109 ] The Answer… Usability Testing. More coming up…

116 Chapter 9 [ 110 ] Usability Testing on 10 cents a day Keeping testing simple –so you do enough of it

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

118 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

119 Chapter 9 [ 117 ] Truths About Usability Testing

120 Chapter 9 [117 ] Truths About Usability Testing

121 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.)

122 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 -

123 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

124 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)

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

126 Chapter 9 [141 ] Top 5 Plausible Reasons For Not Testing

127 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

128 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?

129 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

130 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

131 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

132 Chapter 10 [ 149 ] Remember… managing real estate challenges shouldn’t be done at the cost of usability.

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

134 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

135 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!)

136 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

137 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)

138 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:

139 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

140 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?

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

142 Now go forth and create great sites!


Download ppt " To get a better understanding about designing a website that is user friendly  No programming (Yes, bummer I know)  Analyzing and Discussing  I want."

Similar presentations


Ads by Google