Sketching interaction stories with markers and iPhones

I recently posted about Bill Buxton’s book, “Sketching User Experiences, so I thought I’d share an example on using these kinds of techniques on a recent project.

The problem at hand involved concepting a number of new features for an existing website, and sharing these concepts with a remote team. (When you can’t get everyone in the same room, it’s key that the team can quickly share ideas.)

For this session, we used:

  • Whiteboards
  • Paper
  • Markers, scissors, and tape
  • iPhones
  • Keynote

The goals were to:

  • Tell a story
  • Leave room for creative thinking
  • Validate concepts
  • Align thinking

After open brainstorming and traditional white-boarding, a number of concepts were quickly sketched on paper (generally one sheet per screen.) These screen sketches were taped to a whiteboard, allowing quick note-taking and annotations:

photo of whiteboard working session

After walking through the concepts (and iterating) with a number of local victims, the screens were captured with an iPhone camera and pulled-into Keynote to create the storyboards. With each screen as a slide, a story can be told within the presentation format:

bringing images into Keyboard

Using this approach, stories can be shared globally, and changed in minutes. The hand-drawn images ensure that no-one gets hung-up on colors or copy writing, and they require a little creativity on the part of the reader, which gets the gears turning and leads to fantastic questions.

Book: Sketching User Experiences

I finished “Sketching User Experiences: Getting the Design Right and the Right Design last week in preparation for the upcoming UX Austin Book Club meeting.

It’s 400+ pages, but a rather easy read. The book covers a range of topics, including:

  • The value of good design.
  • Good design only happens when designers understand the context of use, and explore many possible solutions.
  • Sketching allows designers (and potential customers) to explore ideas at low cost.
  • Sharing sketches enables early feedback.
  • Techniques for sketching interactivity.
  • Sketching can involve computers, cameras, and smoke-and-mirrors provided that it remain quick, inexpensive, disposable, etc.
  • There are many examples of quality sketching available in the archives of HCI history, and replicating these experiments is good practice for a budding interaction designer.

My opinions on the book are mixed. It definitely offers positive motivation for sketching — and some great stories to feed those “why are we drawing pictures instead of coding” conversations that come up all-to-often with clients unfamiliar with UX Design. However, the book does come across a little passive, yet arrogant at times, while making numerous references without context. This gives it a somewhat academic feel, reading more like a light-weight thesis than a typical design book. That said, if you work in UX Design, being familiar with the ideas in this book will go a long way toward helping your career.

While reading, I highlighted a few quotes, which I’ll list out below. I grabbed these not because they represent the theme of the book, per se, but because they had unique meaning to me, or something I’m working on. (For example, I’ve already used one of the quotes below in a presentation on the design process.)


“In order to design a tool, we must make our best efforts to understand the larger social and physical context within which it is intended to function.”

This is a classic UX/HCI principle of understanding the user and their context for interaction as a design constraint/criteria. It’s a basic requirement in designing a product/solution that delivers value to a customer.

This next quote is an interesting one for companies thinking that they can solve “design” simply by hiring a few designers:

“It does not matter if you already have the talent to save your company among your current employees. If you do not have the vision, will, and power at the highest level, then that talent is almost certain to remain as wasted as it is frustrated.”

Becoming a design company isn’t as easy as hiring designers (just like becoming an innovative company cannot happen simply by filling the ranks with a few smart people.) Companies can only lead the pack when these values go all the way to the top. Until that happens, organizational practices (and politics) will keep those talented stars from shaping the companies’ future.

This one’s fantastic (and the one I used in a presentation):

“Even if you do a brilliant job of building what you originally set out to build, if it is the wrong product, it still constitutes a failure.”

Meaning, that even if your company can execute a product vision perfectly (ie., you have great developers/craftsmen/etc.), you’re still wasting your time, and money, if you haven’t validated that your concepts will provide the market value you’re trying to achieve.

On the reason it’s important to share all ideas when brainstorming:

“…better idea[s] would never have come about were it not for the idea that it replaces.”

In other words, even bad ideas provide value via the thinking that occurs when we consider them.

On team dynamics and the work environment:

“A healthy team is made up of people who have the attitude that it is better to learn something new than to be right.”

“A design studio without ample space to pin up sketches, reference photos, clippings, and the like,… is as likely to be successful as an empty dance club.”

And finally, a reminder on why you never skip peer reviews:

“It is better to have your preliminary work critiqued by your colleagues while there is still time to do something about it — no matter how difficult the criticism might be — than to have the finished project torn apart by strangers in public.”

Hiding an idle mouse cursor on Ubuntu

One of the obscure features of OS X that I love is that the mouse cursor hides itself when idle. By doing so, it stays out of the way when reading on-screen. When I made the shift to using Ubuntu at work, the non-hiding cursor was one of those little details that annoyed me. Of course, like most things on linux, someone else had the same opinion and has solved the problem already. The solution is a tool called unclutter (easily installable with a `sudo apt-get install unclutter`.)

Unclutter takes a few optional parameters. I like: `unclutter -idle 1`, which hides the cursor after one second of inactivity. The hidden cursor not eliminates the potential annoyance while reading on-screen, but may also serve to remind the user that keyboard shortcuts are faster anyway ;-)

For more, see: unclutter: hide the mouse cursor after a period of inactivity

Lily: Visual programming in JavaScript

I have an odd fascination with Visual Programming languages, and while I’ve gotten so far as sketching out some UI concepts and object models for a text-processing focused, web-mashing, visual programming environment, I’m a long way from having anything that works. Much to my surprise then when David Ascher dropped a link to the Lily project on his blog today. Holy cow this is sweet. Think PD or Max/MSP written in JavaScript, running in a browser, with modules for popular Web API’s and JavaScript frameworks (ex., “Amazon, Flickr, Wikipedia, Yahoo; UI modules that wrap widgets from YUI, Scriptaculous, JQuery, Google Maps….”)

Check out one of the demo’s here:

(Via: Lily: JavaScript, visual programming, fun.)

Touchscreen keyboard (could be killer with tactile feedback)

The Optimus Tactus keyboard:

Optimus Tactus keyboard

…a programmable, touch-screen that acts like a keyboard. Pretty amazing potential for experiementing with user interaction interfaces. Could be even better if merged with some of the haptic/tactile feedback work that Apple and Nokia have been doing. Ex: