Touchscreens

Touchscreen Systems are:

• Systems requiring pointing and selection only
• For advertising, product information
• As public information systems, for example, in museums, as city guides
• Kiosks are typically embedded in some sort of cabinet, so that they can stand alone. They are built for rugged environments and simple point-and-click interaction.
• Use a simple point-and-click interface
• Animation and large fonts help attract users to kiosk applications. The kiosk design (cabinet) should also be attractive
• Touchscreen devices can be used for advising customers or clients. This can happen together with a consultant like a physician or a salesman, or the users do this alone.
• Images and photos can be used for illustration (esp. in museums)

Discussion 1

1. What are the similarities and differences between keyboard and touch screen interfaces?
2. What sorts of applications are better suited to touch screens? Why?
3. What potential disadvantages have touch screens compared to keyboards?

Factors Influencing Touch Screen Performance

1. Speed of performance is inversely related to accuracy - increasing the speed of performance means sacrificing accuracy.
2. Referred to as the Speed-Accuracy Tradeoff - important consequences for human/computer interactions.
3. How much a sacrifice is acceptable depends on the demands of the particular situation
   1. in some applications it may be desirable to sacrifice accuracy in order to increase the speed of performance, because errors are not particularly costly, or are easily corrected.
   2. in other applications, errors may be extremely costly, and must be avoided.

Touchscreens are Best Suited to Applications Where...

• Opportunity for training is low
• Frequency of use per person is low
• Accurate positioning is not required
• Little or no text or numerical input is required
• Desk space is at a premium

And Not Suited to Applications...

• Requiring training/trained users
• With high-frequency use per person
• Requiring accuracy
• Requiring a lot of typing

Touchscreen Pros

• Direct: Direct pointing to objects, direct relationship between hand and cursor movement (distance, speed and direction), because the hand is moving on the same surface that the cursor is moving, manipulating objects on the screen is similar to manipulating them in the manual world
• Fast (but less precise without pen)
• Finger is usable, any pen is usable (usually no cable needed). No keyboard necessary for applications that need menu selections only -> saves desk space
• Suited to: novices, applications for information retrieval, high-use environments.

Touchscreen Cons

• Low precision (finger): Imprecise positioning, the finger may be too large for accurate pointing with small objects -> a pen is more accurate.
• Hand movements (if used with keyboard): Requires that users move the hand away from the keyboard; a stylus requires also hand movements to take up the pen.
• Fatigue: Straining the arm muscles under heavy use (especially if the screen is placed vertically).
• Dirt: The screen gets dirty from fingerprints.
• Screen coverage: The user's hand, the finger or the pen may obscure parts of the screen.
• Activation: Usually direct activation of the selected function, when the screen is touched; there is no special "activation" button as with a light pen or a mouse.

Touchscreen Design

Screens

• Full screen - Applications should be run full screen.
• Backgrounds - Bright background colors (no black!) hide fingerprints and reduce glare. Dithering or other patterned backgrounds help the eye focus on the screen image instead of reflections, even in areas where there are no icons or menu choices
• Handedness - As many users are left-handed, the screen layout should be switchable between a version for right-handed users and a version for left-handed users.
• Screen Reversal - The screen reversal should affect mainly the large building blocks of the screen layout. Whether the controls themselves should also be mirrored, depends on how much interaction is adversely affected by the standard layout of the control. For instance, it depends on, whether a standard control is obscured, if operated with the left hand.

Placement of Screen Elements

When you divide the screen in functional areas and place elements on the screen, observe the principle of location constancy. Keep functional areas stable, e.g. use fixed areas for data display, input, buttons (especially keep the navigation buttons constant), and status display. However, as screen space usually is limited, you may exchange GUI elements within the fixed functional areas.

Maintaining Screen Space

As touchscreens usually are of fixed size and screen element have to be large enough to be operable by fingers, screen space is at premium with touchscreens. Here are some proposals for overcoming the space limitations of touchscreens.

• A tabstrip can be used to virtually enlarge a screen by providing a device that enables the users to switch between different views. A tabstrip consists of a "tab area" which contains buttons for switching the view, and of a "presentation area" which is usually of fixed size (it may be scrollable) and displays the different views. Suited to manual selection of items with finger.
• Switchable Areas - A similar technique consists in assigning certain screens areas to fixed functions like data display, function key area, keypad area etc. Push buttons can be used to exchange to elements in such a fixed area, for instance to switch between different list views , different versions of a keypad , different button sets or groups

Screen Changes

Users may navigate between screens which, for instance, provide access to different components of a compound data object. However, this technique may provide problems for non-professional users - they may loose orientation and may have problems processing their tasks. Therefore,

• give the screens a consistent layout and look, so that users perceive them as a unity
• make clear which the navigational options are, e.g. how users can proceed and backtrack
• limit the number of screen changes to a small number

Do Not...

• Do not make the screen scrollable like long HTML pages!!!
• Do not use a multiple-window interface

