devs_ux-archived

[celest flume]

Hey hey. Is there a UX backlog anywhere?

[jaunty swan]

@pure flower may be able to help you out

[celest flume]

@jaunty swan do you know if this is still something that needs to be looked at?

https://twitter.com/matthiasdebaat/status/1527213730848702465

I've built quite a few fully accessible color systems.

[jaunty swan]

I believe we finalized that from what I remember.

But there are a lot UX issues in the frontend repo as well if you want to take a look

they are tagged with ux

[celest flume]

coolio. I'll do some digging.

[pure flower]

Hi! 👋 We're done with our color system, but it's not implemented yet. Welcome to review it, you can find it here: https://www.figma.com/file/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit?node-id=1754%3A4109

Awesome if you want to help Home Assistant. I would advise designing something that you personally would see improved.

You can also join discussions on our GitHub. Something I think we should improve on is our automation editor, to see in a glance what the triggers, conditions and actions are and make it usable on mobile. There is a concept of @sacred dew that is a good start: https://github.com/home-assistant/frontend/discussions/10064 Feel free to create an all new concept.

Another frequently asked request is to group automations. All kinds of ideas have been shared, for example tags, folders, cards. No design has been made for this yet.
https://community.home-assistant.io/t/grouping-automations-on-frontend-for-organization/102771

[celest flume]

Awesome! I'll take a look now.

[celest flume]

Are you using tokens, alias tokens, etc?

[pure flower]

Our design system is based on Material Design 3 and it's theme builder:
https://www.figma.com/community/file/1035203688168086460
https://www.figma.com/community/plugin/1034969338659738588

[celest flume]

ahhhh ok cool.

[pure flower]

Our frontend is based on Lit. Material got tokens in their documentation, but we haven't synced it yet between design and frontend
https://m3.material.io

Would be awesome to have this btw

[random coral]

Hi yall and @copper parcel do you have any idea to migrate adjustable favorite (mostly used) menu ?

[copper parcel]

?

[random coral]

We have a lot of users here in Thailand, usually talk in community to let user manage their own favorite menu (absolute path or something like bookmarking)

[copper parcel]

ok cool, not sure why you pinged me for that to be honest?

Do you have a development question? Are you building that?

[jaunty swan]

You can add tabs to the side menu already

Use that for Favorites

[random coral]

Oh still can't independently manage (We need something like shortcut to another page, eg: addon, system page)

[jaunty swan]

You can do that

https://www.home-assistant.io/integrations/panel_custom/

[random coral]

I don't sure whos in charge of this section 😦

[jaunty swan]

Then don't ping anyone 🙂

[copper parcel]

hehe

[copper parcel]

Its an open source project, anyone really is

I feel like you are trying to request a feature, and don't have a development question.

[random coral]

Oh sorry, my mistake

[copper parcel]

That's fine 🙂 Don't worry

[random coral]

Thanks sir

[elfin arrow]

this ux is confusing and there is no obvious feedback when you kickoff. I recommend showing an item in the list with progress indicator and status.

[pure flower]

I like that idea! If you want please create an issue on GitHub. Though the current UI give you feedback with a loading spinner in the button. This button must be disabled, because you can't start two backup creations at the same time.

[sacred dew]

Hello! It's been a while since I've touched my automations design and I don't have much time these days either, but after seeing Shortumation I was inspired to make a similar editor for the redesign I made many months ago: https://www.figma.com/file/pAHuoEApZp5iY9W0ZOPxD5/Home-Assistant---Automation?node-id=2104%3A6776. This is a quick screenshot of what it might look like:

[pure flower]

Awesome you continued on your design! Will take a look on Monday. FYI, In the upcoming release we’re iterating on the editor. This is the current state.

[sacred dew]

These changes look amazing! Looking forward to them!

[empty badger]

The graph looks like what I wanted with the trace graphs. But how well would you say they’d scale?

Like for this case…

[sacred dew]

That's a lot of conditions underneath that choose block. But perhaps collapsible subtrees could help with the scaling—that would reduce that second level of nesting

[empty badger]

Here's one concept I tried before we just "fixed" it with a scroll bar https://cdn.discordapp.com/attachments/674164904298676225/827664258345992262/unknown.png

[sacred dew]

Do you have the YAML for this one? I'm curious to try mocking it up

[empty badger]

Afraid not. It was a user screenshot from the first beta with traces.

[empty badger]

But either way, scaling is important and we need to think about that from the start more or we'll end up like Apple.

[sacred dew]

For how we can handle lots of nodes, my thinking is that nodes with many children begin collapsed. Clicking the down arrow would expand all of those choice nodes down to the subsequent level of choice nodes

Another option would be simply hiding all of these child nodes until you click expand, but I like being able to see the whole network

[fossil token]

I'm not sure what the scoop is with these dialogs: Sensors appear to have an INFO tab with no "history" or logbook, while other entities (say roomba, or cover) have the history tab with logbook. Is this by design or is there a setting/parameter on an entity to make it so?

[jaunty swan]

This is correct

Sensors - You look for data and history. There is nothing more to look for so we combined them

Control Entities - You can action on these entities and therefore are more than just the history you look for. Actions shown first and then history is secondary in the next tab

[fossil token]

So there is no way to show the logbook in a sensor dialog?

[jaunty swan]

Sensors don't have a logbook no

[fossil token]

Pardon my naivety - there are log book entries for the sensor (it's a state sensor). Are you saying the UI doesn't have a logbook option? Thanks!

[leaden spoke]

Hey guys 🙂 has the thought of adding automation groups ever been raised?

[merry torrent]

Would be great

[cursive sinew]

I was thinking icons, in the automation list... but a group would be better I guess

[leaden spoke]

I have a lot of automations that come in pairs e.g. one automation starting something and a second one stopping 😄 that’s why I thought about this

[mental gale]

small issue I'd like to see addressed somehow. In my native language (Italian) adjectives often change based on the quantity of the nouns. So if I have an open window the word for it is "aperta", but if I have multiple open windows they're "aperte". I would like for the translation to change to the plural version if the entity at play is a group entity

[outer ridge]

does anyone knows, how translation for selector.SelectSelectorConfig labels can be made?

How is the consturct for the lang json files?
(config_flow)

[mental tulip]

Hi all,
Sorry for the beginner´s question but I don´t know how I get home assistant to a test run after the build was finished.
I think the Home assistant is running after building it but how do I access it now to see whether my change is working properly or is it stuck?

[lavish sundial]

Hey there! Today I did set up a new HA OS instance and wanted to change the frontend language from German to English. I found a "language" selector at /config/general, selected "English", submit, ... nothing. Restart... still German. Reboot.. still German.
Did a quick google to find out that this setting lives in /profile.
I still have no idea what the language thing in the settings does...

[misty jacinth]

There was some discussion about that during the beta. The answer appears to be "nothing" right now: #beta message

[tiny dune]

Hi, I’ve found an ui/UX issue with the history graphs on mobile devices, not sure if I’m in the right place or where I should mention this. Anyway when I have an graph with for instance energy usage, when hovering over this on an desktop there is an popover with the data under the cursor. However when doing this on a mobile device this popover appears beneath my finger so I can’t see any data in unless I remove my finger. (And it is difficult to get an screen capture of this off course;)) should i raise an GitHub issue for this?

[ashen orbit]

Hi,

I've noticed that the dialogs-actions on the integrations page are on the right, but on the other dialogs are on the left.
I know that the dialogs on the integrations page have the help icon, but I think at least all the close icons should be on the same side on all dialogs and leave the help icon on the right as is on every component that has a help icon.

I know it's a trifle, but it helps the consistency of the interface.

[pure flower]

(sorry for the late reply, forgot this one after holiday) Just tested it on my iPhone and the popup stays on tap. Although I had a lot of mis taps so that can be improved. If it's not usable for you, the best is indeed to create an GitHub issue.

[pure flower]

Yes, currently this is inconsistent. Would love to follow the Material guidelines. I've made a highlight on our design website https://design.home-assistant.io/#components/ha-dialogs

[ionic ledge]

This is about the visual editor of cards setup. The docs show how to wire up the graphical card configuration.

https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card#graphical-card-configuration

It doesn't give any guidelines how the form should look alike. There are no libraries given for to create form elements in a uniform style. I sense the programming philosophie behind, no dependencies, full freedom, a plain data object as interface. Simplicity in the sense of a blank sheet of paper and a pencil.

From the view point of UX you man see it differently. A missing standard is not the best experience. A lack of libraries make it harder to provide a form at all.

Luckily there is a common style of the forms in real live. There may even be guidelines not pointed to on the page of the documentation.

To write a tutorial I would like to know, what there is to know about it, to assist those, that want to contribute some cards.

• What are the philosophies behind?
• What is the history?
• What is the future?
• How is the apparent contradiction of freedom and uniform style resolved?
• What are the missing parts of the documentation?

thx all

[merry torrent]

I agree with you. An Ui framework is needed.

[dusky reef]

hi

[pure flower]

Hi!

[woven bone]

Hi all, I'm currently working on an interactive dashboard connected to a few custom web apps & got thinking, how easy would it be to include HA? So yeah, if I were to connect into HA for both information & control, what wold be the best method?

[pure flower]

I'm not sure what you mean, is it something you want to contribute to Home Assistant? If you're looking for support this isn't the correct channel. You're better of in one of the support channels.

[woven bone]

Not sure how useful my little project would be to the community as I'm currently just looking at adding controls for HA within my current custom dashboard. So I can then add buttons for lights, speakers etc that are attached to HA

I'll break it down real quick. I have a home studio where various audio/video apps can be controlled via a custom web based dashboard that runs on a touch screen. It'd be nice to be able to include buttons, sliders etc for lights to be included in my own dashboard.

[pure flower]

#frontend-archived would be the correct channel for this

[worthy frigate]

Is this a UX error?

When I put a timer from the “helper” into the Lovelace, sometimes it says “Active” sometimes it gives the duration of how long there is left; how can I make it so it always shows the duration?

[sand star]

The only times I've seen it say Active is if your frontend and backend are slightly out of sync in time, it will say Active if the frontend thinks the timer should be finished, but the backend timer is running. Does that sound kind of like what you might be seeing?

like if the timer is scheduled to finish at 5pm, and it is 4:59:30pm in the backend so still running, but if the time in the frontend is 5:00:01, it will say "active"

[worthy frigate]

How would I even know what the backend vs front end is..?
I trigger the “Helper” timer to start using Node Red, and expect to see it count down within Lovelace. 🤷‍♂️

In the node red debug, it seams like sometimes the “duration” value is completely missing. But it is available when it works properly.

[sand star]

backend is whatever is running your HA server, frontend is the web browser you are viewing it from. if those two computers are slightly out of sync in time I've seen it say Active.

[worthy frigate]

How would I know if they are in sync or not?
And why would they be out of sync if it works sometimes and doesn’t work other times? It’s not like I turn it off and back on or anything like that…

[sand star]

anyway I think this is in the wrong channel, I'd ask in #frontend-archived about lovelace display of timers if you have more question.

[worthy frigate]

I think it may be a “Helper” issue, but we don’t have a section for that to ask in.

[sand star]

#integrations-archived I guess is close enough

[worthy frigate]

Is!n’t UX user interface, seamed like a user interface issue which is why I posted it here. 🤷‍♂️
Would be nice to have a toggle to switch between active vs duration.

[misty jacinth]

If you're developing, sure. If not, helpers are #integrations-archived

[worthy frigate]

And if helper has an error within its coding..? 🤷‍♂️
Can’t I report the error in here? Or where do I report that into?

Maybe we can have an “Report Issues” tab on the side?

[misty jacinth]

No, that's what GitHub issues are for

This is not a hotline to the devs to report issues

[devout jackal]

Want to see what issues are open (or were open and are now closed)?

• The core (backend) - for HA itself, and integrations
• The frontend (UI) - for cards and display issues
• The Supervisor
• HAOS
• The documentation

Don't forget to check for any alerts

If you think an upgrade broke something then:

1. Downgrade to the previous version to check if it works correctly there
2. If it does then change the logger settings for that integration to debug
3. Upgrade to the new version again
4. Look in the logs for errors
5. Open an issue, following the template provided and including the log information

[fickle relic]

I tried to experiment and modified "translation_key" to my own restful entities but it got overwritten on startup. I'm guessing it's not possible until integrations are updated to support it?

(if they will be)

[bright gate]

I like the new more-info dialogs on mobile when in portrait orientation. But I feel like they don't work as well in landscape orientation or on desktop compared. Has there been any discussion/thought towards changing the vertical sliders/switches to horizontal if the screen is in a horizontal orientation instead of vertical?

[severe sable]

👋 Hi there, I'm a fellow Product Designer (UI/UX), wondering if I can help in any little way for HA 🤔

[pure flower]

Hi! That's awesome. If you like, we can do quick call?

[final star]

Hey I hope this is the correct place to ask: I wonder about the Home Assistant Logo. I feel it is a bit dated and overly complicated.
I was wondering maybe it makes more sense to use the simplified version (for example used as the website favicon) everywhere instead of the complex version?
Or are there plans to modernize it anyways?

[void dagger]

Hello I’m interested if a UI update is being planned or no, and if I can contribute to the redesign?

[void dagger]

Haha guess I’m not the only one interested in modernizing the ui

[mental quarry]

the integration page is 🔥 dude, nice work. so clean

[pure flower]

We’re currently using material design and are updating to version 3. Always welcome to share design ideas!

[pure flower]

Our logo is discussed a lot. No news right now.

[void dagger]

Love hearing, I’m thinking about wanting to contribute a theming engine to allow easy change of themes. Do you already have something similar?

Like a centralized place where you can change colors, border radius shadow drops e.t.c.

[pure flower]

We’ve got some ideas, no designs. It’s also a Frontend architecture question. Our automation editor was also updated because of a design contribution. You could create a design and see what happens.

[void dagger]

Understood, thanks.

[foggy gulch]

Is it possible to create some sort of addon to add a custom automation editor UI ?
The scenario I'm looking for is around smart screen devices, where a layout might need to be defined, making it cumbersome with just drop downs

As such, I was wondering on the possibility of creating a custom editor that would act as an intermediary between the automation/blueprint variables, etc and the UI. Essentially an abstraction layer.

[thorn mica]

take a look at the frontend code for the existing automation editor. You should be able to find the APIs that the frontend is using to talk to the backend and could use the same ones on your side

[foggy gulch]

