Change of address

Hi!

We've changed the blog to:

http://designdevelopmentusability.wordpress.com/

See you there! ;)

What makes a button a button?

Button design has evolved over time, from the dull beveled grey Windows 95 Start button to the shiny glass Facebook share button. When buttons started appearing on the web and computing in general, designers and developers were emulating physical buttons or 'push buttons'. The definition of a button according to the oxforddictionaries.com is "a small device on a piece of electrical or electronic equipment which is pressed to operate it". The key to this definition is that it reads "pressed to operate". This is what was emulated because, as users we could identify with pushing a button to start a process or turn something on.














Example 1: Over design?
Buttons are lost in this design.







Example2: Flat, styleless buttons
Is the magnifying glass an image or a button to start a process?

It seems some designers are challenging or perhaps ignoring button conventions. Some "buttons" lack the properties of a button. The call to action can seem diluted and/or the button is camouflaged within the overall design. It seems that 'push to operate' intuition is replaced with "What do I do next?" or "Where do I click?". The question I am asking myself and you is, have users learnt to look for new types or styles of buttons or are buttons changing because of design trends?

"Faced with the prospect of using a convention, there's a great temptation for designers to reinvent the wheel instead, largely because they feel (not incorrectly) that they've been hired to do something new and different, and not the same old thing." - Krug, 2006

Design and usability conventions shouldn't really be challenged unless you are sure that you aren't compromising the user's experience. Don't forget that user experience can impact on your reputation as well as conversion rates, to name but a few other areas that might be damaged as well as usability.

A button only functions as button if the user identifies its affordance. Users are often subconsciously looking for a collection of properties that make up a button.

"An affordance is a property, or multiple properties, of an object that provides some indication of how to interact with that object or with a feature on that object. A button has an affordance because of pushing because of its shape and the way it moves (or seemingly moves)." - Saffer, 2007

Example of properties associated with buttons:

• Style (e.g. drop shadows, emboss, letterpress)
• Colour
• Size
• Call to action (e.g Button label, title attribute, Symbols)
• Positioning on the page
• Hierarchy of information

However use of mobile phones for example, particularly with touch screens are changing the push feel of a buttons and evolving away from the traditional button that had to be pushed in. This change may have lead to the flat button style (see example 2) but if a button retains enough affordance the user will still recognise it.

What is important is the granular information, the affordance that the design of a button feeds the user. It shouldn't take the user time to work out where or what is a button on the page. The ease of use comes from recognising the next step in a process and understanding how to initiate it. Conventions help us to design buttons that are more likely for users to recognise.


References:

Don't make me think - Steve Krug, 2006

Designing for Interaction - Dan Saffer, 2007



What do you think about button usability and the points I have raised in this post? Let us know with your comments.

Click here to read this post

This is a post only to make a quick question:

Why people still think now a days that it is necessary to name links "click here"?

Shouldn't the "click" be expressed graphically?

Buttons, underlining, colours, some effects... there are so many ways and conventions to show that a word, an image, a button is a link (it is clickable) that I wonder why would it be necessary to use the wording "click here".

Very often the use of "click here" just increase the number of words without adding any meaning to the action of the link.

If you have, for example "click here to add a comment" the user will need to read the sentence, think and then click. While "add a comment" just needs the user to scan it and they will know what that link is about. It has been proved by research that users scan a page (they don't read a page) and then stop only in places they are interested in (if you are reading this post, for example, you scanned the blog, scanned the title and went deeper into this post because it interested you).

All of this sound quite obvious, but I've had some discussions recently where people supported the argument for "click here" that really surprised me. For example saying "users won't get it". Won't they?!

After reading the book "Don't Make Me Think!: A Common Sense Approach to Web Usability" by Steve Krug (click here to see what book I am talking about) every time I'm designing a button or another kind of link, I remember the point about call to action. The call to action on a button should be on what the user will receive by clicking that link.

As also mentioned by Jacob Nielsen in 2005:

"Explain what users will find at the other end of the link (...) Don't use "click here" or other non-descriptive link text."
(Nielsen, J. on Ten Top Design mistakes, 2005)

One good example showed by Krug was this image below:

The window which has the buttons "Don't save", "cancel", "save" require less thinking because they are self-explanatory. It is easier for the user to make a choice by just scanning that window. The other window requires the user to think.

Having said all that, I would like to hear from you:

Can you think about any situation where adding the wording "click here" is appropriate or necessary?

I love this book!

I'll start this blog talking about one of my favorite books in design: "Emotional Design - Why we love or hate everyday things", by Donald Norman which I read many years ago.

"Emotional Design - Why we love or hate everyday things" is about the relationship between usability and attractiveness. Norman argues that when the user is emotionally engaged with an object, when they find it attractive and when the object makes them happy, the object becomes easier to use.

Norman described the 3 ways in which the designed object can make you emotionally involved: Visceral, Behavioral and Reflective.

The Visceral design is about our primitive sensations and reactions. It is about immediate emotional impact. The physical features (look, feel and sound) of an object dominate.

Taking websites as examples: I may be able to apply this to the Apple website and fast foods delivery websites - which makes you desire the product they are selling in a visceral level.


Behavioral design is about the use of the object. The performance of the object is what matters.

Example: Online banking. The behavior and functionality of this product is the most important part of in bank websites.


The Reflective Design is about the meaning of the object and its use. It is about long-term customer experience, memories, personal satisfaction. This experience is related to culture, meaning, message and use of the product. It is when you look back and you are still emotionally engaged with the object, you still love the product.

How can we apply this theory in our everyday life as a web designer/ developer?

I apply these three aspects in my everyday life when I am designing a product, no matter if it is a real object or an online application.

In the concept phase I question what I want the user to get delight from. Is it important that they engage with the product in the first instance (visceral) and have the impulse to consume it? Or do I want them to feel engaged by the behaviour of the product, the usability, the functionality, etc? Is it all together? Or do I want them to get attached to the product after digesting it? The answer for these questions may help leading the process in which the project will go to achieve its audience more effectively and success of the product.

I not only recommend designers to read this book (if there is any designer who didn't yet) but also try to apply this thought process in the concept phase of the project.

If you are interested in this subject, come back here later as I'll post more about emotional design and delight.

References:
The book:
"Emotional Design: Why We Love (or Hate) Everyday Things". Norman, D. (2004)
A presentation by D. Norman about the same subject:
TED: Don Norman on 3 ways good design makes you happy