In this tutorial we will cover some of the things you need to seriously consider when designing button for a mobile app or website.These buttons are naturally going to be the core of any mobile application yet many designers over look the obvious ways in which these buttons must differ from our more traditional navigational elements.
With the increasing presence of mobile devices on the web and with more and more people accessing the web on more and more mobile devices every day this has gone from being an optional exercise for a web developer to a necessity.
Due to the restricted space on a mobiles screen we are faced with major challenges in how do we redesign our site to be more mobile friendly. To further complicate things every week, even daily new screen sizes are added particularly in android. So how do we deal with them. Lets start in this series of tutorials by breaking down and looking at the common elements, the things that regardless of screen size we need to look at as a designer to make the switch to mobile.
Mobile Development: Designing Buttons for Mobile Applications
Lets begin by breaking down the different considerations we need to take into account when designing buttons for our mobile apps.
Mobile App Button Sizes
Our users do not enjoy sharpening their fingers in a Pencil Sharpener. Seriously how many times have you used a mobile app that you had trouble clicking on their buttons because they are simply too small. The majority of mobile users do not use a pen to navigate. They use their fingers, digits attach to their hand that are not very pointy and are not as precise as a mouse.
In traditional navigation systems used on web site we can get away with small click-able links and buttons. However with mobile design this is a show stopper. So how big should our buttons be?
A good guide is a minimum of 44px high and 44px wide. Anything under this and users start to have more and more trouble as they get smaller. However this is an optimal size. Make sure when you look at the button though it appears Bold and in control.
However make sure when designing for iPhone that you have a back up for pixel ratio:2. You need to have a second version of your button that is a minimum of 88px instead of 44px. This is for use with the iPhone 4 retina display.
At the same time we don’t really want to get too much above this figure either. As we are all aware, mobile screens do not have much in the way of screen real estate. So if you button is the width of the screen try to keep the height of the button as close to that 44px to save on that real estate.
Hover States
Yes your users finger may hover over the button thinking about it but does their mobile know that? No it doesn’t.
Do not use hover states in your CSS files for mobile development. Not only does the phone not know if the user is hovering a button but in some cases using a hover state can cause the button to change to the hover state on a click and remain there when the page changes. This is just one example of a bug that can occur from using hover (or in javascript onmouseover() events ). Mobile operating systems do not have a use for these states so in some cases may not design for them at all. Avoid using them at all costs.
But what if you have a drop down menu in your traditional website that you wish to bring over? What can you do to bring this element across? Have the menu drop from the button on the users first click of the button.
Is an Image Necessary?
We all know one of the major concerns users of our mobile products have is bandwidth. We also know that the easiest way to reduce unnecessary bandwidth wastage is to not use an image we don’t need to. So why are all our buttons images?
Andriod, iPhone and Nokia OS’s all have brilliant support for CSS3. And most of the images used in button design are things like rounded corners and gradients. So why are we wasting this bandwidth? If it can be done is CSS3, Do it in CSS3!!
Yes there are phones out there that don’t support CSS3 but these are windows OS phones. Their browsers are based on IE6 which being IE naturally doesn’t support anything and holds the whole show up. But the great part about this is the only thing IE has ever done right is the use of conditional statements, IE’s way of saying we know we are a little on the slow side can we have that in pictures please. So use Conditional statements for these phones and handle their buttons only with images. We know this may be a pain having to treat them all special and all but it comes with the territory.
This doesn’t just go for buttons, this goes for everything in mobile design. If it can be done with CSS do it with CSS. But make sure you conduct your cross-browser testing, as with any other web design.
Typography
As with anything else in design, typography is vital to getting your message across. Due to our small screen sizes buttons are likely to make up a lot of the majority of our screens. Keep everything simple and too the point. For the most part these are buttons before our user gets to the actual content. Make the heading clear and concise.
Anything else on your button should follow a strict typography hierarchy. Large easily read heading followed by a small but still easily read sample for example. Buttons on a web page are far less likely to contain these sorts of details. Treat buttons on a web app a bit more like you would within a div on a web page, only far more concise than you would on your pc version.