The Meat and Potatoes
Designing with Blinders On
One of the most common mistakes I see designers make, is letting look-and-feel decisions influence functionality. This is often caused by jumping into a design program too early, and trying to tackle everything at once. The temptation to move a button, or delete a column of data for the sake of aesthetics can seduce even the most seasoned designer. We’re all guilty of it. But in interface design, form always follows function. And unless you have the self-discipline of a Shaolin monk, your best defense is a solid process that keeps you focussed and eliminates influence where it does not belong. Over the years I’ve found a (very informal) method that has worked well in producing UIs that are aesthetically pleasing, while retaining their functional integrity.
The basic idea is to break down the creation of a UI into small and easily digestible slices and only focus on what is relevant for that particular slice. But the true key to the process is commitment. Once you have completed a phase, you are not permitted to change any decisions made in that phase regardless of how tempting it might be.
Phase 1: Build Your Feature Set
The first step in the process is to write down a list of everything that needs to appear on the screen in question. Don’t bother with formal documents and outlines. Just get everything on paper in list form. Put your blinders on and block out any thoughts about detail or organizational groupings. Keep your elements high-level, we’ll flesh them out later.
Phase 2: Organization and Detail
Once you are confident that you’ve formulated a feature set that works, examine your list and form the logical groupings that will eventually dictate the layout of the screen. Continue to build on the list breaking down each section and formulating what they will be comprised of. Remember, you’re still working in a list format. Keep those blinders on and pay no attention to visual structure during this portion of the process.
Phase 3: Module Development
By now you will probably have something that resembles a very informal outline with clearly defined modules. Now its time to open up your design program of choice and begin to flesh out the information structure of each module. Using a limited design language, begin to explore the different elements that will make up each module. Should the area have a header? Will the hyperlinks be buttons or text? Should data be represented in rows or columns? Each module should be constructed independent of the other modules. use your blinders to ignore any urges to lay the page out. If you find yourself developing an overall layout, simply build each module in it own document to eliminate the distraction.
Phase 3: Layout
You should now have a nice set of building blocks that you can arrange to form the layout of your screen. We have not yet begun to introduce color or graphical elements, we are simply determining where on the screen each module should live. Remember that although you cannot change the decisions made in the earlier stages, you are permitted to change how they are represented. If you believe that module A needs a date, then a date there must be, but it is up to you on how to format the date. Use those blinders one last time and block any tendencies to develop a look-and-feel.
Phase 4: Skinning
By now you should have a solid visual representation of the screen that could virtually stand on its own. All thats left now is to skin it. I like the term skin as it separates “look-and-feel” from “design” which is much more encompassing than simply making something look aesthetically pleasing. This is the stage where the temptation to change earlier decisions will be greatest. But hold strong and have confidence that if you make it through the final stage you’ll have a UI that is both beautiful and functionally bulletproof.
That about wraps it up. Nothing fancy or formal. Just a quick-and-easy way to focus your efforts and instill a bit of self-discipline within your work flow.
Update: I’ve included the slides from a presentation I did on this subject at RefreshMiami
