practical usability: how to make your website easy to use, and why it matters

87
Practical Usability: Why So Many Websites Frustrate Their Users and How to Make Your Site Enjoyable Matt Perman @mattperman facebook.com/mattperman www.whatsbestnext.com Text

Upload: mattperman

Post on 02-Jul-2015

4.114 views

Category:

Internet


0 download

DESCRIPTION

These are the slides for my presentation at the Biola Digital Ministry Conference on web usability. I first discuss why usability matters (both the practical case and the biblical case -- which is rarely seen but is very interesting). Then I discuss the nuts and bolts of how to create a usable website, focusing especially on how to create good information architecture.

TRANSCRIPT

Page 1: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Practical Usability: Why So Many Websites Frustrate Their Users and How to Make Your Site Enjoyable

Matt Perman@mattperman facebook.com/mattperman

www.whatsbestnext.com

Text

Page 2: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

My aim: I want to give you better reasons to care about usability, show you that you need to give it close

attention, and show you how to make your site usable without having to spend a ton of money.

Page 3: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Why Does Usability Matter?

Page 4: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Practical Case

Page 5: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 6: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

1. People will leave your site or be frustrated with your

site if it is not easy to use.

Page 7: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

2. If your site isn’t usable, it diminishes your brand and the effectiveness of your content and site in general.

Page 8: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

3. Making your site usable increases its effectiveness

Page 9: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

When we released the major redesign of the Desiring God site to improve usability, within four months visits increased 99%, page views increased 356%, and audio

listens increased 359%.

Page 10: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

You do need to make an emotional connection with users, but this does not come by sacrificing usability.

Page 11: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 12: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 13: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

That’s the practical case. But there are also biblical reasons--which are fascinating and super important.

Page 14: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Biblical Case

Page 15: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

1. Making your site easy to use is a matter of loving

your neighbor as yourself.

Page 16: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

We should love our neighbor as ourselves

“You shall love your neighbor as yourself.” Matthew 22:39

“So whatever you wish that others would do to you, do also to them, for this is the Law and the Prophets.”Matthew 7:12

Page 17: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

This is how Christians are

“There is another that has made you, and preserves you, and provides for you, and on whom you are dependent: and He has made you for himself, and for the good of your fellow--creatures, not only for yourself. He has placed before you higher and nobler ends than self, even the welfare of your fellow-men, and of society, and the interests of his kingdom; and for these you ought to labor and live, not only in time, but in eternity.”

Jonathan Edwards

Page 18: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

This is how Christians are

“Do all the good you can, to all the people you can, at all the times you can, as long as you ever can.”

John Wesley

Page 19: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Any objections?

Page 20: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

This applies to all areas of life--not just at church!

Page 21: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 22: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Paul was not loving to the churches he planted but a

jerk when he was making tents.

And his tents didn’t leak.

Page 23: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

“Let all that you do be done in love.”

1 Corinthians 16:14

Page 24: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

“See that no one repays anyone evil for evil, but always

seek to do good to one another and to all men.”

1 Thessalonians 5:14

Page 25: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

We are to see all our work as a service to others, and do it from that motive.

Page 26: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Which means it applies to your websites

Page 27: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Which means it applies to your websites

And the chief application here (though not the only) is that you should make your site usable.

Page 28: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

This is about being loving people in how we build our

websites.

Page 29: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

“A charitable person, whose heart

disposes him to bounty and liberality, will be quick-sighted to discern the

needs of others.”

Jonathan Edwards

Page 30: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

“Let us be on the watch for opportunities of usefulness; let us go about the world with our ears and our eyes open, ready to avail ourselves of every occasion for doing good; let us not be content till we are useful, but make this the main design and ambition of our lives.”

Charles Spurgeon

Page 31: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

We are to take pains to make our sites usable

Page 32: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

2. (This is exciting!)

Page 33: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

This is steak, not broccoli.

Page 34: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

“He has told you, O man, what is good; and what does the Lord require of you but to do justice, and to love mercy, and to walk humbly with your God?”Micah 6:8

Page 35: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

We are to be fanatical about serving others

“...who gave himself for us to redeem us from all lawlessness and to purify for himself a people for his own possession who are zealous for good works.”Titus 2:14

Page 36: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Christian ethic is hazardous liberality.

Page 37: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Maslow revised his hierarchy of needs later in life. The

highest purpose was living for a purpose greater than yourself.

Page 38: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Don’t be the pink slime of websites!

Page 39: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Christians should be leaders and at the forefront of

excellence and using technology for the good of others because, more than anyone else, we exist for the good

of others.

Page 40: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

3. A usable site in itself advances the gospel, in addition to your message itself, because it testifies to the fact

that we (and God!) love people

Page 41: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

“Walk as children of light (for the fruit of light is found in all that is good and right and true), and try to discern what is pleasing to the Lord. Take no part in the unfruitful works of darkness, but instead expose them. For it is shameful even to speak of the things they do in secret. But when anything is exposed by the light, it becomes visible, for anything that becomes visible is light. Therefore it says, ‘Awake, O sleeper, and rise from the dead, and Christ will shine on you.’” Ephesians 5:8-14

Page 42: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

This is God’s plan for how the gospel changes the

world. Not just through proclamation, though that is essential. But also through the supporting testimony of

our behavior as Christians. The shining of our light.

