UX style guide

Most style guides on the web only describe visual elements and sometimes UI patterns. Hardly any give any guidance on how interactive elements should be used. For desktop applications I think it is good to have a wiki style reference library of interactive elements that can be easily shared or linked to a jira ticket.

Below is my starting point for a style guide for a desktop application. It is a contents list derived mostly from:


  1. Product Environment

    1. Dock

    2. Widget

    3. Pointers

  2. Windows

    1. Window management

    2. Window chrome

    3. Window States

    4. Multi-pane windows

    5. Modeless Dialogues

    6. Modal Dialogues

    7. Wizards

  3. Display controls

    1. Scrollbars

    2. Splitters

    3. Drawers

    4. Slide overs

    5. Tabs

    6. Progressive disclosure

    7. Accordions

    8. Tree structure

  4. Controls

    1. Imperative controls

      1. Buttons

      2. Button drop-down (Bang menu! Do not use)

      3. Split button drop-down

      4. Execute buttons

      5. Icon buttons

      6. Hyperlinks

      7. Command links

    2. Selection controls

      1. Check boxes

      2. Toggle buttons (mostly avoid)

      3. Switches

      4. Radio buttons

      5. Icon button group

      6. List controls

      7. Drop down / select box

      8. Tree controls

  5. Entry controls

    1. Labels

    2. Spin-boxes

    3. Amount spin-box

    4. Date and time

    5. Text inputs

    6. Combo box

    7. Sliders

  6. Commands

    1. Menus

    2. Context menus

    3. Toolbars

  7. Messages

    1. Error messages

    2. Warning messages

    3. Confirmations

    4. Notifications

    5. Tooltips

    6. Flyouts/Balloons

  8. Patterns

    1. List

    2. Table (blotter)

    3. Grid

    4. Filter and sorting

    5. Master Detail

    6. Tile/Card


What I like to do is then sketch out a piece of placeholder content for each item in the contents list to help populate a wiki.