In the last section,
we looked at larger contextual issues.
Now, we're going to go from macro to micro and look at buttons.
These tiny components are one of the most important elements of user interface design.
So, let's start by asking ourselves,
what makes a button a button?
Well, pretty much anything can be a button.
A button is just a self-contained object that is interactive,
that you can click on or interact with,
but it only works as a button if the user knows that it's a button,
in other words if it's not just a shape.
There are various visual signifiers to let the user
know that a button is a button and not just a shape.
The benefit of these familiar forms
is that the user knows straight away that it's a button.
So, there's no ambiguity there and there's no time wasted.
So, familiar forms become fast forms immediately recognizable as part of the interface.
So, let's look at what visual traits
let us know that a button is a button and not just a shape.
Buttons come in many forms,
they might not have all of these traits but
they probably have at least one or two of them,
but all of these should be considered when you're
a user interface designer working with buttons.
If you're designing a button,
one of the first things to think about,
is what size it should be,
and this relates to how it's going to be used.
The button needs to be at a size where it's legible,
but it also needs to be at a size where either a finger
or a cursor can easily tap or click on it.
Buttons that are too big take up too much real estate on screen,
and ones that are too small are hard to activate.
You should also consider the shape of the button.
What's its function?
Does it need to have a label on it?
What screen is it going to exist on?
And what is it going to be touched by?
If it's a finger or a cursor,
that might mean a different shape,
some shapes are more economical and work better as a set,
while other shapes might be better containers
for a symbol or an icon that has to sit on them.
You could think about how color works with your set of buttons,
is it used as a signifier for a particular function of a button?
Or is it part of a larger overarching system?
A common strategy to let the user know that a button is a button is to give it
some dimension to make it feel like
a 3-dimensional object that has to be pressed or interacted with.
This is often done through a trompe l'oeil effect
using shadows and highlights to create fake dimensionality.
A key aspect in recognizing buttons in
the interface this is where they're placed within the screen,
there quite often contained within a certain area within a window or a bar or
a space that we recognize as being interactive or being specifically for navigation.
So, let's take some of these ideas and look at them in a little more detail.
Let's start out by looking at the size of
our buttons and its relationship to the cursor or the finger.
The scale of your button has a relationship to the thing interacting with it.
So you could think about a button on your phone having a relationship in size to the tip
of your finger and on a computer screen having a relationship to the size of the cursor.
The size of the button is also going to have a relationship to
the size of the screen and the resolution of the screen.
It could also depend on how many other elements you have in your interface.
The shape of your button could be informed by a few different considerations.
The shape of a could be informed by popular conventions.
A rectangle with rounded corners was prevalent at one time,
but now circular buttons are much more prevalent and this reflects
a change from prioritizing the computer screen to the handheld device.
The button shaped might have a relationship to the text that has
to sit on it or the icon or image that has to sit on it.
But it could also be indicative of a certain functionality.
Certain shapes mean certain things.
So, when we look at this set of symbols we know what
their functionality is without any texts labeling,
we also recognize the functionality of this set of
shapes as a set because we know what they mean.
The square here only means stop when it's sitting next to play,
pause, fast-forward, and rewind.
So, we're not just thinking about the individual shape
we're thinking about how those shapes work as part of a system.
Color can work in the same way it can be an individual signifier of
a certain activity but it can also work as part of a larger system.
So, for instance, just by coloring the button even though we don't change the label we
might be able to imply that one button is going to start something the green button,
whereas the red one might stop something.
One common convention from the earlier days of
interface design is to create a sense of dimensionality for buttons,
so that they look like they can be physically pressed.
This was a very common strategy because it helped people relate
between the digital world and the analogue world that they were familiar with.
This strategy feels a little outdated or a little
antiquated now and it's been superseded by instead of
dimensionality by using a drop shadow in order to create
a button that floats over the surface and draws attention to itself,
where we place our buttons on the screen can also be
a signifier that allows us to know that they're part of a navigation system.
For instance, when we put these buttons at the outside edges and on
their side they really don't feel like buttons anymore,
they also stop working as a set because there's so much distance between them.
So, almost anything can be a button if the user knows that it's a button.
It's your job as the user interface designer
to let the user know that that shape is a button.
You have to let them know that without them doing
any work it has to be immediate knowledge for the user.
Your design decisions are very important
because buttons are often used to create actions.
So, it's important that you labeled them
clearly because they're going to have some effect.
The last thing that you want is an ambiguous button,
because you could delete,
erase or destroy something quite important to somebody.
Since our analog and digital lives are increasingly intertwined,
your actions with the interface can often have actions in the real world.
So, there's quite a lot of responsibility for
the user interface designer to create buttons that are totally accurate.
Using precise and accurate language to label your buttons
can really help but sometimes words don't work,
and you're going to need to use images symbols or icons.
So, part of your job as the UI designer is to let the user know that
the button is a button but also to let them know exactly what that button does.
You could think of buttons as signposts,
you want to be able to find them easily,
you want to be able to get that information very quickly
but you also want to be able to ignore them when you don't need them.
Michael WorthingtonFaculty, Program in Graphic Design
