SMARCOS HIG Paper on Designing Touch Screen Interfaces


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

SMARCOS HIG Paper on Designing Touch Screen Interfaces

  1. 1. User Interface Design forTouch Screens
  2. 2. Content1. It’s all about ‘touch’ ............................................................................................................................................. 32. Understand the technology ............................................................................................................................43. Can’t touch this .................................................................................................................................................... 74. Make a good product .......................................................................................................................................10 4.1. Determining the purpose of your touch screen software .........................................................10 4.2. Basic design principles ............................................................................................................................. 145. Keep it simple ......................................................................................................................................................16 2
  3. 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. 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. 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 technologyA 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 2One 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. 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 ofcapacitive and resistive touchscreen technology and is by no means exhaustive.HardwareNot 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, theuser 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. 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. 8. Pharos’s EZ Road uses very small buttons for zoomingNeglecting user interface standardsApple 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. 9. Unsuitable hardware designThere 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 bezelThe 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. 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. 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. 12. Mix of touch screen and basic hardware keysIn 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. 13. Full touch screenIn 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. 14. Basic design principlesWhile 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.InteractionInteraction 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 wayto 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
  15. 15. In any case, the navigation of your software has to be consistent. Do not mix a sequential navigation with multidimensional navigation. Be sure to always provide a way back when the user is navigation by use of back-buttons, a breadcrumb trail or a dedicated home button. This way, users can always cancel their navigation action. Sequential navigation on Apple’s iPhoneControlsFor controls in the user interface of touch screen software, there are some guidelines to facilitate the user experience: • Design your buttons large enough Most of the time, you cannot predict who is going to use your software. Some people have large hands or are unable to point accurately at small objects. The primary action controls in the user interface have to be big enough, so that they do not require precision or accuracy from the user. Do not forget that speed is crucial for touch screen software. Users have to be able to perform a task very quickly. For example, make the touch area around a button or control slightly bigger, so that users do not have to aim too precisely. Large buttons on TomTom main menu 15
  16. 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. 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: Source: dixit MC Hammer Author: Nico RaesAbout Human Interface GroupHuman 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.comMail info@higroup.comCall +32 (0) 15 40 01 38 17