Mandy Brown

So eloquently put.

We design pages for clicks–for movement from place to place–neglecting the fact that reading is an act of stillness. We intentionally distract, polluting the visual space until it resembles less a library than Times Square. And to add insult to injury, we cover up these ills by saying people don’t read online–as if the design of a space played no part in determining its use.

Mandy Brown

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.

Nielsen’s Future Predictions

Here are some interesting predictions Jacob Nielsen made in his late 1999 book Designing Web Usability. He was looking into the short-term future, the five or so years following the publication.

Some are quite accurate, others not so much.

The Kingdom of Tonga becomes the world’s richest country by hosting many large and successful sites that cater to Asia, North America, and Australia through fiber-optic links.

Strike.

Most sales people are replaced by customers who refer other customers to products and services they have like in return for getting a commission or loyal-customer points. People who give bad recommendations get poor satisfaction ratings and are not listened to in the future.

Yelp? Amazon affiliate program?

Despite having given away all the money he made from software, Bill Gates becomes the world’s richest person a second time due to earnings from his online businesses. His entry in Encarta 2020 refers to him as a media mogul who got a start in the computer business.

Hehehe, Encarta. You’re so funny Jacob. Although, Gates has become quite the philanthropist. Foul ball.

Computer companies stop cloning the Macintosh and base user interfaces on information retrieval and other means of managing millions of information objects. The anti-Mac design becomes a reality.

Big strike two. I think the exact opposite has happened.

Because of the abundance of portable devices with wireless modems, people will be online at all times and can be reached anywhere. Privacy becomes precious. Users will pay extra for screening services that allow them a respite from the world. Being out of touch will be seen as a status symbol.

Homerun.

This one is eerily accurate. Not necessarily the screening part, but about how connected we would all become. I don’t think anyone really knew how prevalent the smart phone would turn out to be. Being able to get off the grid for a few days now really does seem to be a luxury.

Design’s Big Moment Is Now

Design doesn’t progress like science or mathematics. As our culture learns and grows, designers don’t respond by winnowing themselves into tinier and tinier disciplines. Instead, their job is to pull the world back together, from its many fractured parts.

Why Co.Design Believes That Design’s Big Moment Is Now

Personal Timeline

Facebook’s newly announced timeline feature reminded me of something I sketched out a long time ago. Horizontal bar graphs of various interests, places, and events and where they coincided with your age.

Why I Write