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!

Postbox address avatars

How nice, avatars! As you type in the To field, the photo of your contact is next to their email address.

Here’s how this works, I think: I’ve signed in to Facebook via Postbox, so they grab the profile photo from there. In the case that your fiancĂ© isn’t on Facebook ;) they grab the photo from your address book. Very nice.

I’ve been using Postbox for the past few months and there are plenty of juicy UI tidbits throughout. Definitely worth taking a look!

Postbox address avatars
How nice, avatars! As you type in the To field, the photo of your contact is next to their email address.
Here’s how this works, I think: I’ve signed in to Facebook via Postbox, so they grab the profile photo from there. In the case that your fiancé isn’t on Facebook ;) they grab the photo from your address book. Very nice.
I’ve been using Postbox for the past few months and there are plenty of juicy UI tidbits throughout. Definitely worth taking a look!

Get Satisfaction disclaimer

Jason Fried of 37signals brought up an interesting point about Get Satisfaction. I won’t go into 37signals’ argument here. But the gist of it is that Get Satisfaction made an unreasonable suggestion that a company wasn’t committed to supporting their customers if they hadn’t endorsed the use of Get Satisfaction, yet.

It looks like Get Satisfaction is making strides in the right direction.

The note at the top of the page clearly disclaims that New Street Software monitors but isn’t active in the Get Satisfaction community. It wasn’t always this clear. Nice.

Get Satisfaction disclaimer
Jason Fried of 37signals brought up an interesting point about Get Satisfaction. I won’t go into 37signals’ argument here. But the gist of it is that Get Satisfaction made an unreasonable suggestion that a company wasn’t committed to supporting their customers if they hadn’t endorsed the use of Get Satisfaction, yet.
It looks like Get Satisfaction is making strides in the right direction.
The note at the top of the page clearly disclaims that New Street Software monitors but isn’t active in the Get Satisfaction community. It wasn’t always this clear. Nice.

YouTube favorite button

I didn’t even realized this favorite button was missing. I don’t know how I lived before this was added!

After watching a hilarious clip, I frequently want to favorite it for future laughs. So I would click through to the next page, wait for it to load, favorite it, and close the tab.

Now I can just click the favorite button from this embedded window. Awesome. What a huge lowering of a barrier. Thank you YouTube!

YouTube favorite button
I didn’t even realized this favorite button was missing. I don’t know how I lived before this was added!
After watching a hilarious clip, I frequently want to favorite it for future laughs. So I would click through to the next page, wait for it to load, favorite it, and close the tab.
Now I can just click the favorite button from this embedded window. Awesome. What a huge lowering of a barrier. Thank you YouTube!

Mozilla Creative Collective signup form prefixes

Great idea for form field prefixes on Mozilla Creative Collective! I’ve seen this done before, by providing the “http://” inside the form field. But this is another step in a better direction. A job well done by Happy Cog.

Mozilla Creative Collective signup form prefixes
Great idea for form field prefixes on Mozilla Creative Collective! I’ve seen this done before, by providing the “http://” inside the form field. But this is another step in a better direction. A job well done by Happy Cog.

Run Keeper data visualization

It’s beautiful. All my run data is synced with their web service. I can view my speed along side the elevation, and see my location at the same time. Great mashup!

Run Keeper uses my iPhone to track my runs, Google Maps to plot my journey on a map, and Twitter to publish my run data to the interwebs. It makes running that much more awesome. If you’re in to that sort of thing.

Run Keeper data visualization
It’s beautiful. All my run data is synced with their web service. I can view my speed along side the elevation, and see my location at the same time. Great mashup!
Run Keeper uses my iPhone to track my runs, Google Maps to plot my journey on a map, and Twitter to publish my run data to the interwebs. It makes running that much more awesome. If you’re in to that sort of thing.

Touchlytics: iPhone app UI

An analytics app is essentially text, numbers, and graphs. While I’m not crazy about the interface design, I didn’t want to moan about it without making any suggestions.

