Touch screen interface design is a tricky thing for some people who’ve been designing for a mouse-bound audience. But with the coming of the iPhone and a host of other touch-screen equipped smart phones at attractive price points (Like the Palm Centro and HTC Touch) I’m thinking about touch screen interfaces more and more. Maybe you should be, too…
- Response speed should be of utmost importance. (I know, I know… making response speed a priority is a staple of user interface programmers and designers, but it’s even more important in touch screen world.) The speed and ease with which a human can interact is increased within the touch screen interface environment. Therefore, the interface’s responsiveness must increase as well. If your hardware/software’s response time is slow, you’ll find your user’s aggravation increasing proportionally faster than it would if they were using a less intuitive system, such as a mouse or trackball. (It’s not as if a using a mouse makes us all plodding computer operators, but no matter how seasoned you are with the click-able rodent, it will never come as naturally as reaching out and touching something to interact with it.) So be lightweight.
- More space comes in at a close second to speed. A cursor is small and a stylus may be even smaller. However, it’s a good idea to design your interface with fat fingers in mind, even if a stylus is expected to be present some of the time. This will increase the overall usability and flexibility of your system. When designing Poptakeout.com (An iPhone/iPod Touch social news aggregator) I made all the buttons 106px by 110px. Considering the Mobile Safari platform is displayed (exclusively, as far as I know) on iPhones and iPod Touches, whose displays pack 160dpi, I ended up with buttons almost 1/2″ square: plenty of room for an accurate poke.
- Intuitiveness of your design also becomes a heightened concern. This is the same situation as number one, in the touch screen environment non-intuitive information architecture will be even more frustrating to your users. When all they have to do to is reach out and touch something, it becomes a larger source of frustration when this simple action does not deliver as expected.
- Ambidextrous design must come into consideration in the touch screen world. Both lefties and righties will be using your interface, so plan accordingly. Delivering the same experience to all users means either vertically symmetrical navigation or an option to flip your layout. I prefer the former, it will take less development time (in general) and simplifies your interface.
- Bright background colors or patterns can hide glare and reduce fingerprints. Solid black is the worst possible choice. (I’m looking at you, iPhone)
- Touch screen interfaces are more suited to information retrieval than data entry.
- Be aware of screen coverage. Flyout or rollover menus become much less useful. You may want to consider placing navigation at the bottom of your touch screen area, with results/display at the top. (Thanks, Sanj)
- Problems with eye-finger and eye-stylus parallaxes lend even more credence to the argument for big, fat areas to press with plenty of space between them.
- Best to worst operations: Point, select > Position, orient (rotate), define path > Enter values > Enter text. So, basically, touch screen interface’s are great for data retrieval, pretty good for data manipulation, and are kinda awful for data entry.
Further reading of interest on this subject:
- ALA – Put your Content in My Pocket Part I and Part II.
- SAP Design Guild – Interaction Design for Touch Screen Application
- Department of the Army Weapon Systems: Human Computer Interface Style Guide
- Target Size Study for One-Handed Thumb Use On Small Touchscreen Devices (PDF) (Thanks, Nirmal)
[Pic via Gizmodo]