What is a better user interface? Is it one that is more attractive? Is it one that takes the least amount of time to build? “Better” is a subjective term and could mean different things in different context. For the purposes of this article, a better user interface is one that is consistent in its appearance, reusable in its structure and has a pretty face.
Consistency. The best way to make a user interface consistent is to use a grid layout in your design as it ensures consistent placement of information within the touchpanel so that the user can anticipate and find it. Establishing a grid is a fundamental step that every formally trained graphic designer takes before beginning a multi-page assignment. To explain this further, take a close look at a book, magazine or other multi-paged catalog. After a few page turns, you will notice the consistent “look and feel” among the pages. There may be images on one page and text on another, but by the intentional placement of the elements on the page you will realize they fit within the same spaces and start/stop in the same places.
This use of a grid is paramount in UI development as it creates continuity from page to page. Not only does it keep a panel layout orderly and pleasing, but also it helps enforce the expectation that certain info will appear-consistently-in the same place.
A simplified grid layout can be used in any touchpanel layout. Each of the four quadrants on this layout has a specific use. For instance, quadrant “A” would hold all system navigation buttons (i.e. audio, video, climate, etc.) Because section “B” is the largest, it would contain all dynamic subpage/popup content (i.e. TiVo guide buttons, audio jukebox buttons etc.) With quadrant “C” being the smallest, it would be used for other panel buttons (i.e. volume, back/home, date and time and logo branding.) The final quadrant “D” would be ideal for the source names of each system (i.e. satellite, tuner, CD player, etc.)
Establishing your grid should be the first step you take. You can create a grid with more or fewer sections, it’s up to you. You can also change the order of where the content goes. The single most important issue here is consistency; once you make your decisions, never deviate from them.
Put your grid to the test by laying out several pages of the “worst case scenarios.” Start with the sources that have the busiest content (the most buttons) and create layouts for each. It never fails that during the course of making it all fit, you realize that your grid needs to be modified larger or smaller. Modify your grid, but remember to go back and refit every page or subpage to the new grid size. Consistency is king; if there is one single instance where the data spills outside of the designated quadrant, then the grid failed. Go back, rework the grid, and then reapply to each page.
Now, once you decide on a grid, how do you get it into your file? Apply guidelines to your file by either drawing lines or aligning color fields beside each other. The best way is to incorporate your grid into your background artwork. Create one full size imported graphic of the exact size of the full screen. By making it the background image, it is easier to design the file as the lines and color fields aren’t loose and therefore don’t get in your way.
Reusability. Create one file for every size panel. If a large project has a total of 10 touchpanels comprised of three different screen sizes, you only need to create three files. The programmer manages the differences in room areas through room specific pages and pop-ups. There is no need to create a whole new file for the same size panel. That means that each file must be robust enough and contain every page/popup/subpage necessary to satisfy each instance of that touchpanel size. This is very efficient as it allows the programmer to manage a fewer numbers of files especially when it comes time to make and upload changes.
Utilize dynamic text (indirect/variable text) to reuse the same pages for multiple rooms. Again, this is managed by the programmer and therefore must be coordinated with him. The exception of this is the one-way panel. Don’t be fooled by the misleading cost saving of a one-way wireless touchpanel. Often times, the programming expense to integrate a one-way panel into a house system is significantly greater than the cost of the hardware upgrade. Additionally, client experience is significantly improved with a two-way, because it behaves similar to the other panels.
What do you design first, the largest or the smallest? It’s like the chicken and the egg scenario-which one goes first? The upside in designing smallest to largest is the ease in converting the file. The downside is that the layout of the larger panels often ends up with obnoxiously large buttons. Keep the layout quiet and make the buttons as small as you can get away with which is no smaller than an average finger print.
The upside of designing large to small is the streamlined navigation. The larger panels give you more room and the layout looks the best it can. Also, you can transfer source buttons to external buttons to reclaim some real estate on your panels. The downside to reducing and converting is that all buttons typically need to be manually resized. Sometimes they overlap or stack upon each other at the edge, so it becomes a bit of work to fix. The upside is that the artwork can be fully conceptualized and developed with the larger size, not to mention that you retain resolution when you reduce art. Quality is lost entirely when you do the inverse. Either choice is intelligent for different reasons; just don’t start in the middle.
Branding is another vehicle of consistency. Each company should establish a signature look that is consistent for every project then reusing it. It will appeal to the majority if you make it somewhat generic by using solid colors and textures, not an image or theme. Also consider the branding that television networks do during a broadcast; they position a transparent embossed logo in the corner of the screen so the background can still be seen behind it (place in section “C” of the grid.)
Another key element to making a better UI is having the right tools for the job. Software has plenty of timesaving tools developed for users. With the constant stream of new features released on touchpanel software, most of us don’t invest the time it takes to figure out the new benefits. Make a point to learn the touchpanel programs more thoroughly. Work closely with tech support to expand your knowledge into understanding new timesaving features. Lose the ego and ask for help; you’ll get farther faster and will learn more in the process. One quick example of this is Crestron’s button theme function. Use this feature to create your master buttons, then assign the style to the appropriate buttons throughout your file. When you need to make a change, you change the source art and in a few clicks, every instance of that button is updated. Not only is it simple, but it eliminates errors and oversights.
Beauty in UI. The user interface is important because it is the pretty face to your system and the steering wheel that guides a user experience. Treat it with respect and see it as art-it has both function and beauty. As often as a panel gets used, there is also a significant amount of time that it sits unused. The panel’s welcome screen should have an attractive image or simple color treatment without the clutter of navigational buttons. Create a clean and colorful welcome page that is tasteful and inviting. Hide the system buttons either on the subsequent page or keep them small and unobtrusive on the welcome page. Take the time to find out the general color scheme of the client’s house and create a layout with a complementary or similar color palette.
We began the habit of linking an “info” page to our welcome screen. On it, we placed the contact information of the contractor, subcontractors, integrator and programmers. In the likely event future service is needed, the information is there and serves as a readily available business card for your company. We have received surprisingly positive feedback by the addition of this simple reference tool.
The skill set between a UI designer and an engineer or programmer is distinctly different. That is why I am a huge proponent of utilizing separate resources for each. Let each do what they do best so that they can get even better at it. Spreading out the work across a team of people generates more productivity as well as happier resources. Working together encourages collaboration, which is positive interaction that every project can use.
I hope these ideas can inspire you to work smarter, not harder. When you use a better process, you end up with better results. By upholding consistency, reusing good work and keeping aesthetics a priority, clients will walk away from you system with a very positive user experience.
Patti Brosnan is general manager of Axiom Design in Pleasanton, California.
