seanmonstar

At Least Pad the Default Button Styles

Some people like to style buttons to their own design, ensuring they look the same cross browser or enhance the site theme. Others are perfectly fine with a <button /> being rendered differently depending on browser and operating system combination. I understand both sides. Sometimes a styled button can look really nice. Other times, it just makes sense to leave it at default, because users are used to seeing buttons the way their OS always displays them.

As long as buttons have a consistent look across the site, I’d say both are just as usable. If you’re in the latter camp, leaving button styles to the browser, please, oh please, at least add some padding to the buttons. The default button styles leave the border right on top of the text, making it very annoying to read the text of the button.

Here’s a screenshot from Remember the Milk on the left, and my addition of padding on the right.

input[type="submit"], input[type="button"], button {
	padding: 3px 5px;
}

Just a few pixels, but the difference is huge. You can now read the text of each button with ease. Please, don’t forget the whitespace.

Saftey Cap: Slide to Delete

Yesterday Jeff Atwood wrote about Fitts’ law and the contrapositive in regards to big, bad eject buttons. The point of his piece was that you shouldn’t have buttons with irreversibledestructiveresults be right next to buttons with more frequent use.

I was actually more intrigued by a couple of the commentors when they mentioned a real life example of excellent “eject” button UI: these incredibly important buttons have a safety cap over them.

Put a safety cap over the button. You know, like in the movies :-) You cannot press the button, because there is a “cap” on top of it. You first have to “open the cap” before you can press the button below it. In case of software, the button would be not directly visible, you first have to press somewhere to make the button appear and then you can press it

—Mecki

Yea, that. There’s no way you can accidentally push that button. (Wouldn’t it be nice if that were true?)

I’ve seen this idea before, I’m sure, but wanted to throw it together anyways. When you click the delete button, or any other important, damaging button, the delete button disappears and a slider appears, requiring you to move the slider over to complete the delete action. This only took a few minutes, so I wouldn’t necessary use this code for production. Regardless, here’s a proof of concept: (if you’re in a reader, you should come through to the site to see this).