2. Content
1. It’s all about ‘touch’ ............................................................................................................................................. 3
2. Understand the technology ............................................................................................................................4
3. Can’t touch this .................................................................................................................................................... 7
4. Make a good product .......................................................................................................................................10
4.1. Determining the purpose of your touch screen software .........................................................10
4.2. Basic design principles ............................................................................................................................. 14
5. Keep it simple ......................................................................................................................................................16
2
3. It’s all about ‘touch’
Many people think that touch screen devices are a recent phenomenon, but in fact they have been
around for quite some time. At first, touch screens were mainly used for corporate and business
applications, such as payment terminals at gas stations, cash register systems at supermarkets or
control panels in meeting rooms.
There was a relatively small penetration of the consumer market. The first touch screen devices that
were made available to consumers were –amongst others- bulky PDAs in the nineties and portable
GPS devices in the early 2000’s. We can all remember those first Palm PDAs with a monochrome
screen that were considered to be high-tech at the time. Seems like ages ago.
In 2007, Apple’s introduction of the iPhone caused a major boom in touch screen devices for the
consumer market. This not only manifested itself through an abundance of touch screen mobile
phones, but also encouraged other sectors to develop touch screen products.
Companies started embracing the touch screen market potential by building mobile websites,
specific applications for iPhone and Android and even releasing their own touch screen products.
For example, some car manufacturers switched from hardware controls to full touch screen for
built-in radio and navigation systems and tablet PCs have resurfaced after failing miserably a few
years previously.
There’s no doubt that ‘touch’ has become the latest hot trend in technology and everyone is jumping
on the wagon. Of course, the trend factor is not the only reason why touch screens are booming.
The technology offers some significant advantages. For many users it’s the most user friendly
and intuitive way of giving input to a device. Touch screens allow a lot of flexibility towards future
evolutions of the product, whereas with typical hardware user interfaces, the functions have to
be defined more precisely from the start. The user interface can also be constructed in layers, only
revealing functions when they are needed.
However, you can’t forget that developing software for a touch screen device has significant
implications towards user interface design.
3
4. Understand the technology
“Before you start designing the user
experience of your touch screen software,
you need to ask yourself:
What is the software meant for?”
When you start off developing a touch screen product, there are a few things to consider. First of all,
a touch screen is not just a touch screen. There is a wide range of touch screen technology available
and each one has an impact on the user interface. More than that, the choice of touch screen
technology is a key factor for the user interface design.
Out of the many technologies available, two types of touch screens emerge as most suitable for use
in both business and consumer products, capacitive and resistive. The names of both technologies
refer to the way touch input is captured and sent to the device’s controller.
Capacitive touch screen technology
As its name says, capacitive touch screens use capacitance to register input (capacitance is the
ability of a body to hold an electric charge). The human body –more specifically, the user’s skin- acts
as a conductor. A ‘touch’ disturbs an electrostatic field, which is used to determine the location of the
touch. That location is then sent to the controller for processing.
Schematic representation of capacitive touch screen technology 1
4
5. A capacitive touch screen has some significant advantages. This screen type offers an excellent
quality of interaction. Finger touches are registered very fluently. The software reacts
instantaneously to touch and movements are executed smoothly and accurately, which heightens
the user experience.
The use of skin as a conductor is also one of the main drawbacks of capacitive touch screens, e.g.
a user wearing gloves cannot operate it. Furthermore, capacitive touch screens are expensive to
produce and will inevitably increase the retail price or effective cost of the end product. This is why
capacitive touch screens are more common in high-end consumer products, such as smartphones.
Resistive touch screen technology
A resistive touch screen is composed of multiple layers. Two of those layers are separated by a
narrow gap. When the screen is pressed, those two layers make contact, which causes a change in
electrical current. This change is registered as a touch and sent to the controller.
Schematic representation of resistive touch screen technology 2
One of the main advantages of resistive touch screen technology is the possibility to use an object,
such as a stylus or pen, to touch the screen. Users can more easily manipulate small objects in the
user interface by using the narrow tip of a stylus. Since the screen uses pressure to register a touch,
the user can perceive this as a form of tactile feedback, like you get when pressing an actual button
on the mouse or a keyboard key.
5
6. Compared to capacitive touch screens, resistive touch screens are cheaper to produce and -thus-
the obvious choice for budget-friendly products, such as portable GPS devices. However, the touch
interaction on a resistive touch screen is a lot less fluent. Because the user has to press down
on the screen, they perceive the movements to be less smooth or accurate. Also, implementing
multi-touch gestures requires more advanced technologies, which are more expensive.
Note: Surely, you have noticed that the technical description above is a high-level overview of
capacitive and resistive touchscreen technology and is by no means exhaustive.
Hardware
Not only the type of screen that you are using is important for determining your user interface, but
the rest of the hardware is equally decisive. Consider the following hardware options:
• A device with a full touch screen and an absolute minimum of hardware keys (e.g. Apple’s iPad).
This means that all the interaction with the device and input have to be accomplished using the
touch screen. Evidently, the user interface must be adapted to that.
• A device with a touch screen, combined with hardware buttons (e.g. Saab’s built-in radio and
navigation system). The user interface has to be clear on which tasks can be performed using
the device’s touch screen and which task require the hardware buttons.
• A device with a touch screen, combined with a fully functional keyboard (e.g. most ATM’s).
This combination is probably the most intricate one, as navigation and interaction has to be
supported by both the touch screen and the keyboard.
It is clear that, whatever choice you make concerning touch screen technology and hardware, the
user interface of the device’s software is affected. You need to find the proper way of navigating,
providing feedback, inputting text, making selections, etc
6
7. Can’t touch this 3
Designing a touch screen device, whether it is for consumer or business use, is never ‘a quick job’.
When a touch screen product fails, the failure is often linked to some commonly made mistakes.
These are often a mixture of shortcomings in the design of the hardware and the user interface
design.
What follows are some key mistakes when developing touch screen products:
Simply porting desktop software
Desktop software – or any kind of non-touch screen software for that matter- cannot be ported to
a touch screen device without analyzing the impact on the user interface and optimizing the user
interface for touch interaction. For example, a complex software package such as SAP cannot be
transferred to a touch screen without some serious re-work of the program’s user interface. You can-
not expect to run desktop software on a touch screen and have it work flawlessly.
Inconsistency between hardware and software interaction
When combining a touch screen with full keyboard support, the user interface does not always
support a fluent interaction between the two. Consider the following example for a touch screen
product: the user selects a menu item by touching a control on-screen and then has to navigate
the sub-items in that menu by using the arrow keys on the keyboard. This inconsistent behavior
weakens the user experience, because the user constantly has to switch focus and movements
between the screen and the keyboard.
“Designing a touch screen device,
whether it is for consumer or business use,
is never ‘a quick job’.
Flawed user interface design
Many touch screen devices on the market do not use an appropriate user interface design that
serves the purpose of the device. Some products are equipped with a stylus, yet use very large
buttons, which makes the device very awkward to use. On the other hand, products that rely on
finger interaction use controls that are too small to be manipulated accurately. For instance,
Pharos’s EZ Road portable GPS uses large buttons for most controls, which make them easy to touch
and use with your finger. However, when navigating via a map, the on-screen controls are too small
to touch and require extreme precision from the user. This can be quite hard, especially when you
are driving.
7
8. Pharos’s EZ Road uses very small buttons for zooming
Neglecting user interface standards
Apple and Google offer a set of user interface standards and guidelines for application developers,
yet technology companies do not always adhere to them very strictly. This is a sure way to frustrate
users, as they rely heavily on behavior and interaction that they already know when using the ap-
plications (the so-called ‘Transfer of knowledge’). Triplog, an iPhone application to keep track of your
mileage and trip costs, is a perfect example of disregard for the iPhone user interface standards,
which results in a very sloppy and hard-to-use interface.
The user interface of iPhone application Triplog
8
9. Unsuitable hardware design
There is some bad touch screen software out there, but there are also a lot of bad hardware designs.
For instance, many devices have a protruding bezel around the touch screen surface, so that the
screen is slightly sunk into the device. This can make it quite hard to manipulate smaller controls
that are on the edge of the user interface, such as close buttons for windows.
HTC smartphone with protruding bezel
The hardware should always be ergonomically designed. In industrial settings, touch screens are
often vertically mounted panels, which are not suited for performing complex tasks or workflows.
The user’s wrists and neck are quickly strained, which can lead to long-term injuries.
9
10. Make a good product
There is a way of designing a great user interface for touch screen devices, whether it’s for consumer
products or industrial use. It comes down to two things:
• Determining the purpose of your touch screen software
• Applying some basic design principles
Determining the purpose of your touch screen software
Before you start designing the user experience of your touch screen software, you need to ask
yourself: What is the software meant for? Choosing the purpose of your software is based on a
combination of the tasks that the user will perform with the software, the context and the chosen
hardware that will house the software. Generally, there are three possible combinations:
• A mix of a touch screen with advanced hardware keys
• A mix of touch screen and basic hardware keys
• Full touch screen
Each option has an impact on user interface design and this impact needs to be considered before
developing your software.
Mix of touch screen and advanced hardware keys (keyboard)
In this case, the user performs some primary tasks on the touch screen, but still relies heavily on
keyboard and/or mouse interaction to perform other tasks. In most cases, the tasks that can be per-
formed on the touch screen are also supported through keyboard/mouse interaction. The most fre-
quently used example of this combination are laptops with a touch screen, such as the HP Touchs-
mart, or touch screen mobile phones with a full hardware keyboard.
HP Touchsmart laptop with touch screen
10
11. When designing software for this type of device, there are some ground rules that you have to take
into account concerning the user interface:
• Use a minimum resolution of 23 x 23 pixels (or 13 x 13 pixels for dialog units) for all controls that
are supported on the touch screen. While touch input is not primary on these devices, controls
still have to be big enough to be manipulated via touch or the touch screen itself serves
no purpose.
• Use total hardware support throughout the software. Since users are not obliged to use the
touch screen, all interaction with the software has to be possible using only hardware input
devices such as a keyboard or mouse. Microsoft has included ‘touch possibilities’ in all its software
products since the release of Windows Vista, in order to accommodate both touch screen users
and regular desktop PC users. For example, the ribbon in Microsoft Word features larger buttons
on primary functions, to make them useable on a touch screen, despite the fact that it is primarily
used on desktop PC’s.
Microsoft uses larger buttons in software for primary functions
• Avoid complex interactions where touch input and hardware input have to be combined in order
to complete a task. For instance, interactions where you first have to select an input field by
touching the control on screen and subsequently type in text using a keyboard.
11
12. Mix of touch screen and basic hardware keys
In this case, all primary tasks in the software are performed using touch interaction and secondary
functions, such as mere text input, are accessible via hardware. That hardware can be a keyboard,
but can also consist of specific hard buttons. For example, the touch screen of a bank terminal (ATM)
is used for all primary actions, such as withdrawing money, consulting accounts, etc. The hardware
keyboard is used for secondary functions, such as entering a pin code or amounts.
For a fluent touch screen software interaction, consider the following:
• Use a minimum resolution of 40 x 40 pixels for primary touch controls. The larger size of control
requires less precision of the user and guarantees better results.
• Provide support for all commonly used gestures on touch screens, such as zooming, rotating,
swiping, dragging, etc.
• Make sure that the user interface of the software provides enough visual feedback for the user,
which is adjusted to touch screen interaction. For instance, when a user presses on a control,
that control should get a different visual state, indicating that an action will take place upon
release.
• Avoid using ‘fingernail’ controls, such as spin boxes. This kind of control is too small to touch
with a normal finger and forces the user to use the very tip of the finger or fingernail. This kind
of interaction is not touch friendly and demands a high level of accuracy and precision from the
user, that is normally associated with using a mouse pointer on desktop software.
Spin boxes are not touch-friendly.
12
13. Full touch screen
In this case, the device has only a touch screen and can have a very limited number of hardware
buttons, such as an on/off button or home key, to perform all tasks. This means that all primary and
secondary input happens via the touch screen. The user interface of the software must support all
actions using touch input, including text input. Apple’s iPad is a good example of a product that uses
this paradigm, but it can also be found for example in control panels in meeting rooms.
Since a full touch screen device is dependent on the quality of touch interaction, the user interface
must be optimal to perform tasks using touch input, which requires specific attention:
• Optimize the user interface for touch interaction. If the user has to perform every task via touch
input, the user interface must accommodate this in a very easy way. For example, allow users to
perform as many commands as possible directly on the user interface, i.e. do not ‘hide’ primary
actions behind menus.
• Make sure that the user interface is forgiving. Full touch interaction will result in less accurate
input from the user. You have to design the user interface to anticipate possible errors. You can
do this by:
• Allowing the user to make and correct mistakes;
You can do this by providing undo-options where possible, allowing users to slide away from
touch to cancel the action, etc.
• Providing simple and straightforward actions;
Complex workflows and heavily input-based tasks are not suited for touch screen devices. The
interaction should be as easy and fluent as possible.
• Using standard controls.
When you use controls that user is familiar with (buttons, options, sliders, …), he is likely to
make less mistakes.
• Avoid or reduce input that is not touch-friendly. A full touch device is not made to handle
heavy text input (e.g. writing long papers) or precise actions (working with photo-editing
software). You can avoid heavy text input by offering predetermined choices to the user, such
as a list of options instead of free text fields.
13
14. Basic design principles
While much of the user interface of your touch screen device is determined by the purpose
and hardware of the device, there are also some basic design principles that apply to all touch
screen interfaces.
Interaction
Interaction is the most important aspect of the user interface of a touch screen device. A touch
screen user interface works best when it’s kept simple and clean. This implicates that the number
of functions that the device offers should be limited. If you are having difficulties incorporating all
functions in your user interface, maybe you should reconsider whether touch screen is the right way
to go for your software.
Touch screen software dotes on directness and easy access. Users want to interact directly with the
software and are invited to do so because of the touch screen. The user interface should support
this by immediately responding to actions, giving feedback, allowing users to manipulate the user
interface by using gestures, etc. To intensify the ‘touch experience’, the amount of actual user input
-i.e. typing text- should be minimized. Users will accomplish their task a lot quicker when they have
a predefined set of options available to choose from instead of free input. For example, supermar-
ket application Appie offers users a list of products to choose from, instead of letting users type in
product names.
Navigation
A good user interface design for a touch screen
product has to be clean and simple and this
has to be reflected in the way users navigate in
the software. Complex navigation with multiple
sublevels and lots of menus does not work well
when you only have your fingers to manipulate
the software. The number of sublevels should be
minimal. If your navigation does contain many
sublevels, maybe the information architecture
should be revised.
The user interface benefits most from a sequential
type of navigation, where each sublevel is
presented on a separate screen. This is because
most touch screen products have a smaller screen
than normal desktop PCs. When users only see
the relevant information on screen, they can
complete their tasks more quickly and efficiently.
iPhone application Appie
14
16. • Use standard controls
When you use standard controls in your user interface that users are already familiar with the
learnability of your software is increased. Do not try to come up with clever controls when check
boxes, option buttons and action buttons will get the job done.
• Allow the use of gestures
Commonly used gestures, such as dragging and swiping, can reduce your need for user interface
controls. For instance, when a user can scroll on a screen by using a swipe or drag motion, the
need for arrow buttons or scrollbars on-screen is eliminated. Multitouch gestures, like pinching
and rotating, can also increase the flexibility of the user interface, but also means a steeper
learning curve for the user.
• Give your user interface controls enough space
Controls cannot be too close together, as that will increase the error margin. If a set of option
buttons is placed too close together, the chance that a user will accidentally select the wrong
option is far greater.
Keep it simple
First of all, the number one rule of designing a user-friendly product also applies to touch screen
devices: always involve your users during the development of your product. User feedback is crucial
during every stage. Focus groups and task/context analysis help to determine the users’ needs,
usability tests during the development point out possible obstacles and likeability assessments are
excellent techniques to discover how users respond to the total package of your product.
The user interface of a touch screen device is different than that of regular desktop software. Users
are meant to touch it, which is an interaction that should be both intuitive and consistent. Since
everyone knows how to use their fingers, the manipulations of touch screen software should be
just as natural. On top of that, the user interface has to be consistent with how we interact with
real-world objects. We move a page on the table by using a sliding or dragging motion. These
motions should have the same effect when we want to move a page on the touch screen.
16
17. When designing the user interface of touch screen software, you have to take into account that
no human is the same. They come in all sizes and shapes. Some users can have very big hands and
fingers, while other users may not be able to manipulate controls with great precision. For example,
a touch screen kiosk for buying bus tickets is used by young teenagers, as well as by elderly people.
If the user interface of the kiosk requires extreme accuracy and precision, it will sure fail to reach its
entire target audience.
Finally, do not forget to engage your users. The user interface of your touch screen software has to be
inviting and users have to want to touch it. Don’t forget: your software can be the most user-friendly
in the world, if it looks boring, no one is going to want to ‘touch’ it.
1. Source: http://www.electrotest.com.sg/Capacitive_Touch_Screens.htm
2. Source: http://www.touchscreenguide.com/touchscreen/res.html
3. dixit MC Hammer
Author: Nico Raes
About Human Interface Group
Human Interface Group is Europe’s leading usability consultancy. Human Interface Group has
been coordinating usability projects for almost 20 years for a wide variety of larger and smaller
companies and public authorities.
We also have access to an extensive network of usability professionals throughout the world.
Human Interface Group is a partner in the International Usability Partners network, an
established network of independent usability companies who have joined up to provide
user experience services worldwide, from North America to the Far East.
Curious about how we can help you with your touch screen product?
Visit www.higroup.com
Mail info@higroup.com
Call +32 (0) 15 40 01 38
17
