Instructional Information
Table of contents
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.
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.
 |  |
|---|---|
| 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. |
 |  |
|---|---|
| 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.
 |  |
|---|---|
| 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).
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
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
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
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
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.
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
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 & 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.