Lists

Harmony supports two basic List types: Basic Lists and Complex Lists.

Basic Lists

See the Pen Lists by Harmony Design (@harmonydesign) on CodePen.

Web

Appearance & Behavior

Basic Lists

Basic Lists contain a set of items displayed in rows, where each item is represented as a text label. Depending on the purpose of the list, each row may also be accompanied by a control. The user can also select a row to perform an action on the corresponding item.

lists_dia_basic-list

A basic list

lists_dia_basic-list-checkboxes

A basic list with checkboxes

 

Complex Lists

Complex Lists contain a set of items displayed in rows, where each item is represented as a text label. The rows in a Complex List contain multiple pieces of information for each item beyond just the item label. Depending on the purpose of the list, each row may also be accompanied by a control. The user can also select a row to perform an action on the corresponding item. This List style is often used in the Split View layout. List items may also include status information similar to those shown when indicating status in Tables.
Complex lists should be used when:

  • the user can benefit from viewing more information about each List item without needing to first select the item.
  • the available real estate does not allow for a table to be feasibly shown.
  • SplitView_example

    This is an example of a complex list within the Split View’s item list panel

    iOS

    When to Use

    • Mobile devices use lists to display large amounts of information, as well as to select data.
      • On an iPad, use the drawer to select from a list of options.
      • On an iPhone, go to a new table view.

    Appearance & Behavior

    • Lists are called table views in iOS, and are scrollable.
    • Lists can contain text and icons.
    • Provide a view switcher if applicable (in this case, an additional map view)
    • Give users the ability to filter the information.
    • Divide row data by sections, if needed, using subtitles.
    • Alphabetical lists should use a control to help users quickly jump to that letter.
    • Tapping a row briefly displays a highlight.
    customerlist

     

    Selecting from a list in the drawer

    Selecting from a list in the drawer

    Android

    When to Use

    Lists can be used for data selection as well as drilldown navigation.

    Appearance & Behavior

    Lists present multiple line items in a vertical arrangement.

    droid_list

     

    Text Guidelines

    • Checkbox capitalization is sentence case
    • Use the words, “select” and “clear” – “deselect” causes a problem for localization
    • Don’t use punctuation in list items (exception: if a single bullet or list item has more than one sentence, use ending punctuation for all)
    © Intuit 2016 | Terms of use