Sometimes navigating a blog can feel like wandering through a maze.

For example, let's pretend we're going to visit a typically organized blog about trees—to see if we can learn something new about Dutch elm disease. We go to the site and see that there is a category for elms with 32 entries. When we click on the elm category we are taken to a page with the 5 most recent posts. These cover topics such as Hairy Fruited Glaucescent Elm, the use of elm wood in coffin-making, Winged Elm and so forth, but not Dutch elm disease. So we go to the bottom of the page, click the "previous posts link" and go to a page with 5 more entries. We then repeat the process until we find the article we seek—or we give up and use the search box (if there is one).

As you can imagine all of this scrolling and clicking can make it rather hard to find things. But it doesn't have to be this way. By making a few adjustments to our template themes, we can alter categories to list headlines instead of full posts, we can create tag pages to let people browse specific topics—as they might peruse the index of a book, and so forth. Below are a few tips on things you can do to make your blog more browsable.

Blogging Platforms Vary

Different blog platforms offer different levels of flexibility when it comes to customizing your site. Most of these tips will require some experience with HTML, CSS and PHP. If you are using a hosted blogging service such as WordPress.com, Blogger or TypePad you won't be able to edit as much, but you may be able to find other themes that offer some of these features.

My blog uses a self-hosted installation of WordPress.org. In it's prior incarnation at http://blog.case.edu/webdev, it ran on Movable Type 3.121 so those are the platforms I'll reference here. (If you are using Movable Type 4, you may need to check the MT documentation. Learning Movable Type is also an excellent resource.)

Alphabetical Index

I added an alphabetical index to my blog several years back because I wanted an easy way to see a list of all my entries on one page. My archives page at that time broke entries out by month so they weren't all listed together, but I also felt that it would be easier to browse things in alpha order.

As it turns out, I visit this page almost every day. If I'm on LinkedIn or Twitter and want to share a link to a specific post—as part of my response to someone—I go to the alpha index to find the link.

Movable Type

Adding an alpha index on MT is pretty easy. When you create the new page for your index, just add the following code:

<MTEntries lastn="300" offset="0" sort_by="title" sort_order="ascend">
<ul>
<li><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></a> <span class="smalldate"> <$MTEntryDate format="%m/%d/%Y"$> - <MTEntryAuthorNickname></span></li>
</ul>
</MTEntries>

If you look at the code you'll see the options are fairly intuitive.This produces a list of entry titles with dates and authors. (In the early days I had a co-author so I felt it would be useful to identify the posts by author). I set lastn to 300 because the default setting would limit it to a smaller number of headlines. Thus I just chose a number greater than the number of articles I had at the time. Periodically I would increase this number to allow for more posts.

WordPress

WordPress is wonderful in many ways, but when I started learning WP, after years of using MT, I discovered that it can be a very different beast. I couldn't find some easy little snippet of code to pop into my template. After a bit of time spent glaring at the WordPress loop and doing Google searches I ended up using the AZIndex plugin by English Mike. This plug-in offers a variety of options such as making an index for specific categories, making an index that excludes categories, indexing pages instead of posts, etc.

Category Lists

If this were a food blog, I might assign an article on cooking rib roast to categories such as "meat" and "roasting," a sub-category of "beef" and a tag of "rib roast".

Category pages and lists are only useful if you assign your posts to the appropriate categories. Too many categories can be just as confusing to visitors as too few.

I like to think of categories as general sections—like you might see in a grocery store. You might have categories for meat, produce, dairy, etc. For specific topics within a category you might create sub-categories such as pork, vegetables and cheese. Then to be more precise you can use tags such as bacon, peapods and Brie. This seems like the ideal way to organize one's posts. My blog is not set-up the ideal way—I have too many categories and they need to be cleaned up.

Once you've assigned your post to the appropriate categories you can think about how you will present those to visitors. Many blogs will list all the categories in a side menu (on WordPress this is often done using a categories widget). A surprising number of blogs don't list them at all. Since I have too many categories, I list them on a separate categories page so they don't clutter up my sidebar.

Creating a Categories List on Movable Type

On the old blog I added the categories list using the following code. I formatted it as a definition list just in case I ended up using subcategories or descriptions.

<h3>Categories</h3>

<dl>
<MTTopLevelCategories show_empty="1">
<dt><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> (<$MTCategoryCount$> entries)</dt>
<dd><$MTCategoryDescription$>

<MTSubCategories>
<MTSubCatIsFirst><dl></MTSubCatIsFirst>
<dt><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> (<$MTCategoryCount$> entries)</dt>
<dd>
<$MTCategoryDescription$>
<MTSubCatsRecurse>
</dd>
<MTSubCatIsLast></dl></MTSubCatIsLast>
</MTSubCategories>
</dd>
</MTTopLevelCategories>
</dl>

Creating a Categories List on WordPress

To make the list for WordPress I created a new template file called categorylist.php in which I put the following code:

<?php
/*
Template Name: categorylist
*/
?>

<?php get_header(); ?>

<div id="midbox">
<?php get_sidebar(); ?>

<div id="maincontent">

<h2>Categories</h2>
<ul>
<?php wp_list_cats(); ?>
</ul>

</div>
</div>
<?php get_footer(); ?>

I then uploaded the file to my themes directory. Next I went to the WordPress dashboard and created a new page called Categories. I left the entry box blank and selected "categorylist" as the template to use for the page. After that I added the link to the page in my side menu by editing the sidebar.php file.

Category Archive Pages

As I mentioned in the beginning, many blogs include complete posts on their individual categories pages. These can be harder to browse, so I prefer to use lists. For example, if you visit the SEO category archive you'll see a list of blog entries on the topic along with the date they were posted and the number of comments on each. One can also set up such lists to include an excerpt for each entry to give visitors a better sense of the topic.

Creating Category Archive Pages on Movable Type

Category archives are a standard feature in Movable Type. I edited mine to use the following code:

<h3>Entries in "<$MTArchiveTitle$>"</h3>
<p class="photoleft"><img alt="feedicon16w.gif" src="http://blog.case.edu/webdev/2007/05/14/feedicon16w.gif" width="16" height="16" /></p>

<h2><a href="rss20.xml">RSS Feed</a></h2>

<MTEntries>
<$MTEntryTrackbackData$>

<MTDateHeader>
<h2><$MTEntryDate format="%x"$></h2>
</MTDateHeader>

<h5><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h5>
<p><$MTEntryExcerpt$></p>

</MTEntries>

In this case I used headers and paragraphs rather than a list format. Technically I should have used an <h6> instead of an <h2> for hierarchical reasons. I think <h2> just happened to be available while <h6> was already designated for something else on the site. If you visit the SEO Category page for this example you will see that the list includes the entry excerpts. I've also included an RSS feed at the top for anyone who might wish to subscribe to the feed for just this category, rather than for the whole blog.

