When designing for efficiency in web application, an area that often gets little attention is the contexts of input. On most desktop computers, there are two ways of inputting data: via keyboard or mouse.

Working in a web-based system, many web editors and administrative personnel find themselves switching from the mouse to the keyboard and back constantly. Taking your hand away from the mouse in order to operate the keyboard takes time: you stop your current flow and have to start a new one. Every time the user has to change input device, speed and efficiency is lost.

The most common deficiency regarding input-context change is having to click on a form field in order fill in data. It gets annoying having to go back and forth all the time. Instead, many prefer to just stay on the keyboard. Leverage this fact when you designing workflows in web applications. Make it easy to stay on the keyboard!

A series of actions will help you accommodate keyboard-only interfaces:

• Use javascript to put focus (i.e. select a field) on the first form element, so that the user can start typing in information right away.
• Make sure all fields have tab-indexes, so that the user can use the tab button to easily go from field to field in an order that makes sense for the input.
• Provide keyboard shortcuts for saving, undoing, going to the next section, or similar actions.
• Add auto-complete functionality to input fields, so that the user does not have to scroll down a huge select box.

Count the number of times a user have to change back and forth between the keyboard and mouse when filling out a form or navigating an interface. Work on bringing this number down. Consider each context change (from keyboard to mouse or back) a fail on the designer’s part!

Related stories

• Design considerations for article lists
• Design considerations for event calendars

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 afford 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:

1. 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.
2. 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.

Related stories

• Input contexts: switching from mouse to keyboard
• Design considerations for event calendars
• Designing for trust
• 35 ways to tease your content

I just ran into ecommr.com – a collection of e-commerce interface and design elements. If you’re designing a webshop, this is definitely the place to go for inspiration.

Ecommr.com has categorized its screenshot examples into design elements like “Add to cart”, “E-mail marketing”, and “Size charts”.

Go find out how you are going to design your next webshop

Grunge in web design has had its revivals. There seems to be an everlasting pendulum pointing at either clean design or its opposite: grungy design. Is grunge web design a counter-movement to the shiny and glossy design of web 2.0? Grunge elements aren’t necessarily overwhelming but they add a sense of rebellion.

What does it look like?

The grunge design is often recognized by using graphics that give a dirty feel. Dirty stains and textures, drips, splats, sprays, torn images, hand-drawn elements and creased pieces of paper are common design elements in grunge design. Often, elements from our daily life is replicated in their real form without any digital glossiness.

Irregular elements

A few irregular or dirty elements in an otherwise glossy design can help bring personality into the design and give a more realistic look. It is the small details that influence the mood of the user and defines his or her perception of the site.

Colors

Grunge designs often uses subdued colors. Brown, beige, grey, and black is seen again and again. The subdued, dirty and dull colors mixed with textures and real life graphics creates a look anything but boring.

The more bright and vivid colors get in a grunge design, the less striking the design is perceived.

Trends in grunge design

• Dirty textures and background images
• Irregular lines and frames
• Yellowed scotch tape
• Paper- and photo clips, needles and pins
• Coffee rings and dirty stains
• Torn paper and dirty edges
• Dog-ears
• Hand-written elements

Where is it used?

The grunge style has always been used extensively on band and music websites and urban lifestyle sites. It seems that these kind of sites uses the very free form to express and convey their artistic and often anti-mainstream image.

Check out more examples of the grunge design style in action.

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!

Related stories

• Calendar Picker
• Input contexts: switching from mouse to keyboard
• Design considerations for article lists

Just ran across this great banner design showcase gallery from doubleclick. The design gallery showcases some of the best banner design examples in a series of categories: video, takeover, featured, and dynamic.

I am especially fond of how they have solved the problem of showcasing how takeover banners work in the context of a real site.

Check out the banner design gallery at innovation.doubleclick.com

The guys over at 10gui.com are trying to rethink the way we interact with computers – the traditional 2D window-based desktop approach. Instead they propose a linear approach to managing windows that takes advantage of 10-finger multi-touch controls. Watch the fascinating video below.

