Project83 { Websites that Smile! }

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

Progress Bar Image

Abercrombie

Progress Bar Image

Amazon

Progress Bar Image

Apple

Progress Bar Image

Armani Exchange

Progress Bar Image

Bare Necessities

Progress Bar Image

Best Buy

Progress Bar Image

Blue Nile

Progress Bar Image

Buy.com

Progress Bar Image

Cafe Press

Progress Bar Image

Coach

Progress Bar Image

Crate & Barrel

Progress Bar Image

Crutchfield

Progress Bar Image

Disney

Progress Bar Image

Drugstore.com

Progress Bar Image

eCampus

Progress Bar Image

Endless

Progress Bar Image

Evogear

Progress Bar Image

Fossil

Progress Bar Image

Free People

Progress Bar Image

Fresh Direct

Progress Bar Image

Godiva

Progress Bar Image

Home Depot

Progress Bar Image

Ikea

Progress Bar Image

J. Crew

Progress Bar Image

Jet Blue

Progress Bar Image

Lego

Progress Bar Image

LL Bean

Progress Bar Image

Macy’s

Progress Bar Image

Oneida

Progress Bar Image

QVC

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

Posted in Design -

19 Comments

Design Gallery: eCommerce Progress Bars | E-commerce BlogApril 25th, 2008

[…] See more here: Design Gallery: eCommerce Progress Bars […]

yankee » Blog Archive » Design Gallery: eCommerce Progress BarsApril 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 BarsApril 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.comApril 30th, 2008

[…] Design Gallery: eCommerce Progress Bars | Project83 Blog […]

Best Of April 2008 | Best of the Month | Smashing MagazineApril 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. […]

AutomationApril 30th, 2008

real great. i like the second one

timbMay 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 UserMay 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 2008May 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 « MandarineMay 1st, 2008

[…] Design Gallery: eCommerce Progress Bars (tags: css e-commerce inspiration webdesign) […]

JeffreyMay 3rd, 2008

You did a great work!

Left-Right-Brain » Blog Archive » Barre de check out de sites e-commerceMay 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…). […]

RegisMay 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 designMay 5th, 2008

real great. i like the second one

Good idea.

Regards http://ooyes.net

links for 2008-05-06 at James A. ArconatiMay 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 BlogMay 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 AlephMay 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 companyMay 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.2008May 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


  • * Not published