Web Design and Usability

Purpose & Style of This Course

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

Course Objectives: Session 1

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

Course Objectives: Session 2

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?

Basic TermsIntroduction [ 9 ]

Chapter 7 [ 84 ]

The Big Bang Theory of Web DesignThe importance of getting people off on the right foot

Chapter 7 [ 85-87 ]

The Home Page DesignNeeds 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 DesignAND 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 DesignAND 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 DesignStakeholders vs. Reality design

Chapter 7 [ 88-89 ]

The Home Page DesignReality Will involve compromise

Main point to remember• Home page is conveying the big picture

Chapter 7 [ 88-89 ]

The Home Page DesignAnswers the following questions at a glance, correctly and with very little effort.

Chapter 7 [ 90 ]

The Home Page DesignIf 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 [ 91 ]

Plausible Excuses…

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

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 QuestionWell, 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 TargetingDon’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 FriendsWhy most arguments about usability are a waste of time, and how to avoid them

Chapter 8 [ 103 ]

Chapter 8 [ 104 ]

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. CowmenThe 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 dayKeeping testing simple –so you do enough of it

Chapter 9 [ 112-113 ]

Focus Groups are Not Usability TestsFocus 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 ProblemsMost 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 AnymoreWelcome to the 21st 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

challengesshouldn’t be done at the

cost of usability.

Chapter 10 [ 150 ]

Things That Help Allow zooming (CSS3 book, page 456)

<meta name=“viewport” content=“width=device-width”> 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 AffordancesChapter 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

clueIt’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.

Now go forth and create great sites!