Pattern Building Blocks

The building blocks outlined below are used throughout ReconOS. You should get to know them to ensure your app looks, feels, and behaves in a way that’s consistent with the rest of Jet’s user interface.

The Quick Nav menu

This menu appears as an overlay from anywhere in ReconOS—even the activity dashboard—when users press and hold the select button for 1 second. It includes shortcuts to the camera, notifications, music player, smartphone connection settings, and home menu

image30

The Options menu

The Options menu is used to power off the display or shut down Jet. This menu appears as an overlay anywhere in Jet’s user interface when users press and hold the back/power button for 1 second.

image12

Button callouts

Button callouts are used to tell the user what functions the select button, back/power button, and swipe gestures perform. A button callout should always contain two elements: a label and an icon. The icon can represent either a button or an arrow.

Button callouts are not needed when buttons and swipe gestures perform default functions, such as selecting highlighted menu items.

image27

Swipe hints

ReconOS offers multiple types of cues to tell users they can swipe to view additional content.

For vertically arranged content, you should use either arrow indicators or the fade effect.

swipe_hints

For horizontally arranged content, you should use one of the following:

  • Breadcrumb bars. (See the section on breadcrumb bars below.)
  • Partially revealed content. (For example, a menu can partially reveal adjacent menu items.)
  • Explicit instructions. (For instance, “swipe forward.”)

swipe_hints_horiz

We recommend against using arrows as swipe hints for horizontally arranged content. Since Jet’s display sits along a different axis than the optical touchpad, the meaning of the arrows may not be clear to the user. In our testing, we’ve found that some users will interpret a left arrow as a forward swipe, while others will interpret it as a backward swipe.

Notifications

Notifications allow you to communicate information to the user from anywhere in ReconOS. Two notification types are available: interactive and passive.

Interactive notifications appear as full-screen messages that users must either act upon or dismiss (though they do disappear on their own after an X-second delay). Pressing the select button will take the user directly to the app that generated the notification; pressing back/power will dismiss the notification.

You should use interactive notifications only for important alerts.

image26

Passive notifications deliver information that’s less important. They take up less space than interactive notifications, are non-interactive, and disappear automatically after X seconds. When a message inside a passive notification is too long to fit on the screen, the message will be scrolled horizontally.

You should use passive notifications to inform users without interrupting them.

image08

Menus

ReconOS features three types of menus: horizontal, vertical, and read-only.

Horizontal menus list items side by side and are scrolled with forward and backward swipes on the optical touchpad. Horizontal menus are easier to navigate than vertical menus, but they can display less information on the screen. We recommend using horizontal menus for short lists of items.

image10

Vertical menus display items on top of one another, and they’re navigated with up and down swipes. Vertical menus can fit more items on the screen, but they can be slower to navigate. We recommend using them for long lists with many items.

image32

Read-only menus are special kinds of vertical menus. Their items can be either static or dynamically generated, but they cannot be interacted with, aside from simply scrolling up and down. You should use read-only menus to present information that does not require any action on the user’s part.

image37

Modal overlays

Modal overlays appear on top of applications. They typically contain two or more menu items presented over a semi-transparent background. Users must either act upon modal overlays by hitting the select button or dismiss them by hitting the back/power button.

Use modal overlays when you want to present options to users without taking them completely out of your app.

model_overlays

Breadcrumb bars

ReconOS uses breadcrumb bars to tell users they can swipe to reveal off-screen items. Breadcrumb bars are triggered when two or more pages or app panels—or three or more menu items—are on the same list. They become visible as soon as a swipe is registered and disappear automatically after a set amount of time.

The number of breadcrumb bars must always be equal to the total number of items on the list. Also, navigation must always be sequential: the user should only be able to go from one item to the next in a sequence without skipping ahead.

breadcrumb_bars

Feedback overlays

ReconOS uses feedback overlays to notify users when:

  • An action is in progress (e.g. a smartphone is being connected or Jet is shutting down).
  • An action has been carried out (e.g. the user has reset Jet’s stats).

Feedback overlays appear over a semi-transparent background and disappear automatically after a set amount of time. They can include a primary message and a smaller secondary message. That secondary message can provide hints to the user. For example, if the primary message is “Activity Started,” the secondary message could be “Press select to pause.” (In this example, the select icon would be used instead of the word “select.”)

feedback_overlays

 

Next: Styling and best practices

Questions? You can e-mail us or visit our developer forum.