84225

Things to consider when writing for touch screen?

Question:

I'm starting a new project which involves developing an interface for a machine that measures wedge and roundness of lenses and stores the information in a database and reports on it. There's a decent chance we're going to be putting a touch screen on this machine so that it doesn't need to have a mouse or keyboard...

I don't have any experience developing for full size touch screens, so I'm looking for advice/tips/info from you guys...

I can imagine you want to make the elements a little larger than normal... space buttons out a bit more.... things like that... anyone have anything else to add?

Answer1:

A few things to consider:

<ul><li>

You need to account for parallax error when touching controls. Basically, the user may touch the screen above or below your actual control and therefore miss the control. This is a combination of the size of the control (eg you can have the active area larger than visual control to allow the user to miss and still activate the control), the viewing angle of the user (which you may or may not be able to predict/control) and the type of touch screen you're using. If you know where the user will be placed relative to the screen when using it, you can usually accommodate this with appropriate calibration.

</li> <li>

Depending on the type of touch screen, you may need to ensure that your users aren't wearing gloves or using an implement other than their fingers (eg the end of a pen) to touch the screen. Some screens (eg those depending on conductance) don't respond well to anything other than flesh and blood.

</li> <li>

Avoid using double clicks because it can be very hard for users to reliably double click a control. This can be partly mitigated if you've got experienced/trained users working in a fairly controlled environment where they're used to the screens.

</li> <li>

Linked to the above, if you are using double clicks, you may find the double click activated when the user only wants to single click. This is because it's very easy for the user's finger to bounce slightly on touching the screen and, depending on how sensitive the double click settings are, trigger a double rather than a single click. For this and the previous reason, we always disable double clicks and only use single clicks (or similar single activation controls).

</li> <li>

However big you think you need to make the controls to allow for touch activation, they almost certainly need to be bigger still. Make sure you test the interface with real users in the real deployment environment (or as close to it as you can get). For example, we deployed some screens with nice big buttons you couldn't miss only to find that the control room was unheated and that the users were wearing thick gloves in the middle of winter, making their fingers way bigger than we had allowed for.

</li> <li>

Don't put any controls near the edges of the screen - it's very hard to get your finger into the edges (particularly if the screen has a deep bezel) and a slight calibration problem can easily shift the control too close to the edge to use. Standard menus and scroll bars are a good example of controls that can be very tricky to use on a touch screen and you should either avoid them (which is preferable - they're not good for touch screens) or replicate them with jumbo equivalents.

</li> <li>

Remember that the user's hand will be over the screen, obscuring some of the screen and controls (typically those below where the user is touching, but it depends on the position of the user relative to the screen). Don't put instructions or indicators where the user's hand or arm will obscure them when trying to use the control they relate to (eg typically put them above rather than below the control).

</li> <li>

Depending on the environment, make sure your touch screen is suitably proofed against dust, damp, grease etc and make sure it's easy to clean without damaging it. You wouldn't believe the slime that can quickly accumulate on a touch screen in an industrial or public setting.

</li> </ul>

Answer2:

The other obvious one is that there's no equivalent of pointer 'hover'. Not that that affects many apps though.

Answer3:

If you decide to put in analog controls (scrollbars, rotation widgets, etc) be sure to put in a digital control also. Some companies think that a touch screen means perfect control over something with your fingers. In real life, this translates to minutes of frustration trying to fix a number that's just a little off.

Answer4:

The most obvious thing is that everything on the GUI needs to be big enough for a fingertip to hit, which is sometimes bigger than you think.

As has been mentioned, there's really no way for a right-click action to happen. Also, double-clicking can be tricky with a fingertip on a touch screen.

The other major thing is that you'll want to create a on-screen keyboard that pops up for text entry and an on-screen numpad for number only fields.

Answer5:

I wrote my own set of controls for a POS application designed specifically to be touchscreen friendly.

Remember to allow enough real estate for stubby fingers and talons. In our application the users can have these manicures that necessitate them to use the pad of their finger instead of the tip. This means that you need to allow more space for activation areas than you would normally consider in any other type of application.

I would also recommend that you accommodate yourself as a programmer from a testing standpoint and from the point of view that things change and there may need to be a keyboard/mouse attached to a non-touch workstation. I cannot tell you how many times I went to touch my flat panel LCD expecting something to happen, before remembering that I had to use the mouse.

Answer6:

Make sure to read your basic UI principles like Fitz law (The time to acquire a target is a function of the distance to and size of the target).

Also consider whether or not the device is stationary or not when it is in use (e.g., like a palmpilot or iphone), research shows that you must accomodate that into your design.

Answer7:

The larger gui elements is the major thing. But it applies to all elements, scroll bars, tabs and even text fields.

The other major thing that I can think of, it's hard for the user to right click. So things that require a right click should be avoided, context menus are the only thing that comes to mind at the moment.

Answer8:

The other responses are pretty good, but are you totally sure that a touch screen would actually be easier to use? There are a lot of devices where a touch screen actually makes them much harder to use, not easier. The main problem is that you can't use the device when you're not looking at it. If users are going to be doing a lot of repetitive actions, a keyboard could be a lot more efficient.

Also, a touch screen might be a lot harder to use by someone with a disability, if you think there's even a small chance that could happen.

Answer9:

Even though this is quite old now, I found it to still be useful, as a starting point for design considerations.

<a href="http://www.sapdesignguild.org/resources/tsdesigngl/index.htm" rel="nofollow">http://www.sapdesignguild.org/resources/tsdesigngl/index.htm</a>

Answer10:

If you've not already done so, have a look at some of the documentation available for developers on mobile platforms, eg <a href="http://msdn.microsoft.com/en-gb/windowsmobile/bb250568.aspx" rel="nofollow">Windows Mobile</a>, <a href="http://developer.apple.com/iphone/" rel="nofollow">iPhone</a>.

Recommend

  • Mailchimp - how can I tell if a user has unsubscribed themselves?
  • Modification history in a file
  • How to add some text in google piechart pieHole
  • count the occurrences of all the letters in a string PHP
  • IOS8 Text in TextField Bounces on Focus
  • moving an object without actually touching the object
  • jQuery.on “touchstart mousedown” - both events are triggered on touchscreen device
  • return common fields in two files
  • Case insensitive search in CQ5 using querybuilder
  • PHP exec response as string?
  • 2-table interaction: insert, get result, insert
  • Is there a way to call library thread-local init/cleanup on thread creation/destruction?
  • Classic ASP URL Rewriting
  • init_seg and warning C4073 from library code?
  • AWS-SES: Handling Bounces for Invalid ISPs
  • Efficient User-Agent Regex to find Safari in Python
  • Trying to get the char code of ENTER key
  • Android changing fragment order inside FragmentPagerAdapter
  • Using Sax parsing to edit and write XML in VB6
  • How to add a focus style to an editable ComboBox in WPF
  • Jquery popup on mouse over of calendar control
  • Debug.DrawLine not showing in the GameView
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • How to get Eclipse Oxygen to run on Java 9
  • How do I get HTML corresponding to current DOM tree?
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • Yii2: Config params vs. const/define
  • How to create a file in java without a extension
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • Java applet as stand-alone Windows application?
  • JSON with duplicate key names losing information when parsed
  • Updated Ionic CLI but shows previous version (Windows)
  • Jquery - Jquery Wysiwyg return html as a string
  • XCode can't find symbols for a specific iOS library/framework project
  • WPF Applying a trigger on binding failure
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Conditional In-Line CSS for IE and Others?