What do you need help with?

Best Practices: UI Design

Follow

There are no strict rules as to how an app must be styled on the ODG Smart Glasses system.  Given the novelty of the hardware, developers are encouraged to push existing paradigms and invent new interfaces and interactions that were previously not possible.  Nevertheless, there are several best practices and conventions that should be kept in mind in order to expedite the development of usable interface elements.

Contrast & Colors

The first consideration to keep in mind when designing apps for the Smart Glasses system is the strategic use of color and contrast.  The nature of translucent operating systems is different than the nature of the opaque operating systems of phones, laptops, and tablets.  The color black, for instance, appears completely transparent in a translucent interface.  This can be beneficial at times (to allow a user to efficiently see through a certain segment of the screen) but can also cause problems if it is attempted to be used as a foreground element.  Black letters on a dark background, for instance, will appear nearly invisible to most users.

Screen-Shot-2015-06-16-at-11.40.28-AM.png

ReticleOS's official UI colors.

Conversely, white and other bright colors appear vibrantly in the interface and are easily readable.  While bright colors may be easily seen, the unique design constraints of a heads-up display make bright colors non-ideal for large backgrounds as they may heavily diminish the user’s ability to see the world around them.  For instance, viewing the white Google homepage in the web browser is very clear, but hinders the user’s ability to see anything else in their field of view.

dd.png

Bright colors on dark backgrounds allows for maximum visibility on translucent displays.

Bright colors are often ideal for foreground text and boxed interface elements, while dark colors are often ideal as the background of these elements.  Generally, the more minimal the use of bright colors for essential information, boundaries, and text, the easier it is for the user to efficiently interact with the interface while still remaining cognizant of the physical world around them.

In order to test whether your app has an optimal contrast profile, you should test all the screens of your interface in the most extreme conditions.  Make sure your app is easily usable in a pitch-black room, a normally-lit room, and while staring into direct sunlight.

Interactional States

It is important to keep in mind that there is no “hover” state in an interface that has only directional input, so all buttons and inputs should have a clearly defined “selected” state that visually illustrates that they are the object of the user’s next action.  In ReticleOS, selected states on buttons are represented by filling the background with the border color.  Non-buttons are usually selected with a thick orange border surrounding what is being focused on.

33.png

ReticleOS’s default buttons with their selected states.  We encourage the use of default buttons wherever possible.

When using selectors such as checkboxes and radio buttons, we recommend following ReticleOS's standard of using squares for checkboxes, and circles for radio buttons.   The more you align with the essential design elements of the rest of the interface, the easier it will be for users to get up and running with your app.

Screen-Shot-2015-06-16-at-11.43.39-AM.png

Use squares for checkboxes, and circles for radio buttons.

Gradual Input Degradation

While the Smart Glasses ship with a wireless keyboard and wireless finger controller that can often make the user experience more enjoyable, designers should make certain that applications are 100% usable without the need for any additional inputs beyond the built-in optical trackpad and buttons.  The additional peripheral inputs can be easily misplaced or stolen, and users should not be unable to access certain functionality simply because they are forced to use a different input method.

Generally, we recommend a philosophy of gradually degrading the user experience based on which input is being used.  For instance, a user browsing the web without the wireless keyboard will see a full-screen virtual keyboard over their webpage the moment they click the address bar, while users with the wireless keyboard will not have their viewing experience interrupted when typing a new address.  Both users are able to still use all the functionality of the application, but the experience without additional inputs is gradually degraded.

wev.png

While it is easier to browse the web with the included keyboard, it is not necessary for any functionality.

Scrolling

There is currently no ability to “scroll” in a heads-up interface in the way there is on tablets, phones, and laptops.  The built-in optical trackpad can only register UP, DOWN, LEFT, RIGHT, and CLICK.  While no scrolling is currently implemented, a scrolling-like experience can often be easily created by intelligently designing your software.

For instance, if the user is approaching the last visible item in a text list, the software should register they are approaching the bottom of their viewing window, and load or display the next items in the list as they press DOWN.

list.png

The user approaching the bottom of this list would intuitively click down to scroll.

Text

The default UI text within ReticleOS is 18px.  This is a good baseline for menus and buttons, but based on the context of your application, larger or smaller text may be more useful.  It is important to keep in mind that while the hardware of the optics of the Smart Glasses are customizable to a user’s corrective vision needs, small text will be harder to see for users who are not wearing Smart Glasses with an ideal corrective customization.

email.png

Keeping all text easily readable is vital to designing an accessible headworn application.

 

Have more questions? Submit a request

Comments

Powered by Zendesk