Feb 27

If you’re familiar with my Elements of Design showcase then you know that I am a firm believer in the saying “the devil’s in the details.”

Seemingly small decision choices — from search boxes to heading typography — can make all the difference to your overall site design, the user experience, and, if you’re an online retailer, your bottom line.

Along these lines, GrokDotCom has an interesting article on the evolution of the Amazon add-to-cart button, which also includes a couple of great screenshots of a very early Amazon.com.

I also like the idea that the author has been taking screenshots of Amazon (and presumably other sites) over many years, building up a library of examples of how their interaction design process works. I’ve often thought about doing this with some of my favorite sites, but have yet to do so.

On second thoughts, perhaps this would be a good idea for a new online service — one that automatically takes screenshots of a web page on a timed basis, stores them for you or sends them to your favorite online storage account, and enables you to edit the screenshots and make slideshows to show how the page in question has evolved over time.

It looks like no one took me up on my last idea — any takers for this one?

Original post by dennislembree@yahoo.com (Dennis E. Lembree) and software by Elliott Back

Feb 26

sexy nurse illustrationBecause of the way they are misused all over the Web, categories have grown to become something that we regard in a purely user-centric light. We think of them as navigational tools and guides for users, but in reality, categories are a powerful tool that bloggers can use to exercise precise control over content in a dynamic environment.


Unfortunately, the true power of categorized content has been masked by the one size fits all implementation you see everywhere on the Web—the proverbial long, ugly list of category links now appearing on a blog near you.

As luck would have it, that awful category list also turns out to be a very poor presentational strategy for your site… But why?

Why Your Category List Isn’t Doing You Any Favors

By giving users a list of categories to browse on your site, you are creating a psychological conundrum that usually leaves them with a severe case of analysis paralysis. This is a condition where users, when presented with too many options, end up selecting nothing at all.

Being presented with more choices, even good ones, can hinder effective action. In one study, doctors couldn’t make a decision when a second promising drug showed up.

Fast Company, November 2007

Counter-intuitive? Maybe. Human nature? Absolutely.

Whether you’re selling products, writing copy, or designing interfaces, you can benefit from playing into basic human psychology. And interestingly, with Website categories, accommodating natural human behavior also turns out to be an excellent SEO strategy!

Automated SEO and Content Management with Categories

At first glance, it seems convenient that WordPress automatically creates category pages, tag pages, and just about every other type of page you can imagine1. Dig a little deeper, though, and you’ll find that this form of page bloat is a remarkably poor site-building practice—it’s a condition that should be avoided whenever possible.

As far as blogs are concerned, categories are the single biggest contributor to both page bloat and link dilution, two of the most abominable SEO sins. Ironically, when used properly, these same categories hold the key to efficient, automated site optimization and content management…

The difference, of course, is all in how you use them. Armed with a bit of knowledge and a few lines of code, you’ll be able to use categories to:

  • display content however you like, wherever you like
  • link directly to interior pages—not to interstitial “bloat” pages like monthly archives or category archives
  • provide your users with a smarter, more intuitive way to browse content that may be of interest to them

WordPress Example: “Popular” Articles

Turn your attention to the sidebar of this site, where you’ll find lists of posts underneath subheadings like “Must Reads,” “Improve Your Blog,” and “Worth a Look.” As you might have guessed, I use categories to control the content of each list, and now we’re going to examine how you can do the same. For the sake of this example, let’s focus on the “Must Reads,” which are controlled by the “Popular” category.

The first step is to categorize each applicable post in an identical and meaningful way—in this case, “Popular.” Keep in mind that it makes no difference how many posts you lump under one category, simply because you’ll establish all display control through your code (which you are about to write).

Once you’ve categorized your articles, the second step is to determine what you want to display and where you want to display it. In this example, the goal is to display a list of popular posts over in the sidebar, so in order to do that, you should open the sidebar.php template file for editing.

Now that you’ve opened the appropriate theme file, it’s time to move on to the third step, which is the coding portion of our show. Here’s the code I used in sidebar.php to generate a list (<ul>, <li>) of popular articles: 2

<?php
   query_posts('category_name=Popular&showposts=5');
   while (have_posts()) :
      the_post();
?>
   <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> <?php comments_number('0', '1', '%'); ?></a></li>
<?php
   endwhile;
?>

Take a look at the following snippet from the above code:

query_posts('category_name=Popular&showposts=5');

This line tells WordPress to look through its database and fetch the 5 most recent posts from the “Popular” category. Once you’ve acquired the appropriate posts, all you need to do is loop through them, displaying only the information you want. Here’s the code from our example:

<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> <?php comments_number('0', '1', '%'); ?></a></li>

In this case, I chose to display direct links to the posts, and I also embellished a bit to include the number of comments on each. The most important thing to take away from this is the fact that I could have displayed any piece of information associated with the resulting posts—I just tailored the output to my exact needs.

The Bottom Line

Categories are like a site’s DNA—they literally form the organizational framework that houses all of a site’s information. Like DNA, category structures are unique, and therefore, a one size fits all solution for handling them doesn’t make any sense.

The good news, however, is that you can help your users, improve your SEO, and gain absolute control over your content by implementing your own WordPress category solution!

1 Other CMS platforms do this as well, but for this article, I chose to focus primarily on WordPress.

2 For the sake of brevity, I have chosen to show only the code that loops through the individual list elements (<li>).

Original post by Chris Pearson and software by Elliott Back

Feb 23

The home page is some of the most valuable real estate on a web site. For many web sites it is still the primary point of entry for the majority of visitors.

Consequently, web site owners want to cram as much enticing content on to the home page in order to attract visitors into the site.

Because of this, the carousel has become a very popular way to showcase multiple pieces of featured content within a fixed promotional area.

Epicurious home page carousel
Epicurious has a typical home page carousel

I thought it would be interesting to showcase a variety of home page carousel designs to see what common themes emerged and also what different approaches designers took.

I have done absolutely no usability testing on carousels so I won’t comment on the pros and cons of the different approaches taken, such as whether to present items horizontally or vertically, to include playback controls, and the ideal amount of content to feature for each item.

IGN home page carousel
IGN’s home page carousel

However, it was interesting to note that although the number of items being featured largely varied from three to five, five is clearly the most popular number of items to feature.

I don’t know why that should be the case — six or seven doesn’t sound like too many to me. Maybe it has just become a convention over time as designers look at what other designers have done and follow suit.

Further Reading

Original post by dennislembree@yahoo.com (Dennis E. Lembree) and software by Elliott Back

Feb 19

In a report from the UK, where web accessibility is more widely practiced than in most other countries, 75% of Local web design companies ignore disabled people. Unfortunately, I’m sure that percentage is much higher here in the United States, where accessible web sites are still limited to not much more than some government and education sites.

Original post by dennislembree@yahoo.com (Dennis E. Lembree) and software by Elliott Back

Feb 07

Assistive technology for the disabled is an article describing assistive technology (AT) for those with visual, hearing, and mobility impairments. The author is physically challenged himself.

Original post by dennislembree@yahoo.com (Dennis E. Lembree) and software by Elliott Back