I got a nice memory pingback when reading a the recent update from Evernote — later below I’ll go back to my experience trying this, but they were describing their approach about designing a new version of their app for the iPad (THIS IS NOT A POST ABOUT iPADS. THIS IS NOT A POST ABOUT iPADS. THIS IS NOT A POST ABOUT iPADS.)
Designing the new interface was a daunting task. First, we made an advanced prototype by cutting out a roughly-tablet-sized piece of cardboard, writing “iPad” on it, and carrying it around for a few days. We would bring it to meetings, hold it in different ways, and try to imagine what Evernote would feel like on this form factor. We looked pretty stupid and people made fun of us mercilessly. We printed out Photoshopped UI screens and taped them to the “iPad” to get an idea of font sizes and finger placement. We learned a lot.
We tried taking our existing iPhone UI and making it bigger. That failed the cardboard-poke test. We tried taking our existing Mac UI and making it smaller. That failed the cardboard-poke test. We locked ourselves into a conference room for three days and threw away all of our previous designs. After some trial and error, we got something that we fell in love with.
One major design principle of our iPad interface is to get you to your notes quickly. The new layout and interactions dramatically reduce the amount of navigating and searching you have to do. The idea is that it should be easy and pleasant to just get to any note you want in a very tactile way. We want you to have the feeling of running your fingers directly through your memories. It’s hard to describe but easy to experience. Of course, you can still search.
(my emphasis added — CDB)
While it is funny, and they nicely make humor of it, is the carrying around, and pretending to us, a life sized cardboard model of a device– but it clearly led their team to rethink the assumptions that had in their heads. It’s a valuable lesson for design, especially for something we will interact with in the real world.
This touches back to a brilliant webinar Ruben Puentedura did for our Connect@NMC series thids week on what he calls a “Lively Sketchbook” meaning a suite of mobile apps that give, in a device, the aspects of creativity he outlined for Da Vinci and Hemingway. Ruben cited three critical aspects for why something like an iPhone/Android could be this, and not, say a netbook:
- Ubiquity
- Initmacy
- Embeddedness
I really recommend listening to the archive– it was a brilliant discussion of this (and not just about apps)
This kind of design with paper prototypes likely is common of course of the design of objects and devices, and I’d be surprised to hear of any product being successfully built without doing this. But it also has bearing on design of web interfaces.
It took me back to the pre-web days when I was working at Maricopa, then on multimedia projects, which meant things like HyperCard and Director and CD ROMs. Early on I attended a corporate learning conference in Anaheim, and had a stunning revelation from a session on design where the two presenters shared their approach of paper prototypes.
The would create sketches, not overly detailed, of the screens they were designing, and buttons wer labeled with keys that would indicate another screen that would appear when clicked. They put these series of screens in an old fashioned looseleaf notebook, where you could re-arrange the order of screens rather easily.
Then they would do usability testing by flipping the notebooks open to a test user, have them follow the instructions, and flip to the right page when they finger clicked a button (or link I guess).
This could easily be done for web design- I tried it in the late 1990s when I worked with a faculty member on The Hero’s Journey web tool (the site is there but I am doubtful it works) — but I remember it was useful to sort out not just the layout of screens but how people interpret them.
And the cost of doing it is a stack of paper, a notebook, and some pencils. Heck, if you did it in pencil, you could redesign things on the fly. Oh, better, what if you had a set of those peel and stick stickers, each with things like dialog boxes and buttons!
I may have forgotten this lesson, but some new web design projects that are baffling me now, I may pull out the paper prototype tools.
Now where the heck is my pencil?
