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 "button"

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!

Hotwire price watch

This button on the Hotwire flight page is by far the most prominent thing on the page. Apparently, if I give them my email address they’ll update me when the prices drop. Pretty handy, although I haven’t tried it.

I must say, I didn’t know such a feature existed, but the prominence of this button made it eminently clear. Well done.

Hotwire price watch
This button on the Hotwire flight page is by far the most prominent thing on the page. Apparently, if I give them my email address they’ll update me when the prices drop. Pretty handy, although I haven’t tried it.
I must say, I didn’t know such a feature existed, but the prominence of this button made it eminently clear. Well done.

Behance’s low barrier to appreciation

Behance has a nice way to gather positive feedback. I might do this for my portfolio. If you click it, it reads “Thank you!”.

So easy to participate! The number of people who appreciate it is hidden a bit, in a drop-down at the top of the page named “project info.” I like that it’s accessible, but not painfully visible like a digg counter or something of the like.

Behance’s low barrier to appreciation
Behance has a nice way to gather positive feedback. I might do this for my portfolio. If you click it, it reads “Thank you!”.
So easy to participate! The number of people who appreciate it is hidden a bit, in a drop-down at the top of the page named “project info.” I like that it’s accessible, but not painfully visible like a digg counter or something of the like.

Tumblr submit breaks convention

Conventions are important to follow, but are worth breaking in certain situations. Namely, when it won’t require any learning curve. This submit button on the left breaks a convention that I didn’t even know I followed.

Tumblr allows me to post with a bookmarklet. In this pop-up posting process, adding a link to this entry with the wysywg editor requires me to enter the address, title and/or target from another pop-up window. All good so far. But the “Insert” button is on the left, and every time I go to click it, my mouse wanders to the bottom right corner first.

In this example, it’s not especially taxing. But sometimes a larger pop-up appears, making the mousing around rather annoying.

Improvements to this could be to:

  1. Downplay the “Cancel” button, so it doesn’t look like a button. Instead just a link that says “Cancel.”
  2. Place the cancel button next to the submit button. Then I’d be less tempted to mouse to the bottom right corner, the typical finishing point for reading a page.
  3. Flip the positioning, align the submit to the right side, cancel to the left.

These ideas are conveyed with excellent clarity and plentiful examples in Luke Wroblewski’s book Web Form Design: Filling in the Blanks. Or check out the Flickr set for all those examples from the book.

Tumblr submit breaks convention
Conventions are important to follow, but are worth breaking in certain situations. Namely, when it won’t require any learning curve. This submit button on the left breaks a convention that I didn’t even know I followed.
Tumblr allows me to post with a bookmarklet. In this pop-up posting process, adding a link to this entry with the wysywg editor requires me to enter the address, title and/or target from another pop-up window. All good so far. But the “Insert” button is on the left, and every time I go to click it, my mouse wanders to the bottom right corner first.
In this example, it’s not especially taxing. But sometimes a larger pop-up appears, making the mousing around rather annoying.
Improvements to this could be to:
Downplay the “Cancel” button, so it doesn’t look like a button. Instead just a link that says “Cancel.”
Place the cancel button next to the submit button. Then I’d be less tempted to mouse to the bottom right corner, the typical finishing point for reading a page.
Flip the positioning, align the submit to the right side, cancel to the left.
These ideas are conveyed with excellent clarity and plentiful examples in Luke Wroblewski’s book Web Form Design: Filling in the Blanks. Or check out the Flickr set for all those examples from the book.

Facebook hides submit button until it’s needed

Which is a great way to reduce clutter (in an already cluttered interface). Removing unneeded elements reduces visual noise. Progressive disclosure, I believe, is what it’s called. (Though I might be thinking of something else.)

Facebook hides submit button until it’s needed
Which is a great way to reduce clutter (in an already cluttered interface). Removing unneeded elements reduces visual noise. Progressive disclosure, I believe, is what it’s called. (Though I might be thinking of something else.)