Designing a user interface

Introduction

Something that I give a lot of thought regarding my home control set up to is the interface.  I have changed the ‘look and feel’ of the interface tens of times in the last few years (much to Chester’s frustration) and to be honest I don’t think I’ve ever found the ‘holy grail’.  But what makes a good home control interface and how would we recognise one?  I explore these questions with my guide to designing and implementing your own home control interface.

Step 1: Who will be using your interface, and on what?

One of the first things to think about is which devices will be displaying the interface.  In my household the interface is accessed via a fixed large tablet, a computer screen and smaller smartphone screens.  Therefore I may think about designing two types of interface, maybe that look and behave very similarly, one portrait (for holding a smartphone) and one landscape (for the computer screen and the permanent tablet on the wall).  I have designed two types in the past, but using a 100% web interface means that the content can adapt to multiple display types, therefore saving time and resources.

Step 2: Look at what is out there for inspiration (but don’t get too depressed with what you find).

If you search the internet for images of ‘home control interfaces’, you’ll see a few common themes.  I think the main thing that hits me is that although millions of pounds have been spent on perfectly attuning user interfaces in smartphones and computers (for example with the upcoming Windows 10 operating system), home automation interface design seems to have remained the same since its introduction. Without wishing to offend anyone here, I get the distinct impression that the interface is last on the development list.  It seems to me that the hardware takes priority, and then the interface is designed by someone in the existing team who really did not want the job.  I honestly believe this to be the main reason why home automation has not yet become mainstream.  It’s not the hardware: it’s the interface.

If you look hard enough however, you’ll find some clear and well-designed interfaces out there.  The companies that have chosen to invest in design are clearly the market leaders, and therefore can afford to spent time and money developing a look and feel that homeowners can use and appreciate.

What is the one design element that proves to me that the interface has been developed professionally?  Space.  Too many home control screens are jammed full of buttons, sliders and album art.  It’s hard to know where to look, and although this may be something of a visual trophy for the geek community – think how confusing this will look to others in your household.  This leads nicely on to my next step…

Step 3: Think about the order of things.  How will your commands ‘flow’?

As far as I am concerned, there are two main ways to organise your home control screens: by location or by function.  Organising by location means that you gather all your controls for one room onto one screen, so for the living room you’d have all the lights, the dehumidifier, the air conditioner and the TV controls all together.  Conversely, organising by function means that you’d put the controls for all your lights on one screen, heating and cooling on another screen, security on another screen etc.

I have created dozens of versions of both, and I personally prefer the latter.  For me it means that the user starts from the home screen with a definite decision on what they are intending to do.  The interface becomes less of a show-home piece and more of a practical and logical day-to-day assistant.

There is a balance to be achieved between the number of options displayed on the screen at one time and the number of selections required to perform an action.  Instead of scrolling through one giant page of options, or having to reduce button size down to miniscule proportions, it may be better to increase the number of screens and create a ‘flow’ for the user.  So instead of selecting ‘Audio’ and immediately being presented with a screen full of options, it may be better to then ask ‘Where do you want to the audio to play?’ and further ‘What kind of audio?’.

Step 4: Write it down!  Plan your screens.

I have wasted literally days of my life not following this simple step.  Plan your screens on paper.  Falling out from this step will be all the buttons you will need for each screen.  Don’t worry about what the screens will look like yet, just think about what options you want to show.

Navigation is a consideration here.  How will your users know where they are?  If you provide ‘breadcrumbs’ on your display (Home > Audio > Living Room) you’ll need to reserve the same area on each screen for that.  To get back to the main screen, will the ‘home’ button be in the same place for each screen?

Step 5: Get ‘the look’ and stick to it.

Decide on a look and feel for your interface.  You may choose to compliment your home décor or to stand out as an ultramodern feature.  Either way, this step requires as much external input as possible.  If you’ve found some designs that you liked from step 2, speak to your users about which ones they prefer, and what they’d like to see.

When you’ve selected a look – stick to it.  By that I mean don’t be tempted to bend your own rules.  Future-proof your design.  For each of your screens ensure that there will be scope to add new devices in the future with ease.  Don’t make your icons or buttons so intricate that you’ll not be able to match them easily.

If each of your buttons contains an icon and some text, make sure the icons are roughly the same size and the text is the same size and font.  Little things like ensuring there is consistent capitalisation across your interface can make a huge difference.  “Living Room Lights On” next to “Living room lights OFF” leaves an unprofessional air.

After years of designing interfaces for my own home, I have some pearls of wisdom for you here.  The first is to use perfectly square, flat buttons.  These look modern and will not go out of fashion (if you are reading this in 2020 and flat buttons are out of fashion, then I apologise).  Another reason I prefer perfectly squared icons, is that depending on what interface controller you use, you may be disappointed at how the controller renders curved corners, and your beautiful vision becomes a pixelated mess.  The bigger the button, the better.  Our cleaner visits once a week, and if she needs to use her glasses to see an option, I change the button immediately.  Larger buttons also means that fewer options can fit on each screen, and I am all for that.

