Harman Style Guide Strategies

Strategies describe implemented system behavior to provide app developers information to integrate apps and the features thereof into the system.

Page contents:

System Navigation
Status Bar
Hard Controls
Consistency
Text
Button States, Press Behavior, and Sound
List Navigation and Tools to Find Content
Selecting List Items
Iconography

System Navigation

Main System Category Controls

The system is navigated by category controls. Apps reside in the Apps/More category.
Radio: Access to Radio main page if not currently on Radio main, except if on browse screen and user goes to either Climate or More screen, when pressing Radio again user goes back to previous browse screen not radio main. If on radio main, will cycle through the available radio bands (AM, FM, SXM/DAB).
Media: Access to Media main page if not currently on Media main, except if on browse screen and user goes to either Climate or More screen, when pressing Media again user goes back to previous browse screen not Media main. If on Media main, will cycle through the available (connected) sources (Disc, USB, Aux, BTSA).
Phone: Access to Phone main page (BT connected phone).
Nav/Compass: Access to Navigation main page or compass.
Controls: Access to Controls main page (heated seats, sunshade, etc.).
Climate: Access to Climate main page.
Apps/More: Access to Apps list or More screen (CVP apps, embedded features such as settings).

Audio Attenuation

Apps with audio streaming always take priority over other apps if memory requires apps to be stopped. If an app is streaming audio, and another app is launched which streams audio as well, the most recently executed app wins over the previous app which is stopped. If an app is streaming audio, and another app is launched which intermittently plays audio (e.g. nav prompt, score updates, email reader etc.), the streaming audio app is not stopped. Rather, its streaming audio is paused (if possible) or attenuated.

 

Top


Status Bar

Status Bar

The status bar always appears at the upper edge of the screen and contains information people need, such as the controls status, climate status, the time of day, and the outside and driver/pass temp.
Status bars will be shown when in apps. Do not hide the status bar. Don’t create a custom status bar. Users depend on the consistency of the system-provided status bar.
Streaming audio apps can place the icon and name of the app in the status bar where media and radio information is displayed.
Displayed status bar content for HU OS categories, is de-contented dependent upon which category the user is currently in.
Streaming audio app information would only be displayed when a user is not in a media app screen.
Streaming audio apps must be currently running under the audio arbitration rules to populate the status bar.
A definite number of characters is NOT defined because the maximum number of characters that can be displayed varies with the character width. Margins must be defined to determine how many characters can fit.

Status Bar Content

  • Outside Temp
  • Radio/Media/Call Time/App Information
  • Time (optional)
  • Controls Status (driver/pass heated/vented seat, heated wheel, dual view)
  • Climate Status (driver/pass temp)

Status Bar Shortcut

Touching the Radio/Media/Call Time/App section of the status bar takes the user to the main screen of the current audio source. If the current audio source is an audio streaming app, user is taken to that app’s landing page. This area is inactive during MUTE.

 

Top


Hard Controls

Volume/Mute

Turning Knob = increase/ decrease Volume. Independent of currently shown screen, turning the knob brings up VOLUME POP-UP.
Pressing Knob = toggles between Mute on and off.
When Mute is on, any app audio shall also be muted. Audio streaming apps with Pause functionality shall pause when Mute is active, and unpause when Mute is deactivated.
The following conditions cancel mute status:
Pressing Mute knob again, toggling it off.
Any user action within app which can be categorized as one which deliberately requests audio.
Chrysler HMI must be consulted when categorizing these actions.
Examples of actions which deliberately request audio: Press play, skip to next track, change source, select item from list.
Examples of actions which are not deliberately requesting audio: Browsing a list of content, viewing track info, adjusting settings.

Back Button

The functionality of the Back hard control mirrors that of the Back soft control. If the Back soft control is available on the screen, the Back hard control has the same functionality as the Back soft control in that instance.
If the Back soft control is greyed out on the screen, or is not currently shown on the screen, the Back hard control is inactive, and if pressed error tone is played.

Scroll Knob/Enter

Turning Knob = TUNE up/ down or SKIP to previous/next.
Turning Knob when viewing a list = scroll up/ down a list.
Pressing Knob = open browse.
Pressing Knob when browsing list = select item. If list item is a track, the system starts playing that track and automatically goes to the app’s main screen.

