Link Search Menu Expand Document

Instructional Information

Table of contents
  1. The “Call to Interact”
  2. Why is an instructional video or animation important?
  3. Designing your own instructional video or animation
    1. Include the word “Touchless” as a large title
    2. Show a virtual screen
    3. Clearly represent the hand pose and motion
    4. Show the on-screen cursor synced with hand motion
    5. Include a short text instruction
    6. Play video or animation on a loop when the kiosk is not in use
  4. Footprints
    1. Why are the footprints important?
    2. Placing the footprints
  5. Signage
    1. Why is signage important?
    2. Installing nearby signage
    3. Creating an instructional panel
  6. Summary of Recommendations

The “Call to Interact”

For first-time users of touchless, self-serve kiosks, there is a lot to learn in a very short space of time. Naturally, we want every customer to have a smooth, engaging, and successful first experience. To achieve this, we have to work hard to help them get to grips with touchless interaction, quickly - something which is very different to the familiar use of a touchscreen.

We need to cater for a wide demographic of first-time users in a busy, unpredictable, and time-pressured scenario. This of course means people will have less time, less tolerance for any issues in use, and more distractions. It is vital that we include instructional elements which assist as much as possible.

At Ultraleap, we call this collection of instructional elements the “Call to Interact” (or “CTI”), and it comprises of:

  • An instructional video or animation
  • Footprints (stickers or mat on the floor)
  • Signage
  • Nearby signage
  • Instructional panel

These elements can help users recognize that the kiosk is touchless as they are approaching it, and offer guidance whilst they are using the kiosk.

TouchFree user journey at a touchless kiosk

This combination of elements comprising the Call to Interact aim to should signify the following to users as they approach the kiosk:

  • That the kiosk is touchless
  • Where users should stand
  • Where users should position their hands
  • What hand pose and motion is required

Ultraleap has been researching the details of the instructional information provided to users in interactive, touchless experiences and looked in depth at the details which are successful. Whilst visual style, colours, and details can be tailored to suit the overall experience, in these guidelines we give details about the key features of these components, which we recommend are included wherever possible.


Why is an instructional video or animation important?

New users learn by watching and mimicking what they see. We have found a short, instructional video or animation (5-8 seconds long), played on-screen when the kiosk is not in use, draws a user’s attention and helps educate them on what they need to do.

As a user approaches the kiosk, the instructional video or animation will play until the user performs the correct interaction type for the kiosk, allowing them to practise before the regular kiosk experience begins.

TouchFree user at a touchless kiosk TouchFree user at a touchless kiosk
User approaches the kiosk and notices the instructional video or animation. User raises their hand to begin the interaction. The cursor appears on the screen and follows the user’s hand.
TouchFree user at a touchless kiosk TouchFree user at a touchless kiosk
User performs the correct interaction type (Air Push or Hover & Hold) following the instructional video or animation. Once the correct interaction type is performed the instructional video or animation disappears and the screen progresses to the regular kiosk experience.

The instructional video or animation could be a video of a person or an animated model interacting with the kiosk. The visual style can be adapted to fit your brand. However, we recommend including the following key features in any design:

  • Include the word “touchless” as a large title
  • Show a virtual screen
  • Clearly represent the hand pose and motion
  • Show the on-screen cursor synced with the hand motion
  • Include a short text instruction
  • Play video on a loop when the kiosk is not in use

These recommendations are explained in more detail below. The instructional animations below are free to download and can be adapted for your own purposes. They are also included with TouchFree.

TouchFree Air Push touchless interaction at public touchscreen TouchFree Hover and Hold touchless interaction at public touchscreen
Instructional video for Air Push Instructional video for Hover & Hold

Designing your own instructional video or animation

Include the word “Touchless” as a large title

We have found that including a large title saying “touchless” is the most effective way to communicate to users that the self-serve kiosk is not a touchscreen.

The title should be large and placed it at or below eye height so it is readable from several metres away and will be noticed upon approach. If possible, use bright colours or bold text to make this stand-out and help ensure it is read first.

Standing eye-height for able-bodied users ranges between 1.35m and 1.8m (4.5ft - 6ft), and wheelchair users have an eye height of around 1.15m (3.8ft).