If you have individual category feeds you can also use that content to republish them in other places. For example when I was at Case Western Reserve University, we would use the Alumni category feed from the News Center (which I built as a Movable Type Blog) to publish those headlines on the Alumni Web site. (They are no longer doing that on the new site.)

Creating Category Archive Pages on WordPress

WordPress uses the archives.php file to control category (and other) page archives. If you wanted to modify your category archives but leave the others as they are, you could save a copy of this as category.php and edit that file. Here on this blog I simply edited archives.php to add my RSS feed and to list entry titles rather than full posts. Mostly this is just a matter of removing
<?php the_content(); ?> so that the posts won't be included.

If you visit the SEO Category page for this example you will see that the list only includes the titles, date and number of comments.

If I had instead changed <?php the_content(); ?> to <?php the_excerpt(); ?> then you would see excerpts under the titles.

Since the code is a bit long to post here, I created a page showing the code from archive.php for your reference. WordPress provides a great deal of flexibility with these files. You can learn more in the category templates section of the WP Codex.

Tags

As I mentioned earlier tags are a good way to mark posts as belonging to a very specific topic. For example if I put this post in the blogging category, it may be appropriate to tag it with WordPress, Movable Type, alpha index, categories, browsing and navigation. Then users looking for posts mentioning these topics can find them in my Tag index.

SEO plug-ins such as All-in-one-SEO can also use your tags as keywords.

Tags on Movable Type

Tags were introduced to Movable Type in version 3. On the blog system we had at Case.edu, they were used interchangeably with categories (which is why my blog is still so category heavy). So when my blog was on that system I did not have a separate tags page, though some people were using tag clouds on their blogs. Rather than showing you a piece of code I've not actually used myself, here are some links to tag related resources for Movable Type:

• Tag Cloud on PHP in Movable Type 4
• How to Make a Subject Index Using Tags

Tags on WordPress

If your blog uses a widgetized theme, there is a widget to add a tag cloud to your sidebar. My blog isn't using widgets because I'm customizing my sidebar by hand. And, as with categories, I didn't want to clutter up the menu so I put it on a separate tags page. Naturally this will become more useful after I clean up and reorganize my categories and tags, but it's good to have the page ready.

To make this page I created a new template file called taglist.php in which I included the following code:

<?php
/*
Template Name: taglist
*/
?>

<?php get_header(); ?>

<div id="midbox">
<?php get_sidebar(); ?>

<div id="maincontent">

