Not to be confused with the “box model” of CSS layouts, but somewhat indirectly connected later on in the UI process, the box exercise is foremost a collaborative method of organizing information into potential layouts that can serve as a baseline for photoshop-level comps/explorations. The method connects two traditional but typically separate activities that seemingly have nothing in common: card sorting and magazine layouts. To make this method work, you gotta have a) key members of the team participating (marketing, engineering, design, etc.) b) tons of post-it notes and c) a huge whiteboard to stick and re-stick those post-its.
Basically the process goes like this (block out a few hours, too):
1. Unpack all the contents of the UI to be designed and write them down on post-it notes (one concept per note). For example, if re-vamping a navigation bar, write down all the menu items, tabs, search fields, etc. that constitute that navigation area. Having the product team domain experts (from mkting, engin, QA, etc.) is crucial for this to work well.
2. Gather those notes into groupings that seem to make sense in a semantic way (caution: semantic is a hugely loaded word so please use this term lightly in this case; ie, i’m not referring to XML semantic validity, etc.)
3. Iterate successively on those groupings, constantly questioning why the clumps are what they are, why can’t this item go over there, etc. Move towards smaller, meaningful groups of notes. This is why you want folks from dev and PM–starts to force questions about assumptions, functions, relationships, etc. and lots of “why do we have this anyway?” kind of thinking…
4. While grouping, assign a simple, meaningful label for each group that captures the gist of what that group is about. Naturally there will be changes and debates but pick something and move on. Avoid marketing terms, just get to the heart of what it’s about functionally or semantically. Use the domain jargon if appropriate for the user audience.
5. List out the groups on the side, giving an approximate percentage of importance for each group. For example, File Exchange functions might be 75% of the navigation bar because it’s for a data transfer application, while User Prefs would be only 5% since it’s done once and typically not re-visited after that. These percentages will be useful for the next step.
— So that is basically the card sorting portion of the exercise. Usability purists will note that a true card sort activity can last for days, usually involving hours spent with one domain expert at a time, not multiple folks simultaneously. And of course a detailed report suggesting recommendations emerges from the activity. The goal here is expediency and getting to action/decisions to move the process forward in a real-world product development situation. Remember, real artists ship! —-
5. Now we get into the magazine layout part of the process. Mindful of the group labels and their respective percentages, draw on the whiteboard some boxes for the groups–they’re just layouts. NOT UI controls or widgets! That’s later on… You want to do this fairly quickly, no more than 2 minutes per layout drawing, generating 3-4 per person (yes, force those PM’s and developers to draw!). Helpful to use different colored markers for each person.
6. Now step back and discuss each layout, the rationale and issues (but not getting into UI widget stuff or style ideas yet) and vote successively on a) which one approximates the ultimate ideal b) which layout is most like today’s and c) which layout is a good transition from today to the ideal.
7. Based upon these drawings and groupings, the team is ready to proceed to the next phase: visual mockups and explorations, including UI controls and styles…
To summarize, the benefits of the box exercise include:
– Cross-disciplinary collaboration in a) understanding the functions and b) generating improved alternatives
– Connecting a common usability activity with designing, “making something” that moves the overall UI design forward
– Involves non-design members to contribute ideas
– Leverages a simple drawing scheme: boxes! anybody can draw a box.
– Encourages critical thinking about the content and functionality, before entering the UI widget/style stage