App UI: Cleaning up the mess


(Jonathan McGuire) #1

I, like many others, expected 2.0 to be a huge step forward for the app. I assumed the new app would be a complete overhaul with a clean and intuitive user interface… but I was wrong. To be blunt, the new app has been nothing more than lipstick on a pig. It is actually more complicated than it was before (please explain the bottom row of icons, the DASHBOARD icon is a “home” and the HOME icon is 4 squares).

I propose that ST go back to the drawing board, have a design philosophy that is intuitive, take ideas from an app that got it right… PLEX!!! You know, that app that made its simple to find a single episode of a show out of a collections of dozens of shows with hundreds of episodes. They have a 5 star rating compared to SmartThings’ 2 stars on iOS.

However, I’m not just suggesting taking inspiration from PLEX bc they have a great app rather because of how easily SmartThings could fit into the framework of the app itself. Lets take a look…

Plex for Android recently released a material design app with a Category Menu that slides in from the left (pretty basic material design layout). This is where you could have an account header with a list of categories below it as follows: Home, Dashboard, Routines, Notifications, Marketplace…

This takes the guesswork out of the bottom icon row and makes the learning curve much easier for new users. Now onto the Home page where we have subcategories for Rooms, Things, SmartApps, and Family. Plex already figured out how to simplify this as well… They use a large header at the top that scrolls horizontally, ST can use this for the sub categories! Below the header is the content, which would change based on which header category is at the top (that part varies a little from plex but is needed). Example: When the Rooms header is shown at the top, scrolling down will list each room with horizontal scrolling icons for each device in that room. On Deck>Living Room, Recenetly Added>Kitchen and so on…

The poster images is where ST could have a live tile, the name below the poster is where you would put the device name (clickable to take you into the device’s page).

And the BEST part about it all… it scales to larger screens!

So there is your framework for a successful app. If I have time I will photoshop these images to give everyone a real idea how ST could look with this UI, using bright colors and replacing the icons and text with smart home examples!


