Here are some ideas on polishing up the UI / UX in Home Assistant. I will make GitHub issues for these over time. Most of these suggestions are relatively small tweaks but would have a big cumulative impact. Even if some of these suggestions are decided against, hopefully they'll at least shine some light on potential areas for improvement.

I will create a separate page for Lovelace UX suggestions since this will already be quite long.

Settings

The current design of the Settings page is kind of sterile, lots of plain text. Menu items should be easy to scan and icons help with that. Both iOS and Android use icons in their settings screen which help users more easily find what they're looking for. Here is a mockup with icons.

Category	Icon
Home Assistant Cloud	mdi:cloud-check
Integrations	mdi:puzzle
Users	mdi:account-group
General
Persons	mdi:account-group
Entity Registry	mdi:code-tags
Area Registry	mdi:sofa
Automation	mdi:robot
Script	mdi:script-text
Z-Wave	mdi:z-wave
Customization	mdi:pencil
Server Control

Besides the addition of icons, here are some other things that should be looked at:

• The secondary descriptive text here doesn't add all that much value currently. Not saying to get rid of it necessarily, but at the very least the copy should be improved. It's also fairly inconsistent at the moment too - half of the descriptions end with periods and the other half don't.
• The users "Profile" page should be listed on this settings screen and with prominent placement too. I suspect that many people aren't even aware of being able to click on their initials in the sidebar.
• Server Control would be split out from General into a dedicated section
• Now would be a good time to closely examine the settings screen, and experiment with the order and placement of menu items.
  • For example, I think that Automation and Script should be given more prominence. These are what users continually return to the Configuration section for, yet they're currently listed near the very bottom more like an afterthought. I think that it should be in the same area as where Integrations currently is. So Integrations, Automations, Scripts in that order.
  • Maybe "Entity Registry" and "Customization" should possibly be merged and renamed to "Entity Manager" perhaps? Then it's your one stop shop for all entity related stuff.
  • Maybe think about merging "Users" and "Persons" into one screen? I can imagine these different yet similarly named sections being very confusing to new people. And since they're already integrated (on the Persons screen you can link a User) it kind of makes sense. Not sure if this would work, just throwing an idea out there.

Now I'll go over each individual settings page (in order of how they appear in 0.94).

Home Assistant Cloud Settings

• The tooltips for exposed entities do not show entity id's. I have three TV's and they all just say "TV" and there's no way to differentiate.
• Should avoid abbreviated terms like "Config documentation" and instead use more user friendly terms like "Setup Help" or something like that.
• Nabu Casa Account card
  • Should the card title be renamed to "Home Assistant Cloud Account" instead? There could be a "Powered by Nabu Casa" subtitle instead maybe. There's not a single other reference to "Nabu Casa" on this page so it just sort of makes things confusing.
  • Although not in the HA Cloud page, the cloud.remote_connect and cloud.remote_disconnect services both list "NabuCasa Cloud" in their service descriptions rather than Home Assistant Cloud.
  • The "Sign Out" button should be red because it performs a destructive action.