On the right is the original Touchlytics app. On the left, I’ve added more whitespace and made the color pallete more iPhone-like.

I also emailed the developer and offerred him my suggestions regarding the UI and the UX at large.

I find that people are generally happy to hear feedback on something they’ve spent time building. So if you experience a product or service that is lacking in some way, say something! Chances are good they’ll be glad to hear it.

Touchlytics: iPhone app UI
An analytics app is essentially text, numbers, and graphs. While I’m not crazy about the interface design, I didn’t want to moan about it without making any suggestions.
On the right is the original Touchlytics app. On the left, I’ve added more whitespace and made the color pallete more iPhone-like.
I also emailed the developer and offerred him my suggestions regarding the UI and the UX at large.
I find that people are generally happy to hear feedback on something they’ve spent time building. So if you experience a product or service that is lacking in some way, say something! Chances are good they’ll be glad to hear it.

Google Docs dialog box rename

This doesn’t make a lick of sense. This should be a “click to edit” editable region. Isn’t that the cool thing to do these days? The pop-up works, sure, but it’s not the most elegant solution.

Also, I’d like a pony and a golden toilet, while you’re at it Google Docs.

Google Docs dialog box rename
This doesn’t make a lick of sense. This should be a “click to edit” editable region. Isn’t that the cool thing to do these days? The pop-up works, sure, but it’s not the most elegant solution.
Also, I’d like a pony and a golden toilet, while you’re at it Google Docs.

Invoice Machine submit buttons

This a great set of buttons. I don’t have much more to say, they’re excellent. One is big, one is small. One is primary, the other secondary. Well done Invoice Machine.

Invoice Machine submit buttons
This a great set of buttons. I don’t have much more to say, they’re excellent. One is big, one is small. One is primary, the other secondary. Well done Invoice Machine.

My Fonts search results

My Fonts is easily my favorite site to buy fonts. Their new site is leaps and bounds beyond any other font site. In my opinion.

Their search results page is awesome. Forget about ever having to use pagination. The search results page loads more fonts as you near the end of the page. And they provide a link to that scrolled position. Handy!

I could go on and on about this site. Whoever is in charge of the UX is doing an awesome job.

My Fonts search results
My Fonts is easily my favorite site to buy fonts. Their new site is leaps and bounds beyond any other font site. In my opinion.
Their search results page is awesome. Forget about ever having to use pagination. The search results page loads more fonts as you near the end of the page. And they provide a link to that scrolled position. Handy!
I could go on and on about this site. Whoever is in charge of the UX is doing an awesome job.

Zappos annoying out of stock message

It’s so annoying. So very, very annoying. Here’s how it works:

Pick a shoe, and select a size on the page with a drop down box. If the shoe is out of stock, this pop-up message appears. The only way to change the size or color again is to click “close this window” every time you adjust the drop down.

This is ridiculous. It probably takes more work for them to check the stock, and use a javascript pop-up, than it would be to just show me on the page which shoes are in stock.

So not only am I told I can’t have these shoes, but I’m inconvenienced because I have this pop-up box in the way now. Ahhhh!

Zappos, you should be ashamed. You’re customer service is so awesome, yet your web site is as lackluster as a grey wall.

I’ll still buy all my shoes from you though.

Zappos annoying out of stock message
It’s so annoying. So very, very annoying. Here’s how it works:
Pick a shoe, and select a size on the page with a drop down box. If the shoe is out of stock, this pop-up message appears. The only way to change the size or color again is to click “close this window” every time you adjust the drop down.
This is ridiculous. It probably takes more work for them to check the stock, and use a javascript pop-up, than it would be to just show me on the page which shoes are in stock.
So not only am I told I can’t have these shoes, but I’m inconvenienced because I have this pop-up box in the way now. Ahhhh!
Zappos, you should be ashamed. You’re customer service is so awesome, yet your web site is as lackluster as a grey wall.
I’ll still buy all my shoes from you though.