Sometimes I think that designing can also be like playing LEGO. Give me the pieces, the shapes, the blocks, and I’ll do my best to arrange them into something cool yet usable.

So, this is the list of the various blocks that would fit into an online magazine’s home page. I definitely would use this as reference, and hopefully it’s useful for you guys too.

First, the obvious ones:

• Title and description
• Navigation bar
• Search Form
• Footer

Next, the custom blocks:

• Featured article. A big, differentiated block with big images and excerpt of the magazine’s current top article
• Also featured/previously featured articles. Could be a list of three or more articles with smaller thumbnails, smaller header, and so forth, compared to the single, featured article above.
• A glimpse of the most recent articles on each categories available. Mostly just list of titles with date of publication.
• Popular articles. Either visit count-based or reader rating-based.
• Multimedia. Featured video, podcast, and so forth.
• Latest reader comments.
• Advertising spot(s).
• List of categories.
• List of archives based on date.

Also remember that the above are just common blocks and they might very well be modified to fit your needs. Why just one featured article, for example? Maybe six is the way to go. Who knows.

Another point of interest is thinking how these blocks can be presented. Use DOMTab to put more than one blocks in one space, displaying only one block but still allowing visitors view the other blocks by clicking on the corresponding tabs (it’s much easier to check the DOMTab site and see the effect in action). You can see this effect being used tastefully on The New York Times, Small Potato’s magazine-styled WordPress theme, and basically various other places.

It’s probably a good thing as well to feature your readers somewhere on the front page. A list of the most valued contributors of some sort (those who comment the most, or who send the most articles, and so on). There are plenty of different things to try, so experiment and have a lot of fun!

After reading the sources from Part I, this is my conclusion, extracted and listed for reference later. Hopefully it’s useful for you guys as well.

Basic Necessities

First of all, I think this goes without saying that the most popular form for a search result page is a list. I just mentioned this because I wonder if there is another way to present the result more effectively. No, I haven’t put more thought into it, maybe you have?

Okay now, here’s the list.

1. Remind user what they are searching. A few common places:
   • <title> tag
   • subheader text (above search result)
   • highlight the search term inside the result (say, with different background color)
   • put the search term inside the searchbox. Also useful for refinement, discussed later.
2. Add short description and or more information available. This is good to help the searching process.
3. Categorize if necessary.
4. Consider the two extremities: no result and too many results. Let user know if there is no result (blank page is a no-no), use pagination for the latter.
5. Show the scope of the result (e.g.: 1-50 out of 1,000 result)
6. Using numbered list for the search results already show the relevancy of the result, but if necessary it can be further refined like using percentage in Wikipedia.
7. Refinement. Allow user to refine search query easily. Having the search term ready inside the input box is good. Advanced search option is another solution, although not always necessary and or viable.

Advanced Features

While might not be needed on most cases, but they can be useful depending on the situation.

1. Addressing near hits. Typo. Misspelling. Suggest word correction, like Google.
2. Advanced search. Scoping.
3. Show commonly searched terms.
4. If you’re dead sure that the first result matches with the query, redirect immediately without showing the search result page. Like in Wikipedia.

TOC

This is Part II of the On Designing Search Result Page article series.

1. On Designing Search Result Page, Part I
2. On Designing Search Result Page, Part II: Quick Summary

Compared to other commonly discussed part of a website such as the homepage or product page, I find that search result page is a topic that is much less studied. This is baffling, because designing a good search result page can be a difficult task at times. In fact, we are currently stuck right here in our small project: we just can’t seem to create that perfect search result page!

Hoping to solve the problem in a different way, I will try to create a series of article about our current endeavor. The best thing to do first is, of course, to stand on the shoulder of the giants. So, the first part of this series will list various articles that have been written about the arcane art of search result page design. Here we go.

Before we get started…

Search: Visible and Simple, from Jakob Nielsen’s Alertbox. He raised two important points about the usefulness of a search feature: it is a way for user to go anywhere he want regardless of the available site navigation, and it is also an escape hatch with which user can find a way to go somewhere else when they’re stuck in a page.

About.com’s Web Usability section has Site Search Dos and Don’ts, a short article filled with utterly useful tips, tricks and knowledge. It’s a must read. Also read about scoped search and whether it’s necessary to include in our website.

How to Create a Good Search Result Page

Why, About.com has that very page: Designing a Good Search Result Page. In a nutshell, their recommendation is to remind user what they searched for, put results in context, keep it consistent with the rest of the site’s look, and provide further search tool. Visit the page to learn more about each item.

Web Design, The Complete Reference has a chapter dedicated to Search functionality, and there’s a quality content there about Result Page Design. The article is actually longer than About.com’s article above, and I dig the list of common result page elements.

Martijn van Welie also have a great article on the subject, with samples from the already familiar search page of Google and Amazon.

With an emphasis on e-commerce website, E-consultancy also have a page on search result design. As a side note, the site is rather broken in Opera, with the content page squeezed to a really small width making it hard to read, so you might want to use Firefox or Safari.

Also interesting, here’s Design by Fire’s attempt to redesign what possibly is the world’s best known search result page: Google’s.

There’s also a paper called Presenting Search Results: Design, Visualization, and Evaluation, by John Cugini.

That’s about it. Kindly let me know if you have more resources on the subject, it’s quite possible that my Google-fu is not great enough to find more juicy links.

In the next part, I will try to use the knowledge from the sources above to study search result pages from various sites. Stay tuned.

Play Work Play Studio is currently taking part in developing a smallish side project site where most of the features have yet to be determined. The basic functionality is there, but feature-wise there is no unique factor that can make our site stand out.

But could the scarcity of features be a site’s strong point? If we’re looking at 37signal’s direction, then the answer is yes. However, should we decide to go that way, it will be necessary to actually delve deeper into the very essence of the site. The lack of feature should actually be a defining factor, the philosophy behind our design, instead of just a byproduct of the developer’s lack of idea (which is closer to our actual situation right now).

One of the biggest driving factor for us to take part in this project is due to the fact that most competitor sites are so poorly-designed, browsing around them felt difficult and tiring. Our goal is to provide a better experience for users: our content might be the same, but you’ll have a lot more fun exploring our site. Also, if all you want is to grab what you need and immediately go somewhere else, we’ll make sure our design don’t get in the way.

Now, could the lack of features aids us in reaching that goal?

In a way, we are optimistic that it could. By leaving only the very necessary part intact, we could ensure that users don’t have to work hard to get the content. Also, the simplicity of the design means that it will be much easier for people to master the site. This can give users a better sense of satisfaction, so that they felt comfortable enough to use and return to the site every now and then (and happy enough to recommend our site to others!).

Also, the load time would be much faster without all those unnecessary features. It’s one major plus for our target market.

Stay tuned to further development of this project. Who knows, perhaps by the next post the site will already be up and running.