Archive for the 'Showing Progress' Category

Process Funnel Bar Design

Websites should keep users informed while they are completing a task, like purchasing something. Showing users in which step they are let them decide whether it’s worth completing the process now or later. You might think, "I don’t wanna let them go". Fine, but this is how customer-center design works, in the long term this is going to be good for the website.


"A progress bar should be easy to read, number of steps should be minimized…"

A well designed progress bar is an excellent way of telling users where they are and what to expect. A progress bar should be easy to read, number of steps should be minimized and it has to be in a prominent and highly visible position.

Lufthansa Website

 

Lufthansa, the airline, uses user-friendly design for its progress bar. Right number of steps, clear wording and visibility. Although the Lufthansa website is not perfect, from the usability point of view, this piece of it it’s well design.

 

Lufthansa Progress Bar

 

Click here to see other articles about the Lufthansa website

 

Popularity: 16% [?]

Using Animation To Show Progress

Keeping users waiting for a process to finish is not an easy task on the web. One usability rule is to keep users informed, to give feedback when the system is doing something.


"The best way to display progress is with an animation…"

Users click on some action button, for example to find flights, and the website starts looking for flights. During this process the website should inform users that something is happening behind the scenes.

The best way to display progress is with an animation. Typical examples are the online flight booking websites, they usually connect to airline databases, a process that takes long, so users must wait until they get the offers. Here some examples on how to demonstrate progress, all are animations.

 

Lufthansa

 

Lan Chile Website

 

Digg

 

Orbitz

 

Popularity: 14% [?]