Design Components

This section defines commonly used controls and images such as buttons, slider, picker, error handling, and easy set up and visual design provides recommendations of colors & icon usage, typography, and layout rules.

Providing a consistent user experience is important since familiar interface makes users feel comfortable when using multiple IoT devices created by different developers. Following the style guide will guarantee to create a delightful user experience for SmartThings app users.

Download Components.psd

Buttons

Usage

Buttons are used to perform certain actions. They can be shaped differently according to your needs, and mainly consist of text and images. To ensure a consistent user experience in SmartThings app, it is recommended that you use the following styles for buttons.

Style

Style1 (solid white + shadow)

Use this style for buttons that emphasize control functions in the Hero card on the first page of a plug-in. Don’t use too many of them on one screen and use them only on buttons that need to attract users’ attention. Button Style1 uses a white-colored image and a rounded edged shape, including circles and has a subtle shadow to it. A button can include text or an image, and we recommend that you apply the primary color to it.

Style1 (solid white + shadow)

Style2 (flat text)

This is the most commonly used button type. To ensure that users can distinguish the difference between general text and text on a button, clear feedback should be provided when the button is pressed, and an instant response should be displayed on the screen at the same time. We recommend that whenever possible you use the primary color for a button to distinguish it from surrounding text, and for deactivated buttons, use an opacity level lower than that of existing buttons.

Style2 (flat text)

Style3 (flat image)

Design buttons using colors that can easily be distinguished from the background color an image or icon is placed against. Provide clear feedback when buttons are pressed or an instant on-screen response like Flat text buttons appears.

Flat TextStyle3 (flat image)

Style4 (line frame)

For drop-down buttons that change the mode of items displayed on the Hero card or changes to the filtering method, use a rounded rectangular. The length of a frame is adjustable depending on the length of text.

Style4 (line frame)

Slide up

Usage

Slide up refers to a component that fills the screen from bottom to top to perform a certain action, and includes two or more optional conditions associated with the current context. Lay out available options clearly so that users can perform tasks in the direction they want. You can use elements such as radio button and checkboxes.

Cancel and Save Buttons

You can add a Cancel button at the bottom. If you use a Slide up component that offers two or more options, provide a Save button.

No Scrolling

The selectable options included in the body of a Slide up component shouldn’t exceed the length of the screen. If there are too many options and scrolling is expected, provide a new page instead of using a Slide up component.

Avoid scrolling for a Slide up component.

Avoid scrolling for a Slide up component.

Elements

A Slide up component is divided into Title, Body, and Lower Button areas. The following elements can be included depending on the conditions you wish to receive from the user.

Elements

Picker

Usage

SmartThings app uses a Picker to define Date, Time, Day, Color, etc. In most cases, a Picker is filled from the bottom to the top similar to a Slide up component, but if necessary it can fill the entire screen. A picker enables users to choose a desired result value by focusing it on each picker. Clearly mark the result value using colors so that the result in focus stands out from the rest of the values. When displaying a narrow range of values, such as Day or Time, a wheel metaphor interaction is used. Date or Color values may cover the entire Picker area.

Types

  • Date picker (full month/wheel)
  • Time picker (12h/24h)

Time picker

Error Screen

Usage

Use an Error screen to alert users when the current app is in an abnormal state. Error screens must be displayed on a new page containing an Error icon with the Title of the error. Error icons are distributed as System icons.

The Error screen must include an Error icon.

The Error screen must include an Error icon.

Elements

The Error page must include an Error title and the Error icon commonly used in SmartThings app. An Error code, Error description, and Service Call button may be included if desired.

  • Error title
  • Error icon
  • Error code (optional)
  • Error description (optional)

Elements

Device off

Usage

When a device is turned off, the information and control buttons in the existing Device Plug-in Hero card area should be dimmed or disappear, then a new screen should appear. When the Off screen appears due to a page change, provide users with clear feedback that includes both text and images, and dim the Power button and switches in the Device information card. When the opacity setting of an element currently turned on is at 100%, when turned off, we recommend dimming it to a value ranging from 20% to 30%.

Elements

When the information in the Hero card is not dimmed and appears on a new screen instead, the information and control buttons in the existing Hero card should disappear, and the following elements should be center-aligned:

  • Title: Display the Device off text below the icon.
  • Icon: Place the Device icon inside the gray (#e3e2e2) circular image in white (#ffffff), and avoid aligning the Device off icon randomly.

The Device off icon used for air conditioners

The Device off icon used for air conditioners

An illustrated Device Off icon must be placed inside the circular image in #ffffff color.

An illustrated Device Off icon must be placed inside the circular image in #ffffff color.