Posts tagged considerations
Design considerations for article lists
Feb 24th
One a website delivering editorial content, the article teaser is one of the most important design elements besides the design of the article itself. The article teaser is part of an article list, and its main purpose to lure visitors to keep on browsing.
The most pure form of article lists is seen on magazine and news websites, but the convention is also relevant to all other sites trying to tease another click out of the visitor.
I’m going to take you through a few design tips, common mistakes, and finish off by defining the common elements of an article list.
Design tips for designing great article lists
Don’t over-design it: scanning is the main feature
The main purpose of the article list is to lure users to click on a story – so let them find one that they find interesting! One of your proudest objectives as a designer should be to get out of the way and let the user perform his or her task. The interface you design should scanning.
Too many ornaments and other unnecessary design elements hinder scanning. They have no other purpose than making the designer show off.
Longer lists are good – when they are scannable
Pagination is overrated due to two reasons:
- From the world of content to the world of navigation. Every time the user needs to use pagination to view more stories, he or she is pulled from the world of content to the world of navigation. The user is then no longer thinking about what stories they should read, but about how to find more to read. Using pagination creates a natural pause that lets the user reevaluate if he or she wants to keep going or leave the site.
- Pagination numbers have no meaning. What does page 2, 3, or 4 mean? It’s an abstract construction without root in anything real. For the user, being on page 2, 3, or 4 only indicates the inability to find anything interesting on page 1. Being on page 4 is a reminder of a lengthy website visit without finding anything of value. Instead, find a meaningful way to group articles: by week, month, year, category, tag, or by alphabet. Long lists are not a problem if they are scannable.
Long lists are not bad – as long as you can scan it easily and without effort.
Setting the scene with category labels
Category labels set the scene of what the user can expect. They communicate what the title of the article sometimes can’t and by that helps set the context of the title.
An article with the title “Chanel goes crazy” can have several different meanings. If the article is about Chanel’s last economic quarter, the title possibly conveys a rising crisis for the company, however if the article is about Chanel’s new designer collection, the meaning of the title is totally different.
In this way, the category label help set the user’s expectations for what is to be found behind the link. By labeling the story with either “Fashion” or “Financial news”, the correct meaning of the title is set in stone.
In the example below, the category label “Movies” let us know that the interview with “Alexander Olch” is about his new movie and the category label “Literature” lets us know that the picture with roller-skates is not actually about the rollerskating sport.
Listing related articles
Especially on news sites articles about a subject does not come alone. News is published in fragments as they come in. To accommodate for this, many news sites not only displays the main article on the front page, but also lists related article to the subject in the near vicinity (most often below).
There are many aspects of a story which each turn different people on. If the main story will not catch the attention of a specific reader, then the chances that one of the prior articles about the same subject are good.
Also, the list of articles on the same subject works as a great starting point for exploring the full story, and thus provides a good opportunity to increase the pages per visit.
At the Danish television company, TV2, the main article is followed by the a list of the next 3 articles from the same category.
Comment count as an indicator for interestedness
If an article is well commented, we tell ourselves that it must be a more interesting read than articles with less comments. This effect is called social proof. We judge the popularity of something by the actions of others.
If you have a high comment activity on your site, listing comment count can help people stick around: “this must be an interesting site as people keep on commenting”. If your site have little to no comments on articles, you will communicate the opposite by showing comment count on article lists.
Include the author when your articles are opinionated
Everything is about the context. Always! Consider what kind of articles you are presenting. The author is relevant to an article teaser if it is opinionated – just like comment count is relevant to an article teaser if there are lots of them.
Highlight as featured article
If you want to attract attention to articles you believe will interest a lot of people, or that you put a lot of work into (the first is way more important), it can be a good idea to find a way to highlight the article.
One kind of highlighting is with an attached label in bright colors, another is changing the background color of the article list item. A third option is to find a prominent position for the article: e.g. at the top of the list with a larger thumbnail image.
Remember the call out
Remember to call out for action! Much have been said about the old-school “click here” call out, but whoever used it was on to half of the truth. The bad thing about “click here” is that it does not set expectations: “what is going to happen when I click on it?”. The good thing about “click here” is that it tells people what they should do. It calls out for action and does not require the user to think.
To get the call out right, you need to set expectations. If the user is taken to watch a video, then have a link saying “watch the video”. If you print out the first paragraph of text, then have a link that says “read more”.
You can also include call-outs in other parts of the teaser than just the text link. On video teasers a “play” icon placed over a thumbnail picture work great.
CNN.com has a great combination of video stories and regular text stories in this front page article list.
Common pitfalls of article list design
No visual difference between headline and subheading.
The visual hierarchy between the elements of an article teaser is important. For scanning purposes, the shorter heading affords better scanning than the subheading does. When the visible difference between the header and the subheader is too little, the user has to spend unnecessary energy on decoding which is which.
Forgetting to make everything a link
Make sure that the user can click on any part of the article teaser to go to the article itself: title, image, description, comment count, and call out. People are used to being able to click anywhere to go where they want.
Showing comment count when there are none
If your site does not have much comment activity, you will communicate that you have a boring site with unengaged users if you list comment count for a bunch of articles with no comments.
The elements of an article list item
For an article list to work, you must provide a series of information for it to be useful. Like always, everything depends on the context. If your articles are opinionated and more editorial than they are a news story, then the author is an important part. If you have different types of content on your site (news stories, quizzes, battles, etc.), then you would want to label your articles accordingly so that you set expectations.
Regardless of the context, there seems to be some details that are always important:
- Title the article
- Short description
- Publication date
- Call out to action (read more, continue reading, see more, etc.)
A series of details occur often, but are not present in all lists.
- Category label
- Thumbnail image
- Comment count
- Picture count (in gallery)
- Author
Think from the user’s perspective – not your own
It should be no surprise that you should put yourself in the shoes of the user. An article that will create many hits or in general be public with your audience is not necessarily the ones you spend the most time on, or the ones that you find interesting. Constantly evaluate an article’s value from the reader’s perspective when deciding to highlight it or not.
Put yourself in the users’ shoes when you decide on what data you want to present to them. Do you want to have different kinds of article list items – for instance one for galleries, one for blog posts, one for events, and one feature articles? It might make sense. Think about how you can make it easier for the user and stop forcing the user to think like you.
Design considerations for event calendars
Feb 17th
Way too often I come across websites with poorly designed event calendars. The most common ways to browse an event calendar is either through a text list of events, through a month table, or a combination of both.
The text list is great for providing a view of events for a given period of time: for a certain day, week, month, or simply the nearest future. With a packed calendar, it can however be overwhelming to get and overview of everything.
The calendar box (month table) is good for browsing between days and for getting an overview of when the action happens. In isolation it however reveals close to no information about the events in the calendar. Furthermore, the boxed calendar renders almost useless without data. If you only have one or two events a month, the usefulness of the calendar box becomes minimal – left to merely showing when the next weekend is up.
When combined, the calendar box can be used as a device for navigating through periods of time, while text lists can show details. Again, the boxed month calendar renders useless if you only have 2 events a month, where you might be better off with a mere list of years or no time navigation.
Introducing buckets of time
As humans, we don’t think in dates. We think in “buckets” of time: tonight, this weekend, next week, in a few weeks, next month, or this year.
Parting your events into buckets of time that make sense to the user is a great way to provide the user with an overview. Part events into groups of “tonight”, “next week”, or “next month”.
Consider experimenting with different designs for each bucket of time. The user might be more interested in details this week than next month. Listing the starting time in the list of events this week might make more sense than listing it for events next month. It’s all about the situation the user is in when he or she browses your calendar. Take a moment to think the design through from the user’s perspective.
Common pitfalls of event calendar design
The most common design mistakes of event calendar design that I most often run into are:
Thinking in outlook and the calendar box
Designers are working people. They spend most of their day designing – but also a recognizable part of the day in Outlook, Google Calendar, or iCal. They use calendars for planning their daily schedule and for planning the next few months with the help of these calendars. For this purpose, boxed calendars are great. Unfortunately a lot of designers forget to realize that these types of calendar designs are made for day-to-day planning (for which they work well) – they are not designed to provide an overview of upcoming events: the main purpose of the event calendar.
Listing events without a start time
I browse event calendars in different contexts. One context is when I want to find out if anything interesting is happening over the next few weeks or in the next month. In this context, I am not interested in when the event starts, but merely what date it is. Once I have decided to go to an event, I will use the event calendar with a different purpose: to check up on the details – was it 19:00 or 20:00 that it started?
Another and perhaps even more critical flaw is when events have similar titles. The example below shows a list of the same class happening several times a day. The title of the class stays the same, but the time doesn’t. With missing start times, the event list is useless.
The event list at live.cnn.com does a great job listing start times that are easy to scan as well:
Missing other relevant data
If I am going to a concert, the venue makes an important difference in my decision to go or not. I want to know if it’s going to be cramped and intimate, big and bold, or if it’s that place with the crappy sound.
Take a moment to think about what makes the kinds of events you are designing for special. Prioritize the information that let your users scan events and decide whether it is of interest or not.
Impossible to scan
Don’t make me think. Make it easy for me to scan an event based on the data that is important for the types of events you list. If one event is bigger or more important than another, then let the user know by highlighting it. The same goes for events that I might already have checked out or even better – have decided to attend.
Another great way of highlighting an important event is through social metrics such as ratings, attendance count, etc. Showing an event’s rating through for instance stars makes it easy to quickly scan the list for the highest rated event. Similarly, a larger attendance count will have a larger number and by that be easy to spot. You can also try to play around with different font sizes, text colors, and backgrounds (shades of gray?) to highlight certain events.
Huge lists
A list that just goes on and on without any visual prioritization or grouping renders a calendar useless. If a list is too big to show in a few folds, consider how you can part it up based on either time constraints (buckets of time) or other data like category, venue, genre, or rating.
No filtering options
Make it possible for me to only view the events I am interested in. If I like funk music, then let me browse only funk concerts. If I want to see what bands are playing at my favorite local club, then let me browse venues. If I only have time next weekend, then let me limit my search to next weekend.
The elements of an event list
For an event calendar to work, you must provide a range of different types of information for it to be useful. It all depends on the context. If you are listing concert events then ticket prices, availability of tickets, and band name a important. For a conference calendar, the presenter, room name, conference track name, and duration of the talk might be important.
Regardless of the context, there seems to be some details that are always important:
- Title of the event
- Date of the event
- Start time
- Location
- Organizer
- Description of the event
Use the user’s abstractions – not your own
You might for organizational purposes divide events up into different types, which you give different priority in your daily work. You might for instance prioritize sponsored events over user submitted events. In your own mind, the difference is huge!
The difference for the user is however not always that radical. If the user wants to know what funk concerts is happening next week, he or she does not care if it is sponsored or not. From the user’s perspective parting events into two groups does not make sense – so list them all together.
Good luck!