Page 43: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

And...

Page 44: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Don’t be boring!

“Walk in wisdom toward outsiders, making the best use of the time. Let your speech always be gracious, seasoned with salt, so that you may know how you ought to answer each person.” Colossians 4:5-6

Page 45: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Don’t be boring!

“Somehow or other, and with the best of intentions, we have shown the world the typical Christian in the likeness of a crashing and rather ill-natured bore—and this in the Name of One who assuredly never bored a soul in those thirty-three years during which He passed through this world like a flame.”-- Dorothy Sayers

Page 46: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Priority of Usability

Page 47: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Priority of Usability

1. Usability should be prioritized above looks

Page 48: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Priority of Usability

1. Usability should be prioritized above looks2. Usability should be prioritized above cool

functionality

Page 49: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

How to Make Your Site Usable

Page 50: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Core Principle

You just need to know one thing.

You just need to come out of this presentation understanding

One Thing

Page 51: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

And it’s this:

Don’t make people think!

Page 52: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Am I being anti-intellectual?

Page 53: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

You want people to think hard about your content,

not about how to use your site.

Page 54: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Examples of bad usability

(That is, things that make people think and get in their way--and why)

Page 55: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Bad Usability

Page 56: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Bad Usability

Page 57: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Good Usability

Page 58: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Good Usability that You Can Do

Page 59: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Good Usability Manifests Itself in 5 Main Principles

Page 60: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The First Principle: Orientation

1. Provide good orientation

Page 61: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Nobody likes to be lost.

Page 62: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

You provide good orientation through 3 main things

1. Site ID and descriptive tagline

Page 63: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 64: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

(Note: A tagline is not a motto)

Page 65: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

(Note: A tagline is not a motto)

Bad: “We bring good thing to life”

????

Good: “God-centered resources from the ministry of John Piper.”

Page 66: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

You provide good orientation through 3 main things

2. Global navigation

Page 67: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 68: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

You provide good orientation through 3 main things

3. Local navigation

Page 69: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 70: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

But Target gets confusing:

Page 71: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters
Page 72: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The navigation must be well organized, on the basis of sound principles of classification

Page 73: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Second Principle: Categorization

2. Know how to categorize well

Page 74: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Sound Principles of Classification

1. Organizing schemes should be consistent. For example, topics should not be mixed with resource categories in the same grouping.

2. Categories should be mutually exclusive. Cross-listing should be kept to an absolute minimum.3. Categories should be comprehensive--no gaps.4. Categories should anticipate future content. If topical, for example, try to anticipate the topics not yet

covered.5. Groups of similar choices should be limited to 5-9 items when possible; people can’t keep more in

their mind for evaluation. If tons of links needed, cluster them in groups of 5-9 links.6. There should be no redundancy in the labels, sections, and categories.7. There should be multiple ways of finding things (without creating redundant labels, sections, and

categories).

Page 75: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

What doesn’t fit?

SanctificationMarriageEaster SermonsRomansThe TrinityThe End TimesCulture

Page 76: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

A Better Organization:

By TopicSanctificationMarriageThe TrinityThe End TimesCulture

By TextRomans

By OccasionEaster Sermons

Page 77: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Third Principle: Labels

3. Make labels clear and consistent, not cute and clever

Page 78: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Fourth Principle: Links

4. Make obvious what’s clickable

Page 79: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Fifth Principle: Page Names

5. Give every page a name, and make the name match what the user clicked to get there

Page 80: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

(And don’t use the breadcrumbs to double as the page name)

Page 81: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Why do so many websites frustrate their users?

Page 82: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Why do so many websites frustrate their users?

They ignore these principles

Page 83: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

How do you do this on a budget?

1. Educate yourself. Read 3 books, take notes, review the notes.2. Do simple user testing. 3. Keep it simple: focus on the 5 main principles. If you can only do one thing, create good navigation.4. By doing this internally, you are going to have to substitute hard work for money.5. I have documents I can send you.

Page 84: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Summary

One overarching governing principle for all of life: “Do unto others as you would have them do unto you.”

One guiding principle for usability: Don’t make people think.

Five primary guidelines:

Orienting: Provide good orientation through a clear site ID, global navigation, and local navigation

Categorizing: Make categories follow a consistent scheme, be mutually exclusive, be comprehensive for your content, and anticipate future content

Labeling: Make labels clear and consistent, not cute and clever Linking: Make obvious what’s clickable Naming: Give every page a name, and make the name match what the user

clicked to get there

Page 85: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

The Most Important?

One overarching governing principle for all of life: “Do unto others as you would have them do unto you.”

One guiding principle for usability: Don’t make people think.

Five primary guidelines:

Orienting: Provide good orientation through a clear site ID, global navigation, and local navigation

Categorizing: Make categories follow a consistent scheme, be mutually exclusive, be comprehensive for your content, and anticipate future content

Labeling: Make labels clear and consistent, not cute and clever Linking: Make obvious what’s clickable Naming: Give every page a name, and make the name match what the user

clicked to get there

Page 86: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Questions

Page 87: Practical Usability: How to Make Your Website Easy to Use, and Why it Matters

Resources

1. Don’t Make Me Think, Steve Krug2. The Unusually Useful Web Book, June Cohen3. Web Redesign 2.0, Kelly Goto