Max Kiesler - Designer
Beyond the List View - New Patterns in User Interface Design
SubscribeTuesday, October 23, 2007
Currently there are many ways to view content on the web. From an interface design perspective these usually fall into one of three categories which include, list views, grid views and content visualizations. This article will look at each one of these patterns and discuss their history along with the pro and cons associated with their use. Then, I'll give some examples of past and present websites using these patterns. Finally, we will look at a few examples of what we might be seeing in the next few years in the way interface design patterns.
The List View
The first user interfaces on the web all used the list view as the way to display content. This is the second web page ever authored by Tim Berners Lee in September of 1992. A very clean design with all of the information presented in a logical list format.
The next phase of the list view came with the advent of using data tables as page structure. At some point nearly everyone except geeks and hardcore programmers started using this new style of interface design. Column structure is in many ways represents mixed or multiple list style. Basically, a series of lists divided by columns. In 1998 even google had column lists on it home page. Notice the blue boxes under the search input.
Currently the list view is being used in some more interesting ways. With the popularity of AJAX came the live list view. Below is digg big spy and supercharged list view that shows all stories coming into digg.com in a fascinating live form.
Today the list view is the most pervasive way to view content on the web. It's so commonly used that it has become the de-facto construct for presenting all forms of content on the web. Search engines, blogs and nearly every other content vertical on the internet all use the list view to show their content. One of the few exceptions to this are photo and other media websites. Nearly every site in these categories uses the grid view.
The Grid View
The grid view has always been the preferred way to browse images and other media. Here is the browse view for tags in flickr.
The grid view has been around since designers have been using tables for layout, however, it wasn't until recently that the grid has been used in new and exciting ways. Increasingly product websites have been using the grid view to display their content.
While this is not stunningly different than a standard photo or gallery site, it does mark a change in the way products are viewed on the web. Now instead of just a photo and a caption you get a title, short description, and pricing information. In the beginning most product site only displayed in the list view. Now some give a choice to see products in list or grid view. One example of this is the social shopping site StyleHive which gives you the option to see bookmarks in a list or a grid view.
As you can see in the above example the greatest advantage to the grid view for a product website is that you are presented with much more content above the fold. It is also potentially faster and easier to browse the information in the grid view, especially if most of the information can be portrayed with the image and a limited amount of text. The disadvantage is that you can present less information about each product. I have reviewed a few studies testing whether the list view or the grid view is preferred by website visitors and all of them seem to be rather inconclusive. In most cases the studies point to about a 50 / 50 ratio of individuals liking either the list view or grid view. Classically, this is about the same statistic we see when we test whether readers prefer to search or browse a websites content. The key is to get your viewers to the relevant information they are looking for as quickly as possible. This is known as the information scent. "Information scent is made of cues that people use to decide whether a path is interesting, says scientist Dr. Ed Chi. These cues consist (of) images, hyperlinks and bibliographic citations related to the information needed. According to Chi's research, people almost always start out with a search engine, then engage in what he calls hub-and-spoke surfing: They begin at the center, and they follow a trail based on its information scent. If the scent is sufficiently strong, the surfer will continue to go on that trail. But if the trail is weak, they go back to the hub. People repeat this process until they're satisfied, Chi said." Hub-and-spoke surfing is where our next category of content presentation shines.
Data Visualizations
As I've stated in previous posts, data and content visualizations may be the next wave of interaction design. These constructs give us entirely new ways to discover deep content and relational data like never before. This form of searching or browsing map directly to the hub-and-spoke approach discussed by Dr. Chi. A good example of this is TuneGlue which is a music search and relationship visualization. The application lets you type in an artist and TuneGlue will return all of the artists it can find related to your search.
This approach gives you both search capability and the hub-and-spoke method of surfing for the content you are interested in and the ability to discover related information. At this point data visualizations have been adapted to nearly every type of search including images, video, mapping and meta content.
One of the other big advantages of data and content visualizations is the ability to view all search results above the fold. While this form of interface design is not appropriate for every kind of site or content it is a great leap above the standard list and grid view. However, if you are trying to show a great deal of content above the fold data visualizations may be the perfect option for you.
What's on the Horizon?
In the next few years we will see many new patterns in interface design. Some of the newest advances include life streams, slogs and ecological interface design.If you want to be part of this discussion or know of other patterns in interface design just let me know by email or by leaving a comment on this post.
Comments on this post
Paul Rouke on 10/24 at 07:28 AM
I would add tag clouds as another ‘newer’ interface design method, following on from your DigBigSpy example - being able to represent, for instance, a large collection of recent search terms as a collection of differently weighted and sized tags, can, in a small area, provide a shopper who exhibits hunter style behaviour (ie. keenly interested in what others are currently looking for, especially with the whole social media/networking aspect) with an intuitive and instantly accessible way to see results of popular search terms.
Until tag clouds, and derivatives of, become a well know design pattern I would always advise that a ‘useful information link’ is provided to answer questions such as ‘why is this text different sizes’ etc.
Multi-faceted navigation of e-commerce sites with the use of tag clouds is another newer interface design pattern which we will be implementing on client sites where applicable to the target audience also.
A great article Max!
Anders Toxboe on 11/07 at 09:45 AM
Another great resource with “never” user interface design patterns (web 2.0 stuff) is http://ui-patterns.com - you might want to check it out.
Search
Home | DesignDemo | VizList | mHub | About | Contact | News
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco
focused on next generation websites. About Max...
This work is licensed under a Creative Commons Attribution 2.5 License