Dashboard design tips

Home Assistant can generate a dashboard for you that shows every entity in the house. It's a useful starting point and a terrible finished product. A good dashboard is an editor's job: deciding what to leave out. These are the habits that made the biggest difference here.

1. Start with questions, not entities

Before adding a single card, write down the questions people ask in that spot. In our kitchen they're "Is anything wrong?", "Is the laundry done?", "What's on today?" and "Do I need a coat?". Every card should answer one of them. If a card doesn't answer a question anyone asks, it goes.

2. Design for the device it lives on

• Wall tablets are read from across the room. Use big touch targets and large numbers, and fit everything on one screen with no scrolling.
• Phones get one column. Put the most-used controls at the top, or at the bottom where a thumb can reach them.
• Desktops can be dense. This is where the detailed graphs and settings belong.

It's fine, and usually better, to build a separate dashboard for each device rather than one that tries to suit all of them.

3. Make normal quiet and wrong loud

If the dashboard looks the same when everything is fine as when a pipe has burst, nobody will notice the burst pipe. In a sections view, any card can have visibility conditions, so warnings only appear when they're true:

- type: tile
  entity: binary_sensor.any_leak
  name: Leak detected
  visibility:
    - condition: state
      entity: binary_sensor.any_leak
      state: "on"

For lists, a Markdown card with a template can collapse a whole category into one line, here every open door and window:

- type: markdown
  content: >-
    {% set open = states.binary_sensor
       | selectattr('attributes.device_class', 'defined')
       | selectattr('attributes.device_class', 'in', ['door', 'window'])
       | selectattr('state', 'eq', 'on')
       | map(attribute='name') | list %}
    {% if open %}**Open:** {{ open | join(', ') }}
    {% else %}All doors and windows are closed.{% endif %}

4. Group by room or by purpose, not both

Room-based views ("Kitchen", "Bedroom") suit phones, where you're usually controlling the room you're standing in. Purpose-based views ("Security", "Climate", "Today") suit wall tablets and desktops. Mixing the two in one view makes people hunt. Assigning every device to an area makes room-based views almost free, and new devices land in the right place automatically.

5. Name things for humans

"Porch", not "Porch Light Switch 2 Relay". Rename entities in their settings so the clean name appears everywhere, or use a card's name: to override it in one place. Inside a room's section, drop the room from the name: under a "Kitchen" heading, "Ceiling" and "Under-cabinet" read better than "Kitchen Ceiling" and "Kitchen Under-cabinet".

6. Use colour for meaning, and only one meaning each

Pick one colour for "on or active" and use it everywhere. Keep red for things that need action now. Don't colour-code by device type, because people won't learn the code. Home Assistant themes let you set state-active-color once for the whole interface. Ours is the warm gold from the Mallow theme.

7. Round your numbers

Nobody needs to know it's 21.437°C. Set each sensor's display precision in its entity settings: whole degrees for room temperatures, one decimal place for power in kilowatts, none for humidity. Always show units. A bare "68" could be a temperature, a humidity reading or a battery level.

8. Put controls next to what they control

Tile cards can carry small built-in controls called features, so a light's brightness slider sits right on its tile instead of hiding behind a tap:

- type: tile
  entity: light.kitchen_ceiling
  name: Ceiling
  features:
    - type: light-brightness

Tile cards can also show more than the state. Adding state_content: [state, last_changed] turns "Closed" into "Closed · 2 hours ago", which is often the more useful half.

9. Few taps for the common, a pause for the risky

Turning on a lamp should take one tap. Opening the garage door or unlocking the front door should ask first:

- type: tile
  entity: cover.garage_door
  name: Garage
  tap_action:
    action: toggle
    confirmation:
      text: Open or close the garage door?

10. Leave room to breathe

Whitespace isn't wasted space. The sections view, with a heading card at the top of each section, gives every group a clear title and a bit of air around it. If a section needs more than about eight cards, it's probably two sections.

11. Watch someone else use it

The person who built the dashboard is the worst person to judge it. Hand it to someone in the household, ask them to do one thing, and don't help. Wherever they hesitate is the next thing to fix.