• Remote Control card
  • The Nabu Casa URL goes outside of the card width on mobile (issue #2982)
  • There are two different style links inside cards on the HA Cloud view. "LEARN HOW IT WORKS" in the Remote Control card is all caps, the "Learn more about creating webhook-powered automations." is in normal case. I think the Remote Control one should follow the precedent set by Webhooks card and be normal case, since it's a link and not a button.
• Alexa card (see mockup)
  • Rather than text saying "To activate, search in the Alexa app for the Home Assistant Smart Home skill", can make things easier and simply provide a link directly to the skill like with the Google Assistant card. Fixed in #3364
  • There should also be a "Manage Entities" button that takes you to Amazon's Alexa website where you could discover new devices or forget all devices.
  • Remove the "This integration requires an Alexa-enabled device like the Amazon Echo" text because the description already makes that clear.
  • My above mockup could use some refinement still, in the description area mostly, but it's better imo.
• Google Assistant card
  • Remove the "This integration requires a Google Assistant-enabled device like the Google Home or Android phone" text because the description already makes that clear.
  • Improve the UI for Secure Device Pin. The grayed out placeholder text of "Secure devices disabled" almost makes it look like you cannot click inside the field to set one.
• Google Assistant Manage Entities Screen (see mockup)
  • See mockup link for some improvements to current design. Basically it splits the list into two sections: "Entities exposed to Google Assistant" and "Unexposed entities."
    • When a user toggles an entity to be exposed to GA, it would get pinned to the top list.
    • This wouldn't happen immediately, but only after a sync is performed. This is so items are not "flying" around the screen constantly, and it will allow a user the ability to correct a mistaken toggle.
  • Toggle Domains is not the best heading. It should be "Expose Domains to Google Assistant" or something instead. There should also be some kind of descriptive text explaining what exactly this does.
  • This dialog uses regular "OFF" and "ON" text buttons while the rest of the UI uses a toggle switch. I think a toggle would be more appropriate here and more consistent too.
• Webhooks card
  • Should this be renamed to "Cloud Webhooks" instead?

Integrations Settings

I've went over this in great depth on the "Improving Integrations" page here. It contains several mockups.

Users Settings

• As mentioned above, the placement of this menu option on the main settings page should be "demoted" a little bit.
• There should be better organization on this page. System generated users need to be filtered / separated here.
• Creating Users
  • "Create" button should be "Add User"
  • There should be a checkbox to also create a new Person (which would automatically link the User/Person).
  • New Feature: Invite by Email - when adding a new user, there should be an "invite by email" option as well. The email could explain what Home Assistant is, offer links to the official iOS and Android apps, etc. This method has a number of benefits - the new user gets more accustomed to HA quicker, and feels more comfortable that they actually got to pick their username and password rather than a family member deciding for them etc.
• Deleting Users
  • It says Unable to remove system generated users. yet the Delete button still shows grayed out. It should be gone completely.
  • When deleting a user it asks "Are you sure you want to delete John Doe" without a question mark.

General Settings

• "Configuration validation" and "Configuration reloading" (nouns) should be renamed to "Validate configuration" and "Reload configuration" (verbs). It's a minor change, but it means users can scan the page faster since they now only have to read the first word instead of the entire heading.

• Validation Card
  • There's a mismatch between the card title and the button title. Ideally the verbiage should be consistent.
  • Improve the description text a bit.
• Reloading Card
  • Reload Core button should be renamed to "Reload Customizations" instead as that more accurately describes what action is performed. I've seen many cases where someone adds a sensor and thinks that "reload core" will make it show without a restart.
  • Could maybe think about using the outlined style button with a leading icon here? https://i.imgur.com/UiJA00r.jpg
• Server management card
  • Rewrite the text here. It should be explained a bit when it's necessary to restart Home Assistant.
  • Consider introducing a confirmation dialog prompt for shutdown at least. Both the Restart and Stop buttons are the same color and close to each other, it would be possible for a user to select the wrong one by accident.
• Other Settings
  • The map should not allow user to interact with it, if their configuration is in the yaml
  • Should the Home name / location stuff even be shown at all if the user has it configured via YAML? Having a grayed out UI with the Editor disabled because config stored in configuration.yaml. does not do too much for the user, except make them have to scroll more.
    • Maybe a "Don't Show Again" button in the top right corner of that message?
    • Maybe the Editor disabled because config stored in configuration.yaml. should be themeable? Or use --accent-color of the theme? MOCKUP IMAGE and also MOCKUP #2.

Entity Registry Settings

• There should be an "info" button where you can bring up the more-info panel. Often on this screen people will be coming here to clean up duplicate entities, and it would be helpful to see which one has stale/outdated data.
• This could really use a multi-select option. There are times when you want to remove a dozen or more entities at once, but you're forced to do them one by one.
• Delete button should be "Delete Entity"

Area Registry Settings

• The tooltip is currently "CREATE AREA" why the screaming? Guessing accidental.
• Create button should be "Create Area"
• Delete button should be "Delete Area"
• Areas should have icons, this will allow for much greater flexibility (and prettier looks) when displaying them in UI. (#3638)
• Home Assistant should also suggest some common areas when the user goes to add one. The UI for this would basically be "Enter the name of an area, or choose from one below." There are common areas that every place has like Living Room, Kitchen, Bedroom, Bathroom, Hallway etc. The user being able to just click the one they want saves a whole lot of typing and thinking -- and it would ensure there is always an icon (for example the pre-configured/suggested "Garden" area would have mdi:flower for example). (#3638)

Persons Settings

• Overview Page

  • The intro/helper text on the main page ("Here you can define each person of interest in Home Assistant.") is not that helpful at explaining what it actually does or the benefits it provides. Wording needs to be improved.
  • There should also be a link to the Person docs underneath the intro text.
  • The tooltip when hovering the + button says "Create Area" rather than "Add Person"

• Editing a person

  • There needs to be a more clear designation between actual real user accounts and system generated user accounts. Currently, when adding or editing a person you see system accounts like "Hass.io", "Home Assistant Cloud", "Legacy API password user" and others. These should all be filtered out. (issue #22372)
  • Instead of using words like "this person" it feels nicer to use their real name. So the helper text would become "Select the devices that belong to Paulus."
  • The "Create" button should be "Add Person"
  • The "Delete" button should be "Delete Person"

Hass.io Settings

Dashboard Tab & Tweaked Navigation

• The "Dashboard" tab should be renamed something more descriptive like "Installed Add-ons" and use that same text for the page heading as well.
• The placement of the "Add-on Store" tab should come directly after, so that Installed and Available add-ons are right next to each other navigation-wise. This also puts Snapshots and System next to each other, both of which are system-related tasks. I think this works a lot better.

Here is a quick mockup of how the nav would look after the above suggestions:

Additionally there is a mismatch between the update icons on the dashboard and when clicked through. The dashboard has the up arrow icon in orange, while the detail page has it in gray. I don't think the CSS is consistent.

Snapshots Tab

It's not immediately clear how to restore a snapshot. There's a Create Snapshot card, there should be a Restore Snapshot card too in my opinion.

• The CSS on the create snapshot card should be tweaked a bit. The checkboxes are practically touching the text to the left of them, there should be a bit more spacing.
• "Create" button should be "Create Snapshot" or something a little more descriptive.
• There needs to be way more description here. Backup and restore is a very important thing that should be fully explained in-depth so the user feels comfortable. Have tooltips or buttons that can be hovered over, or even a link to a documentation page, but there needs to be something a bit more.
• Clicking on "Available Snapshots" doesn't seem to reflect the users current theme. It's always white.

Hass.io Add-on Store Tab

• The "Add new repository by URL" card should be listed first, before all the other repository cards.
• The "Remove" buttons on repositories should be red, because it's performing a destructive action.

Hass.io System Tab

• Hass.io supervisor card
  • The "Reload" button should have a tooltip on hover, because it's not exactly clear what that does.
  • The "Leave Beta Channel" button should maybe be red?
• Host system card
  • Change the "Hardware" button text to say "Hardware Info" as that makes it more clear what it does. There's enough room to where it doesn't mess with the card width at all.
  • The "Hardware" dialog window doesn't reflect the users current theme, it is always white.
  • After pressing the "Change Hostname" button and changing the hostname, there's zero indication (prompt, toast message, etc) at all whether the action was successful. The hostname doesn't actually update until you refresh the page - so it appears like it failed to rename.
  • Change the "Import from USB" button to say either "Import Update from USB" or "Update from USB", this makes it a bit more clear.
  • The "Reboot" and "Shutdown" buttons on the Host system card should both be red. This is how the "Server management" card under Configuration -> General does it, and consistency is good.
• System log card
  • The System log appears blank when there’s nothing in it, which looks weird and kind of seems like a bug: https://i.imgur.com/Xd5sxFH.png There should be some kind of default message there such as "Nothing to show yet" or something.
  • Perhaps this could be a live refresh type thing where it refreshes every ten seconds (only when the page is active)? Simplifies the UI and also provides a better user experience at the same time since now the user doesn't have to keep hitting a button constantly to see their progress.

Hass.io Updates

• When a beta version is in the update prompt, it should link to the relevant beta release notes website (see issue #3226)
• I've made a mockup a few months ago that seemed well liked: Improving the Update Available screen.

Z-Wave Settings

• Right off the bat there's an icon overlapping the main heading of the page when on mobile devices (pic).
• Another bad first impression is that the introductory text on the left kind of has a downer tone. "You won't get feedback on whether the command succeeded" and you can "try to figure out."
• Z-Wave Node Management section:
  • In just three lines there's three different spellings of Z-Wave: "zwave", "z-wave", and "Z-Wave" (see pic)
• Node config options card - What does this do? No descriptive text at all.
• Could use a "learn more" link to the Z-Wave Docs, like script/automation editor has.
• Continue expanding thoughts on this section later...

OZW Log

• For starters, it's never explained what "OZW" even means. Most people aren't going to know it stands for OpenZWave. For the vast majority of users, it's just going to be a confusing unexplained acronym.
• This section has zero descriptive text unlike the above two sections.
• The log is arguably the most important part of this page, with almost every single option referencing it in some way. Despite this, it's not integrated well at all. Having to type in line numbers to and press a button to load a popup feels not so user friendly. It should be displayed directly on the page similar to the Hass.io System Log and the Dev Info Log.

Profile Page

• "Change Password" and "Multi-factor Authentication Modules" should be merged into a single "Password & Security" card.
  • The 2FA stuff could use some descriptive text. What is the benefit, why people should enable it etc.
• "Refresh Tokens" section should have a way to easily clear out old login sessions, a "Log out of all other sessions" button or something. I had like more than two dozen from months ago that had to be tediously removed one by one.
• The Push Notifications toggle is extremely close to the Log Out button on mobile (pic). Could easily imagine accidental taps.

Notifications

• Long text goes outside of width (#3160)
• Enhancement idea: Show the orange notification dot / badge on the favicon itself (guide)
• In the future, I think it would make sense to have a "Notifications" panel under Configuration. Here's why:
  • Currently there's no way to rename or delete HTML5 notification targets from the UI. You must edit html5_push_registrations.conf. Expecting "normal" users to edit JSON file is unrealistic and just asking for issues.
  • There is no way to create or manage Notify Groups through the UI. The way it's set up right now with requiring just "part" of an entity ID is kind of confusing, and this is an area better suited for UI. You could have the user just check boxes and press the Add to Group button and give it a name, done.
  • There's a bunch of things that can have simple toggles.
    • Notify me of new Home Assistant updates (nested toggle for Beta updates)
    • Notify me of Discovered devices (can disable all discovery notifications here, or on a per-integration basis)
    • Notify me of Community updates (would use feedreader + persistent_notification)
    • Notify me of newly added Integrations. Upon updating to a new version of HA, this send a notification that there's "2 New Integrations in Home Assistant 0.95 - AdGuard, Life360" with a "Go to Integrations Page" button underneath. Those who don't keep up on the blog posts instantly.
    • Notify me of Hass.io add-on updates. Similar to above idea, would notify the user if there's new versions of their installed add-ons and/or new releases.
    • Send me occasional Home Assistant Tips. Will expand on this below.
  • Basically the idea is to consolidate Notifications into one area.

Script Editor

• The introductory/helper text on the left says "Please read the instructions to make sure that you have configured Home Assistant correctly." and it links to a page about including scripts.yaml into your configuration. The thing is, new user setups work out of the box so this just confuses them. And existing users would have had 2 years to update their configs. This text should be removed.
• The Automation Editor shows the "Edit" pencil icons in a disabled gray state which is great, but the Script Editor still allows the user to click on them and get a frustrating Only scripts inside scripts.yaml are editable. prompt.
• Tooltips to Tweak: The plus button for adding a script is "Add script" - it should be "Create New Script" instead for more clarity. Similarly, the tooltip when hovering over the floating action button for SAVE is "Save" when it should say "Save Script".
• Tooltips to Add: The "Edit" pencil icon has no tooltip at all, and neither does the "Play" icon for running scripts.
• When saving a script, there's no indication that it was saved besides the orange floating action button disappearing. Maybe that floppy icon could change into mdi:check-circle for a second before fading out to better convey that it was saved. Or a toast, or something better than what's there now. Not sure about this one, but might be useful to return the user to the main scripts view too.
• The heading is "Pick script to edit" but what if I want to run a script from here? Heading can be improved/changed.
• When you create a script via the script editor, it's named with the ID (script.1560912082153) rather than the friendly name (ie script.clear_log). This makes it nearly impossible to call script via the call service sequence.

Map page

• The zoom controls should be moved to the bottom right. The sidebar tooltip for the Map icon will be covering the zoom controls. But more important issue, is that top left corner area is extremely hard to reach on mobile devices when using a phone one-handed. Google Maps, Waze, and Apple Maps all have these controls the bottom right and I think that's a better place for it.
• You can click on device trackers to see the more-info popup, but you cannot click on any zones on the map. This feels weird and inconsistent. I think most users would expect to see a similar more-info window showing the zone name, radius, latitude, longitude.
  • Added benefit of making this interactive, is that it would make it easy to edit zones through the UI in the future. The user could look at their map and go hmm, this doesn't appear to be correct, let me press the edit cog on this more-info window and change the coordinates real quick.
• On iOS / mobile Safari, when you are pinching to zoom on the map, the zone icons remain in place but the orange circular radius moves around all over the map which is weird.
• The circle for radius is hardcoded to always be #FF9800 (orange) when it could probably use a theme value?
• Similarly, the icon doesn't seem to have any color specified, so it falls back to displaying as primary-text-color so on dark themes, the icon is almost always white on white background. Here is an example picture showing what the maps look on my instance (left) and the demo (right). Theme creators have made workarounds like this and users have complained like here and here for example.

Logbook page

The big issue with Logbook from a user perspective is that it's very chatty by default and also impossible to manage what gets logged via the UI. So it quickly spirals out of control and becomes a cluttered mess with long loading times -- and then ends up just getting ignored completely.

Configuring includes and excludes via YAML is extremely tedious to put it nicely. It requires cross-referencing the States page and copying and pasting lots of extremely long entity ID's -- certainly not a task you'd want to do on a mobile device. Not really a task anyone wants to do period to be honest, so the least that can be done is making it convenient as possible.

So this is an area that is much better suited to configuring directly from the user interface. See something you don't want logged? Press a button to get rid of it and supress further logs.

That is the use case that should be solved here - making users feel in control of what gets logged.

• Exclude domains from UI - Add an mdi:settings to the top right corner next to the refresh button. Clicking on it will allow you to exclude/include entire domains. Home Assistant Cloud does something similar already on the Google Assistant manage entities page.
• Logbook "Edit" Mode - Have some kind of button to put Logbook into "Edit" mode, similar to how Lovelace works. This allows it to maintain a clean and minimal appearance by default, but still allow users to clean things up when necessary. When in edit mode, each logbook entry will have an mdi:dots-vertical to the left of it, with options:
  • "Delete this entry" - for when you have something you want to get rid of once. You might be testing an automation that writes custom logbook entries for example.
  • "Exclude entity from Logbook" - this would allow you to exclude a specific entity id from the logbook. You might have a specific input_boolean or some chatty sensor that you want to exclude.
• In addition to managing the Logbook on this page, the more info panels would have a toggle where you could exclude from Logbook. See the Enhanced "More Info" Panels mockup below.
• Flesh this out later with mockups etc.

More Info Dialogs

Here's an area where I think there can be a big noticeable improvement. The current approach to the more-info dialogs is attempting to be a one size fits all approach. But this leads to a subpar user experience a lot of times imo. Here are some examples of where I feel it's lacking (do improvement mockups eventually). More Info Dialog Types.

More Info > Edit Mode

Currently when you click the edit cog, you can change the friendly name and entity ID. But more can be done here, to make it really user friendly.

• Assign it to an Area, or change the Area if it's already part of one
• Change the icon (like Customization panel can)
• Expose to Google Assistant or Alexa with simple toggles if they are a Nabu Casa subscriber
• Allow including or excluding from the recorder/history/logbook

(older mockup below, move it here)

More Info > Doors

Let's think about when people open their doors in a typical everyday scenario - leaving and arriving from work or school, taking out the garbage, maybe checking the mailbox, walking the dog, etc. When you add this all up, it's really not much. Probably less than a dozen times a day for the front door, which is the most highly trafficked one.

And I think that in most cases, doors fall under one of these usage patterns:

1. Always closed, but opened for several seconds to enter/exit. Typically your front and back doors.
2. Always open, but closed briefly for privacy. Typically the bathroom door, or a bedroom when you're changing etc.

So in the majority of cases, doors are opened between ~2-10 times per day and their state only changes for very brief moments. The UI should be optimized for this type of usage pattern. The current UI is not ideal for doors the following reasons:

This interface is like finding a needle in a haystack. It requires you to look for an extremely thin line, the size of a strand of hair. This is frustrating even with a mouse pointer, but a thousand times worse on a mobile device where your thumb is covering it completely. The history graph has markers for the twelve hour points, but these just get in the way.

Proposal: This should be in a list view by default rather than a 24 hour history graph. The door icon should be larger and centered. The Open/Closed state should also be in a larger font and centered directly under the door icon. To prevent clutter, the list portion would only display either "Opened", "Currently Open", and "Left Opened."

More Info > Device Tracker

More to come...

More Info > Person

This is going to be a very important part of Home Assistant, and so it should have a specialized more-info dialog. Currently it just displays all the attributes listed alphabetically, meaning source (the only important one) is listed at the bottom below two rather useless attributes (editable and id).

Source should be listed at the very top since that's the reason people are clicking on it, they want to see which device triggered the update. And underneath it should list all of the other devices attached to that person and the states of those devices.

When you click the edit cog on a person more-info dialog, it should allow you to edit the devices or offer a link to the Person panel in the configuration section.

More Info > Lights

I don't think too much needs to get added or removed here, it's primarily cosmetic tweaks. Let's think about how people are accessing the more info dialog for lights. Almost every Lovelace card (entity row, entity button, picture glance, etc) allows you to easily toggle the lights on or off.

• Like every other more-info dialog, there's a "duplicate" friendly name displayed.
• As described above, when you click the cog to edit a light, it should allow you to assign it to an area.
• We have Areas support now, but it's not displayed in this dialog at all. It should be displayed in gray/secondary text underneath the Friendly Name.
• Color temperature slider - it should go full-width, and there should also be labels underneath saying "Cool" and "Warm" to help people understand.
• Brightness slider - should have a slightly different icon, mdi:brightness-6 instead of 5. Should take more advantage of the full width of the card instead of being like half-width. When you're interacting with the brightness slider, it should display the current brightness percentage (0-100%) either in a circle like an input_number would or on the right of the slider. And maybe it should be a dynamic color? If you set the lamp to red, change the slider to red as well? Not sure about this one.
• Color wheel - should have a label to be consistent with the other sections. I think the wheel can be made a bit smaller without sacrificing much. There should be a tooltip when hovering over the icon to change the color wheel.
• Effect dropdown - once you set an effect such as colorloop for example, it's not immediately clear to the user how to stop it and return things to normal. With the service calls you can do effect: stop I believe, but maybe there should be an actual stop icon to the right of the dropdown when an effect is active.

More Info > Camera

The biggest problem with Cameras in Home Assistant is that none of the services are exposed in the user interface. You have to read documentation and spend time writing tedious automations.

The idea here would be to add 3-4 more small buttons over the stream. I assume this would be possible since there's already a Preload stream checkbox overlay, this idea is pretty similar.

• Take Photo (service: camera.snapshot)
• Record (service: camera.record)
• Camera On/Off toggle (service: camera.turn_off / service: camera.turn_on)
• Enable/Disable motion detection (service: camera.enable_motion_detection)
• Cast (service: camera.play_stream). Clicking this would show the same type of UI as Home Assistant Cast, display all the Chromecasts and allow the user to pick one.

The Snapshot and Record should definitely be shown by default, but the others can be behind a "More..." button to reduce any clutter. I think these should be enabled by default, so that users don't have to update their configs or jump through hoops trying to add expected functionality.

More Info > Misc

• The time shown in the frontend and the more-info dialog is not consistent. more-info-input_datetime.js

Lovelace UI Polish

I will move this to another dedicated page probably in the future, just writing down some things here for now.

Configure UI

• General Configure UI feedback

  • I think the "X" button should be reconsidered. It's not immediately clear what it does, it has no tooltip on hover, and it's not in a great location either. The user enters Configure UI mode on the right side, that should also be where they exit it.
  • The "Raw config editor" menu option and "Edit Config" text (after clicked) should both be updated to something better. Even though most of us use this type of shorthand when discussing it casually on chat and forums, it shouldn't be written like that in the UI. Apple doesn't refer to things as "System Prefs" on macOS for example.
  • Related to the above, "Configure UI" seems like something that can be worded better. This makes sense to us, but our parents probably don't know what a "UI" is, maybe it is worth considering other options. "Organize Layout" or even just "Customize" perhaps?
  • When performing a "Refresh" from the 3 dots menu in YAML mode, it shows a toast prompt that "The Lovelace config was updated, would you like to refresh?" (pic) yet this isn't actually optional. There's no way to close this prompt or swipe it away, and it stays on the screen even when switching views. The only way to get rid of it is by refreshing, so why not just do it automatically?
  • Upon clicking the vertical ellipses under a card, the menu options for "Move" and "Delete" should be updated to a more descriptive "Move Card To..." and "Delete Card" or something similar. Especially since there's already move buttons (the up/down arrow icons), having unique text there will differentiate.
  • When attempting to Configure UI while in YAML mode, the error message is not as great as it could be. The edit UI is not available when in YAML mode.

• Moving Cards

  • The list of views should display an icon to the left of the text if the view has an icon specified. This allows for quicker visual identification when selecting a view to move it to. And would look nicer as well.
  • The bottom of this window should have a "Cancel" option.
  • I think a little more can be done to show the user a move was successful. Maybe display a toast saying "Moved card to Lights view." Maybe also switch to the view it was moved to?
  • It would be nice to include a "Move to new view" option here as well. When this option is selected it would show the UI for creating a new view, and then finish moving the card to it once that view is created.

• Deleting Cards

  • I realize there's already a confirmation prompt to prevent accidental deletions, but maybe there could also be a toast message shown with undo button? "Deleted Lights card. Undo?"

• Renaming Home

  • The "Edit Lovelace" heading for this needs to be more descriptive.
  • The button for "Save" should be more descriptive, like "Update Name" for example.
  • Try to have some consistency with the panel in Configuration -> General.

• Adding Views

  • The "URL path" field should be auto-populated after the user types in a title. 99% of the time these are going to be named the exact same thing (a "Lights" title and /lights/ URL path, a "Cameras" title and /cameras/ URL path etc) so let's auto-generate that for the user and save them some extra taps and keystrokes. WordPress blogging software does something like this.
  • Panel mode toggle could use some descriptive text. Users shouldn't have to go to the docs page to find out what it does. Even if the option was renamed to "Panel Mode (Full Width)" it would help a bit.
  • Rather than "Save" the button should be something more descriptive like "Create View" or "Add View"
  • The bottom of this window shows a trash can icon for delete, yet the cancel and save buttons are plain text buttons. Why the inconsistency? It should say "DELETE VIEW" in red text to indicate it's destructive.

• Adding Cards

  • The interface for this feels rather cramped, especially on mobile. It's attempting to fit 25 different options onto a single screen. These are all buttons in CAPITAL LETTERS real close to one another. And there's no information on what these cards look like or do. What's the difference between Picture, Picture Elements, Picture Entity, Picture Glance? I think it would make sense to do a card interface here.

New Features / Enhancements

Enhanced "More Info" Dialogs

I did this mockup in February, and with the recently added support for exposing Alexa and Google via UI toggles, I would assume that part at least would be a lot easier to implement now that most of the legwork has been done?

The first three toggles you'll see are for including/excluding from recorder, history, and logbook. Managing this stuff via YAML is extremely tedious, time consuming, and confusing to new users. Having simple toggles with descriptive text makes it a lot nicer to manage. Also, note the text that says "This entity updates frequently." The idea behind that is to point out which entities are causing the most database writes or potentially hogging the most space - prime candidates for excluding.

Second thing you'll see is the icon and a way to set a new one. I think this could probably be implemented better, I would probably move it to the top next to name and entity_id, since that is how it'll always appear in the frontend.

And lastly is the Expose to Google Assistant and Alexa toggles. If the user isn't subscribed to Nabu Casa, these would show in disabled state with a brief descriptive text / upsell message underneath. "Subscribe to Home Assistant Cloud to easily control this via Google and Alexa. Learn More."

Map Previews

Anywhere that coordinates are displayed, it would be helpful to display a small embedded map with pin marker. This makes the user feel much more comfortable knowing their device tracker is working correctly and reporting the proper data. And if it's not, any errors would be spotted and corrected right away. Makes monitoring a family member way more convenient too.

Places this would be used include:

• Your home zone under Configuration -> General
• Adding Zones via the UI
• More info dialogs on device trackers

Permission Manager

Currently there's users and admins, with user accounts having more limited functionality (such as no renaming, no admin panels, hidden developer tools, etc). This is very cool and useful, but sometimes you need more fine-grained control over permissions. That's where the permission manager comes in.

Restrict Lovelace views - Let's say you are introducing a more casual user to Home Assistant, ..expand.

Restrict by Domain - The above scenario of restricting entire views is not always feasible, because different people organize their Lovelace layouts in different ways. You might not have a dedicated view for cameras, and instead have cameras on your main page.

You might want a user account that cannot view cameras, or cannot control climate, or mess with your garage doors and smart locks, media players too. This stuff would still be displayed in the UI, but in a disabled state.

Here is a mockup of how it might look when cameras are restricted on a users account.

You also might want to allow a user access to a certain Hass.io Ingress panel (say Pi-Hole so they can temporarily disable adblocking / whitelist a site) but restrict access to others like Configurator.

Cloud Cheat Sheet

The biggest frustration users experience with voice commands is that it's not always clear what you can say or how things should be phrased. This is why the big three (Siri, Google Assistant, Alexa) include some form of "cheat sheet" built into their UI's, and send out newsletters highlighting this stuff too (see here: https://i.imgur.com/hKCpo4z.png). I think that this would make sense for Home Assistant also.

This could be a Lovelace card, which would be especially useful for users new to the whole home automation thing. It's basically the equivalent of having a sticky note to remind you things. Could ease them into using voice commands.

Would be handy to have some kind of "Cheat Sheet" view that would tell the user various voice commands they can use in their setup. For example if the user exposes their nursery camera to Google it'd say something like: You can now use the following commands: Is the nursery cam on?, Show nursery camera, What's on the nursery camera?, Show nursery camera on Living Room TV and so forth. The Hass.io Google Assistant Skill has a UI for this already kinda. This feature adds a lot of value because many people don't know all the commands.

Icon Picker

There are many places icons are used and displayed in Home Assistant. Selecting icons should be as easy as doing an emoji. Similar UI (expand further, mockup)

Guided Tour and Tips

More can be done to get new users accustomed to Home Assistant. I think a floating action button that when you click... (make a mockup for this).

There'd also be the concept of "Tips and Hints" that a user can opt-in to and it would send occasional tips to them as persistent_notifications with actionable buttons underneath. The benefit of this approach is that it's not completely overwhelming the user during onboarding and first-run. We can show a useful tip or two every couple of days, and ideally it would be based on the users behavioral patterns. Let's say for example the user has no device_tracker entities, they'd be sent a tip about the benefits of presence detection. If the user has only used a local URL they might not know how to setup port forwarding etc, so let's recommend them Nabu Casa. Or if they haven't used the official app yet, make them aware of it, etc... Things like that.

Dark Theme

Now would be a good time to consider including an official dark theme as part of the default install.

1. Both iOS and Android are introducing a system-wide dark mode this year. Dark mode is no longer going to be a "nice to have" option, it's going to be something that users expect out of every app and website going forward. Safari, Chrome and Firefox all support the prefers-color-scheme: dark CSS feature (more info), so the theme will be able to fit right in to the users preference. And this would make a much better first impression on the demo specifically.
2. While it's true there's already a number of existing dark themes available on the community forums, they are not that easy to discover or install. Majority of them are lacking in various ways whether it be poor color choices or lacking the variables. There is an opportunity here to do things the proper way and serve as a baseline for community themes going forward.
3. This introduces users to the concept of themes within Home Assistant.
4. Most importantly though, it encourages all contributors to take into account different themes when creating custom cards or designing user interfaces for their integrations. As an example, the Hue image doesn't look great on dark themes.