About two months ago my phone kept buzzing with notifications. I got the kindest tweets after it was announced that I was joining Home Assistant as the first full-time UX designer. That enthusiasm is also reflected in the more than 500 registrations for our user research group and the many comments we received on design ideas I’ve shared on Twitter.
User Experiences
Home Assistant has a large group of users with a common goal: home automation that puts local control and privacy first. From our analytics we have over 85.000 users who opted in to share their data anonymously, but we know that there are a lot more. None of these houses and users are alike and may have different, perhaps conflicting interests. Here lies the power of UX. As Scott Jenson shared in his fantastic keynote, UX offers perspective. Who are the users? What are their tasks? And what is their pain? What do they want to achieve?
In the coming period, I will investigate what type of smart home users there are, what their needs are and what stands in the way of achieving this.
Designers
Last year alone, there were over 8,000 GitHub contributors to Home Assistant. That’s really fantastic! With a Designer-to-Developer ratio of 1 per 8.000, it’s easy to get lost in the backend of design and forget the users. This can result in inconsistent user interfaces or designs that could be more user-friendly. For now we’re working on three areas.
UX contributors
We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to. For example, making it easier to work with light groups or getting started with automating your house. If you have a design you really think we should look at? Would you like to help build our own Design System? Do you have experience with user testing? Do you have strategic design ideas? Want to organize an online design workshop? Or just want to meet fellow designers? Meet us at devs_ux Discord channel or join us on GitHub discussions.
Tooling
We want it to be easy to start creating and iterating on design mockups for Home Assistant. We want anyone that is interested to be able to jump in. To achieve this we’ve been hard at work at re-creating the components that make up the Home Assistant interface as a DesignKit for Figma. This allows anyone to experiment with the Home Assistant interface and quickly try out different concepts. Try it yourself and feel free to share your designs.
Documentation
With clear guidelines, you can ensure speed and quality. That’s why we’re working on design documentation that will be available soon. Its goal is to help designers and developers make better choices. Got suggestions or want to help with our guidelines? Meet us at devs_ux Discord channel.
I’m going to upload a picture of my main tablet displaying home assistant. It was hard to configure and a pain to maintain and add new entities. But, since you can do almost everything from here, all my family uses now home assistant as much as me, previously it was hard to pick the correct tab and then search for the correct entity, now everything is directly on your eye, even people who don’t live here know how to use it. For me, this is usability.
I have to write more than seven hundred lines of code to get this, but I can imagine a drag & drop “picture elements” card with clickable entities to configure them directly.
However, I am happy with the power of Home Assistant that provide this kind of possibilities (even if they are hard to configure).
I’m sure that’s true. FYI, the blog posts are usually formatted much better on the website because the forums can only do so much. I’ve always made it a note to visit through the blog post then use the redirect link to here to join the convo.
IMO it would be nice for HA to allow people to browse their entities by the “structure” of their home. HA already knows about rooms, with which you can’t really do much atm UI wise (AFAIK). It would need support for:
building / area (for things like “garden” which by definition is not inside a building and also no room)
floor
room
Then there could be automated views that allow to browse the “tree” structure via special cards for each of the structural types, while on the lowest level, the room, there could be special cards with a specific design/layout with direct controls for the most common room control combinations (light, blinds, temp, media playback) while having additional entities/devices show up on a “detail” view/modal when one clicks on the room.
Something like that would at least be my dream come true and was basically what I had expected after I read that HA added support for “rooms”
Just an idea - How about we automatically add a URL link somewhere, from the forum post back to the “usually formatted much better on the website” blog posts?
A quick one liner of “Click here for better formatted version” with hyperlink would suffice.
That only takes you to the overview of all blog posts.
At the bottom of all topics that are created from blog posts, there is a link at the bottom of the text in the message that starts the topic.
well, it’s just an entity list, but not a specially designed card, is it? At least last time I checked the loosely thrown together stock cards into a group didn’t really look that pleasing. And since it is about UX and design here, I thought I’d mention that this might be a nice improvement for less tech savvy people or people that don’t like all the necessary tinkering to get a decent looking dashboard
Hi, I’m really excited the UI/UX topic has a chance to become a thing in HA. Apparently there is a big disproportion on devs vs designers/frontenders. Right now we have a really powerful home automation software with good UI, but not great UI. Furthermore, a UI that is hard to be customised and even if you spend quite amount of effort doing it, the great design you spent so much time on usually lives for several months before an update breaks it.
IMHO the first step is to think how the UX can be closer to an app rather than web page. Stuff like page transitions, placeholders, caching, etc. Just make it feel more like an app.
Next, to rethink the layout and most commonly used widgets. I see many people trying desperately to achieve tablet dashboard kind of design using all kind of Lovelace styling tricks and 3rd party integrations. There is even this great TileBoard project. Maybe we can think of something in that direction?
+1 on some sort of tablet layout/mode. At this point I think I’ve tried just about every dashboard software that exists but keep coming back to Lovelace due to either a lack of support, features or ease of use.
The main issue right now is it’s really hard to get a good looking dynamic Lovelace tablet page. Most dashboards should fit on one page without needing to scroll.
In my opinion the major pain points currently for dashboards in Lovelace is that to my knowledge their is no easy way to get precise control over where cards are placed. Want something to be in the middle of the screen, not happening without a bunch of css tricks. Then if you do a bunch of css tricks they usually don’t translate well across systems. This could somewhat be solved by auto scaling a card to fit within a grid tile.
Drag and drop would be fantastic especially for new users.
Anyone who can install Home Assistant can also use it - how, depends on the time
invested and experience. (But also as power user, I’ve often wanted a tidier dashboard or simpler ways to create one.)
For everyone else, especially other members of the household, it is very difficult.
HA always needs to be prepared and set up to make it easily accessible to other,
inexperienced users.
A nice automatically generated menu and dashboard for normal users would be perfect.
Maybe hide logbook and history in a submenu. Domains like light, switch, climate
could be automatically grouped in the sidebar at first. The goal would be:
But also more options for normal users like basic automations that they can set up
and manage themselves.
There is of course an automatically generated lovelace panel that organises stuff in groups of rooms. It quickly gets untidy by including every damn entity.
That’s true. But i can’t really choose that when i add the integration.
I can deactivate the entity afterwards or take control over my dashboard. What i thought of was an autogenerated dashboard with a simple hide/show option for entities, for example.
Good one, will close the blog post next time with my name
)