Your Dashboard Ideas are Needed!
(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #2

Great ideas… Even if Material Design is not universally loved, I find it much more efficient to design using a detailed popular standard than start from scratch.

The challenge SmartThings and every cross-platform App designer faces, is how to pick a design that meshes with the diverse standard UX’s of Android, iOS, and Windows Mobile?

Tagging @alui for his interest and comments.


(Jonathan McGuire) #3

I agree! And PLEX only varies slightly from Android to iOS (the main difference being the slide out menu has tiles rather than a list of categories). The main thing that stays the same across all platforms for the is vertically scrolling categories with horizontally scrolling items within them. This is what is perfect for SmartThings Rooms and devices inside each room!


(Jonathan McGuire) #4

Hows this for a start?

Slide in Menu takes the place of the bottom icon row and adds an account header (fake plex account used). Behind them menu is the last used page, in this case it is Home with the Rooms subcategory open. Each room is displayed by scrolling down vertically with each device in the room scrolling horizontally. This was just quickly thrown together in paint (I’ll do a proper photoshop later if I get time) but I think it really show off how simple things could be!


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #5

Yup… It’s always hard to understand when an UI is more complex than seems necessary. In some cases, there’s just no way to make things magical (e.g., a plane is just a car that goes up and down in addition to left and right, correct? Why so many buttons in the cockpit then? :wink:).

SmartThings’s less “simple” UI is more likely due to their desire to have a unique look and feel, instead of following any particular design trend. Or they are myopic and didn’t even consider ways to be more simple? They ran drafts of the UI through interview sessions with test users, so …?


I apologize for the shameless plug, but hope it’s relevant: SmartTiles along with SharpTools, SmartRules, etc., were all created with simple elegance being the #1 feature of their designs, even at the expense of not fully replicating all the “features” of the SmartThings native App (the popularity of SmartTiles speaks for itself … thousands of installations).


(Jonathan McGuire) #6

Again, very rough idea but should get the point across. The one thing I left out was device labels that would be clickable to take you to the device screen (the same way a movie post would take you to the movie description in plex). This is the screen that would show up as you swipe the Menu back to the left. As you swipe the top header from left to right it would change the category between Rooms>Things>SmartApps>Family…


(ActionTiles.com co-founder Terry @ActionTiles; GitHub: @cosmicpuppy) #7

Great way to optimize small screen real-estate while keeping activation points conveniently large.

People who pull out their phone to see the status of, or control, a Thing, need to be able to find it at a glance… or two.


#8

It looks nice in this example, but once you have 3 identical devices it has to have text labels.

Different people have very different set ups. It can’t be about the icons. It has to be about how people will use it. And different people use it differently.

Just sayin’… :wink:

Practical beats pretty.


(The fish is still dead.) #9

You could hide them for aesthetics and have the user do… something… to reveal them.

:hear_no_evil: :see_no_evil: :speak_no_evil:

…I’ll show myself out.


(Jonathan McGuire) #10

As I mentioned, the labels would be part of the UI, I just left them out when throwing things together. I actually made the UI here much larger than it would need to be, although I would prefer to keep it as large as possible.

Here is an quick example of a tile solution, live tiles could incorporate icon changes (such as the lock coming unlocked) and/or color changes (lamp has a brighter icon when on or a different color). Label would be clickable to take you to the device page.

I also think force touch would be great for newer iOS phones but wouldn’t be useful until the majority of iOS users upgrade.


(greenstuff) #11

Could not agree more!! Even small things have been removed, like choosing for multi sensor devices which data to show in the icon - I used to show room temps at a glance for motion sensors but now I just get stuck with the default, ugh!


(Paulo) #12

I’m going to have to agree with Jonathan as I see no benefit to the new UI and it seems to make very poor use of the available real estate on our devices. Just the weird blurred portal view taking up 25% of the screen (let me see the whole picture or use the portal as an icon off to the side). If it wasn’t for Smarttiles and Sharptools, Smartthings would be very cumbersome to use. Currently I use SmartTiles for all my manual switching online and SharpTools shortcuts (desperately needed) on my mobile device. That doesn’t mean that SmartThings isn’t the best home automation solution on the market, because it is, it just means that they have a long way to go to make the UI more functional and user friendly. I have posted 3 screenshots from my Nexus 7 as an example of better use of real estate. It also only took me 1 click to arrive at the SmartTiles and the SharpTools screen and it took 3 clicks to get to the comparable SmartThings screen.


(Jody) #13

There are many threads about this subject. There are two conventions one must keep in mind, one interface will be better for configuration and another will better for at-a-glance viewing. It’s very hard to build an interface that does both of these well at the same time. Check out this earlier discussion.


(Matt) #14

duh shake for labels… lol … muwhahahahha


(Dawn Fairbro) #15

Oh No,no,no,no we are not going back there!!! :fearful:


(Jody) #16

Dawn is right. How about do a figure 8 gesture to show labels?


(Jonathan McGuire) #17

How about something similar to this? Again, the idea comes directly from PLEX, movie posters separated into vertically scrolling categories with horizontally scrolling items. I am able to show more apps than the current “things” view, while also placing the devices into categories and making them easy to recognize and activate.

Of course this isn’t how the icons would look if I was paid to design this app, but it gives and idea of the organization. The labels could also be shorter with this approach, if you are on the room view the label would simply say “Lamp” because it would be located in the “Living Room” category. On the Things view it would only say “Living Room” because the icon would show that it is a lamp! The only time you would need the full name is when setting up your SmartApps.


(Jody) #18

I like that layout. It is very similar to what I am doing in my web app. Here is an example of it in action. I also like the plex layout. I would also prefer that the groups be collapsible.


(Mike) #19

I will just put picture from top of the screen as a background since its covering 1/3 of useful space.
Or just remove it.


(Jody) #20

It’s only like that on Android. On IOS it slides up and out of the way. It will eventually do this on Android as well. This is not by design.