Interaction design challenge

So, I’ve had some free time recently and decided to exercise the old brain with some interaction design challenges. The fine folks over at Cooper have put together a series of such exercises for their potential job applicants. I thought they looked interesting and fun so I gave them a shot. The following is my outcome to Part 1 of the Interaction Design Generation Challenge.

Here is the challenge:

From Cooper’s interaction design exercise .pdf

So, basically I need to improve the experience of creating and manipulating a table inside of Microsoft Word. No easy task.

Note: This exercise was designed to be completed in a couple of hours. As such, I didn’t really have the time (or ambition) to figure out how new interactions would fit into the existing interface holistically. I considered the exercise to be wrapped up inside its own box, and ignored how it affected the rest of the UI. As you’ll see, I also took the allowance of straying away from the ribbon paradigm.

Page 1 – Brain dump/storm

Starting off, I wanted to figure out who would be using this. What were their goals and motivations. The users need something fast and intuitive – a tool that lets them quickly create and modify a table. A simple and clean tool – one without all the confusing bells and whistles that tend to muck up a UI. We won’t have CPA’s submitting tax records in spreadsheets made in Word. (There is an import from Excel option if need be!)

Quite early in my brainstorming I knew I wanted to move the controls from the ribbon and stick them into a floating panel. Something more along the lines of an inspector window or a popover panel. I liked the idea of the control panel being semi-context sensitive; showing itself when relevant cells are selected. It also brings the controls closer to the table you are interacting with and modifying.

Figuring out user flow

I briefly contemplated having a mini wizard-like process appear after you selected Insert » Table » New. The idea was to choose the dimensions as well as any header, footer, or end columns as a first step. After choosing what you wanted it would create the table and you could go from there. The thought was that I could get rid of these options after the table was created, thus simplifying the list options later. But, as these initial options are so crucial, I knew they would have have to remain permanently editable – so I nixed that initial first step .

Refining layouts, alternate versions of the style selector panel

Word has all editable table controls split into two separate tabs inside the ribbon, a Design tab and a Layout tab. I felt that this classification worked relatively well, so I carried it through into my popover panel design. I renamed the Design tab to Table as its now more of a general label for the panel.

Another thing to note is the Preset Styles panel. The way Word allows for selection of a preset style is through a number of tiny icons crammed into a small scrollable box inside the ribbon. We can do better. First, we need to enlarge the icons to a point where the user can actually get a sense of how that style looks. Secondly, the icons need a more manageable container; something big enough to hold the larger icons, but something that still flows with the UI. Opening another window just to select a style seemed too cumbersome and added more UI clutter – something I’m trying to avoid. I thought a simple solution to that was to just have the whole popover panel flip over, to reveal the Table Styles selection panel. When a user is selecting a table style they have no need to access the rest of the table options, so the UI isn’t sacrificing anything while still being able to maintain its simplicity. A click on either ‘Cancel’ or ‘Choose Style’ will flip the panel back over to the Table state.

Final version of the popover panel

Above is my end result for the exercise. It shows both main states (Table, Layout) as well as the Table Styles state for the popover panel. It also shows a couple dropdowns for the Delete and Insert options. The bottom two examples show how the popover panel looks with the table behind it. The thought here is that the popover panel dynamically positions itself next to the current cell selection.

So, all in all I had a fun time tackling this little exercise. Sure, there might be a few holes here and there and I took some liberties, but I don’t think that was the point. It got the gears turning and was fun to try and approach something from a completely different angle. Lots of the time, us designers, find ourselves stuck in a rigid and inflexible framework. A pre-existing UI structure usually dictates more that we’d like and we can find our options fairly limiting at times. Exercises like this throw away all those limitations and let the mind have a bit of freedom and creativity.

I’m looking forward to tackling the rest of these interaction design exercises sometime soon.