The Science of Aesthetics by Keith Lang (video) is a talk Lang gave at UXAustralia in 2009. In it, he talks about how some shapes are naturally friendly looking, like the rounded rectangle, while other shapes are harsher and more unfriendly. Here’s a cool example of how a UI could take advantage of this by using an aggressive, spiky shape:
Interesting idea. People would definitely think twice before clicking a button that looks like it’s going to carve up fingertips.
37signals wrote this on Apr 05 2010 There are 26 comments.
Jeffrey Tang 05 Apr 10
Then again, could the spikiness be interpreted as friendly vampire sparkliness?
Peter J. Hart 05 Apr 10
Awesome.
Jagath 05 Apr 10
Great talk with good demonstrations. I loved the spiral and the squares examples very much.
On this spiky button issue, I think there is also the novelty factor. We are not used to seeing such a button, so we will pay attention to it. So, if someone overuses this shape (and creates many buttons in the UI using this shape), I would guess that the usability will suffer. The button will then no longer serve quite the same purpose.
nickd 05 Apr 10
I’d imagine that a “spiky” button would be even more intimidating on a touch interface.
beerzie 05 Apr 10
It’s ugly. It looks like an inept attempt at sparkliness. How about a bomb?
The Real Josh 05 Apr 10
where in the world can I find that button, ha. I want it.
Alex Shaffer 05 Apr 10
I like the concept but the design is ugly. We when design we use colors & symbols to accomplish the same thing. To prevent the user from making a mistake by we would design a “caution symbol” inspired button.
Keith 05 Apr 10
This is an interesting example, because the spikes actually serve to call attention to the destructive action, rather than the safe action.
I’d gather that in this particular case, you would probably see a lot of mis-clicks (and a lot of destroyed data) as users probably tend to quickly choose the most prominent option.
That being said there is merit to this meta-perception based approach.
Anonymous Coward 05 Apr 10
This is pretty off-topic, but I had this weird association: I was reminded of a contest by (I think) the Department of Energy to design a building-size sculpture that just looked “evil” or “bad” no matter who looked at it. A lot of those were spiky looking scary things too.
They were (are?) supposed to be used as a marker for radioactive waste sites in the Nevada desert or thereabouts. And since the waste would remain dangerous for hundreds of years in some cases, the idea was that this structure would scare off not just people who could read the written signage, but also – should civilization as we know it collapse/blow up in the meantime – the intelligent apes (or whoever) that might inhabit the world hundreds of years from now.
In any case, the point was the same: To intentionally make something that would be viscerally scary and ward people off. Admittedly the physical scale and time scale was slightly different compared to UI design, but still…
pim 05 Apr 10
Interesting, indeed. I think to get user’s attenion we wouldn’t have to change shape so much. Changing color from standard blue (standard in Mac OS) to red should be enough.
Berserk 05 Apr 10
Partially related: http://www.codinghorror.com/blog/2010/03/the-opposite-of-fitts-law.html
Michel 05 Apr 10
I’m wondering. What if you really do want to delete everything. Why would a button look so aggresive and spiky if you’re trying to perform a ‘succesful’ action… ?
Johan Strandell 05 Apr 10
The study that Anynomous Coward refers to is online here. There are images of the spiky designs there, as well.
Mark 05 Apr 10
Quite honestly, a spiked button on a UI looks more adolescent than anything else. Even if it did work, it comes off as a “you really don’t want to do this” action moreso than a cautionary one. Hence, if an action is really going to do me that much damage, why even build that capability in to the software?
I think the more elegant approach would be to design a caution icon as part of the one button which will illicit an action you might want to think twice about—like buying any program that comes with spiky buttons.
Eric Fleming 06 Apr 10
I wonder how long it will take for websites to start using this concept?
ex. Are you sure you want to delete this? [spiky yes]
token iPad reference: Also, when you touch on an iPad, it could vibrate a little to make you feel it. Witnessed something like this on the Scrabble game.
Nithin Bekal 06 Apr 10
Wouldn’t people would find it much easier to understand if some sort of warning image was used instead of changing the shape of the button. I don’t think making the delete option more prominent is such a good idea.
Pies 06 Apr 10
Or better yet, how about if we put icons at the left side of the dialog box to indicate importance of the content? Like, an information box that you can dismiss without reading would have an ‘i’ on a blue background, and a very important dialog would have a yellow exclamation mark on red background. Groundbreaking, ain’t it?
Eddy 06 Apr 10
This is a trip but there is an unmistakable visual association to this button and the Mormon Temple architecture located here in Boise . . . no kidding. Google “mormon temple boise”
Michael S 06 Apr 10
Ugly or not, I would pause before clicking that thing.
Dave Reynolds 06 Apr 10
I like that…as someone who frequently has a “doh” moment after deleting stuff this is an interesting idea. Unfortunately I’m a bit OCD about the symmetry and alignment of my UIs so I’m sure having mismatched buttons would drive me crazy.
kadavy 06 Apr 10
Wicked tattoo!
I mean. Button.
Qz 06 Apr 10
Seems like too much focus on the buttons and less on the main problem: Modal dialog windows are %@%ing annoying, and that’s the main reason why people just click any random button, because they just the goddamn thing to go away.
If you want people to stop and think about what the buttons do, stop interrupting their damn workflow. Place the confirmation ‘dialog’ in some kind of drop down header like you get when a browser tells you it’s blocking popups on some website etc. Then people can take the time to figure out what it’s asking, because it’s no longer an intrusive UX nightmare.
Qz 06 Apr 10
Alternatively, sticking do the idea of making the button look dangerous, why not just put a radioactive warning symbol next to the ‘delete everything’ button?
Originally I was thinking make it red and octagonal to emulate a stop sign, but there’s a problem of conflating stop with cancel, whereas the yellow/black radioactive sign doesn’t have that problem and is a pretty universally recognized sign that something is dangerous.
Marjan Venema 07 Apr 10
@pim changing colors might be enough for you, but won’t do a thing for the color blind…
pim 07 Apr 10
@Marjan Venema – you’re right, I didn’t think about it.
Mizanur Chowdhury 08 Apr 10
For the spikes for a button, I see the ‘concept’ on the author’s viewpoint, however, the application on to ‘buttons’ is rather not effective in my opinion. As I see it, there is now more emphasis on a button we would like our users to avoid accidentally clicking.
Interesting post none-the-less.
This discussion is closed.