From Touchable to Touch

Enabled to Touch Optimized

February 26, 2015

Introduction

We were working recently on the touch aspects of our MoneyBag app to make it more touch friendly. But there was a question in my mind if the app was Touch Enabled or Touch Optimized.

I recently read an article in Microsoft’s site that threw another category in the mix called Touchable. It was actually a fascinating read as I explored more about the steps in touch optimization of an app.

From just having a simple touchable app (probably a desktop version directly used in a touch device) to a more touch friendly (larger buttons, gesture support) and then finally to a touch optimized version (immersive, forgiving and touch based controls) is a long journey and I believe that no app can call it self totally optimized.

Touch Categories

The following are the categorization provided by Microsoft:

Touchable

1. The program’s interactive controls are large enough to be easily touchable—at least 23×23 pixels (13×13 dialog units, or DLUs).

2. The program has good keyboard and mouse support, so that relevant system gestures such as flicks, multitouch gestures, and drag-and-drop are functional. No tasks require using hover or the touch pointer.

3. All controls use Microsoft Active Accessibility (MSAA) to provide programmatic access to the UI for assistive technologies.

Touch Enabled

1. The most frequently used controls are at least 40×40 pixels (23×22 DLUs). Relevant gestures are supported (including panning, zoom, rotate, two-finger tap, press and tap), and the effect occurs at the point of contact.

2. The program provides smooth, responsive visual feedback while panning, zooming, and rotating so that it feels highly interactive.

Touch Optimized

1. Tasks are designed for easy touch by placing the most frequently performed commands directly on the UI or content instead of in drop-down menus.

2. The program’s special experiences are designed to have an immersive touch experience (possibly using raw touch input data), with multitouch manipulations and details like having feedback with real-world physical properties, such as momentum and friction.

3. Tasks are forgiving, allowing users to correct mistakes easily and handle inaccuracy with touching and dragging.

4. Tasks are designed to avoid or reduce the need for heavy text input or precise selection.

Reference : http://msdn.microsoft.com/en-us/library/windows/desktop/cc872774.aspx#gestures

Once we read this we knew our app was in between Touchable and Touch Enabled but we wanted to make it Touch Optimized for the best user experience. We started off doing several things in the app which has now made it touch optimized to an extent. The followign are the major areas that we focussed on to make the app touch optimized.

Steps towards Touch Optimization:

1. Precise Selection : We simply made the buttons larger. Most of the buttons in main screen are atleast 40px in width and hence can be touched easily. Small buttons are grouped together and even a mis-selection can actually cause a very related effect to happen which can be corrected in next step.

2. Forgiving : The most important activities which can cause a huge impact like MoneyBag deletion (which deletes all transactions as well) is re-confirmed with the user preventing accidental deletion of a large amount of data.

3. Gestures : Tap, Drag, Swipe and Flick gestures are provided to have a more realistic behavours and to achieve actions without the need for button presses.

4. Minimum Text Input and No Drop Down Controls : We minimized the use of text input controls and have totally eliminated Drop Down lists which is very difficult in touch based scenarios. Almost all controls are laid out in the screen as buttons, check boxes or radio controls.

5. Hidden Menu : An awesome touch friendly design which can be used when the user is in a consumption mode to quickly navigate through all the features with large and neatly spaced buttons.

6. No Hover based actions : We removed all hover based actions in the app. For example if a hover (mouse over) brings a particular menu option, it would not work in touch based scenarios and we have eliminated all of them. The only hover action we perform is to provide a tool tip.

7. 100% Controls in Main Screen : There is no need for a user to go to menus and sub menus in MoneyBag to go to a screen. All of the main controls are spread out nicely in the app and hence the user will be able to touch and go to a screen withou any obstacles.

Summary:

1. An app could be a simple touchable app (probably a desktop version directly used in a touch device) or a more touch friendly app (larger buttons, gesture support) or finally a touch optimized app (immersive, forgiving and touch based controls).

2. Touch optimized apps provide the best user experience.

3. There are several steps that can be taken towards touch optimizations of a touchable app including Precise Selection, Forgiving, Gestures and not having text inputs, drop downs or hoverings.

4. There are just a few of the common aspects that can be tweaked for a more enhanced touch experience but there are many more depending on the app.