I am not talking about phones or iPads or other "gadgets". I am talking about applications like kiosk systems (POI - Point of Information/Info Terminals) or HMI (Human Machine Interface). All UI books seem to deal with keyboard and mouse interfaces...
8 Answers
Designing Gestural Interfaces by Dan Saffer is a nice start with some basics. I've been working on a largescale POI system for a postal company for over a year, and we've also done numerous user/usability tests and it is very different from your regular webapp or site. I think for me there were 3 or 4 major differences:
1) size and spacing (the tip of your finger is a lot bigger than your cursor)
2) blocking the down/right corner view. Most people are right handed and block a big part of the screen with their hand when beginning somewhere in the top left corner, but on a touchscreen app you often want to use all the space you have so that creates a problem for some important functions that get out of sight.
3) Regular scrolling often sucks. Sorry for the language, but the technology used for larger touschscreen displays combined with sweaty hands and dirty screens makes it annoying for people to put their finger on a screen and trying to drag down a scrollbar, so try to avoid that.
4) Contrast/reflection. The screens are often in places with direct sunlight or artificial lights pointed directly at them, so make sure you choose a colorscheme that is still readable in these situtions. We actually tested several color combinations in bad light situations to find out what worked best for most people. Remember with POI's, that some people will have to work with them from 9 - 5 5 days a week...
-
I'm designing an iPad kiosk app and I agree with 'scrolling often sucks' comment except in the case of iOS devices and native apps. If you want buttery smooth scroll it's the only way to go. Andriod doesn't have it in my experience. WP7 does except there is no WP7 tablet. I don't know about the scroll experience on W7 tablets. Dec 30, 2011 at 14:21
I looked around a bit and found the following articles/websites. Note that I'm not an expert on the field and do not know if these are valueable.
I'm not sure of any resources about this, but I think you can maybe modify a few best-practices according to what we know about touch screen interfaces.
for example, with a touch screen it's easier to target and click an icon with your finger than it is with a mouse (provided the icon is big enough to fit your finger in). It's also harder to type on a screen than it is with a keyboard. So you should probably prefer a grid of icons possibly under some large tabs over having to type anything in.
As easy as hitting a target with your finger is, using your finger to control a UI is also clumsier once you've got that target. Scrollbars, highlighting text, clicking very small items, etc are examples of this. So some things to keep in mind are that, while your users will be great at directing their finger to a point on the screen, it's difficult to manipulate the things under that finger, especially if they are much smaller than and are completely obscured by it.
I think just thinking about the ways that a touchscreen wins and loses over a mouse and keyboard could help you get pretty close to the mark. Alas, the details of perfecting a touch screen interface are lost on me.
-
2Actually, hitting a precise target with your finger is harder then with a mouse, typically called "fat finger". From useit.com/alertbox/ipad.html : "The iPad has a read–tap asymmetry, where text big enough to read is too small to touch." Aug 16, 2010 at 5:39
-
@Robert true, I was mainly referring to "missing" your target -- for example, if there is a 3px gap between a button and the edge of the screen, it's easier to miss it with a mouse than it is with your finger, since humans are better at controlling their fingers than they are a mouse (I would think). I did mention the clumsiness of interacting with elements on a touch screen, however. I may not have been clear enough on that, I'll update the answer Aug 16, 2010 at 5:45
-
2In my experience, that's still harder to do with a finger, especially because of the way many touchscreens are implemented (translate finger position to a specific pixel position rather than an area). The mouse has precise visual feedback that you aim before clicking. Touchscreens give feedback after clicking. Aug 17, 2010 at 3:07
-
@Robert alright, good point. I still think that designing a touch screen interface revolves heavily around catering to a different model -- that the user is to physically touch the interface. Large buttons best do this, since that is what is on actual physical interfaces. I think using buttons and large tabs trumps say, a drop down list -- and pagination trumps a scroll bar. Naturally the targets must be large and easy to hit. My point was basically to cater to how the user uses the interface -- via poking. Aug 18, 2010 at 1:51
You could always get in touch with some of the vendors that build and create those displays and ask them what resources they might point you to for this. There's a good chance that it will be hard to dig anything out of them, but there's also a good chance that if you dig enough you'll find some very invaluable insights.
A quick Google search turned these guys up: http://www.griffinchaseoliver.com/
You might shoot somebody over there an email, or even call them and just do some "info gathering."
I started asking that question myself about 4 years ago when I started a UX design job for a touchscreen kiosk. I couldn't find anything more than a passing reference in books and sites dedicated to website design. Since then I've interpolated, tested and used plain old commonsense to come up with my own best practices. I started a blog on the subject on my portfolio site. Please take a look and contact me if you have specific questions. Good luck to you!
Blog about touchscreen kiosk design
Update--I reviewed the maguire.pdf linked above. It has some useful information specific to kiosks but only about half of it relates to interface design. The rest is more about location and machine design. I would agree with most of the interface design suggestions but not the use of flags for language selection. I've gone through an internationalization project for a kiosk and believe me that is not a political can of worms you want to open. Stick with buttons that display the language in the native language. The users know what it means.
I highly recommend Brave NUI World: Designing Natural User Interfaces for Touch and Gesture by Daniel Wigdor and Dennis Nixon.
Sample Chapters:
- Chapter 3: Ecological Niche (PDF)
- Chapter 20: Self-Revealing Gestures (overview of the book and a PDF of the sample chapter)
I think the hardware specification/technology should also be considered when designing UI for touchscreen. Is the touchscreen responsive enough, is it sticky, does it work with gloves, etc.
Also, some technology is inherently not suitable for certain interaction. For instance, a resistive touchscreen registers touch via pressure, which means, it's probably best to avoid any dragging action because it might be hard for user to maintain consistent pressure.
I am curious if anyone knows which technology is the most responsive though. Hardware manufacturer seems to focus mostly on reliability, not so much on performance.
I've been recently involved in a industrial HMI interface that I've created as a proof of concept, and due to the nature of our customer's business, safety is critical. If you're providing a HMI interface to a vending machine, the risk is clearly not as great as you would find when creating HMI for heavy industrial applications, or a chemical/nuclear plant.
From my experience, if you're working on the latter, you will need to perform a detailed risk assessment and analysis of the operators environment and investigate all possible failure avenues.
If it helps, here is a brief overview of some of the key areas we investigated:
- Comms Errors - In our case, the HMI will replace a legacy serial keyboard with keys that can be illuminated by alarm software that interacts with plant. How will the software cope with comms errors? Comms is two way, key presses transmitted by the HMI, illuminate instructions sent to the HMI.
- Touch screen Failures/problems - Total Loss, Erroneous input (mis-click, calibration, double clicks, drags, etc).
- Power Failure - Loss of service, system doesn't recover.
- Design Errors - Invalid use of comms protocols, keyboard codes, incorrect key labels, incorrect colour illumination, lack of documentation for existing system, coding errors, etc.
- Human Error/Human Factors - Representation of illuminated and non illuminated buttons on a TFT screen (not a simple as you might think if you need to represent various colours in both illuminated and non illuminated states), hygiene, dirt on screen, can a screen be cleaned during use, will touch screen function if operator has gloves or prosthetics, hands/wrists resting on touch screen, viewing angle, resolution of display, button size, lack of button mechanics on a touch screen, audio and visual feedback on button press, operator 'playing', e.g. trying to reconfigure device/operating system, malicious damage.
- Software Issues - Memory Leak, Bugs in third party software/operating system, performance, security (Viruses, Worms, etc), System Failure (BSOD, locked up system, etc), pop up dialog boxes, system boot with no keyboard attached.
- Hardware failures - CMOS battery failure, system won't boot, hard disk failure, other hardware component failure.
- Environmental - RFI, H&V, Disturbing existing cabling under control desk when installing new system, overloading power supplies, quality of power supplies.