UI Design Tips for Touch Screen Apps

I have been playing with a 7” inch Android based tablet for few weeks now, and as I had mentioned in one of my earlier posts, I see tremendous applications for this kind of device (if rightly priced) in productivity enhancement, and in learning and development in India like scenario, where workforce is highly distributed, and access to laptops and fast Internet connectivity is limited.

I have had a touch screen phone with me for some time now but had never really bothered about taking it seriously for any kind of learning etc (I know, coming from an e-learning solutions provider, this can sound blasphemous to some, but that’s how it was for me personally). But, these 7” inch tablets seem to be of just the right size – it’s easy to hold them in one hand and use the other to scroll, or use both hands to use the virtual keyboard.

While going through various ‘current world’ web portals and applications, and then some which have been optimized for mobile and touch screen interfaces, I found some UI design related aspects that I found worth jotting down. Here are some of my observations, which you may like to use if you are also starting on your journey to create content and applications for touch interfaces (some of the items described below may be specific to Android OS) –

Always use white or bright colored background – Fingerprints and other marks on the screen become much more prominent on black or dark backgrounds. A white or a bright background solves this to quite an extent.

Keep it Clean and Simple – Don’t clutter your application/course screen with too many Icons, Buttons etc. Just keep the most important functionalities on screen and move rest of them to ‘Options’ or ‘Context’ menus. Here is one such good example of how to keep application design clean (This is ‘Documents To Go’ from Dataviz – an MS Office & PDF reader and editor) –

Application Home Page – Large Icons With Ample Space Between Them

Application Launch Screen: Only ‘The’ Most Important Functionalities Placed Here

Options Menu: Again only most used functionalities should be placed here, with rest placed under ‘More’

Context Menu – Keep All Options Relevant to Selected Item in ‘Context Menu’

In e-learning context, it can mean keeping all the global course functionalities, such as Glossary, FAQ, Notes, Ask Mentor etc in the ‘Options’ menu, and any specific item related information (e.g. clicking on an object may reveal option to view it, download it, mail it etc.) in ‘Context’ menus.

Touch is Different Than Mobile Interface – While creating content for mobiles one focuses on designing the content for small screen sizes and links etc are organized with an assumption that they will be navigated using track-ball or something similar. However, in touch screen devices where screen size ranges from 5 to 10 inches, one should focus more on size and prominence of click-able objects as finger sizes can vary quite a bit between users of the application. Of the limited ‘touchabled’ (new word?) sites that I have browsed, I have particularly liked the way Facebook has organized its mobile and touch interfaces (notice how links are presented differently in both the interfaces) –

Provide Undo Option – It’s easy to make mistakes in touch screen based applications – one may touch the wrong button, or fill in wrong data due to keyboard size limitations. Instead of making user re-enter data or perform steps all over again, provide option to return to last state with ‘Undo’ or ‘Back’ option.

Give Visual Indication of Action Being Taken – On desktops we see a busy mouse icon and we know computer is doing something. We don’t have any mouse icon in touch screens – so give some visual indication as soon as anything touchable is touched, so that the users don’t panic and start feeling that something went wrong.

Use Multi-Touch to Add Pizzazz – Multi-touch capability in touch screen devices adds a new dimension to how we can add interactivities in our courses and apps, e.g. an interactivity where user has to work on a machine simulation with both hands at same time, or take quick actions in different parts of the screen using both hands etc will now be possible with multi-touch capability.

Provide Scroll Options – Now the experience shared below may be specific to the tablet I am using, but whenever I find lot of icons or hyperlinks on the screen and I have to flick the screen to move to next section I invariably end up clicking some icon or hyperlink by mistake (I have not faced this in iPhone so I think it has something to do with the screen quality of my test tablet). But this raises a point – that many users may have these kind of tablets where screens may not be of the best quality (and I think that may be more true for low end tablets), or user clicks on something by mistake while flicking on the screen. I think it will be a good idea to provide scroll buttons ‘<’, ‘>’ (horizontal or vertical depending upon screen orientation) at screen edges to factor in all type of devices and users.

Will keep on sharing more as I dive deeper into the touch world, and as we get more feedback from users using our courses and apps designed for touch screens.