About UI Scraps

UI Scraps is a collection of good, bad and noteworthy user interface designs found by Jason Robb

Subscribe & share

RSS feed

Bookmark and Share

Top tags

Send your suggestions, questions or UI scraps to me, I’d love to hear from you.

Thanks for visiting!

Posts tagged "checkout"

Show month numbers & names

I’ve complained about this in the past, so here’s a good example of how to do a credit card expiration date month drop down (what a mouth full). Show month names and numerals.

Why not just the month name? Because it’s in number format on our credit cards. It’s the small things, people. It only saved me a split second of time, but those moments add up quick!

Show month numbers & names
I’ve complained about this in the past, so here’s a good example of how to do a credit card expiration date month drop down (what a mouth full). Show month names and numerals.
Why not just the month name? Because it’s in number format on our credit cards. It’s the small things, people. It only saved me a split second of time, but those moments add up quick!

jetBlue seat selector & leg room

I love jetBlue. I came across this gem of a UI design while buying some tickets for an upcoming conference I’m speaking at in Pittsburgh, PA (Web Design Day).

A few noteworthy observations about this interface.

  1. Row 12, the one with more leg room, looks like it! How nice!
  2. Circles and squares = open and taken seats.
  3. Green and blue = open and taken seats.

Why not green and red and all squares for instance? Because red should only be used for errors, or immediate calls to attention of the user. Using the gestalt principles of shape and color and employing them simultaneously is a great way to show which seats are taken or available. It requires very little thinking, and you can “get it” by just glancing at it.

The only possible improvement I can think of, could be to trying to color the taken seats in a faded blue or grayish blue. Since blue is typically a “clickable” color online, I’d avoid using a bright blue in this context. I’m nit picking. I love this UI.

The site is designed and maintained by the folks at HUGE inc. Nice work, you!

jetBlue seat selector & leg room
I love jetBlue. I came across this gem of a UI design while buying some tickets for an upcoming conference I’m speaking at in Pittsburgh, PA (Web Design Day).
A few noteworthy observations about this interface.
Row 12, the one with more leg room, looks like it! How nice!
Circles and squares = open and taken seats.
Green and blue = open and taken seats.
Why not green and red and all squares for instance? Because red should only be used for errors, or immediate calls to attention of the user. Using the gestalt principles of shape and color and employing them simultaneously is a great way to show which seats are taken or available. It requires very little thinking, and you can “get it” by just glancing at it.
The only possible improvement I can think of, could be to trying to color the taken seats in a faded blue or grayish blue. Since blue is typically a “clickable” color online, I’d avoid using a bright blue in this context. I’m nit picking. I love this UI.
The site is designed and maintained by the folks at HUGE inc. Nice work, you!

Timbuk2 bag builder breadcrumb & navgation

I’m in the market for a new laptop bag. On this Timbuk2 build your own bag page I found a very well done bit of UI.

It’s a breadcrumb, checkout process overview, a “you are here” marker, and navigation. The danger with combining all of 3 of these functions in one element is getting the link states right. Unfortunately Timbuk2 doesn’t get it quite right, albiet they’re very close, and I was pleasantly surprised with the functionality and informative nature of the design.

The only problem I noticed was the hover state still shows a hand, even if it’s not possible to click it and advance. This is the case specifically on the “Choose a bag” step. The other steps allow forward clicks to expedite the process.

Not sure I’ll get a Timbuk2 bag, but there a few compelling UI elements throughout their site that will surely bring me back for a second or third look before I decide.

Timbuk2 bag builder breadcrumb & navgation
I’m in the market for a new laptop bag. On this Timbuk2 build your own bag page I found a very well done bit of UI.
It’s a breadcrumb, checkout process overview, a “you are here” marker, and navigation. The danger with combining all of 3 of these functions in one element is getting the link states right. Unfortunately Timbuk2 doesn’t get it quite right, albiet they’re very close, and I was pleasantly surprised with the functionality and informative nature of the design.
The only problem I noticed was the hover state still shows a hand, even if it’s not possible to click it and advance. This is the case specifically on the “Choose a bag” step. The other steps allow forward clicks to expedite the process.
Not sure I’ll get a Timbuk2 bag, but there a few compelling UI elements throughout their site that will surely bring me back for a second or third look before I decide.

My Fonts prompts me to checkout

Using the new My Fonts web site. Loving it. I added Museo Sans 900 to my cart and was prompted with a lightbox: “return to browsing, or continue to my cart” — this worked great for me.

I did want to go to my cart, and I’m glad that they made it that much easier for me to do so. Instead of hunting for the “checkout” button, they gave me an opportunity to go there right away.

I did end up buying Museo Sans 900.

My Fonts prompts me to checkout
Using the new My Fonts web site. Loving it. I added Museo Sans 900 to my cart and was prompted with a lightbox: “return to browsing, or continue to my cart” — this worked great for me.
I did want to go to my cart, and I’m glad that they made it that much easier for me to do so. Instead of hunting for the “checkout” button, they gave me an opportunity to go there right away.
I did end up buying Museo Sans 900.