Ok, but that would be using an outside service / portal correct? Or even running it as an Addon (for supervised versions).
This would be a good option, however, I was also wondering if there is a direct option that would avoid the separate container

[lavish sundial]

You can load frontends as part of an integration.
from homeassistant.components import panel_custom
See Insteon, knx or dynalite.

[foggy gulch]

That still requires the seperate Supervised Addon / docker container doesn't ?

[lavish sundial]

No. It's part of an integration, not an Addon.

[foggy gulch]

ok, thanks for the suggestion. I will take a look at the dev documentation and use KNX as an example

[lavish sundial]

I don't think you will find much about that in the dev docs 😬

[foggy gulch]

I mean even how integrations work from a dev standpoint, etc.
I'm very new to all of this.

[lavish sundial]

Ah, yeah, this you'll find there. We even started a template repo for such custom frontend packages. See https://github.com/ha-custom-panel/template

[thorn mica]

First time I’m seeing this, this is great! We should probably update the dev docs too though, the info about panels is sooo limited

[lavish sundial]

Hey! Just doing the usability test. It asks "How easy was it to change... " and one can select 1 to 5.
Is 1 easy and 5 hard? @pure flower

[pure flower]

1 very difficult and 5 very easy. That are the defaults. Will check again how this looks. Thanks for the mention!

[lavish sundial]

👍 This would definitely profit from lables or such. Considering people from all over the world will use that - and even school grades are differently everywhere 🙃

[pure flower]

Absolutely! Tool showed these default labels. Didn’t notice they were just placeholders. Thanks again!

[ionic ledge]

Hi, fist of all I want to say that I really love the UX that we have now with HA. We are always looking for improvements. Currently in the menu we have the Energy "tab" this tab can contain a bit more than energy alone eg: water. Could it be an idea to change this name to Utilities?

[sand star]

I would guess the place to make such a suggestion would be here: https://github.com/home-assistant/frontend/discussions
Can't promise it will get much traction, but I guess you never know.

[ionic ledge]

thank you for the suggestion I have created a discussion about it, will see where it leads to. The suggestion can be found here: https://github.com/home-assistant/frontend/discussions/17709

[echo apex]

Hello, I've questions about Lovelace UI.
I'm developer of a webcomponent designer, wich I know included in ioBroker as a free configurable ui (see sample http://130.61.246.67:8082/webui/index.html). I now thought if it would be possible to include parts of the LoveLace UI into this designer, as the LoveLace UI is also available for ioBroker.
I tried, but I'm not able to only load the webcomponent definitions from lovelace, would this be possible in some way?

For this I also thought, would it be interesting for home assistant to get this designer as a UI? What would be a good way to include your ui components?

[fiery umbra]

Hi ! I think that's its the right place to post this message

I'm currently à UX/UI designer, and obviously a HA user,
I would like to help à bit this projet, is there à way to help as à désigner ? 🙂

[pure flower]

Awesome that you want to help! There are a couple of ways you can help us. In my experience, the best way to start, is to work on your “what the heck” moment. Do you have such pain point in mind?

Also check out our design website (WIP)
https://design.home-assistant.io

[gleaming lynx]

Figured I'd cross post into here as I figured it might be an curious insight for UX devs. I fear I may have been the only one who noticed this though so perhaps not so significant 😅
#general-archived message

[lavish sundial]

Are there canonical colors for the different entity platforms (climate, sensor, switch, light, cover, number, etc.)?

[dusk cloud]

https://github.com/home-assistant/frontend/blob/62bc171b8caacec9a015340a8850294160f67420/src/resources/ha-style.ts

[lavish sundial]

There are some state colors, but I'm looking for generic entity platform. Maybe this is just not a thing.

[dusk cloud]

So not what starts at line 141?

[lavish sundial]

There are some good (cover, fan) but most is just Amber 🙃
I'm building a menu to select a platform to configure an entity. Wanted to add some color to the icons... anyway I'll find something fitting for the ones not listed here. Thanks

[random locust]

am intertested

[stiff bone]

Could someone help, I am looking for a full res version of https://m.media-amazon.com/images/I/61waSaU8URL.png

[earnest crag]

@fiery umbra What are you using it for?

[stiff bone]

did you not mean @stiff bone? I sent you a DM

[fiery umbra]

Hi everyone !

i just saw that the loader during a core update (Maybe all updates) on the HA Android Mobile App is completly bugged, it's look like a sizing problem (should i duplicate this comment on the Front-end channel ?)

I have a video but i can't send it here 🙂

[lavish sundial]

I think an issue in the GitHub frontend or Android repo would be better. You can upload media there too.

[pure flower]

Nabu Casa is looking for a Senior User Experience Researcher to join our Product and Design team full-time. Feel free to reach out if you have any questions.

https://remote.com/jobs/nabu-casa-home-assistant-c1meh63e/senior-ux-researcher-j1jgjd4v

[celest flume]

Hey hey! Long time no talk @pure flower. I've been deep in HA lately, and have a few QOL suggestions that would help a ton. Make sense to throw them here?

[pure flower]

That would be perfect!

[celest flume]

mega!

It's all little stuff. Stay tuned.

Any chance you published the HA design system kit to Figma Community?

[pure flower]

I’ve recently updated the file with Material 3 components

[celest flume]

QOL Suggestions

[haughty sand]

Hi, I just realized that Zones which are not home, have the same colour in the history bar graph - blue. Is this for a specific reason? Otherwise I think a colour set für zones might make sense or the possibility to pick a colour when defining a zone on the map.
What do you think?

[earnest crag]

Nice question! The way colors in our design system tend to work like this: it uses primary color for everything that needs to be indicated on a page, and uses the accent color for elements that need to catch your attention the most

The map is a rather old feature so suggestions are welcome. It is important to determine what the use cases are, before we get to redesign anything though

What do you need to pick a color for a zone for?

[digital egret]

Hi! How are you all doing? I'm Ariane, a UX Researcher from Brazil and I'd like to contribute to Home Assistant too! I was talking to @pure flower and we'd like to get to know you better. Could you tell me a bit about yourselves in this thread? Who are you, what do you do for a living, and why do you contribute to Home Assistant? Ty

[pure flower]

Hi Ariane! Nice to meet you here too! You had some interesting thoughts and questions. Do you want to share them here too?

[celest flume]

Oh boy. If I find time I’ll write a medium article about why enforced color use is rarely a winning situation.

Obvious example to this, which I played with and quickly gave up on, was color coding my entities by room.

[celest flume]

Hey! I’m nik. I’m in Orlando, and make design systems for a living. Currently the design system lead at Publix. I’ve built design systems and enterprise tooling for Electronic Arts, Nissan, The College Board, and a bunch of other folks in the past!

[earnest crag]

I'm the lead of the product and design team here at Home Assistant and Nabu Casa. Also am a UX janitor.

[magic quartz]

I just wanted to say a huge thank you for the work on the dashboard! My smart home is pretty advanced but it uses Apple HomeKit as a "frontent" for everything in HA. Part of the reason is the clean and rather predictable dashboard, that is family-proof. I tried to setup dashboard(s) in HA for very long time... it was just too tedious and always suboptimal, depending on the device.
The problem isn't so much technical in nature. It's just the current dashboards take too much time to get them even semi-right. It's tedious, even if you have the abilities. Paradoxically, I would say having too much customizability with lack of predefined """smart""" organization makes it very hard to use, if managing smart home isn't your 3rd job on the side 🙂

With the demo I saw on the stream.... it's probably finally time to move to HA. I love the flow and the work that went into design and implementation. There's a huge potential in the new paradigm.

[digital egret]

Nice to be talking to all of you!
Of course, I'll be sharing the questions I had in the message bellow!

I was checking all the communities of Home Assistant, like Discord, GitHub, and forums, and I saw there is a lot of information!
I'm under the impression that the information available is more technical, therefore the majority of participants in these forums seem to be developers or individuals with a technical background. As a consequence, there's a lack of participation from non-technical users in these forums.

Related to the points I mentioned, I'd like to understand better:

• What is your primary purpose for using Home Assistant, and what objectives are you aiming to achieve with it?
• Given that many participants on Discord, forums, and GitHub are developers, how do you perceive the typical user or participant of Home Assistant? Are they primarily developers, or is there a broader audience we should consider?
• Do you believe that users actively engage with the existing resources available on the forums, or is there an indication that these resources are being overlooked?

It would be great if we could talk a bit more about this! And if you prefer, you can DM me!

[dull leaf]

Hey @earnest crag 🙂 Here because of the plug you guys did for here on the livestream! 🙂

I am not a hardcore discord user but will try to use here a bit more to follow the development of this as I work with product design as well 🙂

I have made a post some days ago with some suggestions for future iterations of the Sections on the community. I know that most of those are propably already tought of but wanted to add those here as well! 🙂

https://community.home-assistant.io/t/upcoming-discussion-sections/699012

Great work so far btw! Even the experimental version is also a great evolution! 🙂

[severe sable]

Was the position filled ?

[pure flower]

It closed Monday. Currently we’re reviewing who we going to invite for a first interview.

[obsidian pumice]

Just arrived. Thanks for inviting me @earnest crag Glad to be here

[pure flower]

Hi @obsidian pumice 👋

[pure flower]

Who are our users?

[earnest crag]

Welcome @obsidian pumice !! 😄

[static rapids]

I did something similar to what you did it would be nice to add rows etc into the mix, maybe just and idea that when you add a card to a section a option pops up for columns? (kind of like how it does in grid card) replied to your post, I also added myself to the feedback list for the ux.

[obsidian pumice]

Noob question on using Git Codespaces. I've created a Codespace so I can change a single markdown file (and make sure it renders properly). I've made the changes and can see it on the codespace version of the site no problem. I'd like to publish a branch on my git account first (this is my first change to home-assistant I don't want to push directly to home-assistant just yet). I've committed my changes but when I click the publish a branch buton (again, to my account, not home-assistant) I get the following error: "Can't push refs to remote. Try running "Pull" first to integrate your changes." Using Pull in the codespace throws an error: "Git: There is no tracking information for the current branch"

I realize this is very basic Git, sorry, but this is also my first experience with CodeSpace. Overall Codespace has was great actually. I'm just trying to 'publish my branch' and I'm getting stuck on the right order of events.

[sand star]

Maybe try git pull origin <branch> Branch being dev or master or whatever branch you are working off of.

[obsidian pumice]

Thanks @sand star The issue is that I'm publishing a new branch into my GItHub account from the GitHub:Codespace so it's not clear how to run 'git pull origin x' on my github account.

This isn't a GIT question as much as a CodeSpace <-> Github question. Publishing a branch into my github account from a codespace seems a bit picky. (I could just publish into the home-assistant.io account but as this is my first check in with HA, I was just being VERY cautious)

I think I figured it out. Turns out, if I click on the Codespace listing for my account, there is a menu item to "export changes to a branch" which works! What is very odd is that the same (?) command from within the running Codespace doesn't work.

Sorry for the noise, just trying to get up to speed and, as always, git never fails to disappoint...

[haughty sand]

What do you need to pick a color for a

[weary kiln]

Hi Guys, I've been working on adding a precipitation forecast graph to the weather card, I got a draft PR up here:
https://github.com/home-assistant/frontend/pull/20130
I also asked in the #devs_frontend-archived channel, but I'm looking for some feedback/pointer in the UI side of things. Is there any design mockup for precipitation forecast graphs?

[sand star]

I'm doubtful there's any mockup but I'll throw in my 2c:

• I would have expected a rough alignment between the forecast icons and the rainfall, i.e. a 5 day forecast would have 5 precipitation bars, with vertical alignment between them.
• not really a fan of autoscaling the vertical axis, as you can't really tell anything at a glance without checking the axis scaling in its tiny font, and it makes at a glance a single drop of rain visually equivalent to a huge downpour. I know a fixed scale can have its own issues too, I'm not sure what's the right answer for that exactly.
• I do wonder if a graph is really the most appropriate way to display this, versus maybe just like adding a little raindrop mdi icon under the temperature and just a simple label like "💧 4mm". Graph takes a lot of space for that same information.

[earnest crag]

I concur with @sand star on point 1 and 3. For point 2, I think autoscaling to fit is fine, but there also should be a minimum y axis scale to avoid small units being magnified too much.

I also wonder if there should be this much information on one single card. And what kind of graphs there would be

This is my own weather dashboard for reference.

My recommendation would be to build a Weather Dashboard Blueprint (Strategy) to house the graphs and icons in a coherent reusable manner, similar to how to build the Energy Dashboard

Thanks for the PR @weary kiln! Always nice to see more development on weather 😄

We engage in Open Design, so if there are any great developments, our designers in our team are happy to help with a mockup or give advices 😄

[weary kiln]

Thanks for the pointers! Indeed the axis and scaling is something I had in mind already, but wanted to get some early feedback 🙂
With the precipitation forecast graph there might indeed be too much information in 1 card (even it's it's toggleable), a separate graph might be better. The reason for going for a graph, to me it seems more intuitive to quickly see if rain is expected (especially for the hourly forecast), rather than having to look at the numbers 😅

I'll see if I can make a separate graph card for this forecast

[earnest crag]

I'd recommend looking into building a dashboard blueprint (AKA strategy) instead of a card: https://developers.home-assistant.io/docs/frontend/custom-ui/custom-strategy

[sand star]

I'm confused what you mean by "strategy instead of a card". I thought the strategy just picks cards to show. There still needs to be something that exists to render the precip forecast that the strategy can include.

[earnest crag]

Yes, that is correct. What I meant is to build the collection of cards as a strategy, instead of trying to squeeze everything into one card.

[bright gate]

Are there plans (or interest) in updating the styling on some of the existing cards to more closely match the Tile card (thinking things like the Sensor card, Glance, etc)?

[earnest crag]

Yes, we do and we want to tackle the major ones first (e.g. sensor card). But there are so many cards and we would love some help revamping the rest of them.

[bright gate]

i keep thinking i need to dust off my frontend dev environment... are we concerned about style changes "breaking" things for people that card_mod the stock cards? (...please say no haha)

[earnest crag]

We tested that concern when we were revamping the Thermostat card last year. Our conclusion was to just swap the new design in and not concern about those hacks. 🙂

So here is the big list of cards we need to update: https://doc.clickup.com/2533032/p/h/2d9n8-22311/d46c9126bb1f4a3

The priority is to make sure that the cards fit in the grid system first, and while we are updating that we should also update the styling to match the Tile cards

[sharp rapids]

F plant status card

[earnest crag]

oops I totally missed that

