Quick start guide: Website interfaces vs. application interfaces

Websites and application interfaces are often noticeably different. One way to think about why they’re different is to think about the purposes of each.

These aren’t hard rules/always true. But they’ll help you think about which approach to take.

Website purposes

Attract people

Make use of expressive visual design like bright colours and high contrast visual styles.
Increase attraction in use with engaging animations.
Some challenge can be fun. Ironically you might want to make your website slightly hard to use so people feel like they need to explore it. Be careful—this is easy to get wrong.
Since many websites are only used once, you can use stronger visual styles and longer animations than you would in an interface. People won’t have time to get sick of it.

Explain concepts

Good/engaging information design can help people understand something more quickly/easily. Illustrations, animations, and strong visual hierarchy all help.
Layout can guide people’s attention to where you want as the designer.
The vertical/scrollable nature of websites means they work well to tell a story. They have a beginning and end, and you move through them in one direction.
Many websites are about consumption and not creation. This means they’re often focused on content, and not interactive elements.

Establish a brand

Websites are often the first experience someone has of a company’s brand.
This means noticeable visual and interactive elements which are releated to the brand.
They often need to be memorable so that the brand sticks in the visitor’s mind.

Application purposes

Enable tasks

Anything that might distract from completing a task should be removed, or de-emphasised.
This includes bright colours, strong animations, and other visually heavy elements.
Layout should allow a person to see as much of the content and interface as they need to for their task.
Often the interface is more flexible/hierarchically arranged, so that the focus of the task is surrounded by the tools available to the person.
Often the focus is on creation over consumption so the interface gets out of the way of the content/object in focus.
For speed of task completion, elements should be exactly where a person expects them to be. No guesswork or exploration necessary.
More generally the focus should be on clarity, so that people can understand something easily the first time, and every time after that. e.g. controls should be near what they affect.

Encourage repeated use

Expressive styles bother us the more we’re exposed to them, so applications designed for repeated use (e.g. an email client) will often be visually plain.
This extends to animations and other interactions. If an animation takes too long to play, people will get more and more frustrated over time.
We should be able to get better over time, especially if the interface is complicated and takes some time to learn.