Since a couple of weeks I have a tablet computer, the Surface Pro 2*. It’s really weird holding a piece of hardware in your hand that is just as fast as your main desktop, but more on that later. There is one thing that I’ve started noticing more and more: a lot of websites could be more touch friendly. A post on developing for touch screens.
One thing I should note is that your visitors will be in a different mood. Attention span is lower when you’re relaxing on the couch. When using a touch screen everything should be fun, fast, and intuitive. Making an existing application “compatible” with touch screens is generally the wrong way to go.
Read on for the most common pitfalls.
Developing for touch screens: Accuracy
When you use a touch screen you will use it with your fingers. Your fingers are less accurate then a mouse. A person with long nails can’t even use the tip of their fingers, they have to use the bottom of their fingers instead: even less accurate. How can you counter this?
One question that you can ask yourself: is there a natural gesture available to replace this button? This isn’t without a risk, some people might not understand the gesture and fail to make the action.
If the button really has to stay, there are two things you can do to make it touch friendly.
- Increase the size of your controls. This will make them easier to spot, and easier to touch.
- Increase the spacing between controls. When two controls are close to each other, it’s easy to hit the wrong one by accident. If there is space in between, the accidental touch will cause no damage.
Cursor changes
Some applications will change the cursor to indicate that something is happening on the background, or to indicate that something can be dragged. The problem with this is that the cursor does not exist on a touch screen. All these visual cues are thus hidden for your touch screen user.
Solution: ensure this cue is always visible. Or, also possible, the cue might not be essential for the touch screen user. It could be an affordable loss.
Hover
Hovering, or moving the cursor over a particular area of the GUI, is something that is used in a lot of applications.
- Some drop down menu’s will open when you hover your mouse over the menu item.
- A lot of tool tips will show their content if you hover over them.
- Sometimes additional buttons appear when hovering over an item.
Obviously, none of the above works well without a cursor! This is where most touch screen related problems come from.
Sometimes replacing the hover with a tap-to-select action will work. This solves most tool tips, and will show the additional buttons next to an item.
But what if something already happens when tapping it? Usually clicking / tapping a menu item will take you to the most important page of that part of the application. There are two ways to solve that problem:
- Ensure that every link in the menu is reachable from the main page.
- Open the menu with the first click, and only go to that main page on the second click.
So look at your applications from a touch screen point of view. How does you awesome application work in that scenario? Maybe it’s time to start developing for touch screens 🙂
* Also see replacing my Medion Akoya E1210.
** The image is created by http://www.studiomx.eu.