What do you need help with?

Designing for our R-8 & R-9 Glasses: UI Best Practices

Follow

By Morgan Fritz

Below are a some of our takeaways on designing apps for ODG Smartglasses. The requirements listed describe ODG hardware and software specs to keep in mind. While this article contains our best practices, we encourage developers to build upon this work and continue to invent new methods as we learn more about what is possible in this space. This content is to inform developers for application creation on ODG’s platform.

Design Requirements

Transparency

Take into account that black backgrounds are transparent and white backgrounds are opaque. Please refer to this article for Rendering the glasses "transparent"

Field of View

Plan for the smallest and largest Field of View (FOV) so that space is available, and you can utilize your full available real estate. Is content fixed to the user or sitting in space? If content is fixed to the user and extends past the virtual display size, you will experience clipping. Make sure the maximum that fixed content can extend is within the FOV.

If content is in space either user-orbiting (3-DOF) or sitting in space (6-DOF), consider how user knows content extends past their current view. Does it clip in a sharp cutoff where FOV ends, or do you consider adding some fade to obscure this border? (See “Field of View Edges” section below.)

1._FOV_sizes.png

 

Cursor States

In headtracking interfaces, the user has a cursor in the center of their field of view used to indicate what and how they are interacting with content. The cursor has scrolling, selecting, active and inactive states. To let user know they are performing actions, interchanges these state changes when performing these actions, as an affordance for the user.

2.Cursors.png

Hardware Input

ODG accessories include the bluetooth keyboard and bluetooth finger controller. It’s important to assure content is accessible with and without these tools. We recommend specifying for headtracking, buttons on Smartglasses, bluetooth keyboard, bluetooth finger controller, Reticle Remote Phone App, or a combination of the above.

For example, if a user is in the web browser and selects the address bar, users without a bluetooth keyboard will see a keyboard appear, while users with a bluetooth keyboard paired will not.

3._Phone_app.png

The Reticle App enables your phone to become a virtual, dynamic wireless controller for ODG Smartglasses. Includes a large trackpad area for natural input control, standard Back and Menu buttons that mirror the primary device buttons, an application Launcher to open and switch between applications, settings screen to control parameters, and a dynamically displaying keyboard to allow quick text entry on the glasses.

 

4._speed_mouse.png

The Reticle Speed Mouse is a finger-worn 3D input device for R-7 Smartglasses. The RSM contains a Track Pad, Menu, Back, and Volume buttons that function in the same manner as the buttons on the glasses, as well as four user-programmable speed buttons.

Specs:

-Bluetooth 4.1 (HS, BLE)

-Optical trackpad for 2D cursor control

-9-axis inertial measurement unit for 3D cursor tracking IMU

-Finger detection for auto-sleep mode



5._keyboard.png

Take advantage of its standard gaming controller inputs for an all new, immersive mobile experience.

Launch choice apps on your smartglasses directly from your controller, and utilize as a physical keyboard alternative for quick data entry.

 Specs:

-Sensors

3-Axis Mag

3-Axis Accelerometer

3-Axis Gyro

Ambient Light Sensor

-Wireless

Bluetooth® 4 .1 (HS, BLE)

Wireless Range of 10 Meters in Open Air, 5 Meters in typical Office -Environment

-Compatibility

ODG Reticle OS™

Microsoft™ OSX 10.10+

Mac® OSX 10.10+

Android™ 4.4+

 

7._R-9_Glasses.png

 [R-8 view coming soon...]

 

Design Best Practices

Usability

ODG Interface Structure

Button placement for usability should generally rely on the lower third for primary interactions (between 0° and 13° below neutral gaze). A user’s range of motion is stronger and much more accurate at a lower region, and degrades at higher angles.

In ODG Headtracking applications, primary navigation (categories, main menus, etc.) sit as tabs directly above the home buttons (around 9° to 13° below neutral gaze). For user consistency, navigation in this manner is understood and easily recognized.

8._FOV_angles.png

9._Layouts.png

Scrolling

Within ODG Applications, scrolling is indicated by a lowered opacity on the ends of content. When the user hovers over these regions, content will immediately begin to scroll, and cursor will become an arrow to indicate action.

10.Scrolling.png

Keyboards

Our Headtracking SDK includes a linear keyboard for any headtracking enabled applications. We also have a standard keyboard used for non headtracking inputs.

11.Keyboards.png

Icons

For consistency across applications, the same icons are used to indicate available actions. These will typically appear on the top or right side of an application’s content. You can also utilize these icons for familiarity.

12._Icons.png

Z-Index

Content should intersect cursor at same Z-index so that user’s eyes can converge at same distance, and neither will appear blurred or cause discomfort. Similarly, avoid rapid and/or frequent distance changes for user’s focus, such as switching between far away and close UI elements.

12.5_Z-Axis.png 

Layout & Field of View

Content Placement

Be intentional when obscuring user’s primary region of vision. Consider the application’s use case. If the user is watching a movie, for example, they may be walking around or sitting on the couch. Consider the level of immersion you intend for the user.

Display Edges

The displays in R-8 and R-9 Smartglasses have a “safe zone” we recommend to keep content within, especially content requiring high readability such as text or icons.

R-8FOV.png

R-9FOV.png

Field of View Cutoff

Use the “portal” method to eliminate harsh borders revealing the Field of View cutoff. Create an opacity blur on edges of Field of View real estate. This allows users to see content end, but they will not experience a “cut or clipping” of content, but instead, a fading out of content as it reaches the end of the screen. This helps create an illusion of continuous real estate instead of a fixed screen size.

13._FOV_Portal_Copy.png 

Functionality

Selection Methods

We use four distinguished selection methods across ODG applications to maintain consistency and ease of use for users. These interactions are learned and easily recognized by ODG users. Below are examples of each, describing the stages of the selection animation.

14._Selection_Methods_Copy.png

15._Selection_Methods_Copy_2.png

16.Selection_Methods_Copy_3.png

17.Selection_Methods_Copy_4.png

Accessibility

Text Sizing

Reference the ODG Style guide for our recommended minimum and maximum text sizing and fonts for best legibility.

18.Typography.png

Color Contrast

Check that colors allow for user legibility. Keep in mind color renders differently on AR Smartglasses, due to transparency of AR, and the brightness and saturation of a color. Be sure to continuously test by viewing in the glasses as you make visual design decisions.

 

Application Icon

Your app icon size should be 75px, or 50dp. We use Zeplin to translate some design content. Within Zeplin, set your type to Android, and Screen Density to hdpi. This will give you the same pixel to dp conversion to what we specify.

 

Icon Sizing

Similar to our text sizing, Selectable content needs to be both legible to viewers and easily selectable through both headtracking and physical inputs.

19._Sizig.png

We recommend that any clickable asset (or anything the user is expected to hover over and select) should be no smaller than 40px, or generally at least 33% larger than the cursor. Line thickness and detail also play significant roles. Test icons against a variety of environment lightings, and account for effects of motion.

 

ODG Apps also utilize a grow on hover in our interfaces to provide a larger clickable region for the user. The grow size is typically 110% or 125% depending on asset’s original size.

20._Spacing.png

Spacing

To avoid accidental clicks, space allows for resting places for the cursor to sit idly while the user views content. Consider the size of the asset to assess necessary spacing. If the button is large say, 300 x 150px, it may not need much space since it is an easy target. However a 40px icon will take more precision to select, so should have more space surrounding to allow for a grow on hover, or to avoid accidentally clicking its neighbor.

 





Have more questions? Submit a request

Comments

Powered by Zendesk