Stage 2: Richer device pages

[matthiasdebaat]

Hi all 👋

This builds on the Foundation baseline shown in the first thread. This stage adds the editorial layer on top of the foundational data: the written, reviewed half of an entry.

Note: this is a design preview prototype, not the live site. The data is mocked, not real device telemetry, so treat every entry as a placeholder. I am after feedback on the design and structure here, not on the specific device facts.

Try it yourself

1. Open design preview prototype🔗
2. Long press the logo to open the Experiments dialog
3. Enable Richer device pages and all its increments.
4. Open the Philips Hue White A19. It carries the editorial layer, a photo gallery, several ecosystems under Connects with, and edit history in one page.

Then try:

• Flip the list / grid switch on Browse, the choice sticks in the URL.
• For more photos, see the Yale Assure Lock 2 (4) and the Aqara FP2 (3).

Richer device pages

A richer device page carries a curated overview that explains what the device is and who it is for, references back to manufacturer docs and integration sources, the requirements to run it, and detailed specifications. The specs are category-aware: a camera shows resolution and field of view, a thermostat shows something else, so a page only ever offers the fields that make sense for what you are looking at.

The reported facts and the editorial layer stay visibly separate. Enrichment deepens an entry, it never overrides what the telemetry reported. One rule worth flagging there, search still reads only the reported fields, so enrichment never surfaces a device on text the page does not otherwise show.

Increments
The three increments in the comments are extra sub-steps that can be built on top of this stage. Each is its own comment, so reply under the one you have thoughts on.

Feedback

I would love your honest reactions:

• What do you like, and what falls flat?
• What would you keep, and what would you stop or change?
• Any ideas this sparks, big or small?

What's next

Stage 3: Accounts and editing
Sign in, edit a page, and have it attributed and reviewed as a pull request before it goes live.
Discussion link

[matthiasdebaat]

Increment 1: Browse grid view
A grid layout option on Browse, with a list and grid toggle, cards leading with the device photo where one exists

Note: With increment 2 it would be richer

[HarvsG]

Can we be more opinionated about list vs grid and push for one over the other as a "better" solution rather than maintaining 2 UIs?
Or if not, at least make the defaults screen-width dependent

[matthiasdebaat]

Increment 2: Photos and gallery
A gallery on the device page, and lead thumbnails on Browse cards.

[HarvsG]

Nitpick: What is a "report" vs an "installation"?
Can we combine them into "Reported Installations" or similar, after all we have no idea how many installation are actually out there!
Then maybe some sort of (logarithmic) visual popularity scale

[HarvsG]

How picky will we be about photos:
On the one hand, nearly all products are going to have manufacturer-produced high-quality images that they won't mind us using, whereas user-submitted images may look much less "pro".

On the other hand sometimes, and very frustratingly, manufacturers don't always include helpful but unflattering angles - like the rear of the device which can be invaluable as it may include vital information on I/O and or fixings.

E.g Just yesterday my dad was buying a shelly device that supported "LAN" but nowhere on the product page or images did it mention or show the RJ45 connection so he had to email them to confirm that LAN didn't just mean "WiFi"

[matthiasdebaat]

Increment 3: Connects with
Expands "Connects with" beyond Home Assistant to every ecosystem a device is marked compatible with, one tab each.

[HarvsG]

I like this as it is a very "Open" approach giving weight to other non-HA ecosystems.
I think it is worth considering that many devices have multiple ways of being added to home assistant. E.g a modern IKEA Matter BILRESA remote can be connected in 1 of 4 ways:

• Directly via Matter over Thread
• Directly over zigbee to ZHA (they all have hidden zigbee firmware)
• Indirectly via Zigbee2Mqtt
• Indirectly via the Ikea Hub

I'm not sure what the best way to display that in the UI is... Maybe a nested "via" integration selector when there is more than 1 supported integration/protocol?

I don't love the chips, but thinking of something like this:

[matthiasdebaat]

Smart! I like it, adding it to my list.

[HarvsG]

Awesome - if we are careful about how we collect and integrate this data, it might be possible to back-port it into the HA UI.
At the moment adding a device is an integration-first process. The user has to know whether they want to add it as a Matter, ZHA, Mqtt or IKEA hub device (and may not even know all the options available).

In future it would be cool if the user put in the model number (or similar) of the device into HA and it returned a list of possible ways to add it to home assistant, ideally with some alt text to outline the advantages or at least to get more info on the device page...

The integration picker already does a similar sort of thing for manufacturers which have products that support multiple integrations. But that is a one to many manufacturer -> integration and doesn't redirect to native protocol connections

This would be a one to many device -> integrations and/or protocols

[HarvsG]

Also once the user is on the nested integration/protocol it would be cool to have some idea of the requirements (with links) at a glance - fits nicely with your accounts page where people can give info on their current system.

ZHA: Zigbee Co-ordinator
Z2M: Zigbee Co-ordinator and MQTT server
Matter: Thread border router or co-ordinator
IKEA: Ikea Hub

[matthiasdebaat]

It might be possible to back-port it into the HA UI

Fully agreed, that is also one of the big things we want to do. There is a lot of potential for users in Home Assistant.