Get each button you need from step 4 designed now.  I would recommend you put a selection of these buttons in one mocked-up screen to ensure they are the right size and they look right.  Choose unobtrusive wallpaper or a solid inconspicuous colour for the display.

Step 6: Think about feedback.

The devices your user will be controlling may not be in the same room as the interface, so remember that they may need reassuring that what they have requested has been carried out.  There are a few ways to achieve this.

A button which changes its look depending on the state of the device is one way to go.  This approach is more common in consumer installations and requires constant sensing (called ‘polling’ in home automation terms) to ensure that all interfaces ‘keep up’ with the device’s status.  Don’t forget that someone could switch on a device from their smartphone, so then the corresponding button will need to update on all screens to reflect this.   One such controller that is capable of keeping track of devices is Openremote – more on this in step 8.

Another idea is that a pop-up box could appear to confirm your selection, for example confirming “Fan in Living Room has been switched on.”

The panel itself could speak to you.  I have elected to use this as my primary feedback method in my latest interface design.  The display is not obstructed by pop-ups, and the user can walk away from the panel and will still hear the announcement.

Feedback should also be provided automatically, for example when a security alert is activated or when a user needs to do something that cannot be completed automatically (such as a reminder to close a door).  Users could be anywhere when this feedback needs to be given, so thinking beyond the physical interface of a screen, what other devices could be used?  In our home, we have Sonos speakers in every room, so urgent feedback can be given via spoken word through them.  For smoke alarms triggered by Nest, the Hue lights in each room will flash momentarily, alerting occupants that action needs to be taken.  I also use Notify My Android (NMA) via Domoticz to keep me informed via short ‘texts’.

Step 7: Remember the ‘automation’ in ‘home automation’.

Advanced controls that only you will use can be tucked away at the ‘back’ of your interface.  Settings and variables can be as hidden away as you like, followed by screens for ‘fine tuning’ settings for devices that other users will probably never use.  It’s sometimes useful to control one individual lamp in the living room, to set brightness, colour and saturation until it’s just perfect.  But how often do you actually do that? It would be wiser to initially show a list of pre-set scenes to be selected from, and then have the option to move to a different screen to change individual lights if required.

Just because your system can do something, don’t give it pride of place and assume that every user will want to do it.  I have been guilty of re-building my interface around that a newly-purchased piece of hardware, just to show it off its new features.  This is a waste of time and ultimately confuses other users.

Step 8: Where to host your interface?

This depends on your home control set up.  I have used a few different downloadable options here, one being Openremote which is a program that runs on your computer or Raspberry Pi and ‘serves’ up information to panels around the home.  By polling your home control hardware at intervals you can select, Openremote can keep track of your devices.

Domoticz also has its own user interface that can be used on a plethora of screen sizes, however although I absolutely adore Domoticz and use it as the basis of all my home control activities, I think that the user interface is – dare I say it – where there has been less development.  By no means do I think this is a let-down however, as I would not have been able to thoroughly automate our home without Domoticz.

Another route – which is the one I have taken – is to design a web-based interface from scratch.  As Domoticz has a ‘www’ folder that can serve up any html document in that folder, I don’t need a separate web server.  I just upload all the html screens into a sub-folder of the Domoticz/www folder and then navigate to that page from any panel in the home network.  Here’s the secret.  Controlling Domoticz devices from a web-page is really easy.  You just have to navigate to a specific address and Domoticz will turn on a device.  You can get more information about that on the Domoticz API/JSON URLs page.

The only thing I had to work out for myself is – when I navigate to a URL asking Domoticz to turn on a device, the screen shows a ‘result page’.  The user would have to then click the browser’s ‘back’ button to get away from this result page and then back to the interface.  To solve this, I use a very small frame at the bottom of the screen.  When the user clicks a selection in the main screen, the link is followed in the small frame at the bottom, so as not to disrupt the main window.

Step 9: Testing and Rollout

Before announcing to your loved ones that you have created a masterpiece, I would encourage you to test every function on every page of your home control interface, especially those functions which will affect many devices in the home.  As an example, choose a time when no-one else is around and activate your ‘leave’ function and see if it does actually behave in the way you expect.  It’s too late when your family is ready to leave and you proudly press the button, only for the whole system to crash.  Trust in the system as a whole can also be eroded in this way.

Personally, I have the flat to myself every other Friday, only having to navigate around our cat.  I use this opportunity to test new functions I have added.  Our neighbours must think the flat goes crazy every two weeks, but it’s worth it.

Once everything is ready, you can add links to your interface on every device that will access it.  You can now go back to step one to restart the process.  I say this with confidence because as I stated at the start of this article, there is no ‘perfect’ user interface and there are always improvements to be made.  I truly believe that I will always be in pursuit of user interface perfection.

Advertisement