Touchless CTA on public screen

Show a virtual screen

In the instructional video, showing a virtual screen in front of a physical screen is a strong indicator that the interaction is touchless. It highlights the gap between the user’s hand and the screen and helps the user understand where they need to place their hands to interact.

We recommend:

  • Showing a virtual screen in front of the physical representation of the screen
  • Using a side-on view of the screen and hands to emphasize the gap between the hands and the screen
  • Optional: showing a distance marker between the hands and the physical screen. To configure this distance for your kiosk refer to the Setup Guide

Virtual touchless screen diagram

Clearly represent the hand pose and motion

It is important to clearly show the hand pose and motion the user should use in order to make selections with the touchless kiosk. We have found some users will closely copy the hand pose and motion displayed in the instructional video or animation.

Remember that the instructional video or animation should only be 5-8 seconds long to ensure the it can communicate information quickly to users.

See specific recommendations for each of the interaction types below:

Air Push Air Push works by recognising a user’s forward hand motion and can be used with a range of hand poses. For the instructional video or animation we recommend showing a pointed hand pose with the following features:
  • The index finger is pointing
  • The other fingers are in a slightly open position
  • Avoid showing the fist as tightly closed
  • Demonstrating the hand motion as a short “tap” towards the screen to perform the selection
  • Showing a bend in the user’s arm, to indicate they do not have to perform the motion with their arm outstretched
Ultraleap testing has shown that users will intuitively approach the touchless kiosk with this hand pose as it is the most similar to that used for touchscreen interactions.


Hover & Hold Hover & Hold works by performing a selection when a user holds their hand still over a selection. It can be used in a range of hand poses. For the instructional video or animation we recommend showing a flat hand pose with the following features:
  • The palm is facing down
  • The fingers are positioned close together
  • The hand is horizontal
  • Demonstrating the hand motion as holding the hand still to perform the selection
  • Showing a bend in the user’s arm, to indicate they do not have to perform the motion with their arm outstretched

Show the on-screen cursor synced with hand motion

This helps the user understand that the on-screen cursor is controlled by their hand motion.

See specific cursor recommendations for each of the interaction styles below.

Air Push The cursor for Air Push includes an outer circle that contracts and expands as the user moves their hand forwards. As the hand moves forward, the cursor locks in place. We recommend representing the cursor performing this way, with:
  • The cursor following the user’s hand
  • The cursor becoming smaller as the user’s hand moves forward
  • The cursor locking in place as the hand moves forward
Visually, you may need to make the cursor appear proportionally larger than it actually is in TouchFree so that you can see the changes to the cursor in the instructional video or animation.


Hover & Hold The cursor for Hover & Hold includes an animation that plays a small “ring” graphic that fills around the central cursor dot. We recommend representing the cursor performing this way, with:
  • The cursor following the user’s hand
  • The “filling” graphic beginning when the user holds their hand still
  • Displaying a short ‘pulse’ animation when the “filling” is complete
Visually, you may need to make the cursor appear proportionally larger than it actually is in TouchFree so that it can be visible to the user.

Include a short text instruction

Include a short, unambiguous, single-sentence text instruction describing what users must do to proceed. This should match what is being shown in the animation graphic. As there is a lot of information presented to the user, we have found some users may not read the instruction at first, but they may pay more attention to the text instructions if they are unsure what they need to do.

Carefully consider the wording used to avoid confusion with touchscreen operation. For example, we have found that the phrase “Push to Start” leads users to expect a touchscreen action.

We recommended the following phrases for each interaction type:

Air Push: Push in mid-air to start

Hover & Hold: Hover and hold in mid-air to start

Play video or animation on a loop when the kiosk is not in use

The instructional video or animation can be utilized to help users know how to use a touchless kiosk even as they are approaching it. For this to be the most effective, Ultraleap recommends that the CTI video is:

  • Between 5-8 seconds long, played on a loop when the kiosk is not in use
  • Played until the user performs the hand pose and motion correctly

Footprints

Why are the footprints important?

For many first-time users, it can be difficult to know how far away to stand to successfully operate the kiosk. Without guidance, they may stand too far back. This can lead to hand tracking being lost.

