Interaction design is like being a storyboard artist.

 

We tell the story visually. My job is to take the personas created that represent not only your core customers, but the outliers as well, and walk through the experience of using your website. Does it work? Should we do something new and engaging, or is it ok to not reinvent the wheel? If we do it this way, does the user get stuck? Is anything missing? And... do we love the way it looks and works?

These are some of the questions I ask when I am designing the interactivity of a website or app. There are so many things to consider, like zero states and warnings... but first and foremost, my goal is to reduce friction as much as possible, often keeping with the old tried and true rule of only three clicks, and at the same time maintaining context and aesthetic excellence. I'm one of those for whom a pixel matters. After the thing works well, of course. The best design is ultimately when form follows function. 

All the websites I have designed incorporate interactivity to some degree, but I have done complex interactive design work on the Communication Arts Online Competitions website, and for the better part of two years working on the WorkSpan app design and corporate website. 

The following describes the general steps I take when designing the interactions on a website.

Sketches

Everything starts with a sketch. It's still the best offline app you can find for getting ideas down and changing them on the fly. These low-fi sketches are the starting point to getting all the ideas on paper. Literally.


Wireframes

I take those sketches and bring them into an online app such as UXPin or InVision. It allows me to see in a more realistic environment how the elements are going to play together. A lot is revealed when the sketches turn into real buttons and body copy. It is the first opportunity to see how those sketches really work.


Prototyping

Once the wireframes make sense, then the interaction exercise goes into hi-fi prototyping. A few scenarios are developed, and usually the results are shared with other teammates to see how a fresh new user interacts with it. What you thought was a fantastic idea may land on it's face... or be received with fanfare. Great design can't be accomplished in a vacuum.


Design

This is my favorite part of the website - taking the winning prototype and bringing it into the shop to be built. This is where brand guidelines get attached to the broader design. Once that is done, it goes to the engineers for development. And then, presto! We have a great web page.