April 25th, 2008
Design Gallery: eCommerce Progress Bars
We do a great deal of eCommerce research, design and development for clients, and one design element I am always fascinated by are progress bars. A progress bar is one of those “best practices” for a checkout process, which shows the user how many steps are in the checkout process, and what step they are currently on.
I always find myself searching for good examples of progress bars, and decided to devote significant time to seeing what was out there. It was interesting to see the ones that got creative, the ones that were downright boring and even the merchants that lacked a progress bar at all. Here is a gallery of what I found, in alphabetical order by merchant. Just click on the thumbnail to see the full-size version.
1-800-Flowers
Abercrombie
Amazon
Apple
Armani Exchange
Bare Necessities
Best Buy
Blue Nile
Buy.com
Cafe Press
Coach
Crate & Barrel
Crutchfield
Disney
Drugstore.com
eCampus
Endless
Evogear
Fossil
Free People
Fresh Direct
Godiva
Home Depot
Ikea
J. Crew
Jet Blue
Lego
LL Bean
Macy’s
Oneida
QVC
Sears
Threadless
Victoria’s Secret
Wal-Mart
Williams Sonoma
Yankee Candle Company
Posted in Design -
RSS
19 Comments
Design Gallery: eCommerce Progress Bars | E-commerce Blog — April 25th, 2008
[…] See more here: Design Gallery: eCommerce Progress Bars […]
yankee » Blog Archive » Design Gallery: eCommerce Progress Bars — April 25th, 2008
[…] Klans wrote an interesting post today onHere’s a quick excerptQVC. Progress Bar Image. Sears. Progress Bar Image. Threadless. Progress Bar Image. Victoria’s Secret. Progress Bar Image. Wal-Mart. Progress Bar Image. Williams Sonoma. Progress Bar Image. Yankee Candle Company. Progress Bar Image. […]
Disney » Design Gallery: eCommerce Progress Bars — April 25th, 2008
[…] Orlando Florida from Your Orlando Guide wrote an interesting post today on Design Gallery: eCommerce Progress BarsHere’s a quick excerptDisney… […]
Best of April 2008 | inspiredology.com — April 30th, 2008
[…] Design Gallery: eCommerce Progress Bars | Project83 Blog […]
Best Of April 2008 | Best of the Month | Smashing Magazine — April 30th, 2008
[…] Design Gallery: eCommerce Progress BarsA progress bar is one of those ôbest practicesö for a checkout process, which shows the user how many steps are in the checkout process, and what step they are currently on. […]
Automation — April 30th, 2008
real great. i like the second one
timb — May 1st, 2008
the drugstore.com one is pretty neat because it looks like a progress bar (and thus i get the urge to see it completed), and is only 3 steps.
i think the worst are those whose steps are unlabeled numbers (like j. crew)
links for 2008-05-02 « Simply… A User — May 1st, 2008
[…] Project83 Blog - Commentary on web development, standards and small business » Design Gallery: eCom… (tags: webdesign e-commerce design gallery inspiration ecommerce cart **) […]
Kantongin » Best Of April 2008 — May 1st, 2008
[…] Design Gallery: eCommerce Progress BarsA progress bar is one of those ôbest practicesö for a checkout process, which shows the user how many steps are in the checkout process, and what step they are currently on. […]
links for 2008-05-02 « Mandarine — May 1st, 2008
[…] Design Gallery: eCommerce Progress Bars (tags: css e-commerce inspiration webdesign) […]
Jeffrey — May 3rd, 2008
You did a great work!
Left-Right-Brain » Blog Archive » Barre de check out de sites e-commerce — May 4th, 2008
[…] Un bon article qui présente les maquettes des barres de check out de dizaines de sites e-commerce référents et performants (1.800 flower, Amazon…). […]
Regis — May 5th, 2008
True, this is a simple thing to implement and it makes a world of difference for the user. By the way, the only site where you went past the first step is Victoria’s Secret… naughty naughty.

website design — May 5th, 2008
real great. i like the second one
Good idea.
Regards http://ooyes.net
links for 2008-05-06 at James A. Arconati — May 6th, 2008
[…] Project83 Blog - Commentary on web development, standards and small business » Design Gallery: eCom… We do a great deal of eCommerce research, design and development for clients, and one design element I am always fascinated by are progress bars. A progress bar is one of those “best practices” for a checkout process, which shows the user how many ste (tags: web-developer reference business internet marketing usability web-developer/ecommerce) […]
» Les articles incontournables de la semaine - Wizishop Blog — May 6th, 2008
[…] Design Gallery: eCommerce Progress Bars (barre de progression) Un article anglais (rassurez-vous ce sont les images qui nous intéressent […]
Best Of April 2008 - Glimpses of the Aleph — May 9th, 2008
[…] Design Gallery: eCommerce Progress BarsA progress bar is one of those ôbest practicesö for a checkout process, which shows the user how many steps are in the checkout process, and what step they are currently on. […]
web developement company — May 12th, 2008
I have gone through this site,A progress bar is one of those “best practices” for a checkout process, which shows the user how many sites (tags: web-developer reference business internet marketing usability web-developer/ecommerce) […]
Urls Sinistras » del.icio.us entre 03.05.2008 e 11.05.2008 — May 12th, 2008
[…] eCommerce Progress BarsWe do a great deal of eCommerce research, design and development for clients, and one design element I am always fascinated by are progress bars. […]
Reply to this Post