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!

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.

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.

blog comments powered by Disqus