[sharp rapids]

If you didn't miss it you wouldn't retire it 😢

I am still looking for a better plant card, so maybe this gives me a bit of motivation

[earnest crag]

Oh yeah, it may be retired because it's essentially a combination of multiple cards to produce a summary

[bright gate]

is there a figma floating around with the card designs?

[earnest crag]

And that's related to the idea of adding a device as a card, which is another topic for another day 🙂

[earnest crag]

No, there isn't. Most of the ones "to be designed" except Sensor card has not been designed. If anyone likes to contribute on design, feel free

For Light, Alarm, Button, the idea is to, like you said, style it like tile card. They also need design help

[pure flower]

100% interest! 🤙

We can sync on what card you would like to work on. Can we create a design for it.

[fiery umbra]

Hi everyone !
I saw the New update with the possibilty to add floors, but in my case i have a house "Splited in two halfs"
Each one having two floors

It could be Nice if this New feature could handle "buildings" having floors,

À very versatile option could be to be able to group rooms into Kind of folders that can be labeled, and be able to group thèse folders into folders etc

Like files in your laptop

[dull leaf]

You can already do that in some way @fiery umbra ! Since when adding floors you have the possibiliti of adding their level and name, You can have something like: Building 1 - Upstairs, Building 2 - Upstairs. Both of them having the same level. Of course with that you would still need to add all floors in a building for automations, but labeling floors seems to be a good idea for your use case.

I just don't know if it's a use case many people have so I don't know how to priorize it.

@earnest crag and @pure flower I have a hard time figuring out how to contribute more directly as a product person, so I'll send here the things I found out for your review, ok? Please let me know if there is a better way to do that! 🙂

About the new categories in automations: First, thanks it's as you people usually do, way better than what I was first envisioning on the feature! But I have some thoughts and suggestions on those for you to evaluate.

1. Collapsable categories: The way categories show in the table is wonderful, but I would want to be able to collapse the categories, so I can see a High-Level View first and then dive into the ones I need. The categories help with organization, but collapsing them will be spectacular for visual clutter.

2. Reset the multi-selection when searching: I don't know whether resetting is the best way here or adding more feedback to the user (like a line similar to a list item but selected and having only the label “3 Hidden Automations Selected”). The use case for this is that I selected all my washing machine automations and categorized them. Subsequently, I wanted to do the same with my bed ones and typed “Bed” in the search bar. With this, my washing machine selected ones were hidden but still selected. I selected the ones I wanted and when I asked to move categories, they all went to the bed category.

3. Apply icon to automations: Checkbox to apply the category icon to all the automations below it. Most of my automations do not have an icon out of laziness, that would help us lazy people.

[meager heath]

Hello, I've got a request/idea...
I'm new here so hope this is the correct place to post....

Goal: Allow different notification types (eg: High Priority, Medium, Low Priority). On Android / iOS I can then customise notification sounds / do not disturb overrides etc.

More Detail:
More notification types beyond the current 2. Currently, we have (SensorWorker, General).

Adding more types would allow for more useful notifications:
• Sensor Worker
• Low Priority
• General / Medium Priority (Default)
• High Priority

Example usecases:
• It's useful to know when some actions run with a notification (eg an irrigation system), but it's not super important.
• When my house alarm, water leak sensors, car alarm, etc go off, I want to know about this ASAP even if I'm asleep / in a meeting.

[sharp rapids]

https://community.home-assistant.io/c/feature-requests/13

[earnest crag]

@Madelena and @Matthias de Baat I have a

[fiery umbra]

You are right ! It can be marginal, the idea was only to have a more flexible way to organise, However it could create complexity, stick to clear and easy to use feature is for sure better 🙂

[dull leaf]

Backlog Prioritization Methodology

[tulip musk]

Is there a way to filter against eg entities that DON’T have a label? For example a#I have added a label to entires I don’t want to be recoded and want to see all the entities that don’t have the label to see if I have missed to label any.

[fervent gust]

Is the color slider coming to the light tile card from the mushroom design? The legacy clickup doc says created, does that imply being feature done or room for extension?

[wild sparrow]

The energy dashboard would be a nice place to have some sort of dedicated page showing the charge level of all battery powered devices in a zigbee network...

[dull leaf]

We already have this on the "features" of the tile card I think have you tried it already?

[dull leaf]

That would be awesome! Today I use AutoEntities to show a list of my zigbee batteries sorted from lowest to highest. But having a default page or even card for this would be nice

[fervent gust]

I dont see it under features on 2024.4.1 (Frontend 20240404.1), I am currently not running the beta. I am using WLED and Philips Hue Color Spots.

[fervent gust]

For clarification, I mean the full rgb color spectrum slider, not the temperature slider.

[dull leaf]

Sure that makes sense, I do not have RGB lights in my automation right now, only cct ones, so I assumed that the color slider was also available for those.

[fervent gust]

I don't see it under the card-features in the frontend repo (https://github.com/home-assistant/frontend/tree/0d3e730c9c37d654c2ee37572542d41d740de55c/src/panels/lovelace/card-features) if you assumed that it would be available, would anything speak against implementing it? I might try it then.

[dull leaf]

Awesome, that seems like a great idea! If you have typescript knowledge it should not be very hard since you are goning to be building upon the Color Tem code.

You can also use Mushroom as a reference on the code, since Paul written both, they should be in some ways similar.

https://github.com/piitaya/lovelace-mushroom/blob/main/src/cards/light-card/controls/light-color-control.ts

[compact cargo]

The close (large X button) in the card configuration UI needs to confirm if there are unsaved changes.
I mistakenly clicked the big X losing my progress in editing my card layouts.

[fossil holly]

So this has bit me in the ass a few times.. You should not have multiple save buttons like with add-on configs.

[wispy urchin]

I have been thinking about changing the slider control component to move relative with the dragging motion, as opposed to instantly jumping to the input location. I think this would be the better default behavior on touch devices, as it allows for better control near the edges and generally feels more refined. On the other hand, I'm not sure if it would work well in contexts other than a brightness slider

[lavish sundial]

Hi 👋! I'm just playing around with the BooleanSelector. It is shown as a toggle switch. Imho, in some cases, it would be nice to have it show as a checkbox instead. (like bool in ha-forms). Is there anything against that from a UX view?

[copper parcel]

We have such a thing already (in a way)

The constant selector (make it optional gives it a checkbox)

https://www.home-assistant.io/docs/blueprint/selectors#constant-selector

[lavish sundial]

Oh interesting. Never tried that. However it doesn't return a Boolean. It returns a constant (may be True) or removes the key, doesn't it?
Would there be an argument against adding optional mode for BooleanSelector '{boolean: {mode: "checkbox"}}`?

[copper parcel]

A checkbox also doesn’t return itself if it is unchecked

The behavior is the same

The main reason (if I remember correctly) why the booleans did get a checkbox option, was that if the input is optional, the row would get a checkbox too

Making the UI show two checkboxes. The constant selector was made to handle specifically that, and it does behave as a checkbox (only returning a value if checked)

[lavish sundial]

Hm... maybe I did try that, but there is just a bug. It doesn't render correctly in device trigger extra_fields.

the downside about cv.boolean is that it doesn't support descriptions

[fiery umbra]

Hi, I encounter a problem that could be solved by à better UX

The problem of HA litterally killing SD Cards because of default configuration with à lot of Writing
(this problem appear à lot online on forums)

This could be solved by adding some informations on the tutorial on the website telling that people can either limit the number of logs and saving of events, or move storage to an external hard disk or USB stick.
This information should appear again during onboarding, on first connection.

What do you think of this?

[compact cargo]

Or maybe HA can 'cache' state data for the last few hour/day in the RAM and then write flush once in a while.

I'm not too well versed with the HA architecture, so please don't bite me if this is already implemented

[pure flower]

Hi UX peeps! ✏️
Happy to share that we have a new job opening for a UX designer at Nabu Casa! More info here: https://nabucasa.breezy.hr/p/35819d4a0ce2-senior-ux-designer

[dull leaf]

I have applied to that! 🙂 sent some more info tomorrow, let me know if there is something else I need to send you!

[lavish sundial]

Hi! Is a climate entity supposed to not offer a way to climate.turn_on via the UI? As far as I can see the only option is climate.set_hvac_mode (from the dropdown).
This means an integration can't offer to set heat / cool without turning on because the UI wouldn't support turning on then - even if the device would be fine doing that.

[silver bramble]

okay — so this seems like the bee's knees! https://github.com/ideo/Figproxy

[copper parcel]

That is a feature flag, so it needs to communicate the on & off features in other for the UI to show them

[pure flower]

Ha! NICE! Let's build a prototype and user test it with someones HA system connected to it 😂

[lavish sundial]

Sure, I do have set this (TURN_ON and TURN_OFF), but still I do not see the On/off feature independently of heat/cool.

[wispy hornet]

👋🏼

[bright gate]

👀

[copper parcel]

🇺🇽

[pure flower]

Hi! 🤙

Do you know some UX designers that are in this Discord?

[empty badger]

Oh! This I like the sound of this.

[jaunty swan]

https://c.tenor.com/kwv_MuCidz8AAAAM/yes-will-ferrell.gif

[bright gate]

a wild @jaunty swan has appeared 👀

[dull quail]

I’ll pretend I know ux and hangout 😅

[pure flower]

Haha great!

[rare falcon]

Hey folks 👋🏻 I'm a digital product designer. Last year when I got into Home Assistant, I started to offer some advice on the forums, but haven't ever participated in any open source software. I also didn't want to step on anyone's toes or insult anyone's hard work, so I just held my peace.

I think Home Assistant is great, and it's come a long way to becoming more user friendly. I know a lot of hard work goes into that. I also don't know if there's an overarching goal for Home Assistant, like how user-friendly does it really aspire to be? And who exactly decides that? One of the biggest threads I ever saw on the forum was a discussion about how open it should be. It seemed there was one camp of people who enjoy coding, soldering, and using command lines who bristled at the idea that there was code they couldn't edit within HA. On the other end of the spectrum there were people who learn what they have to out of necessity and wish it would just work with the push of a few buttons. I'm not sure where between those poles the goal lies, if that makes sense.

[ebon dove]

sounds like the yaml config vs ui config thread

[shell eagle]

So we have actually defined that nowadays in an architecture decision

https://github.com/home-assistant/architecture/blob/master/adr/0010-integration-configuration.md

The answer is: devices/services authentication goes via UI. All others can do YAML + UI.

Things like MQTT/Modbus require the user to specify a protocol on top of the actual integration. That sucks in UI so we allow YAML.

For things like automation we have YAML + UI .

Now note that we don't have to make everything possible in the UI that can be done in YAML.

Take blueprints. They have selectors attached to each field to help the user pick the value. It cannot bypass this in the UI, but it's possible in YAML.

[rare falcon]

This was back in September of last year, and the biggest area of improvement I saw (given my limited use) was the UI for scripting and automation. There's already been a lot of great improvements made!

[shell eagle]

So when it comes to automations and blueprints – we realized that even our current concepts of automation can be daunting. So we introduced blueprints that basically just tell users to configure an existing automation. We can still help with discovering new blueprints but basically that is already a big win

[ebon dove]

i really like the trace stuff, super handy

[shell eagle]

The trace stuff started actually as an automation editor prototype by @empty badger . The idea to click nodes and edit them, and also have small buttons on the lines to add nodes

which… one day it might become one again

It's great to see a quick overview of your automation

we could also help to enhance blueprint previews

[ebon dove]

ya so i can find out why it didn't work as expected and fix it 😛

[shell eagle]

the hardest part today with automations is if it didn't trigger anything

[ebon dove]

i don't usually have that issue myself

[prime pivot]

welcome @pure flower! it's nice to have a user experience person on the team. I have some suggestions generated from the users on the forums if you're interested in hearing them.

[bright gate]

rule #876: never listen to suggestions from @prime pivot 😜

[pure flower]

Haha, they are from te users on the forum. So I’ll give it a try 😉

@prime pivot what time zone are you in? We could plan a call?

[pure flower]

Nice to meet a fellow designer 👋

[wise jolt]

What I spend time doing is figuring out which entity of several caused template binary to flip.

[prime pivot]

EST, you?

-5 if you like numbers 😉

I could just have a text chat too. These are just common complaints from people who just start using the software and some common complaints about organization of controls from all users

[empty badger]

I'd like to raise a question about accessibility regarding the trace graphs - and possibly as a wider question. I tried to add some means of keyboard navigation to the graphs from the start, but now I feel it doesn't really make sense.
It turned out to be pretty much impossible to use in the current implementation, and I have a feeling that a visually impaired user using a screen reader would likely prefer doing automations purely in yaml anyway.
The trace graph is mainly a visual aid in the first place.
It would be nice to have a baseline for things like this. How much work should be put into accessibility when there are alternative methods available. Maybe even an ADR?

[thorn mica]

I think that’s a fantastic idea

There are stories of people with physical challenges using home assistant to make their lives easier

We should make it easier for them

https://reddit.com/r/homeassistant/comments/n7tu8w/looking_for_best_automations_for_disabled_users/
Heres one quick example i found

[thorny egret]

(i do a lot of accessibility stuff at work) it's important to note that not all assistive tool users are 100% of the time using them. for example, they may kick on VoiceOver to read something that's tricky, or be able to fully read but not be able to operate a mouse/keyboard. so "an alternative approach is available" can address the issues, but not necessarily what they're trying to do.

[thorn mica]

Makes sense but I think the primary point is that when we make things more visual we move away from making things accessible

(Without intentional thought about it at least)

[thorny egret]

i read thomas's question as "if there's an alternative approach, should we try and make both accessible?"

i think the answer should generally be yes, if at all possible. some things cannot be made accessible, but that is fairly rare ime

[pure flower]

Good that you bring this topic up! Accessibility is import and can benefit all kinds of people. I like the idea to make a baseline, what is already done to make Home Assistant better accessible? And what kind of user should we focus on?

[empty badger]

I'm not entirely sure what I mean with the question myself, but I guess both interpretations.
It's a very important question that deserves to be cleared out and defined - not least because consistency is even more important when it comes to accessibility.

I turned on voiceover once a year or so ago, and was positively surprised by the experience, but there's still more work that can be done.

The entire interface zooms very well, so that's good, but how about a high contrast default theme?

Just dropping thoughts here

[ebon dove]

on that same train, colorblind theme that'd not use red or green eh?

[thorny egret]

