October 27, 2015

Designing for Touchscreens

Why there are fingerprints all over the TV Set

A story I hear frequently from parents of young children goes something like this:

“We were watching TV the other day, and Jimmy went right over to it and started touching the screen. He thought he could pause it or change the channel or something!”

Stories like this underscore how widespread the use of touchscreen devices are today, and how much more ubiquitous they will be as a whole generation of children like Jimmy grow up expecting any device with a screen to be one they can touch and interact with. But designing for a touchscreen presents it’s own set of problems: What content do I include? How much content do I need? How do I make it intuitive and easy to use?

At Freshwater, we design and program touchscreen interfaces on a regular basis, and have developed a few simple rules to help you get started.

Rule 1: Make it Easy to Navigate

If a viewer has to spend more than a couple seconds figuring out where they are and how to get to somewhere else on the touchscreen, you’ve already lost them. For this reason, it is important to design your touchscreen interface to be as clear and easy to navigate as possible.

In order to avoid confusion, keep your navigation in a consistent location; don’t put a menu at the top of the screen on one page, but on the lefthand side on another. Always indicate where you are in program by highlighting the current page on the menu or by writing the page name as a header to the content – preferably both. Finally, always provide ways to either go back one step or all the way to the ‘home’ page.

Rule 2: The Widest Common Denominator

One way that designing for a touchscreen interface differs from designing for the web is the need to keep in mind the size and shape of fingers. A person using a mouse can precisely select from a set of closely packed links in a small font size. The same person, using their finger on a touchscreen, may find themselves on the wrong page, as the touchscreen tries to interpret multiple possible ‘hit locations’. This is a particularly common problem among people with larger hands and fingers, which is why I call this the ‘Big Fat Sausage Fingers’ rule.

To keep everyone going to the page they want to look at, try to keep all menu items, links, and buttons widely separated. It can also help to provide a clear visual border defining the ‘hit’ locations.

Rule 3: Less is More

Another way most touchscreen kiosks differ from websites is in their location. Most kiosks are viewed while standing, often in a public space where while someone else is waiting for a turn. Therefore it is important not to cram too much information into your program and to keep everything simple and responsive:

Avoid having more than a paragraph or two of text on a given page. Keep your navigation to only one or two levels deep, and animated transitions between pages shouldn’t last more than a second or two.

When to Break the Rules

Each project and installation is different, and certain situations might require you to ‘break’ one or more of these rules. If your touchscreen will be located in a private booth with a chair, for example, it’s probably OK to have more than a couple of paragraphs of text on a page, or if the purpose of your touchscreen is to tell a mystery story you might want to ‘hide’ some of your buttons so that only the most diligent detectives can find all the ‘clues’. Whatever your purpose, these rules are a great place to start.

If you’d like us to break the rules for you, connect with Freshwater on Facebook, Twitter, or LinkedIn.

Joshua Leckrone, Sr. Motion Graphics Designer­

Back To Top