<?php query_posts("cat=26");
$tag_list = wp_tag_cloud('format=array&orderby=name&order=ASC&smallest=1
&largest=1&unit=em&number=0');
if (!empty($tag_list)) {
echo "<h3>Web Development Blog Tags:</h3><ul>";
foreach ($tag_list as $key => $tag) {
echo "<li>$tag</li>";
}
echo "</ul></div><!-- end tags -->";
}

?>

</div>
</div>
<?php get_footer(); ?>

Since I wanted an alphabetical list of tags, rather than a cloud I set it to use orderby=name and set smallest and largest to be the same size. In a cloud one would normally make largest use a larger size. Then I formatted it to use an unordered list to present the tags.

Next I added a new page called Tags List in the WP dashboard, just as I did for the categories list, but this time I set it to use the taglist template.

Let's make our blogs more browsable for 2010

Whether building a regular Web site or a static blog, I think it helps to give users easy pathways to your content. The above suggestions are but a few of many ways you can make your blog more browsable. Other features can include breadcrumbs, next/previous links, etc. You can even create special topic pages in which you gather together a group of related posts, such as I've done with my Planning Your Web site Tutorial page.

There are also many methods for implementing such features. You might choose to do the same things using a different bit of code, or a plug-in that suits your needs.

If your blog currently uses the typical format that shows post after post after post, try exploring it from your readers perspective. Wander around and see how it feels to browse. Your content is different than mine, so as you explore you may come up with some fresh ideas that I've not thought about. Or you may have already implemented navigation features that make your blog more browsable.

How else might we improve the blog navigation experience? What problems have you encountered, on other blogs, that might be fixed by a few navigation adjustments? Please share your thoughts and ideas below.

Happy Blogging in the New Year!

Other writer's thoughts on blog navigation

• Add Google-Style Page Navigation to your Category and Search Pages
• Blog Navigation and the Ongoing Challenges that Arise
• Blog Navigation WordPress Plugins: Related, Recent, Most Popular Posts and More
• How to Blog Design Style Guide
• Weblog Usability: The Top Ten Design Mistakes

heidicool.com is also on Facebook

Need more Web tips? Fan the heidicool.com Facebook page. I'm posting 1 tip/link there per day to offer ongoing advice on Web design, marketing and social media—without overwhelming your Facebook stream.

The above Flash animation file is a mini-Web site used for demonstration purposes. Were it standing on its own a user would see it as a multi-page site with an image on the front page that is used to navigate to interior pages.

For those of you who don't have, or cannot see Flash content, the introductory page has a photo with an image of 2 mausoleums. Clicking on the left mausoleum takes you to a page with photos and clicking on the right one takes you to a page featuring Author Rimbaud's poem, Ballad of the Hanged.

A few weeks back, in Is Flash evil? No, but Flash-based sites can be a marketing nightmare, I discussed some of the potential problems Flash-based sites can create in regard to search optimization and accessibility. Today I'd like to continue the discussion with a focus on usability. Before I start discussing examples, I do want to make a few things clear.

Not every Flash-based site suffers from every problem I'll address. There are many very talented designers who are doing interesting things with Flash, while also working to keep usability in mind. This article isn't for them. It's for the designers, either new to Flash, or less well-versed in HTML, usability and accessibility who may not realize these problems could be lurking on their sites.

Also, if you are a designer who is producing Flash based-sites that overcome these challenges, please feel free to share your tips and examples with us in the comments below.

The Flash user experience: don't let design interfere with usability

Flash has some cool features. It let's us control typography, offer interactivity, make things move and is scalable. These features are all quite handy, but they also provide us with opportunities to confuse and annoy our site visitors. To illustrate this I've included some examples of typical Flash problems in my sample sites, Angst Space and Shapes.

Note: I found many real world examples I could have used for this article, but rather than publicly criticizing the designers—by pointing out that site X is really cool, but broken—I thought it would be more tactful to create my own samples.

1. Introductory animation.

Many sites, even HTML sites will begin with some sort of Flash splash page. This could include an animation, video, company motto, etc. Hopefully it also includes a "skip intro" button because in most cases these intro pages take time to load and don't offer informative content.

Back in 2002 when I took a Flash class at the Cleveland Institute of Art, I too succumbed and made Flash intro pages. I did a site for a concert series called Thursdays in the Park, and the intro page had moving colored dots (from the event logo) and included the names of the bands which fell into a list one by one. The intro then directed users to the main static page.

I built the page that way because I wanted an excuse to put my new Flash skills to work, but the animation didn't offer any value. I thought it looked cool because things moved, but most users, especially those under 30 who grew up with the Internet are not impressed by shiny moving objects. They've seen it all before. All they want is to get the information they need as quickly and as appropriately as possible. All I accomplished with the page was to show that I knew Flash.

The Shapes site includes a short animation of shapes morphing into one another. It gives the user a visual clue that the site is about shapes but animation wasn't required to convey that idea. Mostly it's just shapes moving about for the sake of movement.

If your subject requires animation to illustrate the topic, then it makes total sense to incorporate motion into the project. But if you're sitting at your computer, scratching your head as you ponder what what you might animate to introduce topic X, then you probably don't need animation at all.

Graphical navigation

Designers are often looking for new ways to present navigation beyond the traditional menuing system. This can be fun, but if users don't figure out the system immediately they may leave before they get a chance to see your content. Our attempts to be clever may instead hinder the visitor experience.

I once saw a site that had a row of colored squares under the primary navigation menu. It also had a left side menu, so I thought the squares were just decorative. Then I happened to mouse over one. Lo and behold it opened up another secondary menu (different from the side menu). I only discovered this hidden menu because I was moving my mouse around the page. I suspect many people never saw it and were stuck grumbling at the page trying to figure out how to find what they were looking for.

Traditional menus are boring, but they're familiar. Site visitors are used to the way they work. If you're targeting an audience that is more likely to go mouse-exploring, a unique navigation system may be just fine. But if your audience is more mainstream, don't hide or camouflage the menus, they may not know where to look. Offering a familiar interface can help make sure you don't confuse your visitors.

In the Shapes and Angst Space sites I used graphic elements, such as shapes, photographs and icons for navigation. I didn't put a lot of content on these sites, so most of you probably figured it out, but some of the sites I've seen in the wild are much more confusing.

The Shapes site also includes sections of hidden content that designers sometimes include on Flash sites. If you mouse over things or click in places that don't seem obviously clickable you'll discover an easter egg and extra bits of information. That's fine for Shapes, because none of this content is important. But if I were promoting a degree program or trying to sell widgets I'd want to make such information easier to find.

When designing for the real world, I find it is safer to err on the side of simplicity. If I want to make sure that all visitors can navigate to X and Y and can easily read B and C, I'll offer text-based options for familiarity and accessibility.

Sizing and scrolling

As mentioned, Flash is scalable. I can make a .swf file of any size then publish it large in one place and small in another. The only things that don't scale well will be raster images (such as photos) included in the file and some type elements (depending on your settings.)

Alas, there seems to be a secret cabal of designers who create Flash sites and embed them in their HTML at sizes, that probably look superb on a 24" cinema display, but don't fit in the browser window on my Mac. And for some reason these sites don't offer scrollbars. I saw one last week that did this. I could navigate using the links in the top menu, but I couldn't read the text on the bottom of the pages or view the footer. I went to the contact page to try to let them know about the problem…but the submit button for the form was below the fold. Since I couldn't scroll down to it, I couldn't press it, and they never got my message.

This is a troubling issue because if visitors can't easily navigate, or even read all of the content on a site, then they will leave. This site was for a Web design firm, so they're potentially losing clients due to this one, easily fixable issue.

As an example, take a look at Angst Space at full size. When viewed on my computer I can see just the top part of the photo of the mausoleums. I can click on those and get to another page, but then I can't read the full text on the poetry page, or interact with the images on the photos page.

I come across such sites at least once a month, but I find it mystifying, because this situation is quite easily prevented. I use swfobject 2.0 to embed Flash .swf files (and videos, etc.), and when I use it normally, as I did for the medium-size version of Angst Shape, the scrollbars are readily available whether you need them or not—just as they would be in any normal page.

To remove the scrollbar for the full-sized example of Angst Space I actually had to add overflow:hidden to the body element in the CSS file. I don't know if the sites I find are disabling scrolling on purpose or if it's a result of using invalid code to embed their .swf files, but if you're building sites in Flash, be sure to test them on a variety of computers to make sure you're visitors aren't experiencing the same problem.

Flash and the Mobile Web

As I was writing this I sent out a Tweet asking if anyone had any Flash pet peeves they thought I should include. Interestingly the first two replies related to hand-held devices. Given the wide array of mobile devices and their respective browser platforms it is still a challenge to create sites that work well on a wide variety of gadgets, but Flash adds to this challenge.

1. As interactive strategist, Kati Davis (@katidavis) points out, Flash doesn't work on an iPhone. And it doesn't look like it will anytime soon. If your audience includes iPhone and iPod Touch users, you will want to provide some way for them to access alternative content. I see more and more friends browsing sites via iPhone now that they never would have tried to view on mobile phones a few years ago.

Developers used to focus on providing mobile support for specific types of sites: event schedules, news, directions, store hours, etc. But now people could be browsing anything from Amazon to your blog on their iPhone, so it makes sense to keep these users in mind.

2. Mobile devices that support Flash are still small hand-held gadgets with tiny screens. Designer Alan Houser (@alanhouser) said, "I'd say there will be a ton of issues when using flash content on mobile devices. Literal fat-finger issues." This is a rather important point. If a site like Angst Space was reduced to fit a mobile device that supported it, the icons and thumbnails that users click would be super tiny. Thus it would be tricky to click on such items using a touch screen device.

Admittedly I don't know that much about Flash and the mobile Web, but Adobe does. They've created Flash Lite specifically to generate content for mobile devices and are working with manufacturers to implement this on many different devices. If you're a Flash designer who wishes to offer support for mobile devices, visit Adobe's Mobile and Devices Development Center to learn more.

Flash Usability Conclusions

The issues I've addressed today seem rather obvious and simple, yet I still come across many Web sites don't address these problems. As Web designers/developers we're creating communications tools. We're trying to convey some message to our audience so that they can respond by buying our products, applying to our universities, reading our blogs or whatever else we hope that they will do. If that's our goal, then we just need to put the user foremost in our mind when we design our sites. Whether we're developing in HTML, Flash, Silverlight or something else we'll all be better served if we make sites that are easy for our visitors to use, read and navigate.

Flash and Usability Resources

• Adobe Flash Developer Center: Testing and Usability
• Alertbox: Jakob Nielsen's Newsletter on Web Usability
• Flash Resources Listing (Univ. of Minnesota, Duluth)
• Usability experts are from Mars, graphic designers are from Venus (old but interesting)
• 50 Beautiful Flash Web sites - Some of these sites are astoundingly cool to look at, yet some also have usability issues.

The above Flash animation file is a mini-Web site used for demonstration purposes. Were it standing on its own a user would see it as a multi-page site with an introductory animation and a menu used to navigate to interior pages.

For those of you who don't have, or cannot see Flash content, the introductory page has a circle that morphs into a square, triangle and back again. The shapes careen up to the menu offering a choice of a circle, triangle and square to click on. When clicked each page takes you to a page with a bit of motion and simple definitions for the shapes.

Flash is a powerful tool. As designers we can use it to create motion, control typography, animate objects, create scalable graphics, embed videos, create slideshows, etc. Some find it so useful that they design entire sites using Flash.

I don't.*

Flash offers great control for designers but it also poses obstacles for users and hinders our Web marketing strategies. Adobe has made great strides in terms of making Flash files both more accessible and searchable, but there is still more progress to be made. Today I'd like to discuss why I advise against using Flash for overall site architecture.

Remember the problems with frames?

Years ago, before we had better tools available, designers flocked to frames because they made it easy to include constant headers and menus. Once you built those fixed unchanging files, all you had to do was create extra files for the content. This seemed cool until we noticed that frames broke the user experience. Individual pages couldn't be bookmarked because the address never changed. While the content would change within the page, the visitor technically remained on the same page of the site.

This was bad from a marketing standpoint, because it inconvenienced visitors and made it difficult for them to link to specific pages on our sites from their own sites. As site owners we rely on incoming links to drive traffic directly to our pages and to enhance our search results. Google and the other search engines consider these links in their algorithms, so more links mean higher placement in search engine results pages. While some may still debate the issue, it didn't take long for most of the design world to conclude that frames caused more problems than they solved.

Flash is like frames— on a Flash based site the address never changes

When we create Flash based-sites, we do so by embedding a Flash file within a regularly constructed HTML file. When we include a Flash file, such as the animation on this page or a YouTube video, it's easy to see that it's just one element within a page. On a Flash-based site, the Flash element is the only thing the visitor sees.

All the navigation and interaction happens within the Flash animation itself. Visitors may click on menu links to visit new pages, just as they would on a regular site, but they don't actually go to a different page. The content changes so the page appears to be a new page but as was true with frames, the page address doesn't change. (One could build a Flash site using separate .swf and .html files for each page, but it's not common practice.)

Shapes - Taking a closer look at a Flash-based site.

I've published the Shapes Flash file from this page separately as a stand-alone site, so you can get a better sense of how this works. If you visit http://www.heidicool.com/flash/shapes.html you will see that it acts like a typical 5 page Web site with a home page and internal content pages. It begins with a simple animation of shapes then you are presented with a menu of a circle, triangle and square. If you click on a shape you go to a page with a short definition of the shape you clicked.

But if you watch the address bar you'll see that the address never changes. If you blog about squares and want to link to the page about squares you can't. Instead you'd have to link to the main page and include a note for users to follow the square link. If including such a description is inconvenient, you probably won't bother to link at all.

The Flash SEO conundrum

If you look at the analytics for your own site you will quickly realize that your incoming links do not all go to your home page. Instead site owners link directly to the page that will be of interest to their readers.

Thus, each page on your site gives you a new opportunity for search engine optimization. If I'd built the Shapes site in HTML, I could be sure to use the keyword "square" in a header element as well as the text on the square page, focus on triangles on the triangle page, etc. Doing so would make it easier for the search engines to find these pages and would also make it possible for other site owners to link to individual pages. This is one aspect of SEO that is a numbers game. A site with more pages creates more opportunities for links and keyword searches—thus resulting in more traffic.

A one-page Flash site has a distinct disadvantage for SEO.

As with any site, I built the Shapes site with SEO in mind. The site validates as XHTML 1.0 strict, and I included a page description and keywords (which Google ignores but others may use) and gave it a unique title. I know that Google has improved how it indexes Flash content, so it will index the text within the pages (since I didn't break apart the text), but it won't know which text elements are most important—since Flash doesn't use semantic mark-up such as headers and paragraphs. I could have included a header element in the HTML, but like the title and page description it would remain the same on each page and wouldn't help me optimize for the individual page topics. These details may help my SEO but they aren't enough to compensate for the sites key weakness. It is still only one page.

Flash and accessibility

Adobe provides an accessibility resource center for Flash and other Adobe products. It provides a number of useful tips and guidelines for making Flash more accessible to those with visual and hearing impairments. If a designer follows the guidelines, and the site visitor has the right browser or screen reader, this can greatly enhance the Flash experience. But some of these guidelines are complicated—there's far more to it than providing alternative text for audio and visual elements— and I suspect there are many of us who don't understand them fully. I don't know how many users have the appropriate screen readers to take advantage of Adobe's accessibility features, so I also have to assume that some do not.

When I use Flash, I try to stick to the basics and offer some sort of alternative content. In my photo gallery pages, I use Flash, javascript and xml to display my photos as a navigable slide show. Each slide show includes alternative text describing the types of photos I've included. That seems the most direct way to handle purely visual elements such as photographs.

On the Shapes site I wrote a description of the site as my alternative content. Users who can't use Flash will see the description instead. This is adequate for this project as it conveys enough information to let visitors know what the example includes. But it would not be sufficient for a larger site. My alternative description applies to the whole site, because the whole site is contained within one page. If I had more content to describe I'd be better served by providing an alternative HTML version of the site, so that I could provide each pages text content individually. By building sites in HTML instead of Flash I can avoid this problem and just build one version of the site.

Conclusion

Flash is great when used in the right context. Whether we're embedding slideshows or making animated cartoons, Flash lets us add some very useful features to our sites. But if you want to attract visitors and increase readership, building the entire site in Flash can be more trouble than it's worth. I'll discuss Flash further in my follow-up article pertaining to Flash and the user experience.

Flash SEO and Accessibility resources

• Accessibility and Usability of Flash for Users with Disabilities
• Adobe Flash Accessibility: Best Practices for Design (Added Aug. 28, 2009 - nice walk through of accessibility issues)
• Adobe Flash CS4 Professional accessibility
• Adobe Search Engine Optimization Technology Center
• Flash and SEO - Compelling Reasons Why Search Engines & Flash Still Don't Mix
• Flash as a choice, not a default
• Search-Friendly Flash?

* There are of course limited exceptions. I built the Commencement March animation in Flash because the project required movement to convey what was happening. The site was built primarily for use as a training presentation and was linked to from the commencement site so it didn't have the usual marketing requirements.

Last month, when I wrote about subdomains, I promised to find out more regarding the question of URL length. Site owners had been telling me that their URLs were too long for users to type and that this was keeping people from responding to their direct mail campaigns. Typically the URLs in question were 30-40 characters in length. These don't seem excessively long if you consider that even a short domain name such as www.case.edu takes 12 characters itself. But it did make me wonder if anyone had studied the role URL length plays in direct mail response rates.

In search of the answer I hopped on the Web and began searching. In a utopian marketing world, I would have found some insightful marketing research that would indicate that once an url reaches X characters in length, readers—hesitant to type so much—became less likely to visit the site. Of course, the real world is not so simple, and I found no such data. If I had, it might have included a graph like the one pictured here.

If you think about it, the reason I couldn't find such data is obvious. The length of an URL is but one of several factors a reader considers when deciding whether or not to respond to a direct mail offer. When deciding whether a mailing is potentially useful, recipients, consciously or subconsciously, ask the following questions.

Why did I get this? Is it relevant to me?

You have a Ph.D. in philosophy and the mailer is telling you how to get an associates degree in 90 days. Since you are not the target audience you will throw the mailer in the bin. But if you are restoring a 1966 Mustang and the mailer is from a parts supplier—specializing in 60's muscle cars—you'll probably take a closer look.

Is it something I need/want/can afford now?

The new Macbook Pro looks great but if your current one is only a year old and serves your needs you may not need to order a new one just yet. On the other hand perhaps you can justify getting a new one by giving the older one to your daughter—who could use a better computer. If so you'll keep reading.

What are the features and benefits?

You've been invited to a conference in your field of interest. Who are the speakers? What is their level of expertise? When is the event? Will it fit in your schedule? What is the cost? Will there be food? If the speakers are well-resepected experts, the event fits your schedule, is reasonably priced and includes lunch, chances are you'll go.

What is the next step?

To respond to the offer, do you call, e-mail, visit a Web site? If the next step is to visit the Web site then you probably will take the mailer over to your computer and type in the address.

If you've made it to the last step in the above process then you've already made a choice. You have decided you are interested in the product or service and want to place your order, RSVP for the event or do whatever else may be appropriate to the offer. So what happens when you sit down at the computer to type in the Web URL? Do you stop typing because the URL is too long? How long would it have to be for you to change your mind and not order the product or service that you've already decided you want?

I don't know the answer to that but I suspect it would be more than 30-40 characters, and would depend on the strength of your original decision. If you've been searching for 6 months trying to find a certain part for your Mustang restoration project—and this supplier has that part—you'll probably be willing to type a lot to complete the order. If you're not as firmly committed then maybe a long address, particularly one with lots of special characters, would dissuade you.

Was it the URL or was it the message?

Let's say that you did change your mind about attending the event. Perhaps you've decided you'd rather catch a movie that day. What really caused you to change your mind? Was the URL impossibly long and too hard to remember? Or was the message not persuasive enough to close the sale?

http://www.nytimes.com/2008/11/09/books/review/Zerkin-t.html?_r=1&ref=authors is long (70 characters without the http://) and includes non-alpha-numeric characters that make it difficult to remember. If The New York Times were sending out direct mail promoting their book reviews, they probably would send you to the shorter http://www.nytimes.com/pages/books. It would be unusual that any of us would need to create a 70 character URL, even for a very targeted marketing campaign, but if we did, I don't know that it would be a deal breaker.

When you consider how much most of us type every day, 70 characters isn't very much. If the chore of typing 70 characters is enough to deter someone from completing their order, then perhaps they weren't that committed in the first place. If your direct mail campaign isn't sending sufficient traffic to your Web site, then you should also review your message. Was it targeted to the right audience? Did you provide the right information to help your readers make an informed decision? The only way to really know whether the message or the URL is the problem is by testing. Test different urls with the same message, try different messages with similar urls of the same length and so forth. (I'll write about split testing for direct mail in a future article.)

Isn't there any URL length data out there?

There is, but most of it is focused on URL length for search engine optimization, maximum URL length able to be read by certain browsers, etc. For our purposes the most useful number comes from usability expert, Jakob Nielsen, who recommends we use URLs that are less than 75 characters so that they don't break into multiple lines when sent through e-mail.

That was the most quantifiable answer I could find. Many people are researching various aspects of URL length, but without very specific testing it can be hard to determine if URL length or some other factor is the relevant issue. In The impact of domain name length on Web site popularity, Jeremia Froyland analyzed URL length of the top 100 sites as ranked by Alexa. The majority of these sites have short domain names (and thus short URLs) and he concluded that there is a correlation between short URLs and site popularity. But correlation is not the same as causality. The top 100 list includes sites ranging from Yahoo and Google to Apple and Hewlett Packard. Their strong brands would play a greater role in the popularity of their sites than the length of their URLs.

Conclusion

Instinctively we like the idea and ease of short URLs, but URL length is only one of many factors to consider in our Web related marketing strategies.

Learn more about URLs

• I Musta Got Lost: URL Naming Convention
• Naming and Addressing: URIs, URLs, ...
• Talk like a Googler: parts of a url
• URLs week: Principles
• WWW FAQs: What is the maximum length of a URL?

Last week's entry on outbound links spawned a lot of discussion, including the question of whether one should have outbound links open in a new window (or tab depending on the user's browser and preferences). Although many others have already written about this topic, it comes up often enough that I think it is worth discussing. Disclaimer: links that open in a new window or tab—when that wasn't my choice—are a pet peeve of mine, but I will attempt to explore the topic objectively.

What is the intended purpose of having links open in a new window or tab?

Those who recommend having links open in a new window do so with the intention of making it easier for users to return to the original site. Anyone who surfs the Internet knows that it is easy to get lost down a rabbit hole of links. For example, if I provide you with a link to Chuck Palahniuk's Web site, you might:

• follow the link
• peruse the section on author interviews
• read Dennis Widmyer's latest interview with Craig Clevenger
• then decide to add The Contortionist's Handbook to your Amazon shopping cart.

By now, the theory goes, you will have either forgotten where you were before or forgotten how to get back. If I'd set the Chuck Palahniuk link to open in a new window/tab (this is the only link on the page that opens a new window), you could just go back to your original window/tab and you'd be back where you started. Of course if the link opens in the same window, and you are using a current browser such as Firefox, you can simply click the down arrow next to your back button to navigate back through the series of links you just followed.

So which is better? Is it easier for a user to go back to a different window or to just use the back button?

I've always found it easier to use the back button. With one click I can go back and read another interview or I can choose to go all the way back to the original blog. To me that seems far easier than wading through a sea of windows, or looking at an array of tabs to find the one you want. But everyone is different. In researching this article I discovered a Get Satisfaction page in which a user actually requested that links on Pownce open in a new window. Two of the responders agreed that they would prefer new windows, while two others (including Pownce/Digg designer Daniel Burka) disagreed. I saw these differing opinions in many places.

Where does that leave us? Preferences vary, so unless you survey the users of your particular site it may be difficult to determine if your audience likes or dislikes it when a link opens in a new window. Pownce was able to solve the problem by giving users a setting that lets them pick which behavior is the default while they're on Pownce. But that's not an option for most sites and blogs. With that in mind, I think it is most appropriate to leave it in control of the user. If a user wants to open a link in a new window he can do so by right-clicking (Windows) or ctrl-clicking (Mac) the link in question. I often open links in a new tab if I know that I'll want to flip back and forth between them. I just don't want them opening up new tabs spontaneously.

Standards and accessibility issues related to opening links in new windows

If you're in the pro new window camp, I've probably not yet changed your mind. But there are more issues to consider.

W3C HTML and XHTML Recommendations

The traditional way to have a link open in a new window is to include target="_blank" in the link. The target attribute is not included in the recommendations for HTML and XHTML strict, therefore sites using target with a strict doctype won't validate. From what I've gathered target is not included because not all browsers support the attribute, particularly when it comes to browsers running on mobile devices. (This may change in XHTML 2.0 as the attribute may serve new needs as mobile browsers evolve. A valid alternative is to use javascript.

W3C Web Content Accessibility Guidelines 2.0 (WCAG)

According to the WCAG Success Criterion 3.2.5, "Individuals who are unable to detect changes of context or may not realize that the context has changed are likely to become disoriented while navigating a site. For example: individuals who are blind or have low vision may have difficulty knowing when a visual context change has occurred, such as a new window popping up. In this case, warning users of context changes in advance minimizes confusion when the user discovers that the back button no longer behaves as expected." To avoid this confusion they recommend that users should be notified if a link will open in a new window and if possible be given the choice to not have it open in a new window.

Kant's Categorical Imperative: What if everyone did it?

While writing this I kept having a vision of wandering the Internet in a world where every external link opened a new window or tab. In this vision it was only a matter of minutes before there were so many tabs open in my browser that I had to use the left and right arrows to scroll through them. Worse yet, instead of tabs windows began spawning as quickly as Tribbles and suddenly my desktop was impossible to navigate. This made me think of Kant. In his first formulation of the Categorical Imperative he states that one should "act only in accordance with that maxim through which you can at the same time will that it become a universal law." While this idea was meant to deal with issues of morality, it's easy to see how it could be applied to lesser situations such as links opening in new windows. If links always opened in a new windows it would pose significant usability challenges.

Naturally most sites don't open everything in a new window or tab. If they did we'd all be swimming in windows. Instead, most site designers choose to open new windows only in particular circumstances. Some designers do this only for external sites while others reserve the technique for opening up .pdf files. While I'd still prefer that links open in the same window, giving me the choice of whether or not to open them in a new tab, I understand that many may disagree. Most people have committed one way or another with few remaining undecided. But, whatever your preference may be, I hope this discussion will help the next time you're debating where a particular link should open.

Learn more about opening links in pop-up windows or tabs

• Accessible Pop-up Links
• D. Keith Robinson's Gorilla Web Tips: Launching New and Pop-up Windows
• Don't let your web site fall out of the window: opening new browser windows
• How evil is the target attribute?
• New-Window Links in a Standards-Compliant World
• Open New Window Still Has Usability Issues
• The target attribute and opening new windows
• Top Ten Mistakes in Web Design
• WCAG 2.0: H83: Using the target attribute to open a new window on user request and indicating this in link text
• WCAG 2.0: SCR24: Using progressive enhancement to open new windows on user request

Until recently I was one of the only nerds who had yet to upgrade to Firefox 3. I'd been waiting until I could find an easy way to install it alongside (rather than in place of) Firefox 2. When I'd tried doing this a few months ago—with the beta version of Firefox 3—it hadn't worked properly, so I'd put the idea on hold.

I mentioned this in a meeting, when a colleague piped up with a simple solution. He suggested using the PortableApps version, a standalone version of the program that can be installed on a Flash drive—for portability—or simply in a directory you designate on your computer. This was so obvious I immediately wondered why it hadn't occurred to me before, but then, practical ideas are like that.

PortableApps.com offers a plethora of portable software solutions—including Firefox—for Windows

Once I got back to my office I hopped over to http://portableapps.com/, looked for Firefox 3, then proceeded to download it. Within minutes it was installed, separately and independently of Firefox 2. When I tried to start it up I discovered that you can't run them both at the same time—I had to close out of 2 to open 3, then close out of 3 to reopen 2—but you can run them on the same computer. This will be tremendously useful if I discover some quirk in Firefox 3—such as an add-on that no longer works and has yet to be updated—or if I need to see how a Web page renders in each version.

That solved the problem for the Windows P. C., but what about the Macintosh?

FreeSMUG: Portable Applications for OSX

Firefox 3 from FreeSMUG (Mac)

A quick Google search turned up FreeSMUG's portable applications section. FreeSMUG offers a portable version of Firefox 3—in several languages—as well as other popular open source programs such as Open Office and Audacity. Those new to many of the Open Source programs available through FreeSMUG can learn more about them through a variety of helpful tutorials available on the site.

FreeSMUG says of its portable applications, "OS X FOSS portable applications are packaged so you can carry around on any portable device, USB thumb drive, iPod, portable hard drive, memory card, other portable device (or also on your internal hard disk), taking your preferences with you." This of course could be handy for any number of reasons, but the ability to run multiple versions of browsers to use for testing Web sites, is particularly useful to me.

Why test in multiple versions of the same Web browser? Why not just upgrade?

As a Web developer, you probably upgrade your browsers fairly often. That's not true of the average user. In many cases the people who visit your site are using the same browser that came with their computer.

The most popular browsers used by visitors to the Web Development Blog this month are:

• Internet Explorer 7.0 - 24.6%
• Internet Explorer 6.0 - 24.3%
• Firefox 3.0 - 12.7%
• Firefox 2.x - 17.8%
• Safari - 5.4%

Interestingly .5% were still using Netscape 4.0, which is over 10 years old!

To ensure that you, my site visitors, can view and use this site with ease, I need to make sure that it works properly in the browsers that most of you are using. This requires testing in multiple browsers and versions.

When a browser releases a minor upgrade, this isn't a big issue. But when a Web browser makes a significant upgrade it can make a big difference. A site that looked fine in version X, may look horrible in version Y.

When Internet Explorer 7 came out, users and developers quickly noticed that many pages didn't render properly in the new version. I.E. 7 was actually more standards compliant than I.E. 6, but developers who had used I.E. hacks to make pages look right in I.E. 6 found they didn't work with I.E. 7. This led to a lot of sturm und drang about I.E. 7 "breaking the Web," as those developers needed to modify those hacks to make their sites work in both I.E. 6 and 7.

Here at Case our templated sites don't rely on many I.E. hacks so they transitioned smoothly from I.E. 6 to I.E. 7. But when I'm building new sites, I may sometimes incorporate new styles or features that I've not used before. This is when I make a point of testing in multiple browsers. Tredosoft's Multiple I.E. Installer provides a convenient way to run different versions of Internet Explorer on Windows XP. They also provide information for running I.E. 6 natively on Vista.

Must your site work in every browser available?

No, the Web has evolved enough since 1993 that making a site backwards compatible with every browser version is pretty much impossible. But if you adhere to Web standards, build sites that degrade cleanly in older browsers, and test in the browsers used by most of your readers you should be able to provide a good user experience for all of your visitors.

Web Browse Testing Resources

• Browsershots
• Browser testing CSS and JavaScript
• Browser Tests, Services and Compatibility Test Suites
• CSS: Browser testing order
• Why your site should work on multiple browsers

In Your home page is NOT your index; it's your store front, I discussed some of the goals of homepage design and navigation. Today we'll consider how users navigate within the site. As my friend and fellow developer Wayne Smallman correctly surmised—when commenting and following up on that entry, the pages inside your site are like the aisles or departments within a store. Each page needs to be identified so that users know both where they are and where they can go.

Port of Entry: Not everyone uses the front door.

In a real world store, visitors typically enter through one or two main doors then follow the signs or clues to the department they need. But in the online world, they may enter through the front door, crawl in a side window, shimmy down the chimney or teleport in via Google. Each page on your site is a potential entrance. In some cases, you may get less traffic through the front door than through other pages. For example, last month 58% of those who visited http://www.case.edu/visit/ entered through the main page. The other 42% entered the site through one of 44 other pages. Here on the Web Development Blog, visitors entered through 152 different pages—only 8.6% came in through the main page.

To serve these users we need not replicate the experience of the home page, but we can offer wayfinding tools that will help them and other users browse the site.

Where am I? Wayfinding signage and landmarks.

If you've ever wandered around a department store, mall or national park, you've probably encountered the ubiquitous "You are here" sign. Whether you've walked past the same pond 5 times or just can't find your way out of "men's shoes," the "you are here" sign indicates where you are in relation to other areas. A Web site doesn't need something this obvious, but users do expect to find clues that will let them immediately determine where they are, whether they are in the right place and—if not—guidance to direct them towards their proper destination.

To determine location, users will rely on site "landmarks" and "signs" such as logos, images and headers. On sites here at Case Western Reserve University we include:

This screen shot from the
Provost's site shows you some of
our common wayfinding tools.
View enlarged image.

• The university logo in the upper left corner—to let users know they are on one of a collection of Case sites. (On sites using the newer templates, users may click on this image to return to the Case home page).
• The site title on the right side of the the banner indicates the name of the specific site. (On sites using the newer templates, users may click on this title to return to the home page of the site.)
• Section headers appear at the top of the side navigation menu (on the advanced templates) to let users know which section of the site they are in.
• Descriptive page headers at the top of the main content area let users know which page they are on and what the content will include.
• A detailed footer includes the department or organization name, addresses and other contact information.

How do I get there from here? Navigational tools within the site.

If the user has determined that he/she isn't in the right place, menus and other navigational aids should be readily available to guide the user to a more relevant page within the site or to a different site with related material.

Here at Case our pages include menus and other aids such as:

• Top navigation on the upper right of the page offers links to the Case home page, university directory pages and a university search page so that users may easily seek out other Case sites.
• A primary menu appears on each page to let users navigate between sections (on large sites using the advanced templates) or between all pages (on smaller sites using the basic templates.)
• A secondary menu appears on each page of large sites (using the advanced templates) to provide navigation to all pages within a section.*
• Sites that have sections within sections may also incorporate tertiary menus near the top of the content area of pages within subsections.
• A search box below the left hand menu allows users to search within the site for a particular topic or page.
• The related sites box guides users to other sites (Case or external) that provide related content.

*Blogs, such as this site, will typically use topical categories/tags and date archives rather than the usual sectional navigation.

Wayfinding and navigation conclusions

Navigational and menuing systems vary. If you're the XYZ corporation your site may rely on searchable databases to display your enormous inventory of widgets. If you're a small non-profit with a lot of data you may have a site that is many levels deep and requires breadcrumbs in addition to, or instead of secondary or tertiary menus. The navigational tools you employ will often be determined by your content. As long as it works effectively, it doesn't matter which system you use. If you include some basic wayfinding tools to let users know where they are and how to proceed, you will improve the user experience increase the odds that they'll stay on the site now and/or come back in the future.

Navigation and Wayfinding Resources

• A List Apart: Where Am I? by Derek Powazek
• Common mistakes of site structure (Boagworld)
• Interface Design: Trunk Testing
• Navigation Accessibility 1: Menus and Links (Web Usability)
• Seven Steps To Easier Web Navigation by Constance J. Petersen
• Web Pages That Suck - Horrible Navigation Example (Video by Vincent Flanders) Unbelievable example of how to bewilder your site visitors.

You don't need to speak German to know this store sells hosiery

In preparing this article I asked some friends, designers and users, for some of their recommendations or pet peeves regarding home page design. Here are some of their Do's and Dont's. (Thanks to Dan, Nicole and Zeke.)

Do Include:

• Clean easy to follow layout.
• Navigation that is apparent and doesn't require precise mouse movements to get to sub items.
• Tailor your navigation to your target audience and their primary goals
• A page that says, "This is who we are, and this is what you can do here... have at it!"
• Easy access to contact information

Simple and uncluttered

Don't Include:

• Audio or video that plays automatically
• Splash screens, or "specials" that appear as popup layers
• Advertisements on home pages
• Businesses / Corporations that use Adsense
• Products or services ... WITH NO PRICES
• Self Praise "The number one site for ...." as if you'd tell us if you were number 2
• Improperly used navigation that follows scrolling
• Long-winded welcome statements
• Company history
• Instructions on how to use the site
• Big useless images of smiling hip people

Intriguing, but what does it mean?

Space. Designers want to preserve it and clients want to fill it up. It's not that the copywriters, marketers and others don't like space. It's just that they have some important points they want to make, and there is only so much room in that quarter page magazine ad, 2 page-spread, catalog, or Web page. But wait, Web pages aren't restricted the way print is. We can make it wider—everyone has larger monitors these days. Or we can make it longer—people can scroll. No wait, we read somewhere that people don't like to scroll. Put it all above the fold. Or put it above the place where I'd have to scroll on a 17" monitor using a browser that has 5 toolbars. (In other words, the space we'd have in that quarter page print ad.)

Whether you're a designer, a writer or a client you've all participated in this debate. What goes on the home page and what does not? At one point you may have even thought the matter settled. But then Joe in operations suggested that it would be imperative for people to get to the transportation section in one-click. If that's on the home page, then Sally feels it is equally important to include the section on ergonomics, Brad wants to include the President's Day sales specials, and Sonia in Plumbing Supplies has just offered up the latest kitchen sink—in scratch resistant stainless steel.

Everyone's ideas are important. Any of these could be compelling to your reader, and supportive of your goal of selling widgets, clarifying the calculus, promoting an event or what have you. So how do you decide what goes on the home page?

Establish your home page priorities

Your Web site has one or more goals, educational, commercial or otherwise. The Web site project team has additional specific goals. They may want to sell out the stainless steel sinks to make room in the warehouse for next year's ceramic models. They may want to promote their research to help pave the way for the grant application due in March. These are all worthwhile, but when it comes to the home page I find there are three things we should make clear to our users.

Tell them where they are.

Your home page should make clear the name of the organization and the nature of your business.

Encourage them to come in and look around.

Give them a taste (but just a taste) of what you offer, so they want to learn more.

Provide clear directions to the entrance.

Show them how to enter and navigate your space.

That's it. If you can achieve these three steps, the rest will follow and Sonia will be able to unload those stainless steel sinks. O. K., I admit that is easier said than done. But let's compare our site to something more tangible, with which we're all familiar.

Your home page is like a storefront

In America, particularly in areas of urban sprawl, the well-designed storefront is rare. But if you've spent any time in Europe, large American cities, or small towns whose retail districts have not yet been replaced by box stores and strip malls, I think you'll know what I mean. A store front usually has a large sign over the door (like our Web banner) proclaiming the name (and often the nature of) the business. If you are walking down the street in the hopes of buying hiking boots, the sign over Larry's Leather Shoe Emporium will make you stop. You'll look in the window.

If you see patent leather heels surrounded by shiny fabric, you'll continue walking. That wasn't the right place. If you see products by Merrell and Columbia sitting next to backpacks and logs on a field of crushed leaves, you'll recognize that they may very well have what you need.

Next you will look for the door. Ideally it will be obvious. If there are two doors, you want one to be clearly marked as the entrance. You don't want to walk up to a door and find a 3 x 5 inch sign with an arrow saying, "enter next door." If you can't find the entrance you may keep walking. But if the door is clearly marked, you will come inside and look for the hiking boot section. Ideally the store will have clear signage and displays, so you can pick out your boots and make your purchase. (Inside navigation will be the subject of a later article.)

Don't clutter up the window

I use the store metaphor because it's easy to visualize. An appealing display of items we want or need will entice us to enter. A cluttered display (with some exceptions) will not.

Imagine Larry's store window with the boots and the leaves. Now lets add a stuffed deer, BB gun, hunting knife, camouflage vest, pup tent, Coleman Lantern, fake trees, a plastic owl, binoculars and a canoe. Is this a wilderness supply store or a shoe store? No matter, they have boots, so you'll enter anyway. Now add sleeping bags, parkas, stuffed bunnies, a grizzly bear, a basket of easter eggs, and a mannequin of Little Red Riding Hood carrying an open basket overflowing with jam, cheese, sausages, wine and two crystal goblets. It's an intriguing scene. You may stop and stare at the window for a moment. You may wonder what the display is about and you may wonder what they really sell here but you might not notice that pair of hiking boots sitting behind the bunny rabbits. Thus, you may keep walking.

Larry's window, crowded as it may be, may still create an attractive display. But it's also confusing. When presented with too many choices, it is easy to get confused. At that point the easier choice is to continue walking. The same applies to our Web site. If we don't present simple and obvious choices, it is easier for the user to hit the back button and look elsewhere than to enter our site—even if we have the information or products they want. (View psychologist Barry Schwartz's video below to learn more about the problems humans face when confronting choices.)

So what should we put on the front page?

As you are planning the page, think of the storefront and keep it simple. Include your name and a brief description that let's people know they're in the right place. Highlight 1-6 products, news items, special offers or announcements (not 1-6 of each). Include a simple menu with less than a dozen (6 would be good) choices that will take them to obviously distinct sections of your site. You may also include a search box, footer, related sites and other simple navigational aids, so long as they offer intuitive guidance rather than clutter. (If your site is a blog it is fine to include your primary content, i.e. your entries, on the first page, as this is standard blogging practice. I'll address blogs another time.)

These numbers aren't written in stone. Perhaps you really need 7 menu items rather than 6. It depends on the content. But when you justify 7 it's easy to think that one more won't hurt, and what about this bit, then suddenly you are up to 31 and your visitor doesn't know where to look. Just keep thinking of that store front. While you are doing that, pretend you are the visitor, a person far less familiar with your content than you. Look at your site plan or design draft through their eyes. Does it allow you to make simple choices? Or do you have to think about where to go?

Test your content

It's sometimes hard to tell how much is too much. Or your team may have marketing research that shows your target market wants to see 50 things on the front page. What they think they want may not be what they can really use, so test it. Create 2 front pages, one with the clutter and one with 6 menu choices. Get some volunteers (unfamiliar with your product or subject area) and ask them to answer 12 questions, the answers to which they will find in your site. Have them time how long it takes to find the the answers. For each question ask how easy or difficult it was to find the answer (on a scale of 1-6). There are many ways to test usability (I'll write more about that later), but this one is fairly easy to implement, even on a shoestring budget, and it can give you some quick insight between what you think will work and what really does.

Homepage Design and Decision Making Resources

My friend Shirley, from Pownce, gave me the link to the Home Page Design article which offers a number of interesting insights into the role of your homepage. Other than that I thought I'd focus more on the psychology of decision making that really drives our need to make sites simple. To that end I've included Mano Singham's articles on snap judgments and the Barry Schwartz video. These aren't directly related to Web page design, but they underscore why our design choices are so important.

• UX Matters: Home Page Design
• Snap judgments (1): Mano Singham examines decision making in relation to Malcolm Gladwell's book, Blink
• Snap judgments and prejudices (2)
• Improving the quality of our snap judgments (3)

Ted Talks: Barry Schwartz, author of The Paradox of Choice: Why More Is Less

In this video, presented by TED (Technology, Entertainment, Design) Barry Schwartz explains how freedom of choice can be stressful and make us less happy, a notion counter-intuitive to those of us raised to think that freedom choice is better. I think it's an idea we can apply to the content choices we present to our site visitors.