General Interaction Issues

• Use: a simple point-and-click interface with large buttons.
• In general do not use: dragging, double-clicks, scroll bars, dropdown menus, multiple windows, or other elements that can confuse the common user and interfere with usability and efficiency. There are guidelines for the use of some of these further on.
• Cursor: Turn the cursor off - user will focus on the entire screen instead of the arrow and their thinking and action will be direct instead of indirect.

Buttons

As touchscreens are mainly used for point-and-click applications, most touchscreens are filled with pushbuttons and areas for data display and entry. Therefore, buttons play an important factor in the design of touchscreens.

• They should be a minimum of 3/4 by 3/4 inch (2*2 cm) and at least 1/8 inch (3 mm) apart for finger-operated touchscreens.
• Use large and discrete targets that are spread out on the screen
• Buttons should give some sort of feedback as to their state (on/off, active/inactive, activated (transient), etc.)
• Immediate feedback is critical to reassure the user that their touch registered.
• Visual feedback (highlighting, 3 D-effect) should occur in response to button presses.
• Auditory feedback (click, ...) is sometimes also appropriate.
  

Note: Nowadays, feedback is often given, while the mouse pointer is over the pushbutton. However, this behavior cannot be implemented on touchscreens!

Data Entry

Entering values can become very tedious on touchscreens. Value entry should be restricted to few values. The basic interaction modes are:

• Multiple Clicking - Spin Buttons and scroll buttons need less space than discrete options, but require users to click several times or even cycle through the possible values or options.
• Dragging - For mouse-operated or pen-based systems, dragging is a valid and often efficient option. For finger-operated systems, however, these options should be avoided, if possible. Drag operations are imprecise, relatively slow, and smear the screen surface. Sliders and scroll bars are ways to set discrete or continuous values. These options are better suited for large and/or continuous value ranges.
• Numbers and Letters - Touchscreens are not well suited for data entry. In addition, there are few touchscreens which provide an additional external numeric or alphanumeric keypad.. Data entry is typically provided through virtual keypads or keyboards, which can be placed on the screen on demand. For applications where numbers or letters are frequently entered, the virtual keypad should stay permanently on the screen.
• Key arrangement for text entry: Alphabetic keyboards on the screen may have a different order that usual typewriter keyboards. Make the keyboard layout switchable or even customizable. Users may not be proficient typist and are not familiar to the typewriter keyboard layout. A different ordering, e.g. alphabetic, may be better suited for them. Use the standard layout only when people are used to it and find the keys faster with this layout.
• Minimize text entry: The conventional keyboard layout is not optimal for 10-finger typing. Alternative layouts have been proposed, but are not widely used. Both, the alternative and the standard layout are used for multiple-finger entry. This is not the case with touchscreens. Here people use just one finger, which slows down text entry considerably. Therefore, keep text entry to a minimum or better even avoid it totally on touchscreens.

Scrolling

With touchscreens, it is easier to scroll by pointing than by dragging. Therefore:

• Do not use conventional scroll bars, even if they are enlarged, but to use simple pushbuttons instead. Especially, do not use a "thumb" for scrolling the list by dragging.
• In addition, the scroll buttons may may a repeat function. The repeat function should start after a predetermined delay (not too long), and then repeat the scrolling while the screen is touched
• Scroll buttons should follow the usual guidelines for buttons. Better make them larger than too small
• Do not use scrolling for the screen itself, but only for data display, i.e. for fixed areas on the screen. At best, do not use any scrolling at all.
• In some cases you can replace scrolling through controls that display only a part of the items or functionality on the screen and that allow for easy switching between the views by pointing to buttons. A tabstrip is such a screen element.

Metaphors

Metaphors provide users with a familiar environment on the screen. This allows users to transfer prior real-world knowlegde to an application: they learn new applications faster and relearn rarely used applications easier.
So, metaphors might just be THE solution for touchscreens where users are often untrained. However, there are also some caveats:

• Metaphors make break and thus confuse users, because they require interaction that does not make sense to the users, or they make the application behave unexpectedly.
• Often applications are abstract, and there is no suitable real-world metaphor available.
• Metaphors may waste precious screen space, because the graphical elements that maintain the metaphor (e.g. a room) need room to be realistic enough.
• The graphics for the metaphor may be too detailed to allow fast orientation and operation.

Exercise

Read 'Designing a Touch Screen Kiosk for Older Adults: A Case Study'

Given the points we have discused in class, in small groups of 2/3, analyse the design of the fitness tracking system.

1. Identify, with reasons:
   1. Good features of the system
   2. Features which could be improved
2. Suggest improvements to the system

Using an image editing programme, do a quick mockup of the improved system.

Further reading

http://psychology.wichita.edu/surl/usabilitynews/2W/touchscreen.htm

. CSS . XHTML . WCAG AAA .

created & designed by Vivienne Trulock for ilikecake