Hover States¶

User interfaces feel so much more alive with reactive hover states. TouchFree provides the ability to add hover states to your content to make it even more engaging than it was previously. This can either be used with TouchFree or making touchscreen content reactive to the users hand before they touch.

Hover states provide benefits in terms of both usability and engagement. Users feel so much more engaged when content is visually reacting to their hand.

Users expect the behaviour of UI elements to react and match the action of their movements. Buttons styled and behaving in a 3D way responds to the depth of AirPush and TouchPlane, increasing intuitiveness of those interactions.

Shows buttons growing and glowing green when hovered

Focus Feedback¶

Clear, visual feedback communicates to the user that they are focused on an interactable element. This aids usability and makes the interface alive, reacting to the users presence and motions.

Small Button Convenience¶

Intent can be used to make smaller interactable content larger. When the user moves their hand over smaller interactable elements, those elements can grow, making them easy to click. Utilising hover states in this way unclutterers the interface and provides appropriate prominence for individual elements at appropriate times.

Engagement¶

Interactable content is so much more engaging when it reacts to a users hand movements. Users feel like they have much more agency over the UI and the opportunities are endless in terms of what the hover states can be. They can be used to improve the user experience, make it more fun, memorable and for transactional use cases these can be used to highlight and promote items of interest such as new or featured items.

Shows button displaying information when hovered — Contextual Info¶

Shows button with a 3D model that rotates when hovered — 3D Spin¶

Shows button with a video that plays when hovered — Video Preview¶

Shows button with a background that is revealed when hovered — Reveal Background¶

Shows button with animated characters that plays when hovered — Character Animation (image by jcomp on Freepik)¶

Contextual Information¶

Hover states can be used to show extra information at appropriate times. Hiding it away when not needed and showing it when it is useful to the user in making a decision.

Shows buttons that reveal calorie information when hovered

Shows a button with an image of food that expands to show the ingredients when hovered — Explode¶

Area State Change¶

When the users hand moves over an intractable area of the screen, a state change can encourage users to interact. This reactive state change provides an extra layer of immersiveness while requiring no effort from the user. It can also be used to give more value on top of the idle content, by telling story, setting the scene or anything else you can think of.

Shows an animation of a watch expanding when the cursor enters the area

Element State Change¶

A low effort interaction for users is a state change on entry to a context area. This can be used as a low effort way to aid people in understanding how to onboard people with the concept of TouchFree by moving their hand in mid air to affect content on screen.

Shows an animation where tiles are flipped as the cursor enters them

Augmented Touch¶

Any traditional touchscreen can be retrofitted with a 3Di camera and TouchFree to add reactive hover states while keeping the experience purely touchscreen with no touchless interaction required. This has immense benefits in terms of user engagement and usability while being totally risk free.

Shows an animation of a person using a touchscreen with hover states enabled by TouchFree