[Usability] Optimize UI of Home Screen to Clean Up Unneeded Elements

[glenn-sorrentino]

There are a lot of UI elements on the screen that either may not need to be there or could have hierarchy improvements.

Two Types of UI Elements

Primary/Supports current task

1. Instructions
2. Timer
3. Primary Action - Start Now
4. Child Actions - Change camera

Secondary/Takes me somewhere else

5. View Logs
6. Settings

Proposed UI:

The proposed IA uses common patterns for navigation, and groups related things together with tighter proximity.

Logs

This is the only place other than Settings that you can go, and if you got to this screen from the logs, one of the most common patterns for the navigation is in the top left - examples include back buttons or hamburger menus.

Settings

A common location for Settings is in the top left of an app, or if there are many navigation items, inside of a hamburger/staged menu. The sound and motion settings are removed to clean up the UI and can be accessed inside of the Settings page.

Camera

Changing which camera you use is directly related to the primary task of starting Haven, and grouping it closer to the primary UI elements and using their center alignment make interface tighter and more organized.

Timer

How often is a user changing the countdown? Is that the primary action the user is expected to take? Show the timer after the user presses “Start” and let them adjust the timer duration in Settings.

Pages from Design Audit

[fat-tire]

I wanted to respond to a few bits from #228 which was moved here:

Start Now For the "Start Now" interaction - I think that the "Deactivate" button can appear after the timer has been started. An analogous use case is when you start a timer on the native clock app - after you start it, the "Delete" and "Add Timer" options are progressively displayed.

This works for me-- and then put the "view logs" option in the menu. FWIW the "view logs" I think is just the equivalent of hitting the "back" button.. it calls the "cancel" bit for the activity, which kills the screen, taking you back to the log screen "underneath.".

Demo I created a quick demo of what I think the interaction could look like. It explores color to convey state, introduces a timer when Haven is active and simplifies its presentation. I think that this would be valuable feedback to the user - when they pick their device up, they have immediate confirmation that it's been running for 2 hours, for example.

I really like the background color change -- blue for not doing anything -- yellow for counting down, and green for active. The count UP for time elapsed since started isn't a bad idea.. what does everyone think of that?

[fat-tire]

Oh and as for the shield icon in the center-top -- it looks very cool, but I think if it's a non-functioning icon it might be confusing given the standard UI guidelines that many people may be used to-- so people could hit it not knowing what it does or whatever. And it would probably need to be added to all the pages... Maybe a simple title or even nothing at the top (except the single menu/overflow button) might be cleaner? I dunno.

[glenn-sorrentino]

Here are some explorations for the title. IMO adding one promotes consistency and gives the header (even though it's transparent) a sense of space and feels more like it's own section. It might even increase the discoverability of the settings icon so that it's not floating up here alone.

[glenn-sorrentino]

@n8fr8 From our other thread about the sensor icons being a more high frequency interaction, here's a design with the new placement for the settings menu, and the buttons for configuring the different sensors in the existing locations.

I do think that putting them inside of the setting menu cleans the UI up a bunch while still making them a single tap away.

[n8fr8]

Thanks, Glenn! I'm hoping to have more time this weekend to go through all your great work.

I prefer the second with the on screen settings. It could be reduce to a single "sensor wizard" type button, that essentially walks through the sensor config in the onboarding. That may be the best of both your clean view, and my one touch view!

[glenn-sorrentino]

@n8fr8 - Awesome, I also found a pattern for Material icons when an icon is supposed to mean "Settings" - there are three dots under the respective iconography - https://material.io/icons/#ic_settings_voice

I'll use what I can from their icon set, and will create icons for where there are gaps.

I'll also explore a single button to launch the wizard so we can compare the different UIs.

Designs coming soon...

[glenn-sorrentino]

So, I don't see any icon in the Material set that encompasses a one tap wizard interaction, which tends to be an issue with icons - sometimes its super hard to reduce something like this into a single mark. At Salesforce we have a "Wizard" icon, but I think it might be good to stick to Google's icons.

I have two explorations, one with the aforementioned icon + three dot pattern, as well as what I think is the most clear for your one-tap interaction model - a secondary button that just says "Set up for new room".

I've learned over the years that users often find text buttons much clearer than icons because there needs to be no interpretation of what it does.

I've also started documenting the UI elements into a design system that I'll make available as a PDF, Sketch file and potentially as markup + css. Here's a PDF that documents how I'm styling the buttons.