“Rather than creating windows at often arbitrary positions on a 2-dimensional plane, con10uum organizes them linearly. New windows arrive from one side, occupy the full height of a screen, and are manipulable through a consistent vocabulary of multi-touch interaction.”

Internet scams, stories about stolen credit card information, and the conspiracy theorist inside keep us from trusting websites, who wish to let us create an account or sell us something. Will data I enter into here be misused? Will I receive spam when giving my email away? Do I really want to share this private information with a stranger I do not know?

I love the mint.com – a service that scans your credit card usage in order to analyze your spending and help you make and keep budgets. I however, I keep refraining from signing up. Why? I simply do not feel like trusting them with such private information as my credit card details. My fear is probably unrooted, but still I’m scared.

The lack of trust in a website creates friction. The lack of trust creates hurdles the user needs to pass. In order to lower friction and the hurdles to pass, users need to be provided with a reason to trust you with the information they supply. The time and effort required to complete a form should be appropriate for the task at hand. A constant battle between the reward for completing an action and the effort it takes to complete it, is at play at all times.

You can communicate trustworthiness in several ways

• Design quality. A professional appearance gives the user a good gut feeling. If the site is easy to use and it looks good, it shows the user that these people know what they’re doing. Good design quality implies respect for the user and promise of a good service, where the opposite communicates disregard for the user.
• Let your users know what is going to happen. Both in regards to the process, but also the data they are providing you with. Let your users know what is going to happen with the data they provide. Can they expect a call if they provide their phone number? If you request a user’s email, he or she will wonder how much spam is going to be sent. So let them know that it’s just for informing you about shipment, possible delays, and invoicesc – nothing else. Tell the users why you need the information if it is personal.
• Use trust indicators. Use the badges of secure payment gateways that everybody knows. Brands like PayPal or VeriSign convey a sense of security and put most doubts about data theft and security to rest. Credit card icons also provide a great a sense of comfort. A credit card form without credit card icons feels wrong. I wouldn’t use it! Other trust indicators are the brand names you sell, money back guarantees, industry standards or ratings.
• Social proof. Social proof is a trust indicator that needs its own bullet. Show that previous (perhaps prominent) customers are happy with the service you provide and have them give testimonials about how you helped them. If your potential customers are in doubt whether they should trust you or not, the behavior of all the other people who weren’t in doubt might be the tipping point. The effect of Social Proof relies on the assumption that surrounding people possess more knowledge about the situation, why they will deem the behavior of others as appropriate or better informed.

Check out these examples of using trust indicators such as badges in the footer of a website in order to increase a sense of security and build trust:

BuySellAds.com
Buysellads displays a series of badges and icons that each communicate security and trust.

Mint.com
Mint.com has a high focus on conveying a sense of trust in that the service is secure showing badges from VerySign, TrustE, and McAfee.

Asos.com
The icons at the bottom of the asos.com footer help communicate a sense of security and help the potential customer put trust in asos.com.

Related stories

• Design considerations for article lists
• Collectible Achievements

We’ve collected 45 examples of great list design on web pages.

They all have great attention to color, spacing, background/foreground relationship, and general style. Some lists use icons, while some use other means of communicating and separating list items. Some are vertical, while some are horizontal. Some consists of boxes, while some are floating in free space.

Either way, they are all elegant and beautiful. Enjoy the Lists screenshot collection!

Are you building the next big web application? Then you want to check out these cool “Coming soon” page designs to inspire your own “We’re launching soon” page.

Coming soon pages are a great place to create hype about your project that’s going to take over the world. Silverback did this a few years ago by creating a then groundbreaking splash page in terms of CSS use (visit the size an resize your window). Other websites merely display screenshots of the application under construction – giving investors, future users, and other stakeholders a sneak peek of what is to come.

Coming soon pages are also a great way to gain the first following. Collect emails and get twitter followers, so that you can keep them updated on the progress of your project and be sure that you’ve got a nice crows going once you finally launch.

Enjoy the Coming Soon screenshot collection!