i think desktop web somehow behaves much better than mobile. voiceover on ios can largely not use the frontend at all - the aria labels do not work, activating buttons does nothing. wish i knew more about web technologies to pinpoint the problem.

[fossil holly]

I really appreciate the UI+YAML approach. They do this in Azure Pipelines a bit differently but the target audience is different.

It does feel like UI is second/unfinished in spots

[fossil holly]

Color blind is more than red/ green. Monochromatic viewers might benefit from high contrast dark themes as brightness is also an issues.

[lavish sundial]

Hi! I stumbled upon the question how to control the state of an entity of integration A with a switch entity of integration B.
It's a very simple and common Task but I guess the answer isn't that simple:
Create an automation that

1. switches A.entity on state change of B.switch
2. update state of B.switch on State change of A.entity (for correct status)
3. on startup do 2
4. avoid building a loop

Am I missing the easy and straightforward way to do this? Should blueprints be the answer?

[steep acorn]

Sounds like you want #automations-archived and https://ludeeus.dev/home-assistant/templates/share-state-between-two-entities

[lavish sundial]

I'm not looking for yaml advice. I'm interested if it is the desired user experience to have to build rather complex automations for solving such simple tasks.

[steep acorn]

IMO automation is the simple way of doing it 🤷‍♂️

[prisma stone]

maybe light switch if what you search

https://www.home-assistant.io/integrations/light.switch/

[lavish sundial]

No, I guess what I mixed up is the fact that a switch entity doesn't represent switches (as in wall mounted user interfaces that control stuff they are assigned to) but Relais / switched outlets that receive their control from some other thing (remote, api, etc).
So the answer to the original question is to not control an Entity from a switch entity, but from HA events!?
Im doing HA stuff for > 2 years now and realized this just now 🤦

[fossil holly]

I know a person, while still a bit green, who has done a few UX studies/research/work (one for a startup) and if I can talk them into doing some UX work for Home Assistant would this be welcomed and who would they need to be in contact with to share info and ask questions?

[jaunty swan]

https://discord.gg/pNPeZ6gF

Thats your link for Sharing info and Asking questions

[fossil holly]

very meta.

Its a big time commitment and if it's unwanted/unwelcomed there is no reason to start it.

Maybe I'm not asking the question right..

Would the devs like to work with a UX researcher with 1 year experience to conduct one (or more) UX studies?

[steep acorn]

@pure flower ☝️

[pure flower]

Awesome! He or she is more then welcome! Joining this discord channel is probably the easiest and we should definitely do a video call

I’m starting the foundation for UX design and research. One of the first things is finding some respondents for our Home Assistants user research group
https://forms.gle/5NSabxHJ3qkp7Vke9

[fossil holly]

This form can only be viewed by users in the owner's organization.

