As touch screen monitors become commonplace, we can expect to see more custom software and websites being built with touch control in mind. Apple has already proven touch screens sell with the iPhone, and it looks many of the same ideas will be applied to large format devices, such as a rumored 22-Inch touch screen iMac (not to mention the much anticipated Apple tablet being announced tomorrow.) Dell, Asus and HP are also joining the “kitchen-pc” trend by releasing their own touch screen desktops.
We are currently building a custom software application in Silverlight that will be accessed on touch screen computers in a hospital environment. This software has to be extremely easy to use, and when lives are on the line you can’t afford to have any mistakes.
In the past, we’ve primarily focused on Web and desktop software design, so as we started the project we did a lot of legwork researching the best ways to interact on a desktop touch screen or kiosk.
Here are a few tips that have help us:
Make it bigger
Fingers are less precise than a mouse or stylus, so you’ll need to increase the size of buttons and other interactive elements. The SAP Interaction Design Guide for Touchscreen Applications recommends 3/4″ buttons with 1/8″ space between, but we have also had nice results with 1/2″ buttons as well.
Observe your local bartender
Start looking at interfaces on a variety of devices for ideas. Touch screen software at restaurants and bars has to react fast in order to keep up with a mad rush of customers, or a waiter/waitress whose hands are full of change. I was inspired by watching a cashier at a local deli quickly add ingredients to my sandwich through a touch screen interface on their point of sale (POS) system. Some ATMs also do a great job with screen flow and dividing tasks into easily digestible chunks — another thing to keep in mind.
Build a paper model
Tape off an area the size of the target monitor on your desk (most of the screens we tested on we’re 16”x9”) and cut out some paper models to represent objects in the application. Using common objects like sticky notes or pencils can help you determine things like size and scale.
Also, observing the behavior of objects as you slide them around can help you mimic real world physics and motion in your application. You could even float objects in water to give you some ideas for movement effects.
Hardware is very important
Even with a great design, unresponsive hardware can be extremely frustrating to work with. If you are designing your application for a new business, try to test out a few hardware models to see which performs best. Test the response time and make sure the screen isn’t too sticky as you slide your fingers across it.
Also, try out any built-in features, such as on-screen keyboards. It may be difficult to override the manufacturer’s included software, so you’ll want to make sure it is usable.
Make interacting fun
While speed and usability should top priority of touch screen apps, part of their appeal is that they are fun to use. Adding multi-touch and gesture support, such as swiping, pinching and flicking objects can lead to a more enjoyable experience. Try to make the user feel like that are interacting with real world objects. Check out some of the ground-breaking multi-touch demos created by Jeff Hahn for inspiration.
Avoid gorilla arm
Most people can only hold up their arms for a limited amount of time before they get tired. To avoid this problem (sometimes referred to as “gorilla arm”), the time it takes to complete tasks on the software should be kept to a minimum. Features like auto-complete and predictive text can help limit text input.
Make it look touchable
Use subtle gradients, shines or matte effects on objects that mimic real-world lighting effects. Most of the buttons and menus on the iPhone apply just enough of a glass or linear gradient effect to give them a 3D appearance.
More resources
Here are some resources for best practices for interface design on touch screens:
Interaction Design Guidelines for Touchscreen Applications from the SAP Design Guild
Microsoft Surface User Experience Guidelines
iPhone Human Interface Guidelines – Apple
iPhone Interface Design – review by Edward Tufte
3 Comments
I really like the “Gorilla Arm” remark. I’ve always approached the design asking questions like “Is the navigation intuitive? Do our users have to click too many times to find what they want?” I think they go hand in hand but I never thought about people having to keep their arms up for long periods of time. Great point.
I was wondering what type of touchscreen u chose…can u tell me the spec and the price point for such screens. our company plans to build such application but we can’t test it on different touch-screens since we can’t afford it
thanks
yonathan, thanks for the inquiry. Currently, we test our software on the following touch screens:
Asus Eee Top 15.4″
MSI 19″ touch screen
ELO TouchSystems 1900L
Dell Studio One 19″
The Dell Studio One seems better constructed than the MSI or ASUS, and is pretty responsive. The stand alone units like that are perfect for a testing environment. If you would rather have the touch screen hooked up to your development computer, the ELO is very nice, but costs more (around $850) for just a monitor.
However, we also bought most of our hardware in the summer of 2009, and there’s probably some Moore’s law type of equation bringing the cost of touch screens down and quality up.
Post a Comment