Hi,
Not sure if I’m the only one, but whenever I complete my projects (or usually don’t even get that far) I get bored and want to redesign again?
Finally got to pretty much completing my latest dashboard layout for my OH3 install and I’m bored with it already and want to redesign it yet again.
This is my current layout:
So, I’m now looking to either heavily tweak this or start from scratch, but trying to find a style idea that can still be built with the Main UI - although I’m considering something along the lines of Python FastAPI with something like a Bootstrap front end as a future dashboard.
Where do people get their ideas from for layouts, as I’m not a designer?
I like some of your design especially the lights and the temp and humidity displays, they show all info in an easy and quick to digest way. I would recommend you get first time visitors to try it out and watch what their reaction is. As a virtual visitor, if I wanted to turn on a light in your lounge, it’s not clear which switch does which light. Perhaps making icons that show the light or areas that they light up would help?
Also I prefer to hide stuff on tabs which not everyone likes that. The temperature stuff takes up a lot of real estate that does not change if you have climate control working, so hide it on its own tab is my approach.
Same comment on the robot vacuums, if they are not running, can they be dynamically hidden from the main page and only show up when they start cleaning with a tab to reach cleaning controls perhaps?
For ideas I tend to use Google image search. Type in a search term like ‘home automation panel’ and then goto the image tab of the results. Scan through the images until you see something you like. This forum also has some good inspiration in certain threads.
Personally I am not good at the design and i tend to just use the auto generated OH3 pages, as I like to use rules to make things happen magically without the need to walk to a tablet on the wall or unlock a phone to start an app. Controls to disable these automations are usually done via voice control, but this is not visitor friendly so at some stage I do need to create something.
Look forward to seeing what you come up with next.
I don’t. I’m into home automation, not control. My dashboard is very simple. There’s one widget for the garage doors, one for the lights, and a couple to tell me when batteries are low and a service is offline. Beyond that everything is a push or it just happens. So I spend almost no time on my dashboard and it’s almost never used anyway. Therefore it’s pretty basic and simple.
NOTE: The Services and Battery Level widgets are posted to the marketplace. The Garage widget is the example built in the Getting Started Documents.
NOTE: It looks better on the phone where it’s mostly used.
I spent a little time on color and nice icons that change based on state but nothing more than that.
Occasionally I’ll want to look deeper at something (e.g. compare all the temps in the house over time) so I did spend a little bit of time with the Semantic Model so I have a reasonable Locations, Equipment, and Properties tabs.
This is a huge concern. You want to make sure that guests and family can use your house. Always keep them in mind and make sure your UI caters to them. Bubble the most frequently used information to the top is one way to help with that.
This is also a good thing to apply for alerts and warning type info. If there is no alert or warning or nothing is going on, hide the widget entirely. I do this all the time. You’ll notice that the services widget above just says “All Services Online”. When a service goes offline it will only show that service below (and the title of the widget will say “X Services Offline” where X is the number of offline services. The same for the battery list. It will only show those batteries that are below 20%.
I’ve a number of Chromecasts in the house connected to OH. It only shows anything from those when they are actively playing something.
And I totally agree. If it’s not something that needs to be interacted with frequently or it’s not something a guest user of the home will use, put it somewhere else than the main page. That’s why my Overview page (first thing the home users see) is so spare. I just got my HVAC integrated (thanks to the Amazon Echo Control binding) so I might add a widget for that but I’m not sure yet. Climate control is, like most everything else, automated. It should need to be adjusted much.
Alternative controls is a big one too. Voice controls are common. Using automations from your phone is another good one. For example, using Tasker and AutoLocation I get a popup on my phone when I get close to my home asking if I want to open the garage. I don’t use the above to actually control the garage doors very often.
Looking your example, @Richie1972, some of the things I would do:
I find that background to be too busy, making it challenging to read the text and decypher the UI. I’d lower the contrast on that or decrease the transparency on the widgets to improve readability.
I’d sit down and thing really hard about whether you really need to see/control each of these all the time. For example, do you really need to know what the last phone call you received on this dashboard? You might, but if it’s just a piece of information you happen to have, consider whether the value of displaying it is worth the clutter that it adds. My rule of thumb is any information shown on the main page needs to be actionable (“oh crap! the internet is down! I need to go reset the modem now!”) or it needs to be a control that is frequently used (lights usually fit that if they are not fully automated). That rubric should apply to all the widgets you show by default. Everything else should be a popup or on another tab or otherwise hidden. It kind of looks like you are already doing that with Instances, Devices, and Services. I’d apply that to more of these widgets too.
The top left widget with the house icon is inscrutable to me. I’ve no idea what it’s supposed to represent.
The lights widget is similarly inscrutable to me. It’s not at all clear what the four columns represent. I’m guessing the green “buttons” represent those that are on?
The fact that the two robot vac widgets do not line up really bothers me.
The mix of icon styles also really bothers me. Some are flat, others are “3D”. Some are abstract while others skeuomorph. A consistent design language goes a long way towards creating a unified dashboard. With the addition of support for Iconify icons, you should be able to get to all the icons looking like they go together.
I’d look for a way to merge the two camera widgets into one (e.g. show the current feed by default and click on it to open a popover to see the last event maybe). I’d try to merge the two robot vac widgets too.
Put things that are related to each other next to each other. For example, the temp/humidity/lux widget should be close to the heating widget.
Concerning that widget, I’m not sure it really adds much. I would probably put it in a popover or something like that and add the min/max values to the heating widget since those will be the most relevant.
That top right temp/humidity widget might also look more interesting and be easier to interpret if it were a graph or even a bar chart or something. A table of numbers is one of the hardest things for most humans to interpret.
These are the kinds of things I would think about were I to build a dashboard. Simple is easier to use and understand, especially by guests, than “complete”. Just because you have a piece of information doesn’t mean it’s relevant enough to throw up on the main dashboard everyone sees by default. Only show information and controls that are actionable and relevant. Do you really need to see the RobotVac widgets all the time? Do you change the schedule often? If not, maybe show a status widget only when it’s running and move the controls to another tab or popover or something similar.
Hi,
Much appreciated everyone’s feedback so far.
I’ve started work on a new front end now that is going to “look” simpler and cleaner, but there’ll be a lot more work behind the scenes with my widgets.
Quite a few of the things you’ve highlighted also annoyed me (especially widgets not lining up - it just means having to have more wasted space in widgets to correct that - I struggle with having unused screen real estate as it’s just “waste”
I have always struggled with the icons as well - there’s never a complete single set of icons that does everything I require. I think I’m going to try to sort of standardise using Iconify and only use flat icons that can have their colours changed within the widget.
I have tended to shy away from more simplistic looking dashboards as they tend to look dated and/or incomplete. I need to try and find the happy medium between pretty and functional.
Will keep people informed.
There is a reason books have margins. Blank space well utilized can improve readability and usability of a UI.
Honestly it’s all a matter of style, but I found your dashboard to look dated. I had flashbacks to seeing complicated LabView displays for industrial systems I saw in the early 2000s. So don’t go by that. Go by what’s pleasing to you, but make sure that usability takes priority over all else.
It looks better on a tablet (which is what this was designed for - the three columns are all pretty much the same height on my tablets).
The lefthand column is an accordion with a number of oh-repeaters used to pull in data from tags assigned to each item. The title area of each accordion item lists the location/room name, temperature and any devices/alarms that are “on”
There are a number of widgets for various other automation devices on the righthand side - some of which have popovers for more details. For example, the heating widget:
I have a much smaller “Service Staus” widget that warns me if any IoT device or system service (eg OpenHab, HabApp) is offline.
The “Clock” area now also shows the next bin for collection or whether my wife or myself are home.
I’ve kept widget sizes relatively similar, but ordered them in such a way that it’s not as “unbalanced” as it was.
I have a slightly tweaked version of this dashboard for my phone:
This is working ok enough (only issues relate to detail widgets that are too large to be useful on a phone screen).
The only problem I’m finding is getting this to display on the Android app (copying the contents of the new dashboard over the “Overview” page contents doesn’t allow me to have a background image or alter padding around the widget). I’ve done some digging around, but there seems no way of specifying a particular Main UI page as the default for the Android App, which is a bit annoying.
I’m not sure if anyone has got around this - any OpenHab posts seem to relate to Basic UI (not Main UI), HabPanel or versions of OpenHab 3.4 (I found at least one relating to 3.x that didn’t work).
I will be looking at a more detailed dive into the layout at some point - assuming anyone is interested.