Ultraleap recommend a clear indicator on the floor of where users should stand, wherever feasible. Our own user tests have indicated that simple footprints - either on a mat or vinyl sticker - are effective for the following reasons:

  • They help draw users over to the kiosk because they can been noticed from a distance.
  • They indicate that the kiosk offers touchless interaction trough the suggested standing position.
  • They guide the user into the optimal position for using the tracking or haptic modules.

This results in an increased chance of people positioning themselves at a suitable distance from the screen and being able to use the kiosk properly.

Footprints on a mat to show positioning for touchless screen

Placing the footprints

Floor stickers or mats with footprints can be an effective way to direct users to stand in the optimal position. Ultraleap recommends the footprints are:

  • Placed on the floor where you want the user to stand
  • Bright and colourful to attract the user’s attention
  • Non-slip to ensure user safety

Footprints on a mat to show positioning for touchless screen

Example of footprints placed in front of a touchless experience


Signage

Why is signage important?

It is important to consider what signage you are able to implement in the environment. It can influence users’ expectations about self-serve kiosk experiences before they have reached the kiosk itself, and assist users while they are using the kiosk.

In addition to the instructional video (which is only available at the start of the experience), we recommend providing:

  • Signage upon approach to the kiosks
  • A printed instructional panel mounted to the side of the kiosk, as an always accessible guide

It is also important to identify any extra support you may be able to offer your users for the initial period when TouchFree is introduced that can help users build their confidence. For example:

  • Extra instructional panels displayed where customers are in the queue
  • Offer a “test” kiosk where customers can practice
  • An employee on standby who can assist customers

Installing nearby signage

Ultraleap recommends updating old signs and including additional physical signs in the environment to direct users to the touchless kiosks. This can help users be prepared to use a new technology when they recognise the word touchless. Ultraleap recommends:

  • Referring to kiosks as “touchless” in all signage
  • Adding extra signage near the queueing areas

Creating an instructional panel

The instructional panel aims to complement the instructional video or animation. The information on the instructional panel should be clear and concise and indicate:

  • Where users should stand in relation to the kiosk
  • How far away from the kiosk user’s hands should be
  • The hand pose and hand motion required to interact with the kiosk

Ultraleap recommends that the instructional panel:

  • Is mounted at eye height, which is between 1.35m and 1.8m (4.5ft - 6ft) for able-bodied adults and 1.15m (3.8ft) for adult wheelchair users.
  • Includes short text instructions and visual diagrams of users interacting with the touchless kiosk.
  • Text is large enough to read from around 1 metre away. We recommend a minimum 14-point size font for the detailed text instructions and 36-point font for titles.
  • If footprints on the floor are installed, then these are shown in the images on the panel.
  • Demonstrates the interaction users need to perform to make a selection.
  • Information presented is consistent with what it is shown in the instructional video or animation. Ensure that the cursor, hand pose and motion match the instructional video or animation.
Instructional panel for Air Push Instructional panel for Hover and Hold
Instructional panel for Air Push Instructional panel for Hover & Hold

Summary of Recommendations

Instructional Video

  • Include the word ‘touchless’ as a large title
  • Show a virtual screen
  • Clearly represent the hand pose and motion
  • Show the on-screen cursor synced with the hand motion
  • Include a short text instruction
  • Play video on a loop when the kiosk is not in use

Footprints

  • Placed on the floor where you want the user to stand
  • Bright and colourful to attract user’s attention
  • Non-slip to ensure user’s safety

Signage

  • Refer to kiosks as touchless in all signage
  • Add extra signage near the queueing areas

Instructional Panel

  • Is mounted at eye height, which is between 1.35m and 1.8m (4.5ft - 6ft) for able-bodied adults and 1.15m (3.8ft) for adult wheelchair users.
  • Includes short text instructions and visual diagrams of users interacting with the touchless kiosk.
  • Text is large enough to read from around 1 metre away. We recommend a minimum 14-point size font for the detailed text instructions and 36-point font for titles.
  • If footprints on the floor are installed, then these are shown in the images on the panel.
  • Demonstrates the interaction users need to perform to make a selection.
  • Information presented is consistent with what it is shown in the instructional video or animation. Ensure that the cursor, hand pose and motion match the instructional video or animation.