Brian Carroll | Home Directory

First interview

1. What do you want the site to do?
2. What do you want the site NOT to do?
3. What timeframe are you working with?
4. Who will host the site?
5. What art do you have? What art do you want to use? What art do you have to use?
6. What content do you have? Are you planning to have?
7. Of this, what will be frequently and/or routinely updated? (Which parts of the site will be temporary and which permanent?)
8. Besides presenting information, what is the site supposed to do? (functionality)
9. What tone, mood or attitude should the site project? (and how will this be communicated throughout the site? think logo, color palette, white space)
10. Do you have examples of sites you like, sites similar in approach or philosophy to what you want?
11. What are your plans for usability testing?

Let's try not to make the visitor think. Our web pages should be self-evident. Obvious. Self-explanatory. Our visitors should be able to "get it" without having to think about it. They shouldn't have to ask, "Where do I start?" or "Is that thing navigation?" or "Why are these two links the same?" or "Can I click on that?"

We should get rid of all the question marks.

Visitors shouldn't have to spend time thinking about:
--where am I?
--where should I begin?
--where did they put ______?
--what's most important here?
--why did they call it that?

How people "read" the Web: Glance. Scan. Click. They do not choose the BEST option; they choose the first reasonable option.

So:

• We need to create a clear visual hierarchy on each and every page.
• We should take advantage of conventions.
• We should break up pages into clearly defined areas.
• We should make it obvious what in fact is "clickable."
• We should minimize noise and distractions. Nothing for its own sake. We are communicators servng an audience.

What users see: The appearance of things on the page should accurately portray the relationships. The more important the content or item, the more PROMINENT it should be. Just like newspaper front pages.

• Create and communicate a hierarchy (headline sizes)
• Group related items together (nesting)

Conventions:

• shopping carts
• blue and/or underlined links
• panel navigation
• button skins
• what else? name some

Navigation: It isn't a feature of your Web site, it IS the Web site. We will keep repeating this.

So it should be clear. It should be consistent. It should be simple.

There are two types of users: search-dominant (where's the search box?) and browsers (where are the links?)

Remember: users have no sense of scale (how big the site really is). Back buttons account for 30% to 40% of all clicks.

Help them get from one place to another. Help them figure out and always know where they are (orientation). Tell them what is available. Reveal the content.

Think: how do sites do this?

Think of good street signs: They are in the right place. They are in the same place. They are big enough to read. They can be quickly read so you can do more important things like, WATCH OUT FOR THAT CAR!

Think of good maps. YOU ARE HERE. Where is here? This is how big this place is. This is where everything is situated. Place and space, not a Web "page," which is a false metaphor unless you're clicking "print."

Home >> Sports >> Major League Baseball >> Yankees v. Orioles >> Box Score

C|Net.com and about.com

You woke up in Camerano. You weren't even planning to travel to Italy. How would you know or find out where you were, precisely and in relation to everywhere else? How would you know how far you are from home, and how you could get home?

Subway map designed by Henry Beck in 1933. Why is it THAT way? (and not another way?)

Think about how UNLIKE a map it is.

What did Beck choose to include? Exclude? Think about his decisions. What assumptions does he make?

What was the idea behind his pitch? Was he sold out to it?

Why TABS are good:

They are self-evident (we all know what they do).

They are hard to miss. They are obvious at a glance.

They suggest physical space. (up front, way in the back)

They can be good-looking and easy to make (color-coded)

example: amazon.com

Home Page: Goals

At a glance, we want the home page to:

• Establish identity and mission
• Show site hierarchy
• Show where to start
• Show what's in the site
• Indicate shortcuts to main, most desired pages, sections
• Convey the big picture
• Avoid clutter (think Google, less really is more)
• Do all of this in about 3 seconds

Taglines can quickly establish identity and mission.

What's next

Develop a site maps (or directory tree): How everything connects

Work on storyboards for our site: Don't build yourself into a hole by working with the software without a plan

Typical screen size: 800 x 600 (780 x 640). NYTimes.com, for example.

Resources:

Don't Make Me Think, Steve Krug

The Non-Designer's Web Book, Robin Williams & John Tollett

Web Style Guide, 2d edition

home

©2007 CarrollinaWorks
Last Updated: February 2007
Send comments and questions to bc at berry.edu