Steering Wheel Controls

Steering wheel controls shall be used where applicable shall be used.
The switches on the left side of the steering wheel shall be defined as follows:

 

 

Top


Consistency

Consistency

Consistency in the interface allows users to transfer their knowledge and skills from one app to another. A consistent app is not a slavish copy of other apps. Rather, it is an app that takes advantage of the standards and paradigms users are comfortable with.

  • The app must be consistent with UI standards.
  • It must use system-provided controls, views, and icons correctly.
  • It incorporates device features in a reliable way.
  • The app is consistent within itself.
  • Text use is uniform in terminology and style.
  • The same icons always mean the same thing.
  • Users can predict what will happen when they perform the same action in different places.
  • Custom UI elements look and behave the same throughout the app.
  • Within reason, the app is consistent with its earlier versions.
  • Terms and meanings remain the same.
  • The fundamental concepts are essentially unchanged.

Feedback

Feedback acknowledges user’s actions and assures them that processing is occurring. Users expect immediate feedback when they operate a control, and they appreciate status updates during lengthy operations.
The apps respond to every user action with some perceptible change.
Subtle animation can give users meaningful feedback that helps clarify the results of their actions. For example, lists can animate the addition of a new row to help users track the change visually.
Sound can also give users useful feedback. But sound shouldn’t be the primary or sole feedback mechanism because users may use their devices in places where they can’t hear or where they must turn off the sound.

User Control

Users, not apps, should initiate and control actions. Although an app can suggest a course of action or warn about dangerous consequences, it’s usually a mistake for the app to take decision-making away from the user. The best apps find the correct balance between giving users the capabilities they need while helping them avoid dangerous outcomes.
Users feel more in control of an app when behaviors and controls are familiar and predictable. And, when actions are simple and straightforward, users can easily understand and remember them.
Users expect to have ample opportunity to cancel an operation before it begins, and they expect to get a chance to confirm their intention to perform a potentially destructive action. Finally, users expect to be able to gracefully stop an operation that’s underway.

Top


Text

Maximum Number of Characters

A definite number of characters is NOT defined because the maximum number of characters that can be displayed varies with the character width. Margins must be defined to determine how many characters can fit on the button, list line item, or title area. Button labels cannot be truncated. Alternate terms or icons may be necessary to fit on a button. If dynamic text does not fit within a list line item ‘...’ is placed at the truncation, ensuring the meaning is still understood and visible lettering is appropriate. Note that translations are typically longer than English words and require more space.

Translation Best Practices

Language translations shall be done using current translations of the core HMI (as possible).
Language translations shall be done with use context, screenshots/models and definition of terms.
The translation service shall provide text based on the available space; this could mean phrases, whole words, or abbreviations.
The translated HMI shall be iteratively user-tested with native speakers for comprehension, with their input being considered for the final translated text.
The translation service shall provide support throughout the translation iterations based on user testing results.

Top


Button States, Press Behavior, and Sound

Button States

Active

Normal: not selected but available.

Pressed

Down State: a user is pressing the button.
Selected: button had been pressed and has maintained the pressed state because it is a selection (Branded highlight color). The pressed state of a button will be the colored based on the brand of the app or in the event that information is unavailable to the application it will be the generic pressed version.

Locked

Unavailable: feature or function is not available for selection.
Buttons for a function that is either unavailable or locked out should have greyed out labels (text and icons). Presses of unavailable icons should play Error tone. If the function is unavailable due to speed lockout (driver distraction), a press should also display the popup “function not available while the vehicle is in motion”.

Button Press Behavior: Long Press and Press & Hold

Store presets: Press & hold preset button for 2 sec. to set new preset.
Seek: Long Press Seek for 500 ms to seek faster.
Skip: Long Press SKIP for 500 ms sec. to FF/RW.
List Navigation: Long Press up/down arrows for 500 ms to move faster. Faster is to advance one page per 500 ms.
Level adjustments: Press & hold of longer than 500 ms causes the system to increment/decrement by at a rate of 1 step each 200 ms.

Action Confirmation Sounds

