Improving the Update Available screen (mockup)

ghost commented 5 years ago

@SeanPM5 commented on Feb 22, 2019, 4:21 AM UTC:

Home Assistant release with the issue: 0.87.1

Description of problem: I've made a mockup which I believe improves upon the current update available page and makes it more user friendly. First, here's an image comparison of the current one (left) and my mockup (right). In hindsight I probably should've switched back to the default theme before doing all this, but hopefully this still gets the ideas across. Click for bigger version.

Here is what I changed and the thought process behind it:

Made the heading bigger (simply applied h2 tag), which makes it easier to see at a glance.
Increased the size of the Home Assistant icon. It fills up the empty space on the right and increases brand awareness as well. 😃Made it a similar size as the iOS update screen icon.
Removed the duplicate release notes link. There is not much point in having two release note links directly next to each other like that.
Introduced a brief mini update summary. This makes it far more professional looking imo. And there's barely any extra work involved because this mini-summary is already written for the tweet announcements and such, so that could be re-used in this area. For super minor updates could always just use a generic "Bug fixes and performance enhancements" type message there too.
Note how after moving the icon over to the right, all the text lines up neatly on the left side.
Swapped the order of buttons, so Release Notes comes first and then Update. This subtly encourages users to check the release notes first without blindly updating and hosing their system.
Lastly I right aligned the buttons so it looks cleaner and so that people are more likely to read the text. This also seems to be how most operating systems and update screens seem to do it as far as I know: Windows (pic), Ubuntu (pic), Mac (pic), Chrome (pic) etc for some examples.

I think that overall it looks a lot cleaner and more professional, is more functional and user friendly, and encourages safer practices of reading the notes before upgrading.

This issue was moved by iantrich from home-assistant/home-assistant-polymer#2819.

ghost commented 5 years ago

@iantrich commented on Feb 22, 2019, 6:03 AM UTC:

looks really nice

ghost commented 5 years ago

@cogneato commented on Feb 22, 2019, 6:51 AM UTC:

It's the little things... These are simple thoughtful changes which make a great difference.

ghost commented 5 years ago

@pepeEL commented on Feb 22, 2019, 6:59 AM UTC:

Very very goood.... But it is only for Hass.io ? Should be also available to Hassbian and other.... replace with badge icon.

Send Pull Request to developers...

ghost commented 5 years ago

@balloob commented on Feb 22, 2019, 8:11 PM UTC:

Looks great!

pepeEL this is the Hass.io update card inside the Hass.io panel, so yeah, Hass.io only.

ghost commented 5 years ago

@iantrich commented on Feb 22, 2019, 8:15 PM UTC:

Looks like I need to get hassio dev env setup this weekend 😄

balloob commented 5 years ago

@iantrich https://developers.home-assistant.io/docs/en/hassio_hass.html#frontend-development

ghost commented 5 years ago

This issue was moved by iantrich to home-assistant/home-assistant-polymer#3916.

home-assistant / ui-schema

Improving the Update Available screen (mockup) #243