12

I'm designing a touchable interface. It is a non-iPad/iPhone for any mobile with touchable screen.

So, if you see a big screen, how do you know if is touchable one?

  1. Showing a video that explains how to use it? With a big text: "touch the screen to start..."

  2. A big button with a text inside: "Touch me!"

Ideas?

4
  • 2
    Can you provide more context? Is this a kiosk? Who's the audience? What's the intent of the device?
    – DA01
    Commented Jan 24, 2011 at 23:00
  • 1
    Yes will be like a Kiosk. will be stand for any kind of people to know about "goverment stuff" Commented Jan 26, 2011 at 17:00
  • 1
    I've seen people around and about assuming touch screen more and more recently. You get those kiosks with a screen and a keyboard and sometimes a trackball at train stations and the like, I see a lot of people poking the non-touchscreen displays. Maybe we're learning to assume touch is OK?
    – TJH
    Commented Sep 7, 2012 at 10:14
  • Add fur -- make it look furry!
    – RobC
    Commented Sep 7, 2012 at 17:44

8 Answers 8

13

The best examples I've seen use touch gesture hand icons, similar to these:

http://graffletopia.com/stencils/587

At times of application rest, where the app isn't being used -- the home screen can be devoted to a simple touch icon moving on the screen and appearing to click/flash on a button that is selected, but no further action is taken, until the user actually touches the button to continue. That should entice the user to select it.

2
  • Jonathan, those stencil for Omnigraffle are awesome! I like the idea about leave the screen with a simple button to start, but in some way, i want to "invite to use it", give to the user good reason to use the interface. Commented Jan 26, 2011 at 18:10
  • This sounds similar to some answers below, but is a lot more "obvious". Have you had recent success with this or have you gone a new way since this was written?
    – Luke
    Commented Oct 17, 2014 at 15:24
8

I've seen apps doing it in an interesting way: they make the most important element wiggle every few seconds until you touch it (e.g.: a call-to-action button). If it's draggable, then you could put 3D dots (or whatever they're called) over it forming a square like some elements you see in the OS.

0
4

Have very big buttons with bevels and drop shadows. The first call-to-action should be explicit. Label it something like "push to start". The subsequent buttons can be more succinct like "continue" or "back".

1
  • that was my first tough, but how can i do it even more "touchable". All kind of people will interact with this screen(90% will be non-tech-people) Commented Jan 26, 2011 at 17:04
4

This is related - designing for perceived visual affordance. Essentially - use visual metaphors where required to make the interactive controls look like they are touchable - in JoJo's example above, with bevels and drop shadows this is obviously a real-world button, which instantly screams touch me! ;) I think you have to remember however, to draw the line between whether you are you trying to help users to interact with your specific application - or the device itself. Take for example the iPhone - there are a number of common gestural controls that do not have interface elements with perceived visual affordance (e.g swipe, two button tap, etc.) but each application doesn't typically try and tell users about these, so if your application is not doing anything outside of the ordinary/expected touch-based interactions for that device then you probably don't need to either, since the user is likely to be familiar with these common methods of interaction. You say these are touch screen mobile devices, so users will presumably know that they can touch the screen?? Or have I missed the point?

1
  • Will be a big touchable screen. Thanks for the article! Commented Jan 26, 2011 at 17:08
4

I agree with Jonathan, in the case of a walk-up touch screen UI, a static or animated illustration of a hand touching a soft button is a great introduction. After the intro screen, the subsequent screens should have touchable looking elements in a consistent visual language with the soft button or graphic in the intro screen.

A text label that says "Touch Me" or "Touch to start" seems like an obvious solution unless the product will be used by audiences that speak a different language. This should always be taken into consideration, especially in the case of a public kiosk UI.

If your users are non-techie, or older adults, I wouldn't rely too heavily on what is being done in mobile, touch screen devices. I agree with Andrew that you should study what is being done on ATM screens, Redbox, etc., specifically designed for a broad audience that are in a hurry.

Making the touchable sections of the screen look like real world buttons seems to be an obvious interactive control for both young and old. Thanks Tom for your reference link in my blog: designing for perceived visual affordance. Audiences of a walk up UI usually don't have the time to explore or learn like they might have with an application or even a web site. The kiosk's UI has to be immediately obvious, intuitive and informative. I think you need to imagine a non-reading, 4 or 5 year old trying to use your interface when designing a kiosk UI of this type.

4

I know I am late in answering this but if you do a general search for best practices within kiosk UI design (or Self-service Technology, SST, as it is called as well) you will find that having a screen that says "Touch here to start" is a worst practice.

"Begin what?" will be the question to that UI. Many don't have the time to find out.

The reason for this is that it doesn't tell the user what they can do with the self-service kiosk and less people are willing to devote time away from their normal path to touch the screen in order to see what lies underneath.

2

I've seen many kiosk applications with a prominent "Touch to Start" button on the start page / idle page, and yes, it has helped me greatly.

This tells the user what to do, and how - and should be enough to teach the user that this is indeed a touch-sensitive surface.


At worst, you can tape a sticker "touch screen to navigate" above the screen.

2

To me, the most important thing is to stick with your typical user's mental model of a touchscreen device. How that relates to the positioning, height, and design of say, a kiosk (or whatever you're making) is up to you, but the most important thing is to make it fit with their other models of touchscreen devices (ATM, Redbox, etc...) and they will unconsciously bring a lot of UI knowledge to bear.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.