Distinctive Feedback Sounds are needed for:
  1. Successful activation of touchscreen control (on press) - Success tone
  2. Failed activation of touchscreen control (on press) - Error tone
  3. Preset Set etc. (once set) - Confirmation tone

 

 

 

 

Top


List Navigation and Tools to Find Content

Breadcrumb Bar/Title Bar

A breadcrumb bar enables navigation through an information hierarchy and management of screen contents.
A title bar provides information of screen contents. A title bar usually displays the title of the current screen or view, centered along its length. A title bar can be used to provide context or direction to the user for the content below.

Category Tab Buttons

Category tab buttons are a linear set of buttons that are placed on the left side of the screen. Category tab buttons are typically used with lists. Each of the category tab buttons function to change the list display to a different list view.

List Sorting Tabs

List sorting tabs are used to change the way lists are ordered to enable a user to find a selection quickly.

ABC Jump

The ABC Jump popup tool can enable a user to find content quickly in a list or perform a search for content.

Keyboard

A keyboard is used for typing selections, search items, and other entry text. A keyboard is displayed when a text field is selected or a search button is selected in the currently active category or section of content.

Scroll Bar/Page Up/Down, Scroll Knob and Back Button

Scroll bar functionality and indicator will be used when the list is larger than the vertical display area.
If content on a screen extends vertically beyond the viewing area, scroll arrows buttons appear in the active state.
When a user is browsing or making detailed selections, using the back button takes the user back to the previous list screen.

 

Top


Selecting List Items

Pressed List Item State

The list item will have an pressed state to the indicate to the user that the action is being performed. The pressed state of the list item will have an outer glow utilizing the brand color. When users touch the screen, they interact directly with items on the screen using a finger. When users interact with an item, the highlight helps them identify the item that they are initiating the action on.

List Item Cursor

When users use the scroll knob, they use the cursor to identify the item that they are initiating the action on. Users press the scroll knob to initiate the action and turn the scroll knob to move the cursor in the list. If the list item has selections within it, the user will turn the scroll knob to align the cursor on the item, press the scroll knob to lock in on that item, and then turn the scroll knob to cycle through the selections. When finished, the user presses the knob to unlock the the scroll knob off the current item.

Selecting Behavior

Always provide feedback when users select a list item. After selecting a list item, users expect an immediate action to occur: Either a new view appears or the row displays a focus/highlighting item to indicate that the item has been selected or enabled.
A list row highlights briefly when the user taps a selectable item.
If a row selection results in navigation to a new screen, the selected row highlights briefly as the new screen opens.
If user drills down another path, pressing back provides the user with the previous list position and cursor position.
In most cases, give users only one path to a screen. If a screen needs to be accessible in different circumstances, consider using a modal view that can appear in different contexts.

Pressed Icon State

The icon will have an pressed state to the indicate to the user that the action is being performed. The pressed state of the icon will have an outer glow utilizing the brand color. When users touch the screen, they interact directly with items on the screen using a finger. When users interact with an icon, the highlight helps them identify the item that they are initiating the action on.

Icon Cursor

The icon will have a cursor to the indicate position to the user when they are using the scroll bar to navigate the icon list. The cursor will go to left to the right and down when the scroll knob is turned as they do to go down in a text list. When users use the scroll knob, they use the cursor to identify the icon that they are initiating the action on. Users press the scroll knob to initiate the action and turn the scroll knob to move the cursor in the list.

Selecting Behavior

Always provide feedback when users select a list item. After selecting an icon, users expect an immediate action to occur: Either a new view appears or the icon displays a focus/highlighting item to indicate that the icon has been selected or enabled.
An icon highlights briefly when the user taps a selectable item.
If an icon selection results in navigation to a new screen, the selected icon highlights briefly as the new screen opens.
If user drills down another path, pressing back provides the user with the previous list position and cursor position.
In most cases, give users only one path to a screen. If a screen needs to be accessible in different circumstances, consider using a modal view that can appear in different contexts.

 

Top


Iconography

Iconography

The head unit uses a number of icons across the user interface to create and maintain consistency throughout the head unit experience. Samples of standard icons are shared on this page. This list will inevitably grow and change as the head unit is being developed. The icons can be used layered on buttons or as on screen elements.

 

 

Top