Design Guide

A quick and simple guide aimed at providing fundamental design knowledge as well as establishing some common standards for user interaction.

The guide is broken down into four principle sections: Displaying, Controlling, Interacting, Navigating and Authenticating.

Design Guide

Displaying

This section explores ways of conveying visual information within the augmented-reality world, which can be less obvious compared to traditional screen-based app designs.

Sizing

Object sizing can also be complicated in AR. A good way to think about this is by thinking about objects in real life. When working with objects in AR, always keep a reference on their size and distance from the camera with real life objects. For example, an apple is on average 8 centimeters in diameter and your hand resting on a table is usually around 40 centimeters away.

Colors

In augmented reality, Whiter = Occludes more of the background (user’s environment) and Black = Transparent.

Therefore, if you want the users to see the object, make it brighter. On the contrary, if you want to hide something, you can play with shadows and black. An easy way to visualize this is by trying out the “lighten” overlaying effect on adobe photoshop or by picturing how ghosts are usually depicted in films like the Harry Potter series.

Vibrant colors look great, however, for higher quality visual effects, it is recommended to stay away from an overuse of gradients.

Text

Due to the higher brightness and pixel density, text displayed with Holo Industry can be significantly easier to read when compared to most other head mounted MR devices.

However, text is still tricky business in MR design and should be considered carefully.

Text Size: one of the major influences in text readability is font size. A good rule of thumb is to always keep the size of text above 14px when it is at a distance of two meters away from the user. However larger text sizes are advisable when content is few, as this ensures minimum eye strain for the users;

Font: simple and clear fonts in the family of san-serif is recommended as it requires less pixels for the same readability as the serif type phase.

Text

Most apps are made up of a series of interactable objects that can be summarized with two large categories: selectable objects and movable objects. When using only a single type from the category, almost any combination of hover and select would be enough to satisfy the needs for visual feedback. However, when considering using both at the same time, more thoughts should be put on picking different feedbacks before and during the target and select process.

Selectable Objects: selectable objects are unmovable objects that can usually be hovered on and selected to execute a command.

Selectable Effects in 3D	Exemplar Scenarios
Enlargement / Pulsing	Useful for any floating objects that are not in direct contact with another object.
Brightening / Change in Color	Functional in almost all situations, hence good for standardized feedbacks. Can however be viewed as unnatural or boring in some circumstances.
Object Animation	Vivid and lively especially with organic elements like plant, animal and food.
Colors and Effects on Ray	Serious scenes where objects should remain static and realistic.

Selectable Effects in 2D	Exemplar Scenarios
Brightening / Change in Color	Much of the 2D content will come directly from a native android / windows application, this will remain the most commonly used effect for target and select that users are used to.
Bounding box	Clear and easy to implement. Can be difficult to make artistic and interesting.

Movable Objects: movable objects can be held and dragged or double-clicked and attached to the end of ray for more complex manipulation done via the trackpad. This section considers the visual feedbacks on scenarios where both selectable (non-movable) objects and movable ones co-exist. Therefore, the movable method should be distinguished from the non-movable ones.

Movable Effects in 3D	Exemplar Scenarios
3D Bounding box	The 3D bounding box is the most straightforward way to signify movability. As it communicates configurability in many UI.
3D axis arrows, rotation circle and enlargement cube.	This is the best choice when the users are used to 3D modification programs, and when the application features complex object transforming and requires UI examples of what users can and cannot do during their current selection mode(s).
Different Animation	Vivid and lively especially with organic elements like plant, animal and food.

Movable Effects in 2D	Exemplar Scenarios
Make the Object’s UI Pop Out From the Background	The current method for helping users distinguish movable objects from selectables in 2D environments is to make the UI different or by juxtaposing it so it pops out from the “background” of other selectables
Broken Bounding Box	The standard method for configurable objects in 2D.

Organizing Objects

Plane Table: organizing objects on planes is typically done in a table-like fashion, grouping objects in horizontal rows and arranging these groups vertically. With this setup, scrolling vertically shuffles through rows of grouped objects, which can be scrolled horizontally to go through each individual object.

There are two main ways to scroll through plane tables: dragging the objects vertically or horizontally in the opposite direction or simply swiping in that direction on the touchless pad. For the current version of Holo Industry, the second method is more recommended although both methods can be implemented at the same time.

It is important to give visual cues to unfinished columns and rows where users can still scroll to unveil new objects. These can include faded edges, arrows or other icons indicating unread content.

Cylinder Arrangement: by wrapping the plane table horizontally around the user, one essentially ends up with a cylinder. This is an easy way to make the plane table experience more three-dimensional and fun. However, cylinders that are fully enclosed or have a radius that is less than two meters from the user can cause discomfort.

