Understanding HCI

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 and are built for rugged environments
  • 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?

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, so 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 where a pen is more accurate.
  • Hand movements (if used with keyboard): Requires that users move the hand away from the keyboard; a stylus also requires 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.

Maintaining Screen Space

As touchscreens usually are of fixed size and screen elements 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

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.
  • 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.

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 than 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.
  • 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 may break and 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 space 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