29
Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. Homepage Usability: Webpage Design for the Visitor

Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Homepage Usability:

Webpage Design for the Visitor

Page 2: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Now that users have found your web site, we need to keep them there.I hear frequently, “My neighbor’s nephew said he’ll make me a site for $200.” We all love a bargain, but remember, your website is available to the public 24 hrs/day.

It needs to be more than just a presence and act as an effective marketing piece.

The homepage is the most important page of your web site because it gets the most views. Most people enter your site through the home page and see it first.

Studies show that you have 10 seconds to make an impression on a web surfer. 10 years ago, you had 20 seconds, but as more people become avid web users that time decreases.

Page 3: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

“We don’t see things as they are

We see them as we are.”

~ Anais Nin

Page 4: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

When creating your web site’s home page, keep in mind that the site is not for YOU.

It does not need to appeal only to you and your likes or dislikes. You already know about your company. This is something you are creating for the site’s VISITORS.

At the same time, your company has specific goals for your web site.

So your web site’s design should balance your company needs with a fantastic user experience.

Page 5: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Some people compare a web site’s home page to a MAGAZINE COVER.

Here’s why I disagree with that comparison.

A magazine cover is made to grab your attention, so you’ll want to reach out and buy that magazine right off the rack.

However a home page on a web site is something the user already clicked to get to. The grabbing has already been done.

Either they met you, have some of your literature with your web address on it, or found you through a search engine and liked the little description under your web site title.

The initial grabbing has already been done.

I say that a better metaphor would be…

Page 6: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

HOME PAGE = HOTEL LOBBY.

• Used to funnel traffic.

• Clearly point people in the right direction.

• Don’t leave people feeling lost or overwhelmed.

Page 7: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Make your site easy for skimmers.

People look at art using 2 steps.

1. Skim things over

2. Read more in depth or look in more detail

Your web site visitors make a decision about whether or not to stay there based first on AESTHETICS.

Page 8: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

How can you quickly communicate

your web site’s purpose?

Page 9: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

I’ll give you 16 TIPS

for ease of usability on your web site.

Most of them are centered around the following marketing concept:

Page 10: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

If you had a monkey, he would want to be able to find a banana.

Your website should be so easy to use that a monkey would be able to find that big banana.

Banana = product information, prices, a map or a list of services.

Don’t make your “banana” hard to find.

Page 11: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

1.Your company name and logo should be a reasonable size and in a noticeable location on your homepage.

In most cases, keep it in the same spot on every page thereafter.

Page 12: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

1. Your company name and logo should be a reasonable size and in a noticeable location on your homepage.

Keep it in the same spot on every other page.

2.Use a tagline at the top of the homepage that explicitly summarizes your company.

Keep this succinct.

Let people know they came to the right place.

Will help with search engine ranking.

Page 13: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

1. Your company name and logo should be a reasonable size and in a noticeable location on your homepage.

Keep it in the same spot on every other page.

2. Use a tagline at the top of the homepage that explicitly summarizes your company.

3.Quickly give your audience a sense of what makes your business unique - how you differ from your competitors.

Page 14: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

4. If you emphasize everything, nothing gets focus. Spotlight what is important.

Think of a stage show:

If a stage were drenched in light, the audience would not know who to give their attention to.

Spotlights help us follow the plot.

Page 15: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

4. If you emphasize everything, nothing gets focus. Spotlight what is important.

5. Usability of your site should be intuitive.

The links or menu going from page to page of your site are usually referred to as navigation. Your navigation should look like navigation, and should be found on the same place from page to page to streamline the use of your site.

Page 16: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

4. If you emphasize everything, nothing gets focus. Spotlight what is important.

5. Usability of your site should be intuitive.

6. All your corporate information – a history, about the company, maybe staff bios – should be in one distinct location.

Page 17: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

4. If you emphasize everything, nothing gets focus. Spotlight what is important.

5. Usability of your site should be intuitive.

6. All your corporate information – a history, about the company, maybe staff bios – should be in one distinct location.

7. Journalists appreciate and rely on a Press page or News page to get quick information. Put press releases here.

Page 18: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

8. Present a unified face

Your website is part of your:

• overall company

• marketing campaign

• look & feel

Does it feel like you and not anybody else?

Page 19: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

9. Include a “Contact us” link on your homepage that goes to a page with all the contact information needed for your company.

If you want to encourage site visitors to be in touch, make it easy for them to get the information to do so.

Page 20: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

9. Include a “Contact us” link on your homepage that goes to a page with all the contact information needed for your company.

10. If you provide a feedback mechanism, such as a form where people fill out their name and address, specify the purpose of the form and who will be reading it.

Include a privacy policy detailing how the information will and will not be used.

Page 21: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

11. Don’t include internal company information on your website.

It is confusing to web visitors and clutters up your site.

Page 22: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor

© 2006 R-Design, Inc. Homepage Usability

12. Functionality and aesthetics should be consistent from page to page.

• Things should look alike and work alike

• Use consistent style standards

Page 23: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

13. Legibility - easy to read text.

(not to be confused with readability, which means easy-to-comprehend text.)

• When choosing font colors, remember to think about contrast.

• Easy on the eye.

• Optimal length is about 10 words per line.

Page 24: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

13. Legibility – easy to read text.

(not to be confused with readability, which means easy to comprehend text.)

• When choosing font colors, remember to think about contrast.

• Easy on the eye

• Optimal text length is about 10 words to a line.

14. Alignment: Every element on the page should align to at least one other element.

Page 25: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

15. If you have a large web site, provide a bread crumb trail.

A bread crumb trail provides text links allowing users to follow how they got to the page they are currently viewing (example on next slide.) It is a visual representation of their location on your site.

The goal of any navigation is to make it simple and clear, so users don’t feel lost at any time.

Page 26: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Bread Crumb Trail

Page 27: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

16. Finally I’ll touch on copywriting. The text of your site is an hour long discussion by itself. But I’ll give you this nugget –

Text should present a solution for the visitor. Someone has come to your site for a specific reason and your text

should assure them that they are on the right web site for their needs.

Try to think about what problem your web site solves for a visitor and write that in to the text before writing about yourself. Present a solution before simply giving information.

Page 28: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Matt from Emagineering Oregon offers extra bonus tips #17 & #18:

17. Respond to Website inquiries.

It does you no good to have a great web site, instill confidence in your visitor, and then let their email sit unanswered for a week. Make sure web inquiries are answered quickly, because they may be emailing your top competitor at the same time.

18. Maintain website content.

No one wants to see your staff roster & calendar from 2002. Inform visitors properly by keeping your website current.

Page 29: Homepage Usability - RDesign · Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc. When creating your web site’s home page, keep in mind that the site is

Homepage Usability: Webpage Design for the Visitor © 2006 R-Design, Inc.

Homepage Usability:

Webpage Design for the Visitor

[email protected]