Sketching user experiences for complex web interactions: An example

Faking it, coding as a designer, sketching and all that.

I originally wrote this tumblr post back in 2012. I stumbled upon it recently and realized how relevant it still was. Gaze past the old(ish) tools and the outdated look, and you will find the basic ideas just as relevant.

In his seminal book Sketching User Experiences, Bill Buxton describes sketches as being quick, timely, inexpensive, plentiful, and having an appropriate degree of refinement. He describes sketches as including drawings, illustrations, the broader family of renderings, probes, role play etc — really anything that leads to inexpensively exploring ideas further.

For one of the projects that I am working on, I needed to sketch the user experience for a particularly interactive and difficult piece. Unlike a traditional link up of pages these interactions were more like the ones found in a rich internet application. I was wondering how to go about them.

Normally to sketch user experiences I do the following:

  1. Create some static interactions or frames (usually it is screens). I do this using either pen on paper or tools like Adobe Fireworks, Illustrator and Photoshop.
  2. I then add some interactivity / time element to it. Depending on the context or the design phase, I either use a space multiplexed technique (storyboards) where you can see all screens simultaneously or a time multiplexed technique (inVision) where you can see one screen at a time.
  3. Then its time to elicit feedback.

For the piece that I was working on (imagine Apple Mail or Outlook’s two column layout), I first created a pen on paper sketch of the frames/interactions. I then put them up on the wall to get a feel for the bigger design concepts.

When I walked the wall with users and stakeholders, they did not understand some of the interactions. What was natural to me in the way I read the sketches and imagined the possible interactions was not obvious to them. I realized that to elicit good feedback on the designs, I would need to create a sketch that was more interactive in nature. Creating such a sketch would also help me as a designer get a better feel for some of the more detailed issues like use of screen-space and overall user experience.

I first thought of using InVision. InVision involves creating clickable hotspots on the screens to add interactivity. However, there were a lot of rich interactions in this particular design and I was not sure InVision would give me the best feel for the experience. I needed something better; Something that would get me closer to the real thing, without building the real thing.

After exploring various sketching and prototyping tools in the market, I realized that the best way to probably sketch these interactions would be to use an HTML and JS framework. That would probably take the least time to make and also allow me to get closer to the medium. That is when I started looking at Twitter Bootstrap as a framework that could get me off to a head start in what I was trying to achieve.

Here is what I was trying to get at, albeit with more interactivity:

Fig 1. Static mockup of the design I was working on.

I created an image representing something like this in Adobe Fireworks. I then used it’s slicing feature to slice the image into various smaller images. You can see the slices below:

Fig 2. Mockup sliced up into separate images. Separate slices are marked by red outlines.

I wanted to add interactivity to only a few elements in the mockup. To elaborate:

  • I wanted the header and footer to be present only to add the sense of context. However, I wanted them to stick to the top or bottom of the browser window irrespective of the size of the browser window. Hence they are their own slices.
  • I wanted the first four participants in the left selection column to be clickable. Hence the first four participants on the left are sliced individually. The rest were only present to add context and hence they are sliced as one image altogether.
  • In the center details column, I sliced the demographics piece separately; I wanted that to change based on participants.
  • I also wanted the tabs to work so as to show the different sections of a participant. To do this, I used Twitter Bootstrap’s Togglable Tabs JS plugin.
  • Also, based on the study drop-down, I wanted the action buttons to change. Hence that was a separate image slice.

I then put all the above slices and components together using HTML as a glue. You can find the interactive sketch here.

It is not exactly how our original image looks. However, it does give a good feel for what the experience for something like this would be. It took me a total of about 3 hours to make. Not so bad considering that I could now show this to people around me to elicit more insightful feedback.

The point I am trying to make is that we can create sketches and experiences using simple techniques. This gives us a good chance of exploring the experience in more depth. It also gives users and other stakeholders opportunity to provide better feedback. The code produced is obviously not production level (or anywhere close to it) but the subtle things a designer will learn while creating this experience will make the design that much better. In some cases, faking it is not such a bad thing.

So, should a designer code? A better question I think is if a designer can hack.

Originally published at