Travis Isaacs Demonstrates the Keynote Wireframe Toolkit

If you're curious about Keynote prototyping, Travis Isaacs' describes how he works with the presentation software to produce click-through prototypes. As Travis notes, it's even useful to people who like to go between a low-fidelity wireframe created in another application to interactive demonstrations.

You can purchase Travis' Keynote Wireframe Toolkit here on Konigi. Review on 90 Percent of Everything

Harry Brignull did a thorough review of, a UK-based remote, unmoderated, qualitative usability testing service. To use the service, you pay £25-£30 per participant and you get back screen recordings with audio of them thinking aloud during the tasks. The test participants are chosen from a pool of users paid to take usability tests, similar to

As Brignull notes, this is possibly valuable to companies with little experience doing usability testing on their own before, but is less likely to be of value to companies with the experience and budget for doing moderated usability research on their own, or with a usability research consultancy.

How to Make Tree Components in OmniGraffle

I swear I've answered this question a dozen times, so I'm capturing to refer people in the future. The tree control in my OmnGraffle Wireframe Stencil is a godawful hack that uses tabs and arrow characters. Copying and pasting the arrows, however, screws up the formatting. OmniGraffle just doesn't make this kind of manipulation of text all that easy and I haven't found an ideal solution, but if you want to learn how I do it, read on.

To use the tree control presently, you utilize the tab stops and insert arrrows from a character viewer. Type CMD-R to show rulers and tab stops in paragraphs of text. Then Option-Tab to move between tab stops. 1 tab for first level arrow. Insert arrows from the character viewer.

The video below shows how to :

1) Enable the character viewer in OS X System Preferences > Language & Text > Input Sources.
2) Use tab stops to Option-tab your text to create hierarchy.
3) Use OS X's character viewer to insert arrows.

View it in full screen to see it.

I'm using Option-* to make the bullets. Like I said it's terribly awkward, but that's how I make do.

Since using paragraph formatting in a text element is unnecessarily difficult, what might be an easier way to manage is to use a table and copy/paste the arrow icons if you find the above technique a pain.

Marian Bantjes: Intricate beauty by design on TED

Marian Bantjes gives a fantastic TED talk, where she discusses her work as a graphic artist living outside the mainstream of design thinking, thinking about ethereal qualities like bringing joy, invoking wonder, and inciting curiosity. This bit excited me:

The more I deal with the work as something of my own, as something that is personal, the more successful it is as something that is compelling, interesting, and sustaining.

Bantjes’ focus on placing importance on the personal interest she puts into her work strikes a chord with me as someone interested in product design, because that personal interest can even help create personality and character in interface design work and writing copy.

This kind of self-centered approach to design is not something we talk about taking as user advocates, and it’s certainly not something that I would expect any of my peers to advise in their work. But as you may have seen me write several times here in the past, when it comes to product design, there is something to be said for honoring one’s instincts and interests when it comes to being steadfast on feature selection and putting forth a voice or personality in your product.

Dogs on Design: Danzico and Lucy

Core77’s Sarah Cox wrote a lovely article after talking with Liz Danzico about her thoughts on interaction design, life with her dog Lucy and communicating simply and humanly. Below is her summary of what dogs can teach us about interaction design.

1. It's important to know who is in charge. Just like training a pet, a designer need to establish a rapport with clients that mixes trust and expertise.

2. Pay attention to the tail. A dog's tail communicates emotions silently, but it's easy to miss this detail if you are not paying attention. Interaction designers need to be aware of customer data for clues.

3. Keep gestures simple. Complicated hand gesture confuses a dog, and complicated language confuses users. Simplicity is best.

Good advice for communicating with humans and dogs alike. Read more on Core77.

WTF is HTML5 (Infographic)

I found this graph explaining HTML 5 features via @obxdesignworks. Succinctly describes the major features enabled by HTML 5 that you need to be aware of: Canvas and video elements, offline storage and geolocation. The graph below shows a snapshot of current support and intent to support in web browsers. Shows that IE is well behind the field in terms of readiness as we speak, but IE 9 intends to support.