Sphere Arrangement: when objects are not necessarily grouped by logic, one can use a 3D ball model for organization. The ball should be around five meters in diameter and two meters away from the user. It can spin freely on the angle the user has last released their ray or finger on. This method of object collection gives the users greater freedom and is more complex three-dimensionally.

Clipping Objects

Nothing distracts the user from the MR world like clipping. Although Holo Industry has a forced clipping distance that is only a few centimeters away from the camera, clipping is still inevitable in some situations.

There are ways to smooth out the effects of clipping. For example, instead of the sharp clipping lines on the force clipping area, one can use effects like disintegrating pixels that start fading before the clipping lines and disappear steadily.

Interacting

Targeting

Gaze: the Gaze pointer represents the main interaction tool of the device. It works like the scope of a gun, since it casts a virtual ray starting from the center of the user eyes with forward direction. When the user rotates his head, the device will point any virtual object in front of it. It allows to select any virtual object in front of the user in order to interact with them.

Cursor: the Cursor appears like a little point in the center of the viewport and represents the position the gaze is currently pointing at. It can change its size and color depeding of the selection state:

- When the user selects a virtual object (with gaze) the cursor enlarges itself slightly. If the user does not select anything, it turns to starting size;
- When the user taps on a virtual object, it changes Its color for a moment.

Manipulation

Moving and turning objects around in 3D space is one of the most complicated interaction in AR and requires some degree of learning no matter the controlling method. It is therefore strongly advised to follow this guide for a standardized manipulation logic.

It is possible to manipulate any virtual object in two different ways:

Gaze + Touchless Pad;
Gaze + Bluetooth Controller.

Controlling

This section will explore mediums users can use to convert their thoughts and actions (input) into the augmented reality world.

As of the current version, there are two 3 Degree-of-Freedom hand-held controllers as well as the 6 Degree-of-Freedom head position gaze. Other means of controlling, like 6DoF controllers, voice and hand gesture input are being actively worked on and will be made available in the near future.

Bluetooth controller

The Bluetooth Controller is an ancillary Input device that allows the user to control some features of the Industry+ headset. The scope of this controller is to simplify some operations that can be executed with only the controller, or in combination with gaze.

The controller provides an analog stick and some physical buttons.

The stick and the Confirm button can be used to facilitate the menu navigation and the manipulation of virtual objects. Moreover, the Back button can be used to go back during the navigation of the main menu (launcher) and inside apps, while the Home buttons allows to jump to main menu (launcher) from any position of the launcher and any app.

Gaze

Controlling with the position and direction that the user is facing. It is best to use gaze in coordination with controller methods to enhance user experience. However, on rare occasions where both of the user’s hands are occupied, gaze can be used to provide a dependable way for targeting and selecting.

Features

6 DoF Head Tracking

Suitable for areal attention directing

6 DoF Head Tracking with vision center

Suitable for targeting during extremely light interactions
Suitable for targeting when both hands are not available

Feedbacks

Visual feedback

on areal attention – possible feedbacks include subject enlargement, coloration, and start of animation. This effect is created by including a “not looking” mode where the app is less pronounced when attention is not directed to it. Some apps can go to sleep when they leave attention for a given amount of time.
on enter – possible feedbacks include subject enlargement, change in color, animation from static, and bounding box.
on select – possible feedbacks include subject pulsates in size, brightness, and bounding box color.

on dwell select – display timer over vision center.

Auditory feedback

on enter
on select

Navigating

This section covers basic operations that helps the user navigate through Holo Industry AR system, like how to get from menus to menus, apps to apps.

Quanto segue lo farò formattare in box

Select

Launcher: selezione element tramite scroll + tap;
App Unity: gaze + tap.

Back

Launcher: double tap;
App Unity: prolonged tap (depends on the possibility of prolonged tap). In fact, the concept of back within an app depends a lot on the context.

Menu App

Launcher: not applicable;

App Unity: swipe down (show menu), swipe up (hide menu).

Closing an App

Launcher: come back;
App Unity: Swipe down (show app menu), tap on close app.

Next Step

Launcher: scroll left/right;
App Unity: it depends.

Authenticating

The device offers authentication capabilities through the fingerprint sensors. It allows the user to register and authenticate himself in a quite easy way. This feature is helpful when you want to trace the identity and the performance of your app user.

Third-party compliance

Video Conference: Web RTC, Skype, Cisco Spark, Circuit, Librestream.

AR: Unity, Vuforia Wikitude.

AI, Machine Learning: IBM Watson, Dialog Flow.

Computer Vision, shape and object recognition: Vuforia, OpenCV.

Design Guide

Paragraphs

Displaying

Sizing

Colors

Text

Text

Organizing Objects

Clipping Objects

Interacting

Targeting

Manipulation

Controlling

Bluetooth controller

Gaze

Navigating

Authenticating

Third-party compliance

Keep in touch