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

August 26

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.
Comments (View)
July 24

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.
Comments (View)
May 13

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.
Comments (View)
April 15

Amazon bought together feature

Is awesome, and I can’t believe I haven’t seen this before. Rather, I’ve seen it, but haven’t noticed the functionality of it.

I always saw it as a way to upsell me to buy more books. It is that. But Amazon has also built some interaction in to this feature. You can click to deselect one of the books, and the page is AJAX’ed (I promise I won’t use that again), showing you the updated price for just two of the books. Neat!

Amazon bought together feature Is awesome, and I can’t believe I haven’t seen this before. Rather, I’ve seen it, but haven’t noticed the functionality of it. I always saw it as a way to upsell me to buy more books. It is that. But Amazon has also built some interaction in to this feature. You can click to deselect one of the books, and the page is AJAX’ed (I promise I won’t use that again), showing you the updated price for just two of the books. Neat!
Comments (View)
April 13

Redbox makes me think

And I don’t like it. Here is the checkout form on Redbox. The expiration field shows the names of months. But a credit card doesn’t say April, it says 04/10.

Redbox, you have failed to think about the context of the situation. The month on a credit card is in numerals, and so should your month field on your web site. Hasn’t someone on their web team ever used a credit card before? This is like super easy to implement and extremely obvious, I’m shocked it slipped through.

Redbox makes me think And I don’t like it. Here is the checkout form on Redbox. The expiration field shows the names of months. But a credit card doesn’t say April, it says 04/10. Redbox, you have failed to think about the context of the situation. The month on a credit card is in numerals, and so should your month field on your web site. Hasn’t someone on their web team ever used a credit card before? This is like super easy to implement and extremely obvious, I’m shocked it slipped through.
Comments (View)
April 6

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.)
Comments (View)
April 2

97 Bottles error message fail

Disappointing error messages on the 97 Bottles register form.

Two reasons why it fails: 1) They’re totally disconnected from the form I was using. 2) They’re the same type style as the description text.

Can I get a “color:red” at least? It took even me a few tries to figure out what was going on. And I consider myself a form-filler-extrodinare. I fill out forms in my sleep. I’m not kidding. It happened once.

But seriously, I’m being hard on them. 97Bottles is a great site, I just wish I could log in and enjoy it. It’s frustrating.

97 Bottles error message fail Disappointing error messages on the 97 Bottles register form. Two reasons why it fails: 1) They’re totally disconnected from the form I was using. 2) They’re the same type style as the description text. Can I get a “color:red” at least? It took even me a few tries to figure out what was going on. And I consider myself a form-filler-extrodinare. I fill out forms in my sleep. I’m not kidding. It happened once. But seriously, I’m being hard on them. 97Bottles is a great site, I just wish I could log in and enjoy it. It’s frustrating.
Comments (View)
March 11

Required marker within input

I like this placement of the required field marker on the KISSmetrics blog. It’s clever, displayed with a CSS background image on the input element.

A word of warning though, there should be some way to distinguishing this field as required even when styles are disabled.

Unfortunately this form doesn’t provide any fallback if you don’t have styles enabled. A simple span with “Required” with a display: none next to the input would suffice. But regardless of its shortcomings, I love this little UI scrap!

Required marker within input I like this placement of the required field marker on the KISSmetrics blog. It’s clever, displayed with a CSS background image on the input element. A word of warning though, there should be some way to distinguishing this field as required even when styles are disabled. Unfortunately this form doesn’t provide any fallback if you don’t have styles enabled. A simple span with “Required” with a display: none next to the input would suffice. But regardless of its shortcomings, I love this little UI scrap!
Comments (View)
February 3

Save for nothing

I’m on the Save for Web dialog in Photoshop. I’m trying to resize an image. And as I tab through the form, changing the width and/or height, I’m face to face with Mr. Annoyance.

I can not tab to the apply button.

This is a small detail, but it holds up my workflow by a few millaseconds per file. Multiply that by thousands of Save for Web dialog’s, and that’s a lot of wasted time to take my hands off the keyboard and mouse over the apply button.

It’s small things like this that could make Photoshop a joy to work with. Instead it inspires me to waste more time blogging about my frustrations. I blame you, Adobe, for my late nights in the office. (I’m kidding, naturally.)

That is all. More happy posts to come. I promise.

Save for nothing I’m on the Save for Web dialog in Photoshop. I’m trying to resize an image. And as I tab through the form, changing the width and/or height, I’m face to face with Mr. Annoyance. I can not tab to the apply button. This is a small detail, but it holds up my workflow by a few millaseconds per file. Multiply that by thousands of Save for Web dialog’s, and that’s a lot of wasted time to take my hands off the keyboard and mouse over the apply button. It’s small things like this that could make Photoshop a joy to work with. Instead it inspires me to waste more time blogging about my frustrations. I blame you, Adobe, for my late nights in the office. (I’m kidding, naturally.) That is all. More happy posts to come. I promise.
Comments (View)
January 22

Getty Images registration form makes me smile

First, the inline, on-demand validation of fields on a registration form is a hot stuff. Blastfax kudos all around.

But what really got me, is the smiley faces upon validation. Most sites I’ve seen will show a tick mark, or green check of some kind. I like that Getty Images has used a smiley face. It does make me smile. Corny as that is. I don’t care.

Getty Images registration form makes me smile First, the inline, on-demand validation of fields on a registration form is a hot stuff. Blastfax kudos all around. But what really got me, is the smiley faces upon validation. Most sites I’ve seen will show a tick mark, or green check of some kind. I like that Getty Images has used a smiley face. It does make me smile. Corny as that is. I don’t care.
Comments (View)