home > services 

Adaptive Path Blog

The Team

Alexa

Create Your Own Magnetic Prototype

by Alexa

When I moved to California, my going-away gift from my ever-hands-on coworkers at the design research firm, Lextant, was a metal lunchbox filled with inkjet-printed and hand-written magnets — a personalized magnetic poetry kit. Ever since, I’ve been looking for an opportunity to introduce those printable magnetic sheets to interaction design.

Problem
That opportunity finally arose when I found myself endlessly fidgeting with Creative Suite trying to mock up an Aurora-like mobile device interface comprised of dozens of floating images and words. Since this was a concept refinement exercise, sketches lacked the fidelity and sense of interactivity that I needed. On the other hand, as I was finally forced to admit, the computer was completely wasting my time.

Solution
Enter magnetic prototyping. I ran as fast as I could to the nearest OfficeMax to pick up a pack of Inkjet Magnet Sheets ($12) and a portable magnetic whiteboard ($20). Returning to Creative Suite, instead of trying to lay out screen designs, I simply took all of my data elements and UI widgets and replicated them dozens of times to make sheets of customized UI stickers. I cut out the bits and pieces, and in minutes, I had a working model of my UI idea, complete with movable parts — no ActionScript needed!

Custom-Made Magnetic Prototyping Kit

Benefits
Unlike typical paper prototypes, I didn’t have to worry about my designs falling apart as I walked around the office, testing the concept with coworkers. Unlike stickers or window clings (or printed wireframes), the pieces could slide around and be rearranged by eager collaborators and informal test participants. Unlike the few pre-made kits out there (http://www.guimags.com/ and http://www.sitepoint.com/kits/usability1/), the pieces were custom-made and represented the specific pieces and parts we needed. If a piece was missing, I could simply draw it on a piece of scrap magnet or print additional elements when necessary. To capture and document the concepts as they evolved, all I needed was a photocopier. Posting the enlarged color copies of the magnetic whiteboard up on our giant sheet of butcher paper, I could easily document the interaction design details with sticky notes.

Limitations
The method certainly has its limitations. Because it relies on pre-made parts, it works best when you have a clear sense of what parts you have to work with, for example, if you’re redesigning a site that you know involves thumbnails, list items, and a sidebar. Having pre-made parts could also be constraining if you’re trying to design new interaction paradigms. There are also a few practical limitations: Since the canvases have to be magnetic, it’s difficult to create multiple pages to demonstrate designs. Being able to write on the canvases with a whiteboard is nice, but fat, greasy whiteboard markers aren’t always the best for sketching interfaces.

Why Use It
Applied to the right project, I found that this customized magnetic prototyping kit expedited concept communication, prompted new ideas through playfulness, and equipped people (who often don’t like to draw) to express ideas quickly. If you’re looking for new ways to do good design faster or to engage clients, users or others in the design process, I’d encourage you to pick up a pack of printable magnetic sheets and see how this hands-on, multi-player design tool might work for you!

10 Responses to “Create Your Own Magnetic Prototype”

  1. Knowtu » links for 2008-11-17 Says:

    [...] adaptive path » blog » Alexa Andrzejewski » Create Your Own Magnetic Prototype Good idea on creating prototypes (tags: ux) [...]

  2. Marc Says:

    I can recommend this idea, I’ve done it with the components for IT Mill Toolkit. I’ve found that a combination of drawing on the whiteboard and using magnets works best, but as pointed out in the article, normal whiteboard markers are quite clumsy for this. I’m planning to try making the components twice the normal size (at least) – of course this way it’s harder to evaluate the size of things…
    Also, one benefit with the pre-made kits (at least guimags) is that you can write on those with a normal whiteboard marker, and you’ll be able to erase it afterwards.
    I think you nail it in “Why use it” – well put :-)

  3. Samantha Bailey Says:

    The technique you describe here is also very useful for conducting a “FIDO” usability test (free-hand interactive design offline), a technique developed by Tom Tullis. I’ve used this technique very successfully for homepage redesign projects. For more info see: http://www.bentley.edu/events/agingbydesign2004/presentations/tedesco_chadwickdias_tullis_fido.pdf

  4. Bryan Says:

    I’ve seen to two kits mentioned before, but they were both too expensive and both contained an unbalanced set of components for my needs. I’ve wanted a set of these for a long time now, but could never justify the price. This is a great solution.

    Is there any chance you could post the template you used to print yours? I wouldn’t be using the exact same template you did, but it would help to get my own template going.

  5. Stu Collett Says:

    Thanks for this post Alexa,

    It’s nice to see a different way of working with prototypes. Working with wireframes can sometimes become a bit grey and dull. Seems like a great way of truly interacting with the process.

    Thanks again,

    Stu Collett.

  6. BrianSJ Says:

    Looks easier than using a fridge
    http://noonebelongsheremorethanyou.com/00025
    :-)

  7. Meredith Says:

    That would work quite well with the erasable labels from http://www.labelonce.com/. They work with Sharpies and erase with rubbing alcohol or the eraser from the kit.

  8. Annkathrin Says:

    Thank you for sharing this, it is nice to see new ways of creative prototyping. I’ll try it.

  9. Rik Says:

    Cool! Some pre-made UI elements can be found on http://www.guimagnets.com
    Easy for prototyping forms on a whiteboard :)

  10. Helen Says:

    Great idea! I did the same in Flash with everything dragable and then print out jpg or swf when happy, can export as swf -> drag around -> take a screendump when happy (then no need for codestuff for saving but would be possible). Endless reuse! Easy to change dragable Movieclips content, could make them loaded from folder too where pix or text can change without opening Flash or with dynamic textfields etc. Maybe thats an application to make?! I would use a readymade flexible designprototypingtool like that anyway.
    For drawing on the magneticboard – its possible to cover the board with big papersheet held by magnets, the magnets will still stick to the board through paper and then can draw with any pen and save the “hardcopy” paperbakground too.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Where do great ideas come from?

At Adaptive Path, our ideas are driven by the work we do. We do consulting for user interface and user experience design, and offer conferences, training and education for UX designers.

From field ethnography, UI wireframes and task flows, to visual design and implementation, we do it and we teach it.

Learn more in our video, Adaptive Path in 2 ½ Minutes:

ap-video

Want to know more about Adaptive Path? You should read more about our services or contact us to find out how we can help you!

Email Newsletter

Sign up to receive essays, appearance dates and other news from Adaptive Path.