Try contacting the owner of the form if you think this is a mistake. Learn More.```

There's your problem.

[pure flower]

Haha whoops! Didn’t publish it yet. Bringing my kid to bed. Will do it in an hour

[pure flower]

Should work now

[fossil holly]

To increase trust there should be a link to this from the website and on the form you should stay exactly but will be done with this data that's being collected. For example it'll only be used for research purposes and email addresses won't be shared with third parties blah blah blah.

[pure flower]

Thanks for your suggestions! Campaign around this is still work in progress. We added text in the form like "No worries, we won't use it apart from reaching out regarding research.". But we should probably repeat dat on different places.

[storm shard]

@pure flower I haven't seen @hidden fern around lately but I'm pinging him here because of ideas which have been contributed in the past and also just to make sure everything's ok 🙂

[pure flower]

Cool, thanks! I've seen some great GitHub contributions from him

[grizzled coyote]

@pure flower I was thinking about adding a navigation button to the more-info popup to directly jump to the history panel with the respective entity pre-selected so users can easily investigate the entities history (since the more-info only shows the last 24 hours).

What do you think?

Rather than putting it in the header bar, an argument could be made to add it somewhere nearer the shown graph => Less change of resulting in ellipsis in the title bar for longer names

[lavish sundial]

Maybe by clicking the graph directly? I'd love such a shortcut!

[grizzled coyote]

I thought about that as well, but it is not really clear to the user. I also thought about showing a hovered button when cursor is over the graph area, but not the graph itself (so no value tooltip is rendered), but that is not possible for mobile/touch.

[pure flower]

@grizzled coyote Love your idea! Would suggest your second option, adding a button near the graph. Monday I can make a small mock-up what it could look like.

[grizzled coyote]

That would be great. I already have a working implementation with the button in the title bar, that I will then move based on your proposal.

[shell eagle]

our history panel really needs an overhaul

it's so messy

[empty badger]

It also has lots of little discrepancies with the rest of the interface, like icons and status colors and stuff

[fossil holly]

More validation for input field would be great. Also units of measurement and formatting hints would be nice for time, etc

[pure flower]

Great to have a best practice and guidelines for this. We're working to integrate UX documentation on developers.home-assistant.io and this should be part of this. @fossil holly would you be interested adding your thoughts in this Google Docs https://docs.google.com/document/d/1DiaeK_FkM_KWpkZKWrZLbmvl19KDhOX32xGTJm6lJro/edit?usp=sharing

[pure flower]

I've published a Figma DesignKit to help you design concepts that match the Home Assistant interface. It's build with Text Styles, Color Styles, Components, Auto Layout and Variants. Check it out here: https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit

[grizzled coyote]

I created a draft PR now to track this topic: https://github.com/home-assistant/frontend/pull/9717

[pure flower]

@grizzled coyote ah sorry, this slipped my mind. Monday I was a bit sick from my covid shot. Thanks for the draft PR, will respond there.

[sacred dew]

Where is a good place to discuss unfinished design prototypes?

[pure flower]

In a GitHub issue or you can post your question here

[sacred dew]

Since it's so preliminary I'll post here. I've been playing around with seeing how we could build more documentation into the create automation page to help guide people through their first few automations

My screen recording does not want to post at the moment 🙂

But until I figure this out, thoughts on making the page more verbose (currently I've played around with converting the dropdown for choosing the trigger into a card listing out all the automations, and selecting a trigger type creates an additional dismissable section within the card describing what the trigger does)

[steep acorn]

try now

[sacred dew]

Woo thanks!

[novel osprey]

I like that approach layout a lot. Easier to see what there is to choose from. Maybe the description could be an hover/mouse over and/or long-press popup so you see the info before actually choosing the trigger?

[empty badger]

Neat!

[pure flower]

Nice! Great idea to replace the dropdown! Did you make that prototype in Figma? Want to share it with us?

[jaunty swan]

Here was the old UX that I built a long time ago. Very similar to Ryanan

[wispy hornet]

I would like to reduce the trigger, conditions and actions to 1 line summaries, that can be expanded when you click on them

so the overview of the automation stays clear

right now it is wayyy too busy, especially with all the nesting of choose/and/or/repeat...

[empty badger]

I'd like to do that to everything

[wispy hornet]

haha 😄

[empty badger]

A single line or two of information next to it's node in the graph, and when you click it you get a popup with all the settings.

[wispy hornet]

yeah, a popup or an expansion panel

[empty badger]

Hard to balance, though. You can't have too little information visible because then you need to click on everything every time anyway

[wispy hornet]

Trigger:

• When bed light turns on
• When the sun sets
• When event blabla is fired

but yeah, it gets hard with bigger things, like event data, or and/ors

although and/or's might not be such a big problem

nesting/grouping will also be easier when it is just 1 line I guess

[empty badger]

Something like this, perhaps...

[wispy hornet]

Yep, thats a start 🙂

[sacred dew]

Very cool! I like the popup idea because on otherwise the selector takes up lots of room on mobile

I'm still working on the figma file, but I'm loving the design kit 😁

[pure flower]

I really want to make a mobile first design for the automation editor. All these ideas could make that work! Making it visual that is starts with triggers, could contain conditions and results in actions. Adding a trigger, condition or action could be done in a dialog and when completed it will show like a "node" on the overview.

[sacred dew]

I'm going to be offline for a while so I'll leave my figma link here: https://www.figma.com/file/pAHuoEApZp5iY9W0ZOPxD5/Home-Assistant-DesignKit-Community?node-id=840%3A2767

[rare falcon]

Nice work y'all! The most recent "room for improvement" thing I caught in Home Assistant is the airplane controls for the light.turn_on service. This should be reduced to about 1/4 of the fields and progressively disclose the remaining controls as needed.

Tried to attach a screenshot but I guess I'm not allowed. https://lab.waltercoots.com/home_automation/on-and-on.png

I'd consolidate the 8 color options (😯) into one field that allows for toggling, then the 5 brightnesses options into a similar one.

Is there any tracking of what does and doesn't get used within Home Assistant? I'm extra curious how many people would choose XY-color.

[bright gate]

there's not currently a figma mockup of the device page is there?

[jaunty swan]

https://www.figma.com/file/4LZqQZRynDZGTgA2rN35Te/Home-Assistant-config-mockup?node-id=0%3A1 @bright gate

[wispy hornet]

disable advanced mode and you won't see all those fields 😉

[sacred dew]

I finished mobile mockups for the create triggers page and would love some feedback!

Many more alternate versions in the figma: https://www.figma.com/file/pAHuoEApZp5iY9W0ZOPxD5/Home-Assistant-DesignKit-Community?node-id=840%3A2767 as well as desktop version of these

Some things that might not be obvious from the screenshot:

• The edit button next to the trigger in the first page takes you to the trigger type selection, and the 3 dots menu next to it has the same options as it currently does
• The trigger documentation in the last page can be pulled up and down. I modeled this off of google maps (if you search for a location, you'll see the location information in a similar type pull thing)

[honest turret]

@thorny egret @marble storm

@dawn mortar

[pure flower]

@sacred dew Sorry, I'm less online at the weekend. I like what you're designing here! Will leave some comments in Figma

[sacred dew]

Thanks! Just replied to your comments!

[sacred dew]

Progress update:

I spent the night working out navigation issues, and in doing so drew some inspiration from the new Google Calendar / Material Design. In the process of this I also decided to redo the new automation page for fun—this is probably out of scope but it was no longer looking consistent with the other two pages.

@pure flower - Thank you for all your figma comments! I know you wanted to align this more with the wizard ui we have on the energy page, but I'm struggling to picture setting up a trigger as a wizard since it's only two steps: choose a type then edit options. If not for the text, I hope at least the new navigation should be more wizardlike.

The navigation has significantly diverged from existing patterns in Home Assistant, but I feel this is the most sensible option out of all I've explored:

• There are no buttons overlaying the documentation pull-up. This reduces the number of stacked-up components and solves the problem of what would happen if someone pulled the documentation up all the way.
• The close/back button and save button are placed in the same region, which makes it easier to discern they do opposite things

[empty badger]

I absolutely love this part!

[pure flower]

Really nice! Just made a copy to make some iterations on it. But maybe it's easier if you could invite me as editor? Will design something what i've got in mind

[sacred dew]

You should have edit access! I'm excited to see what you have in mind!

[wise jolt]

could automation create/edit leverage the trace tree somehow? it's such a a great visualization.

[empty badger]

That's why it was created in the first place.

[wise jolt]

ok good, i wanted to mention it with active mockups going on.

It may be hard to have space for it in a mobile view but im sure the experts can find a way

regarding the misplaced change trigger type button comment. Changing a trigger type today blanks any populated fields. So perhaps remove the change trigger type button and instead the flow would be to delete the trigger with the X in the upper right.

[empty badger]

I was thinking that too. That would be simple enough.

[sacred dew]

@wise jolt good suggestions! I haven't yet explored editing the conditions & actions, which would really benefit from the trace tree visualization. There is still a lot of work to do here...

Removing the change trigger type button will change the ui up a bit—everyone will have to learn to do the delete&re-add from the automations page—and I'd hate for people to be asking "but why did change trigger type dropdown get removed???," but it's the best suggestion I've considered so far

[wise jolt]

Yeah I agree. It may not be obvious what to do. When I'm using something and need to change or cancel, "back" is something I'll try if I don't see more obvious direction action

[sacred dew]

Actually my current favorite idea is we now add it to the overflow menu on the automations page instead of the editing window

[pure flower]

Thanks!

Just added this design https://www.figma.com/file/pAHuoEApZp5iY9W0ZOPxD5/Home-Assistant-DesignKit-Community?node-id=1011%3A4491

And this prototype: https://www.figma.com/proto/pAHuoEApZp5iY9W0ZOPxD5/Home-Assistant-DesignKit-Community?page-id=1011%3A4491&node-id=1013%3A4719&viewport=501%2C48%2C0.5&scaling=scale-down&starting-point-node-id=1013%3A4719&show-proto-sidebar=1

Designed it on the smallest screen size, to make sure it works on every device

[wispy hornet]

Looks really nice!

[empty badger]

You should probably keep nesting action in mind from the start. Like choose, loop and conditions like or.

[shell eagle]

I left a couple of comments.

[bright gate]

Hey, UX folks. The Z-Wave JS device pages are getting a bit out of hand with buttons and information, and there's a lot of functionality still to be added. Before I go cramming in more buttons, I'd like to get the UX of that page figured out so its less messy. Unfortunately, I'm having a tough time figuring out ways to make it better... I made a Figma of the current state of the device page for Z-Wave JS devices: https://www.figma.com/file/MW24EamZsCPDuCdzdWa8ES/Home-Assistant-DesignKit-(Community)?node-id=815%3A1931
If anyone's up for helping with the design I'm happy to share access to the figma file. There's a note there with all the features still to add so its definitely going to get busier... Since it's part of the standard Device page I think we're limited on layout? All the integrations that use the Device page for extra info fit it all in that first card.

[pure flower]

Yeah sure, just requested edit rights

[sacred dew]

An idea I had for nesting actions: we could display the loop/condition/or as a single block in the automation, then when clicked it displays its contents. And then we could maybe put the trace diagram at the top of the create automation dialog as an overview. Otherwise, trying to display everything nested on mobile requires a lot of room.

[pure flower]

@sacred dew and I discussed where to put the X close icon in a dialog. At the moment HA mainly has it in the top right, but Material Design prescribes placing it in the top left: https://material.io/components/dialogs#full-screen-dialog

To make it consistent, we have to choose between top left or top right . What do you think?

[wispy hornet]

Right

Material only describes it for fullscreen dialogs, none fullscreen dialogs don't have a close button at all in the specs

Oh, not true... On desktop they do it right, on mobile left

[novel osprey]

Thanks Bram, that explains it. I have always thought it is strange that it is to the left, since all other close X's (on my desktop PC) are to the right, even in Google Calendar and so on.
I prefer to the right - on desktop.

On mobile, I very rarely use the X at all, I mostly use back button/gesture.

Another thing: I have a few suggestions regarding the more-info's layout and "information consistency". Is Figma and posting in this channel the way to go now, or is https://github.com/home-assistant/frontend/discussions still the best place?

[pure flower]

Great find! Can we implement that as a frontend component?

[pure flower]

Good question! Discord is easy for quick responses. GitHub discussions is great for longer topics. Figma comments are perfect for design comments. I find that I go to Discord faster than to GitHub discussions, but maybe I should use Github discussions more often.

[wispy hornet]

I think so

[pure flower]

Just made another iteration for the Z-Wave JS device page. What do you think?

[thorn mica]

is yours the redesign section?

[pure flower]

Yes

[thorn mica]

it looks good!

I'm thinking under the device manual, we also include wakeup, reset, etc. instructions as links that open a modal with the text @bright gate

for the error page, there's probably a second one we should create for a failed node

on that screen we can have the actions to remove or replace the node

also we are missing refresh values, refresh cc values, and ping actions. The last one isn't as important because we have a service for it but there is no way to refresh all values on a node currently, nor is there a way to refresh the values for a CC

you could combine those into a single action

also, I think "Download Device Data" should be "Download Device State" or "Download Device State Data" to be more clear

I think that covers everything that we already have WS API support for

only thing missing is managing node associations but no idea how that hsould look yet

[bright gate]

refresh values i think would be good from the device page

wondering if maybe we should add a separate advanced page for a z-wave js device for some of the more advanced stuff. could see it listing the endpoints and command classes a node supports, which could then have a refresh button for refresh cc values for that CC

[thorn mica]

I like that idea

[pure flower]

Thanks @thorn mica! Just made some changes and added your comments to the design

[pure flower]

@bright gate and I discussed this. I understand the pro's of this feature, but it's a duplicate of HA automations. Wondering if we should add this.

BTW, I'm on vacation for two weeks starting tomorrow. Feel free to make some changes to the design.

[thorn mica]

this seems like something worth polling the community about. You can accomplish the same thing as a node association via automations for sure, but people are still using associations and it would be good to understand why

[bright gate]

main benefit of associations is they work if HA goes down

[pure flower]

@sacred dew Just started this discusion in GitHub about the Automation Editor: https://github.com/home-assistant/frontend/discussions/10064

Lets continue our discussions over there

[thorny egret]

fishing for ideas on making these 2 widget types feel a little more visually distinct. the blue ones (currently with a chevron) open a page, the others fire an event.

[wispy hornet]

I would use

And place that in the bottom right?

[thorny egret]

that was one of my initial thoughts too. the gigantic corner radius makes it hard to position without stealing a ton of title space, too.

swapping the > chevron and the [open external] icon does look a bit nicer though

[empty badger]

How about just appending it to the end of the text?

Maybe as a superscript even

[thorny egret]

superscript @ icon

superscript @ text

i thought about trying to overlay the indicator on top of the icon, but it doesn't read very well

regular@text

the icon floating after the text feels a bit off to me, almost unbalanced

i do kind of look the like of superscript@icon though

[sharp meteor]

Can't you put the text in brackets or something when it just sends an event? (Everyone's a UX expert) 🙂

[grizzled coyote]

@thorny egret I would not put the "navigate" icon after the actual icon, since I think that makes the real icon less easy to visually process (plus visually inconsistent with the action button section). For the same reason I would also add a bit of space (a few pixels) after the end of the text and then put the icon there.

In the end this navigate info is the least important element of the button /after icon and text), so it should come last.

[thorny egret]

i don't disagree that it's not as important, but it's also hard to fit it into the ginormous rounded corner there, too

[grizzled coyote]

@thorny egret I don't mean putting at the end of the button, I mean after the label, but leave a few pixels (the width of an average character or the same width you have between icon and label) to not have them glued to the end of the text. Makes the label visually easier to parse/read.

[pure flower]

Hi @thorny egret, I'm working on a few designs and I have a few questions. Can a page and an event be on the same cards? And are the 16 buttons in the big card required?

[pure flower]

Work in progress: https://www.figma.com/file/okoY3khe4ASRLukPmdoSrG/iOS-widgets?node-id=0%3A1

[thorny egret]

it is complex! there are multiple sizes:

• small (max 1 tap target, so it's always limited to 1) [1 col]
• medium (max 8) [1-2 col]
• large (max 16) [1-2 col]
• extra large (max 32) [ipad only] [3-4 col]
  they are pictured here: https://github.com/home-assistant/iOS/pull/1860
  max count / column sizes are arbitrary and picked by me

each individual item inside i've given a few sizes:

• single (on its own, in the small size or larger)
• expanded (less rows than the # of rows for half the widget full)
• regular (half the # of rows)
• compressed (>= half the # of rows)

i've also decided:

• prefer splitting into 2 columns over splitting into 2 rows, if there's just 2

it may also be worth considering what an "entity" variant of this particular look/feel is since i plan on adding that soon, just the title/icon/state of entities for the moment. i plan on giving users way too much control later, but it's easier to build up the basics i think

oh and the HIG has the sizing for all the widgets: https://developer.apple.com/design/human-interface-guidelines/widgets/overview/design/

oh also: no, i've arbitrarily decided pages and actions cannot mix.

[pure flower]

Oke thanks! When a person presses an action, the app won't open, right?

One other thing. Personally, I find the twice as many buttons in the widget visually too busy. Partly because they are only separated by a line. I've added some examples in Figma, they give more margin between the buttons. Downside is that it allows fewer buttons in the widget. What do you think of giving the buttons more margin?

This is how Shortcuts does it. When an action is triggered it gives a notification.

It's a bit like the current widget

[thorny egret]

widgets must open the app when tapped. only apple grants themself permission to not do so.

i think apple wastes a lot of space in their shortcuts widget and limiting the count to the current size (of the widget) feels unnecessary as i've lived with it over the months it's been out. like it just feels like i made the count limit too low

i was also playing around with other languages and it required 2 lines for the page names way often, which is why i moved toward "icon left, text right" for all but the extra-vertical-height sizing

[jaunty swan]

https://github.com/home-assistant/frontend/issues/6578

Thoughts? (This is Paulus's design not mine)

[dull quail]

Will these things be associated to a person or just a list of entities in the card config?

[jaunty swan]

They would be associated with a person for the Card and header part. The header is then on a list of entities in the card config

[thorn mica]

I think the robe needs some work, but otherwise looks good! 😄

[pure flower]

If it both opens the app, should it be more visually distinct? Depending on the users description and other background color it’s maybe enough?

[pure flower]

Looks really nice! Just made a comment on GitHub

[thorny egret]

the actions vary in colors (some manually, some based on colors i randomly pick, depending on config) but the page ones don't. the page ones, i think, could look starkly different if we wanted

[dull quail]

https://twitter.com/featherless/status/1446151509549387781

Jeff Verkoeyen (@featherless)

This year my team shifted the open source Material components libraries for iOS into maintenance mode. Why?

A 🧵...

Retweets

149

Likes

762

Twitter · Oct 7, 2021, 4:32 PM

[peak junco]

the link on the blog post expired, I made a PR to fix https://github.com/home-assistant/home-assistant.io/pull/19753

[pure flower]

Thanks!

[peak junco]

no prob

[pure flower]

And awesome that you made a PR

[peak junco]

github makes it super easy now just press (.) on a repo to get a temporary vscode editor

[winter gale]

woo! a place for designers

I'm actually working on a home assistant design project within the faculty of industrial design at the TU/e !

[pure flower]

Nice!

[empty badger]

"Designer-to-developer ratio of 1 per 8000" That's kind of you to call some of us "developers"

[pure flower]

Hahaha 🙂

[winter gale]

We're working on software similar to esphome to improve prototyping for students

[pure flower]

Sounds fun! Got some info, designs or documents you can share?

[winter gale]

right now were developing the connection to home assistant to https://github.com/iddi/oocsi

in the upcoming months well be creating a lab on campus based on home assistant 😄

[pure flower]

What are your plans for the lab? Definitely to keep us posted!

[winter gale]

We want the lab to be a place where students can experience a smart home and test out their prototypes. Its also meant to be a place of inspiration for more interesting smart home interactions, so we want to put a mix of established products and experimental prototypes in there

maybe even put some cutting edge things such as uwb or optical tracking in there haha

[peak junco]

not sure if this is a UX thing but you know how after a frontend update you get that popup to reload, sometimes that doesn't appear or work, sometimes I notice button images missing so I have to manually clear my browser cache, I was wondering if we could add a frontend reload button that is permanent in the config area

Id quite like to not have to clear my cache after every update

We already have the code in place to refresh the frontend so wouldn't we just need a user accessible button

[lean estuary]

"As an developer of custom lovelace component
I want to be able to reuse the standard HA UI components
So that users of custom components can get consistent user experience, no matter device or platform"

I had multiple discussions here on Discord with the core team about this request, but my understanding is that reusing core UI components are discouraged in custom components. I understand the issue this brings with the tight coupling between custom and core components, but I still feel that this need is unresolved.

[mighty valve]

I totally agree. While there are some ways at the moment to use them, its not very intuitive or nice

[lean estuary]

And even if you want to make a copy of an existing UI component you will probably find 3 or 4 different implementations in the frontend repo.

[jaunty swan]

This implementation has been talked about 100 times. The end of the day is yes we want you too but its not currently possible because of the way that web components work

[lean estuary]

Yeah, I guess Im not the first to make such request. I just wanted to address this and I would be happy to contribute in some or other way.

[jaunty swan]

You would need to contribute to Web Components / lit element/html

but yea definitely something that when its available will be a thing

[lean estuary]

Just so I understand the issue here. Is this limition of the component framework or an architectural decision?

[jaunty swan]

Its a Limitation of Custom Elements

You can't define Elements more than once with out Errors

We lazy load as much as we can to keep the frontend fast. So if a custom card tries to use an element. It may not be loaded yet. And therefore wont work. If they try to load it and then the HA tries to load it. Then the frontend will error. and there fore doesn't work.

So until we can override or define an element twice without error then we can't do anything

[light hill]

Hi there, I'm just discover the community behind HA and I have a lot of questions but first of all, and talking about UX field ¿Did you run any test with HA users? like card sorting or tree testing

Because I think the usability of menus could be improved

[mental quarry]

Which menues? I like that the main one is user sortable

[light hill]

I'm talking about configuration, supervisor and user profile menuses, not about the main one

Could be interesting study how users groups different options to make it more accesible to new users and domotic newbies

[mental quarry]

What specifically do you mean when you say 'more accessible'

Changing order to increase visibility?

[light hill]

I mean that the menues could be grouped in categories related with user tasks (profile, language, theme,...), Device tasks (devices, entites, integrations,...), Etc.

[mental quarry]

Ah, change the information hierarchy for better discoverability, got it

[light hill]

Yeah

If you like, I can send a little card sorting study to discover how HA users think about that. A user must spend 10 minutes

[mental quarry]

Do you have a free tool to do this?

In my experience card sorting is most useful as a qualitative task. Open sorts must be done with real-time guidance.

[light hill]

I was thinking in Optimal Workshop, the bad thing is their studies are limited for free subscription profile, but the options could be splitted in 3 studies and later merge all info

[mental quarry]

Sounds like you have a well thought out plan

[light hill]

Let me polish some details and I'll post the links to make the study, the question is if link must be posted here or in another channel to have more impact

[light hill]

PART 1: https://y16gq7nk.optimalworkshop.com/optimalsort/32g7tjm5
(When this part will be finished, I will post the next part)

[pure flower]

That looks nice!

@light hill @mental quarry interested to schedule a video call?

[pure flower]

I agree! About test, we haven’t done any yet. That should definitively change.

[mental quarry]

Yes!

[light hill]

Sure!

[pure flower]

Awesome, will send you guys a DM

[mental quarry]

thanks for the figma libraries @pure flower those guys need to roll interactive components ASAP

[pure flower]

😎

Yeah, have you tried the beta?

[mental quarry]

signed up yesterday, the disclaimer makes it seem like it's tricky for them to implement well

[pure flower]

optimalworkshop.com looks nice! Never heard of them

[merry torrent]

Hello there!

[magic jay]

if somebody is interested in code quality optimisation or just giving feedback to the following User Interfaces, i would really appreciate it:

https://community.home-assistant.io/t/google-inspired-home-assistant-on-mobile/202191

[pure flower]

Hi @merry torrent 👋

[pure flower]

Looks interesting!

[magic jay]

https://github.com/philipp089/Home-Assistant-Config/blob/master/README.md

if you want to take a deeper look

[mental quarry]

Very smooth, since you built it for yourself, you can see if it suits your own design goals. Mine are showing minimal information and not scrolling or changing tabs, controls only when relevant.

but you will know through use how well it serves you

@pure flower thanks for the design chat!
It feels great to be able to contribute my expertise and years of industry web application design knowledge, despite not being able to code. I'll be here for the project as and when needed.

[pure flower]

Yeah was fun!

[merry torrent]

@pure flower is figma the evolution of invisionapp.com?

[pure flower]

It's a competitor of Invision, Sketch and Adobe XD. Figma has a nice free tier and community downloads. So easy to start, thats why it's now only available there. And Figma has some nice features, like designing together at the same time.

[merry torrent]

I will study it 🙂

[mental quarry]

RIP invision, you were expensive

[thorny egret]

apple backed me up against a wall and forced me to make onboarding changes, so i redid most of it for the iOS app. i think the flow is mostly optimal at this point, but if anybody sees anything tough to swallow, i put together a bunch of screenshots/videos here: https://github.com/home-assistant/iOS/pull/1878

[merry torrent]

Very expensive, moreover I had to trash many projects I couldn't keep in standby without fee.
So let's check figma 🙂

[mental quarry]

Is the list sorted by 'most likely' based on default mdns name and standard HA port?
How do the other servers qualify to be in the list, are they returning HA login headers?
To make onboarding extra painless, one could present a/the best match first with a confirmation instead of going to a list.
Awesome preview videos btw, so cool that you put in that effort

[thorny egret]

the debug build inserts a lot of erroneous servers (all the ones that error) - on a typical home network it'll just be actual HA servers, so probably just the one. the list is populated from whichever is picked up by mDNS first - otherwise it might resort while tapping, if there's more than one.

there's a shadow requirement here: on a real device (which makes it harder to record videos) there will be an alert that's prompting for local network access too, but the app isn't allowed to know the status of it; felt like the list was still the best way around.

secondary requirement: if you're booting up fresh HA hardware you'll be waiting for it to show up in that list. might be worth doing an empty state for this messaging too.

[craggy flint]

@jaunty swan in terms of not being able to load a custom element twice. How about custom elements overriding other custom elements.

[jaunty swan]

Thats the same thing

[craggy flint]

Yeah, I thought it wasn't possible. However it happened to me and the users of my integration.

[jaunty swan]

When you define an element that already exists then it sends an error to the console

[craggy flint]

Yeah, that is true. However, if you give it another name. It will still be able to mess up other custom elements is what I meant.

I thought each custom element was its own container so to speak.

[jaunty swan]

Yea. You can do that. but requires you to bundle those into your custom card and also update the code so they change the name of the element, right? meaning like the paper inputs or MWC inputs

[craggy flint]

It is a bit hard to explain, as I tried debugging the problem. Yet am not able to find the root cause. But look at this: https://github.com/aex351/home-assistant-neerslag-app/issues/18#issuecomment-926701742

There is a complete different integration that just messes up my card.

That other integration basically is overriding the config used to make the graph in my card.

[jaunty swan]

hmm I wonder if they had any console errors

Meaning that you and that card had the same element. And that card won the race condition

[craggy flint]

Well on the community forums there were also reports of users, that after installing the Neerslag Card, their history graphs in other cards would be shown differently.

However, I am not even touching any of that.

[jaunty swan]

Intersting. I would have to look at the elements you are using. but I would guess there are some console erroors

not sure...

It shouldnt be possible from what I know about custom elements

[craggy flint]

My thoughts exactly.

I too am a bit puzzled.

From a theoretical point of view, how would one be able to override other cards from their own card?

Maybe that could give some insight.

[dusk cloud]

Are there any plans to redesign the Configuration / Devices page? For the second time in a week I have seen complaints that the list of multiple devices in one integration card is too small. e.g. There are 56 devices hidden here:

[craggy flint]

Sometimes devices seem to be listed just as a number

[pure flower]

That could be better indeed. Currently no plans, do you want to make an issue of this? Will look into this later.

[wet citrus]

Hello. Glad to hear UX is being addressed professionally.
I would like to have an easy to use floorplan. Something like this:
https://experiencelovelace.github.io/ha-floorplan/docs/create-goodlooking-floorplan/
But which is easy to use and not require lots of my time to get good results.

[pure flower]

Hi! 🙂 Looks nice! This isn't a typical UX thing, more like a feature request. You can start an FR or discussion on GitHub for that: https://github.com/home-assistant/frontend/discussions

[silent vapor]

hi,
im a long time user of homeassistant and stubled upon the last blog entry on the homeassistant website. I would love to help making this project even better than it allready is. I think the whole dashboard creation could be a lot better and easier. I used iobroker a long time ago and their tool to make dashboards from scratch was very good so maybe there is some inspiration.
I work as a freelance graphic designer and im currently designing some icons for smarthome devices in my free time - i can post some if you are interested

[pure flower]

Hi and welcome! Awesome that you dropped in. Ideas about creating dashboards are always welcome. We could have a chat or if you are interested, you could make a small concept? Definitely like to see your icons!

[silent vapor]

here are some of my icons - im looking for a apple/homekit look and feel -> https://nxc.simondesign.at/index.php/s/fpN7JNWQTnDiSaN

[silent vapor]

i know my thinking is possibly biased but i think a builder like webflow with an interface that makes html and css + animations very easy to build would be a good fit for a dashboard creator but i also know that their product is super hard to recreate or implement for a bigger audience that isnt familiar with html or css

[dusk cloud]

Issue or discussion? It actually works at the moment it's just difficult to use.

[silent vapor]

Its interesting that in portraitmode in the phone App i can see all devices for each integration - in landscape and on the desktop it’s an overflow container

[cinder owl]

Hi guys, I had an idea for improving the Automation Creation. The issue I've found, and after talking to some friends noticed they had a similar issue is when creating an condition or a trigger, not being sure of the value to trigger. I thought, how useful would it be if you could see the last 10 states of the entity that you'd selected?

[pure flower]

Yeah, discussion

[pure flower]

Great idea! We could discuss it over here: https://github.com/home-assistant/frontend/discussions/10064

[cinder owl]

Perfect, thank you.

[winter gale]

Is there no way to link entities to a location?

that they can atleast self report their location

adding location properties to all entities would allow for lots of new experiementation

[dusk cloud]

That's a core feature request not user interface related. Someone has probably already asked for it, so search first before creating a new request: https://community.home-assistant.io/c/feature-requests/13

[sharp meteor]

You can provide a suggested area with device registry

[winter gale]

fair, i thought of it more as a part of creating ux

[winter gale]

nice!

[sharp meteor]

https://github.com/home-assistant/core/blob/e656974e8d9448220c82159b2689653854376a2c/homeassistant/helpers/device_registry.py#L78

[winter gale]

however location coordinates based seems to be unavalable, probably time for me to look into some zones etc

I want to create a proper attempt at adaoptive geofencing and that requires locational data...

mapping uwb etc

i can use zones as a work around i guess

or tracker entities

[sand isle]

I created this issue a few months ago

https://github.com/esphome/issues/issues/2109

[dusk cloud]

You let it go stale though!

[pure flower]

Just started a discussion about our navigation. Love to hear your thoughts! https://github.com/home-assistant/frontend/discussions/10491

[pure flower]

And a discussion about using tabs and bottom navigation: https://github.com/home-assistant/frontend/discussions/10492

[dark chasm]

Both proposals look great.

[tidal thicket]

@pure flower > Instead of building on the current design of HA, has it been considered to just start entirely from scratch? I am thinking there could be multiple front ends coexisting?

The user experience with Home Assistant has not really changed all that much through, what must be, the almost 10 years I have been using it. Home Assistant has always had this weird place with me. It was always able to do something I need, that the alternatives could not, but I always hated using it. I have therefore tried to quit HA many times and tried some of alternatives, but they have always failed in some way to do what I needed. I have therefore been “forced” to use HA, however painful and frustrating it has always felt for me. I am therefore super happy to see some effort will be made now on this front.

Home Assistant looks a lot like Excel to be honest. There is manual input that has to be done so many places, with an absolute gigantic amount of documentation to back it up. Say for example I want to change an icon on entity, well that’s just a text box where I can write some odd code, that then refers to an icon from somewhere. I have to then find the documentation about it, that refers to some database where I can go and find the code I need to enter. Next time I need to do it, I have long forgotten how to, and have to read docs again. I do not understand why there is not just a button you can press to see a gallery of icons and press the one you need.

I personally wish we could have the power of HA, in a package that looked more like Homey.

I look forward to seeing what improvements you bring 🙂

[fallow ruin]

Icon picker is coming in 2021.11, so within hours 🙂

[pure flower]

Thanks @tidal thicket for your detailed feedback! I've some questions about the things you like/hate, and what you want to do with Home Assistant. It's probably easier to do this over a phone call. Interested in scheduling one?

[pure flower]

Yeah, thats a really nice feature 🙂

[tidal thicket]

I don’t think I would be the right person to talk about that to be honest. I am personally not really a fan of the whole “smart home” idea in general. I learned over the years that it just eats so much time and causes so many frustrations that it is never worth the slight conveniences it provide. So I have pretty much dumbed down everything I could in the house, and I am super happy I did. I actually now only have 5 devices - 3 relays, 1 dimmer and 1 motion sensor, that make up the controls for my house ventilation system. So really, I hardly qualify as a user these days.

I just generally feel there would be a lot to win, if it was realized that the design of HA is very dated.

The way it is today breaks with some of the main “rules” us engineers work by today. Like always trying to design self-explanatory solutions that do not need documentation. I really do not like to have to look and read through documentation to do any and every little thing. It feels a bit like old school rocket science in a way. Like it reminds me of how the astronauts in old movies have all these books and sheets that they have to look in every time they do anything.
Also, HA has always broken maybe the most golden rule of them all “form/fit/function”. Basically it means that, before you revise something, you have to ensure it is fully backwards compatible. If you cannot do that, you do not revise. Since this has not been respected, we have had to learn to live and deal with “breaking changes”. This is a term I have only ever seen used in relation to HA, nowhere else. It feels to me like a bad practice has been given a name, so the much more demanding good practice can be avoided? I don’t know the best way of solving that, I would probably recommend to discuss policies about it first. But if it cannot be avoided, then make the system automatically correct/adapt to the breaking changes or if everything else fails, use the UX to guide the users completely in doing the necessary changes.

[tidal thicket]

That sounds like a step in the right direction. Improvements like that is really what HA needs the most. If I was in charge, I would completely halt the development of HA for a while and only focus 100% on the user experience.

[bright gate]

I agree, getting more configurable from the UI and relying less on configuration files is the way to go. unfortunately there's also been some very vocal opposition to it amongst other users :/ (https://community.home-assistant.io/t/the-future-of-yaml/186879 for example)

[tidal thicket]

It has always been my impression that there are many users that are very elitist like that. In fact, I never really found the Home Assistant community to be particularly friendly, primarily because of just that. People have always raved about the community, but it quickly gets kind of toxic if you start suggesting changes that are not inline with the sort of elitist line.
There are certainly people that want Home Assistant to remain overly complex. Some have spent thousands of hours mastering it, and just don't want that to be wasted. Others make a living on it being that way (through consults, youtube etc.).
So yeah, it is definitely not as simple as just changing things.

[sly wagon]

@hexed dew posted a code wall, it is moved here --> https://hastebin.com/eveneganav

[hexed dew]

No code wall, just a large amount of things I liked to say. Sorry for that.
The idea is still available though.
Unfortunately I could not add screenshots. I could provide them later if requested

[thorn mica]

I hear you about breaking changes to an extent, but not allowing for breaking changes at all is one way of accruing technical debt and preventing a platform from maturing. Breaking changes happen all over, not just in open source. Definitely not as aggressively in the real world of paying customers because of politics, contract considerations, etc. but this is definitely not just an HA concept. Regarding the "experience" (for lack of a better term) around breaking changes, I would agree that we have some work to do. The best change we made in this regard thus far was the introduction of a safe mode, so that if something causes the overall system to fail you can still get in to see what happened. As more configuration moves into the UI, it also becomes easier to offer that "auto corrective" experience you mentioned (an example of this is the reauth flow which allows a user to easily enter new credentials when the system detects that the current ones are stale, but there's probably room to do a lot more of these types of experiences). We can't do that with configuration files because the people who like using those files like them because they feel they have more control over what's in them, thus we can't change these files on the user's behalf

Also, HA has always broken maybe the most golden rule of them all “form/fit/function”. Basically it means that, before you revise something, you have to ensure it is fully backwards compatible. If you cannot do that, you do not revise. I wholeheartedly disagree with this tenet.

[tidal thicket]

I respect that there are different ways to look at that. I of course have my own bias as a mechanical engineer, that I know some IT engineers share, but my experiences, as you mention, are certainly primarily towards the more real world paying customers.
But yeah, there are several ways to look at it, so it is definitely subjective 🙂

[thorn mica]

yeah the context of my statement was in regards to software. Mechanical engineering is a whole different beast, and even within software, there are places where risk tolerances are extremely low.

[jaunty swan]

Not UX related but the whole breaking changes thing is very hard for HA to control a lot of the times. HA its self is just a layer on top of 1000s of APIs. If an API changes and has a breaking change then HA has a Breaking change. with 1000s of possibilities of that to happen it makes sense that breaking changes are more frequent in HA than in other software

[thorn mica]

thanks @jaunty swan I was trying to figure out a way to say that but that hits the nail on the head

I do think though that we should continue to explore the idea of "self-correction" which doesn't necessarily mean something gets automatically fixed but instead something where the user doesn't need the docs to react to the breaking change (again going back to reauth as a very point solution example)

[magic jay]

Does anyone want to give feedback on my finished documentation of my Mobile-User-Interface? Took me some time now to finish that one, hope you guys like it: https://github.com/philipp089/Home-Assistant-Config#--google-inspired-home-assistant-configuration-mobile-and-desktop-user-interfaces

[empty badger]

I just realized that when you use keyboard navigation, toggles activate with space, but everything else activates with enter...

[marble storm]

im still waiting for remote control navigation 😛 we ended up mapping D-Pad Down to TAB on Android so if someone was on a TV interface they could at least do some form of navigation lol

[pure flower]

We've been fine tuning this concept. A first step is to merge Supervisor to Configuration, minimize the amount of menu items, make it more appealing to the eye and make a next step towards Material You. That low hanging fruit we're planning to make right now. The current menu items are based on the current tab layout. Next step is to test with users what are the best menu items and the order of them. And the question how does this look on mobile.

You can test the prototypes here:
Desktop: https://www.figma.com/proto/RSUZAyEXLdvmPWhonsI2xM/Menu?page-id=174%3A10318&node-id=176%3A20671&viewport=501%2C48%2C0.31&scaling=scale-down&starting-point-node-id=176%3A20671&show-proto-sidebar=1
Mobile: https://www.figma.com/proto/RSUZAyEXLdvmPWhonsI2xM/Menu?page-id=232%3A15017&node-id=232%3A15018&viewport=501%2C48%2C0.71&scaling=scale-down&starting-point-node-id=232%3A15018

What do you think of this?

I've picked some random colors for the menu items. If you got some great ideas about the color pallet, please share them.

[jaunty swan]

Are they Material Colors?

Seem close

Looks good to me!

[pure flower]

Haha nice! Sort of, not real Material.

I've also made a new comment on this discussion: https://github.com/home-assistant/frontend/discussions/10491#discussioncomment-1666851

[marble storm]

ooh i like that, we can probably update the android app settings to line up with that design once we finish converting everything to Jetpack Compose 🙂

[pure flower]

Great idea!

[warm whale]

I find it confusing that the subtitle of "Addons & Backups" includes rebooting the system. I think this needs a more general heading.

[pure flower]

Oh yeah that description could be better. Thanks! The heading is correct in this mockup.

[dapper breach]

personally, Ive always found the Server Controls misplaced where they are, and feel they are a unique category that deserves being higher on the list. Loving the new icons-backgrounds! hope we can get that in regular Lovelace frontend too some day. Compliments for all improvements you people are developing.

[warm whale]

I add an idea to the automation editor redesign
https://github.com/home-assistant/frontend/discussions/10064#discussioncomment-1700008

[pure flower]

Thanks for your suggestion! I just replied

[heavy elm]

I'm a blind user who is really enjoying getting into HA. I've noticed a couple accessibility issues on the frontend that look pretty easy to solve, mainly just uses of the ARIA-ROLE attribute instead of ROLE for HTML elements. If I were to open a PR to clean those up would that likely be accepted?

[thorn mica]

I don’t know enough about these attributes to answer that definitively but I can say definitively that we care about making HA accessible and we would welcome improvements on that front

[shell eagle]

Definitely will be accepted.

We use the material web components from Google. Sometimes it's a property we're missing

[heavy elm]

https://github.com/home-assistant/frontend/blob/b97fd9918a89a7f6d3067296ff2ff21cbc5f68bb/src/onboarding/ha-onboarding.ts#L93

[empty badger]

Weird that the type checkers didn't catch that...

[grizzled coyote]

Good catch => https://github.com/home-assistant/frontend/pull/10721

[pure flower]

Thanks! All accessibility improvements are more than welcome

[silent finch]

(reposted from devs_frontend)
I would like to propose that the round slider colors in the thermostat card should be as follows depending on the hvac mode:

• Heating: Orange bar from left side.
• Cooling: Blue bar from right side.
• Auto: Orange bar from left side and blue bar from right side.
  This would be more visually representative of what the hvac is doing in each temperature range.
  Looking at the code I see that the round-slider component does not have the above capability, so it will need to be updated to enable such color scheme.

Mockup:
https://imgur.com/gallery/62Mqp2t

[pure flower]

Hi @silent finch I like it! Do we currently have a view that shows both cooling and heating?

[jaunty swan]

The goal is to remove the slider completely

[pure flower]

The round slider does have its quirks. I havent heard the discussion about this card. Is there an alternative concept?

[empty badger]

IMO it's just not a good UX. Specifically they're hard to use on a touch screen.

People seem to love it, though 🤷

[pure flower]

Google and Apple made it work on full mobile screen. You need the pixels to move the slider and when starting the slider your finger doesn't need to stick on the line. I've seen examples where people had this thermostat card on a really small size. So the card needs some restrictions to be usable.

[empty badger]

It does work with your finger outside, and the area to start the drag is a bit bigger than the knob.

I could have it added

But I'm not sure I agree with the idea. Feels a bit unintuitive to me.

[silent finch]

The point is that the colored portion shows the temperature range where the hvac is active.
In heating mode the hvac is heating when below the set point.
In cooling mode the hvac is cooling when above the set point.
And in auto mode you can be heating below lower point and cooling above the higher point.

As supporting evidence this is the same scheme used in ecobee thermostats:
https://imgur.com/gallery/CLvjPuC

While discussing Thermostat card, here are two other separate suggestions.

1. Make the mode buttons optional. These are a bit redundant since they can be accessed from the ... on the top right anyway. And on a small screen they add unnecessary clutter:

https://imgur.com/gallery/WdKpWDI

[empty badger]

To me it feels like the interval between min and max is somehow... forbidden or disabled. Doesn't make sense.

And I am aware the same argument can be made for single limits with the current scheme.

[empty badger]

That's exactly what this is about: #devs_ux-archived message
No card is really meant to be that narrow.

[silent finch]

The alternative is to say the colored region is the comfort zone. So for Auto you color green between high and low. For cooling you color the left side blue . But we would have to change heating to color the right side orange.

[grizzled coyote]

I feel your pain. Have the same on my desktop...luckily the wall mounted tablets have a better aspect ratio.

[silent finch]

The cards do work fine for me while that small. So this is just a question of giving users option of removing seldom used buttons which could be accessed via the "..." anyway.

I am motivated by trying to use old phones as my wall mounted dashboards.

[silent finch]

I would be happy with the +/- buttons too. Of course in Auto mode you would need two pairs of +/-.

[jaunty swan]

This was my mock up. I started building it but also need to build a case for the two different options

yea

or a selection

So you can choose which you are changing

[silent finch]

What is the secret to being able to post images here? I seem to be only be able to put a link to imgur.

[misty jacinth]

Try now

[silent finch]

Mockup with Humidity:

Thank you.

[jaunty swan]

I would suggest mockups with out the slider 🙂 haha

As we have decided to move away from it. I doubt we will make any additions to the current code

[silent finch]

To be clear I am loving HA and its UI. Hope these suggestions don't sound negative.

[jaunty swan]

No they are great!

Keep them coming

[prime pivot]

I like the right one better. I like both better than the rounded one we currently have.

I'm not a fan of sliders for a control like that. If I was jumping 900 degrees, slider all day. But small increments require a button IMO.

[pulsar roost]

I would definitely use that over simple-thermostat.

[mystic sentinel]

Interesting discussion, I was never a fan of the the thermostat card. It's wasting so much space, I would highly appreciate optional +/- buttons. At the Moment I'm using simple-thermostat card, this card does definitely have the potential to be move to core.

[silk swift]

Hey 🙂

If a config flow defines an input like:

vol.Required("value", default=5): vol.All(int, vol.Range(min=1, max=60))

It currently renders as a slider without an input field next to it in the frontend, could this be changed so that the user is allowed to enter a number in there instead of or in addition to using the slider? (This component exists already for sliders where max is not set) I think it would be more user friendly if we also show an input field, what do you think?

Feedback

[grizzled coyote]

Sounds good to me. Let's wait for a few more opinions.

[silent finch]

I would say the main appeal of the current thermostat card is that it looks visually different from the sea of square buttons which appear on the dashboard. I don't really care that the round slider is actually a functioning slider. Rather that it looks like and represents a thermometer. So here are some more ideas:

[silent finch]

Another way to achieve this may be to enhance Themes to allow customization of background image for any card.

It would be nice if such capability could set different background images based on state.

[empty badger]

Well... card-mod...

but also; ha-card-background: url("https://placekitten.com/g/800/600")

[silent finch]

🙂 Thanks. Learn something new every day.

[tame locust]

Hey friends, Hey @pure flower, I would like to chat about Home Assistant accessibility for the visually impaired and blind. Who is interested in the topic?

[wispy hornet]

🖐🏼

[pure flower]

Hi @tame locust! That would be awesome, will start a group chat with you, @wispy hornet and I.

[grizzled coyote]

Can you pull me into that one as well?

[pure flower]

Yeah sure!

[empty badger]

Heh. Irony.

[outer ridge]

I'll build a intigration for a thermostat, it have custom PRESETS (not only away)

The away preset exists in HA, and will be translated, but how can i add translations for the custom presets?

[thorn mica]

https://developers.home-assistant.io/docs/internationalization/core#state

[outer ridge]

Yes, but thats the states right? What keyword tell HA for what the translation keyword is?

[thorn mica]

oh is the preset mode an attribute?

I don't know that we have a way to translate those

not sure though, maybe someone else has a better answer. I responded because I think you asked this previously and got no answer

[outer ridge]

To be more clear, i looked into the climate code in core, there is a const PRESET_AWAY = "away"
I need other PRESETS for my climate device intigration and want to translate them correctly

[heavy elm]

Also am interested in this. Please pull me in,.

[pure flower]

Last week we had a great call about @tame locust brothers experiences using a screenreader on our iOS app. He also shared some interesting videos what currently is hard to do. @wispy hornet is looking into that.

I would like to suggest we use our Discord dev channels and GitHub to keep you guys updated.

[grizzled coyote]

If you have concrete points to discuss / tackle, let us know.

[dull quail]

the new area card had me thinking about some kind of area state row

[pure flower]

Are there any (UX designers) here willing to provide feedback on my user test setup about our navigation?

[main peak]

I’m very new to HA but I am a designer and would be happy to help in any way possible

[pure flower]

Awesome, will send you a PM

[vocal mural]

Not sure if it’s still needed but I’m more than happy to help.

[pure flower]

Great, will send you a PM tomorrow

[torpid gulch]

Can I randomly request that light groups behave like groups? I want to see the individual details below the color wheel of light groups:

Maybe even with toggles. I get that "group" implies all act the same, but I keep running into wanting to dim one or two lights in a group and think it should show like a group :)

[jaunty swan]

Feature Requests should be in the discussions of the Frontend Repo

https://github.com/home-assistant/frontend/discussions/new

[stone violet]

Just to let you know, the user test (from twitter) fails for me. After the last question it won't submit the results.

[pure flower]

Thanks for reporting! Will inform UsabilityHub about this bug

[brittle musk]

Hi! I would totally love to have some sort of UI to create groups, is this planned?

[misty jacinth]

Feature requests go in the forum:

[sly wagon]

If you have a feature request for the frontend you can open one here, for Home Assistant itself please post on the forum. All other feature requests should be made to the developer of that custom card/component.

Command '~features' was invoked by: RobC

[misty jacinth]

there's an in-progress PR: https://github.com/home-assistant/core/pull/58064

And here's the request: https://community.home-assistant.io/t/groups-via-ui/216413/3

[mystic sentinel]

Hi, i like your approach for setting streamlining as objective for 2022. I'm setting up home assistant for my father at the moment, he is 64 years old (very familiar with PC but not with programming) and a very good example how important that is. The biggest issue for him is too get familiar with automation editor, but I understood that you have planned to improve this?
Another things: Simple scheduling! I know that there are 3rd party integrations and add ONS, but simple scheduling (including astro switching) should be a basic functionality.
My father is in retirement and very good in English, if you would like to get first hand feedback please advice)

[mystic sentinel]

Another comment I would like to address personally: I highly appreciate your work and that you want to keep things simple (especially in the UI), but maybe things are sometimes too simple. If there are good custom approaches, they should be overtaken in the core (see scheduling example above or a more compact thermostat card, see discussion above)
Also in the UI, I think that some more flexibility (or advanced options in a second submenu) to setup would be good, example: rounding of sensors. If it is in a second level of the UI, it makes life easier for basic new and advanced useres.
Finally, thank you for your work 👍

[elfin arrow]

I also posted a comment about streamlining experiences around data history and statistics. I think there could be better OOTB support for statistics and control over data retention.

[vapid geyser]

👋 UX designer here just starting to look into the core a bit. What's the best way to understand what's WIP and where I can help?

[jaunty swan]

Check the link in the channel description

@pure flower will be able to help you out as well.

[vapid geyser]

Thanks!

[pure flower]

Hi @vapid geyser! Awesome you want to contribute. We’ve got some basic ‘Getting started’ over here https://github.com/home-assistant/frontend/discussions/10147 . Check the ‘Good to know’.

And we’re working on design.home-assistant.io. Keep in mind this is in a really early stage.

What’s your expertise and is there something you really want to help with? If you want we can do a video call to get you up to speed?

[vapid geyser]

Thanks! I'll check out the intro and the design subdomain is already looking pretty helpful as well. My expertise is all over the map, I'm a pretty proficient frontend engineer as well, have a good eye for UI/design systems and visual style, and my day job is enterprise software with research, diagramming, prototyping complex IA and task flows so I can dive into UX stuff too. Part of the motivation is that I'm a manager now so I'm hoping to get more design in on the side. 🙂

Oh and I'm all in on Figma. Happy to see the channel description link.

[thorny egret]

if anyone is interested in throwing out ideas/proposals, i'm working on a native sidebar implementation for iphone, ipad and mac (with OS-specific UI for each). for example, how the mail.app folder list looks.

• on iphone and ipad, similar to current sidebar, it'll expose one which looks similar to the current and allows you to swipe left/right to switch between each servers' sidebar as pages in the sidebar (e.g. #devs_mobile_apps-archived message)
• on mac, it'll obscure the server stuff but the app overall will offer a 'new tab' option for servers, since windows are more expected on mac. this will also give it the blurred background, more native look.

[cosmic nova]

@thorny egret I’m not a UX designer by any means, but I pretend to be sometimes haha. What about something like how the Discord mobile app is setup with its sidebar? I like your idea better I think with the servers along the top though instead of the side, but maybe a bottom tab bar that shows up when the sidebar is revealed? Perhaps even something that’s customizable with different links or something.

Hopefully that makes sense.

[river valley]

hello - I am looking to do some work around helping people with disabilities to use HA and associated devices. Would this be of interest to others and would it be possible to get a channel dedicated to the discussion?

[pure flower]

I like this suggestion to show it like Discord does. What do you think of this @thorny egret?

[pure flower]

Cool, more than welcome! Do you want to help with code and/or design?

[thorny egret]

i find discord's kind of meh - it's hard to change servers. though they are optimizing for closing the sidebar again in a way that i can't do if left/right scrolling in it switches between servers

[river valley]

Yes I would.

[cosmic nova]

I agree. I like the method that you have thought of with the servers along the top. I was thinking more about adding a bottom tab bar like discord has that shows up when you open the sidebar. Not sure if it’s worthwhile or not though.

[thorny egret]

oh, what do you imagine would be in that tab bar? i was thinking about throwing a 'settings' cog in the top to access the app

[cosmic nova]

My initial thought was to make it customizable at the server level, but I’m not sure if that’s possible with a native tab bar. If it’s not, then maybe something like:

• a home button to return you to the main overview screen of whatever server you are on
• a search field that brings up the quick bar for performing actions
• app settings button
• server settings button
• a notifications button to bring up the list of persistent notifications in the server (or maybe all servers?)
• a user profile button (not sure if the profile picture at the top your sidebar mock-up takes you to the profile settings page)

Not necessarily in that order and probably not all 6 of them. They’re just ideas

[thorny egret]

a few of those i definitely want to do eventually: combined persistent notifications especially. the quick bar also feels like it could fit well there -- but like the combined notifications screen, it sort of makes sense to reimplement it and combine all the servers into 1 mega-search

[pure flower]

Working on a quick macOS mock up: https://www.figma.com/file/4rCTEgi9f2XyCNspbBAI4T/Native-Sidebar?node-id=1%3A4

It's work in progress, need to design how to switch between different servers.

[pure flower]

@river valley @main peak We've just opened the #935836836893437992 channel

[river valley]

Thanks!

[thorny egret]

looks so good. on mac or ipad we can either use the 3 panel split UI (server, pages, content) and/or on mac only rely on tabs (native ones, i believe they will be window-level tabs)

[pure flower]

@thorny egret I've made some changes to the mock up including switching between servers. I took some inspiration from the standard Apple apps. What do you think?

My personal favorite is the one with the bigger menu items

Also tried to make it as similar as the web sidebar as possible

[thorny egret]

Native Sidebar

[empty badger]

How high on the to-do-list is the fact that all settings under "Profile" are not connected to your profile but to your current frontend session?

[pure flower]

Profile could get an update indeed. I'm currently working on other topics, but if you got some time we check on some fixes?

[grizzled coyote]

What Thomas wrote plus tying separate dashboard / authorisations to users (and therefore indirectly to devices, if I give them a separate user) are my main UX pain points with HA.
So very much interested in that, and willing to chime in on that.

[empty badger]

After giving it some thought, it shouldn't be too hard. We could modify the storage helper in the frontend and add some ws commands to store and retrieve user frontend settings from the user data.
Of course, there will probably be some settings you want to keep per session, like theme, close connection, push notifications, the stuff you wrote in the dev-templates box etc...

I think user and auth stuff is already separated in the backend? Wouldn't want to mess to much with that.

[grizzled coyote]

No idea yet. Did not look into the coding aspect so far.

[grizzled coyote]

Why do you think the theme selection is session specific? I see that as a user profile setting.

[empty badger]

That was just my gut feeling.

[dull quail]

I would agree with theme being a session setting; wanting some theme settings to differ on my mobile vs my desktop makes sense

But perhaps it could be both, where the theme is per user unless specified for the session/device

[thorny egret]

it would be nice if we could inject external bus support for the settings, too -- because the webpage url differs for external/internal urls, the local settings actually are different between them, and i'm not sure i can really override this storage destination for the normal indexdb/cookies/etc stuff.

[thorn mica]

hi, I need some UX help. Today, you can go to the zwave_js configuration page to add and remove devices from your zwave network. Because the zwave_js driver lives outside of HA, it is possible that a user starts an inclusion/exclusion process outside of HA, and in that case, instead of giving the user an option to add/remove a device, we should be giving them an option to cancel the existing add/removal process. Where is the best place to put the new action? The add and remove actions are in different locations (see red boxes), so should we put the cancel action in the same place to replace the add/remove action? Should it be styled differently?

CC @wispy hornet @long breach depending on the complexity of the suggested solution I may be able to PR this myself. I've got a working version written locally, I just don't know if it's the right UX for the circumstance

here's the way I've implemented it right now. The text will say cancel inclusion/exclusion depending on the scenario but the location is static in this implementation

[pure flower]

Hi! @thorn mica! In terms of interaction design, I would recommend to show what a system is doing and what a user can or can't do. When I click on 'Add device' I get this dialog that shows it's searching. What happens if I close it? Does it keep searching?

"it is possible that a user starts an inclusion/exclusion process outside of HA"
How can I do that?

[bright gate]

if you use one of the zwaveJS addons that has its own UI (like zwavejs2mqtt) you could start the inclusion from that addon instead of HA

[pure flower]

Ok, thanks. Does HA knows that the inclusion in started?

[bright gate]

yes, HA can detect if it's running

[thorn mica]

as far as I can tell in looking at the code, both the X and the cancel will stop the search

[pure flower]

Thanks! Can we show an HA Alert on the Z-Wave configuration page when, for example zwavejs2mqtt, has started an inclusion? And maybe disabled the FAB? And on exclusion we can disable the remove device button. If I understand correctly that are the only scenarios?

[thorn mica]

that's correct. That still leaves the open question of where to provide the option to cancel an ongoing inclusion/exclusion

[pure flower]

We can add a Stop searching button to the alert
https://design.home-assistant.io/#components/ha-alert

[dapper breach]

hope you dont mind, but this seems rather identical (Homekit controller), and no clue where to do what it suggests, nor does the Submit button do that...

A stop button here would indeed help, since we can not restart the inclusion of the integration on any device.

[thorn mica]

I think the alert solves that problem. It'll be at the top of the page and instead of a save action, it will be a stop inclusion/stop exclusion action

no need for a pop up

[dapper breach]

haha, talking about mysteries (AppleTV):

[placid flower]

HI, Interms of "Streamlining" are there any plans to add the ability to delete Devices from the DB without editing the JSON File. I have again a few "leftovers" and I also struggle with the removal of orphaned entities from deconz which tells me in the logs that the service can not fined a gateway with the name in the integrations

[grim cradle]

Vote:. Where would you go to remove the energy dashboard?
👍 Profile page
😎 Dashboards page
🎉 Other

I am really curious, I never knew it was possible to remove it until someone said it is in the profile page in a Facebook group

[misty jacinth]

You can remove the sidebar icon either by pressing and holding the Home Assistant title and hitting the X next to it or selecting Edit in your profile

Are asking how or what others prefer?

I prefer to interact with the icons directly and would prefer pressing and holding any of the icons to switch to 'edit' mode, just like many phones do

[wispy hornet]

Yeah, that was how it was done originally, but it required to remove the context menu, and we didnt want to do that.

[dull quail]

ux feature request: remove all references to Lovelace from UI text. Had a friend just jump into HA today and first thing he asks is "wtf is Lovelace?"
The term is no longer necessary IMO

I believe it was when he wanted to take control of the dashboard

[wise jolt]

and i think nvidia is calling their new card lovelace

[pure flower]

Yeah, I think it was an awesome introduction name when the new dashboard system was released. For new users it can be confusing. I have to check about the impact of this.

[pure flower]

@dull quail https://github.com/home-assistant/frontend/pull/12044

[empty badger]

Awww. Now people won't think it's named after me anymore.

Thank you.

[unborn barn]

feature request: I think the tts controls for media players should be moved back to where they used to be. TTS controls are now buried under the media tab and is not very intuitive for new users, as it’s not where all the other media controls (play,pause, volume etc) for that device is. Let me know what you think!

[storm shard]

New users would not expect it to be there, having never had it there?

[umbral crystal]

But would users expect to have all controls of an entity in a "more info" card (unless it are features for advanced users)? On light entites etc. you also have all controls on the "more info" dialog

[misty jacinth]

I always thought it was weird that it was "hiding" in "more info" 🤷

but I don't use it there either, so probably not the target audience

[umbral crystal]

At the end the question is, if it hurts the ux if it is in the more info dialog and in the media panel? I think not so and corresponding to https://github.com/home-assistant/frontend/discussions/11923 there are users who reverted back to 2022.2 because of that, so I can understand that Feature Request totally

[white mesa]

The "more info" dialog is actually a "more" dialog, so tts could sit there. As strictly speaking it is a special source, I can fully understand why it sits inside media now. Referring to existing users reverting back masks the question of what is most logical and best for new and novice users. On a higher level, I wonder if this "more" dialog even had the purpose to be used in regular interaction or only for expert intervention. I for example pull all standard interaction for users directly into the Lovelace interface. None of my users use "more" for anything. They don't even know it exists.

[lucid hamlet]

Found an issue with UI in 2022.4 :
Old inputs selection windows would have a return button, while now new "helpers" don't. Not exactly à bug, most likely an omission, that breaks the UX. (Repost from #devs_frontend-archived)

[misty jacinth]

Please don't cross post, please report issues in GitHub

[white mesa]

I noticed a UI trend that I believe runs against streamlining: emergence of specialist, hard wired dashboards. Examples are energy and media browser. It's almost impossible to pull what they display into Lovelace cards. Shouldn't the effort go into provide their functionality as cards? Where is the right place to discuss such a trend?

[viral pine]

@white mesa perhaps the Discussions page in github. As far as the energy dashboard though, the cards are available to put anywhere else you want https://www.home-assistant.io/dashboards/energy/

[white mesa]

Yes, that's what I meant, the cards cannot be configured like cards but only on the energy configuration page. So that's a different paradigm, not really streamlining. And on a higher level, that manifests itself in new specialized dashboards.

I guess I'm looking for a discussion on product and design principles, which I feel are prerequisite for streamlining.

[empty badger]

There’s a comment on the Swedish Hass facebook page about the default graph colors not being color-blind friendly.

[silent walrus]

I'm adding a configuration panel for application credentials (this is my first time adding a panel in frontend) and I was interested to get thoughts about where it should live. Given all the thought put into the frontend config ux

This is a UI for OAuth client id and client secret used with an integration, but is configured independently. See https://github.com/home-assistant/architecture/discussions/692#discussioncomment-1842990 for context

In some sense its kind of like HA Cloud since its about linking accounts w/ cloud services, but I worry about messing with that. It doesn't really fit in with any other categories

[strange cove]

The ability to add a zigbee or z-wave device directly from the add integrations button is nice. However I’ve had the release since the beta and am only now seeing it. And having it under Set up a new Integration just feels out of place. And a bit confusing.

[jaunty swan]

A lot of people click the first add button they see. This is easier for a lot of the devices used with HA and for new users to know about Zigbee and Zwave

[strange cove]

I get that. But say your zigbee is added via autodiscovery - so you never go into add integrations and then you don't add any new integrations (manually). so you'll never know it's there. 🤷🏼‍♂️ just wish there was a better place.

[jaunty swan]

Its only added for convenience. If you dont use it then you dont really need it. Using the integration is easy enough to add new devices.. Goal was to make it more discoverable for someone who may not necessarily know if they have a Zigbee Device.

[grizzled coyote]

Small UX thing: There are duplicate orange entries now plus the purple feels out of place (too saturated compared to other colors plus too similar to the dark blue of integrations).

That is from dev where I know @jaunty swan is still working on it, so might already be covered.

[pure flower]

Thanks! We've to check on some icons and colors. Will also look at this.

[grizzled coyote]

@pure flower What is the rule for tooltips on mobile? We have a few places, such as the "Last changed" info where we show the last-changed and last-updated times when hovered in a tooltip, but on mobile this does not work. Should we react to a touch/press on that element?

[pure flower]

This is a great guide https://www.nngroup.com/articles/tooltip-guidelines/

Personally I’m not the biggest fan of tooltips/pop-up tips. On mobile it should work on touch.

[loud flower]

I have been working on some enhancements to the generic camera integration. Would value feedback on this work in progress (animated gif attached)

[pure flower]

Nice! Do you've got an GitHub PR of that?

[loud flower]

On a branch, will make a PR tonight.

[loud flower]

https://github.com/home-assistant/core/pull/71269

[split tulip]

Hi all. Trying to update a HACs integration and was wondering if the new selectors could be used in a services.yaml file?

[austere helm]

Yes. My understanding is that all the selectors should work in services.yaml, and anything that works in built-in integrations will work in custom ones. Like it might be possible that there is a bug in some selector that causes problems, but if so, that is a bug that should be reported so it can be fixed.

[final moon]

Homies, not sure where to ask but has there been any talk or requests for being able to filter by, for example, platform in the UI automation builder? Being able to filter by e.g. cover would be really cool. Just an idea...

[grizzled coyote]

Filter what exactly?
Feature requests and discussions can be found here: https://github.com/home-assistant/frontend/discussions

[final moon]

Let's say you want to build an automation that sends a notification when a cover changes state to "open". To do that you would select "State" as the trigger then search for an entity that you want to use as the trigger. It works fine, but it would be nice to first have an option to first filter entities by cover (or light/zone/etc) to narrow down the search... hopes this makes sense?

Again, it's just an idea.

Thanks for that link btw.

[lavish sundial]

Platform Filter

[thorn mica]

I have some integration specific information that would be great to show on the device info page, but I don't think it belongs in the device info card itself. I have two options:

1. Create a new device action that opens a modal that shows this information
2. Add support to the device info page to add new cards

Which would you suggest as the better approach?

[pure flower]

What kind of information? If it's really relevant we could show it right away. If it's nice to have, we could have a modal dialog for that.

For example a Zigbee device of my shows some info that isn't readable for an average human. Some of this info could be in a dialog in my opinion.

[toxic atlas]

If you want to move it to a dialog we can. I don't have an issue w/ that

now that we have diagnostics I am not sure we need to keep this 🤷‍♂️

LQI / RSSI are entities now

though they are disabled by default

last seen will probably become an entity too

this is all RE ZHA for the screenshot above

[thorn mica]

its stat like RSSI, information about routes, etc. There's a lot more info though so it will lengthen the device info card significantly

I was thinking it's still useful to show on the device info card, but that's why I was thinking of making it it's own card

here's how it would look if it was a separate card (still needs some formatting work and there's more info to add):

[thorn mica]

decided it would look better as an action

[pure flower]

What kind of action? Is it screenshotable?

[pure flower]

Yeah, that make sense

[thorn mica]

it's just an action that says Show Device Statistics, and when you click it, it opens a modal with the data

[thorn mica]

I'll show a screenshot once I come back to this. I've realized there are multiple PRs I am waiting on before I can properly take this on so I've stashed it for now and will come back to it

[pure flower]

Hi visual designer!
Currently I'm updating our Figma DesignKit with the latest UI changes, cleaning up styles and components and starting to use the latest Figma features. While building this DesignKit I noticed that our color system could get some love. And it's a tough nut to crack on my own.

Are you a (visual) designer who has some experience with color systems? And do you have time for a chat? Feel free to poke me.

[thorn mica]

@pure flower can you provide your thoughts on https://github.com/home-assistant/frontend/pull/12625 ?

[winter comet]

Hi guys! I've just posted this in #devs_frontend-archived, but it should probably go here.

I've wanted to contribute to HA for quite a while, but wasn't sure where... So I've been working on a redesign of the homepage (home-assistant.io). Here's what I have so far: https://badia.me/homeassistant-redesign/
I just wanted to know what you guys think and if it's something that you think is worth it. Currently it's not a fork of the github repo, since it was easier to start fresh. And it isn't optimized for mobile (wanted to make sure it was ok to move forward).

What do you think?

[jaunty swan]

Looks great! I will say we are currently working on designs for a new website as well. Taking a look at your design, there are definitely features I really like and want to use in our designs!

[winter comet]

Oh that's great! I was afraid you might be already working on a redesign, that's why I wanted to share it here before I redesign the whole thing 🙈

Any chance I could help you out with the redesign?

[empty badger]

I finally got around to looking at this on desktop. Looks great, but it has a bit of a feeling of those scrollwheel activated slideshows that apple insist on providing instead of useable sites. I would also like more focus on the integrations rather than dashboards in the pictures. The Features section does that well, and I like that that's gotten a spot further up the page now.

[winter comet]

Thanks @empty badger! I'd really like to work with the team behind the web development to redesign the whole thing. My version is just a makeover but keeping almost all the content intact. I agree that it should probably be rethought and adapted, since HA has evolved a lot since the site was developed.

[hexed trellis]

I really appreciate the effort that's been going into the UX of the product recently, it makes it so much more enjoyable to use