Okay, so another big issue that came up was the fact that users disliked having to lose sight of the channel they were watching while changing settings on the interface, even if some aspects of the interface were perfectly easy to work.
Koulle suggested a split-screen interface, which seemed to me a really viable compromise. Examples of this type of interface already in use include new interactive menus that commonly come with digital packages and freeview boxes for today's televisions:
The channel you're on is still visible, although in this particular example I think there's far too much information cluttering up the screen for our system, which has fewer functions.
Already with the new remote design, it's been established that simply using one of the navigational keys will bring up the interface menu, although the enter key will be the 'official' activation button. From there, I've derived a simply layout based on the previous prototype:
Key features here:
- Sidebar menu - any users of freeview or digital subscription services will already be familiar with this kind of layout. It avoids obscuring the screen, and takes up very little space without being too small or indistinct enough to use.
- Large text in a plain and simple font.
- Large buttons, well spaced out, with obvious, imperative labels.
- Exit button, which will consistently stay in the same place on the sidebar no matter what submenu is triggered and is smaller and less distinct in colour than the main function buttons, signalling a difference of purpose.
- Simple colour scheme, with clear contrasts between button boundaries and text etc.
- Currently highlighted button is clearly indicated by the highlight. Pressing the 'down' key on the remote will move the selection and the highlight:
One of the other main changes I made here was the entire removal of the 'system settings' button. The reasons for this included that it was unlikely the
user would make use of it; the main user of any technical settings would be the technician setting up the system and/or coming out to fix it if there are problems. For this purpose, I thought it would be better to
have the settings menu triggered by a button on the back of the set-top box. The settings menu itself will not be used by the residents of the home, and so its design is not included here as being outside the current scope of the project.
Pressing enter while a button is highlighted will activate that button. I'll use Manage My Home as an example:
Here is where the main difficulty lies - how to present the necessary information within the sidebar while simultaneously making it easy to navigate? The solution I came up with, using lighting as an example, is this:
Notes:
- The simple icon representation of rooms has been maintained, along with the simple representation of the toggling options.
- Current lighting states are clearly indicated by the highlight over the appropriate toggle option, and the room currently selected is again distinguished by the highlight around the icon.
- Operating the toggle functions is easy. The user must simply select the appropriate room, and press enter. For example:
- Press the 'down' key to select 'bedroom':
- Press 'enter' to switch the lights off:
- As there are more icons than can be displayed at once in the space available, a down arrow is displayed beneath the icon frame. This is not a selectable button; pressing down while on the bottom row of icons will simply scroll down a row:
- Notice that now the bottom row of icons has been reached, the top icon rows have been pushed off screen. This is indicated by the disappearance of the down arrow, and the appearance of an up arrow. Again, to access upper rows, the user simply needs to press the 'up' key on the remote as many times as is required.
- The down arrow will hence only be present if there are icons off-screen that can be reached by scrolling down.
- The up arrow will only be present if there are icons off screen that can be reached by scrolling up.
- I'm aware that, given several 'pages' of icons to scroll through, it could be difficult for the user to get down to the back key if they have to scroll through them all. However, it's unlikely that many of our system functions will have more than a couple of pages and so this seems to me the most ergonomic way of navigation.
Other 'Manage My Home' options e.g. Appliances, which aren't a top-row button like Lighting, will 'glide' to the top of the submenu as a header in the same way the Lighting button currently is in the above screens. This maximises screen space for icons and makes the display less cluttered.
EDIT:
The 'Order Shopping' menu, now complete! Please let me know what you think.
Previously this one was the stickler - a certain level of complexity is required due to the feature itself, but our previous design was just not clear enough for users to make sense of. So, in order to integrate it into the sidebar design and also try to make it simpler to understand and more ergonomic to use, I've given it a complete redesign based on the pointers in the comments and the ideas in Anna's post.
- First things first - I ditched the information overload of the last design. Selecting shopping straight away bombarded users with lots of lists and frames last time, which can be daunting.
- Restricted initially to the sidebar - the faint grey frame indicates where the list will be displayed and the black selection box highlights the first entry in the list, currently blank.
Pressing enter on a blank field will allow you to fill that field with the shopping item of your choice. I went with
horizontally cascading menus for this part, as they're easy to figure out when your buttons are primarily navigational and this also reduces the required clicks to get anywhere:
Don't panic! This will be illustrated better in the prototype, but for brevity here, the menus cascade successively e.g. pressing 'right' on
Fruit and Veg will open the fruit and veg product menu, and pressing 'right' on a particular product will open the product details and buttons. Pressing left will close the menu you're on and retreat back to the previous submenu. I'm hoping this kind of navigation will prove to be somewhat intuitive, given the arrows included in the actual design to indicate cascade direction.
- Quantity changing and price are the two most important features. For simplicity, because elderly users may not be familiar with other increment/decrement design paradigms, increasing and decreasing the quantity is operated via two buttons. The units of quantity are identified in the product details, as is the price per unit.
- A translucent full frame has been opened; there is simply too much information when searching the available shopping products to constrain to the sidebar.
Pressing 'enter' on Add Item will add that item to the shopping list, close the translucent frame, and drop the selection down to the next empty field. Now, if you want to remove or change the quantity of an item you've already added to your list, you can do so easily.
- Selecting and pressing a filled field will bring up the edit item submenu on a translucent frame.
- Removing an item - simply click 'Remove Item', cursor moves to highlight 'OK', press that and the translucent frame, the item in the list, and its contribution to the Current Total are all removed.
- Changing a quantity - works as before. Then simply select 'OK' and the changes will be implemented, the translucent frame will go.
Once you have a full shopping list, all you need to do is highlight 'Confirm Order' and press enter.
To prevent accidental orders, a confirmation box will pop up in the main viewing area (to enforce concentration), and the default selection will be 'No'. Press 'Yes', and the confirmation box changes to actual confirmation of the order and estimated delivery time (actual system will encourage same-day delivery if ordered before a certain time of the day. User will be asked only to order when they know they'll be in during the day to receive the shopping, which shouldn't be a problem given that we're targeting users who may be housebound).
The final feature is obviously the ability to save a shopping list, as suggested by Anna in her post:
When the user tries to navigate away from the page, either via the 'Exit' or 'Back' button, and they have made any changes to the shopping list, they will be asked if they want to save. Default answer is 'Yes'. This allows them to store a main list, make little changes on a case-by-case basis when required without altering that list forever etc.
In general, I think this is about as simple as it's going to get.
Feedback/suggestions on this design are also welcome :) I have the interface working on multiple layers in a Photoshop file, so switching bits and pieces around is not a problem.
