Archive for the ‘Tools’ Category

Omnigraffle Sitemap Generator

Wednesday, August 18th, 2010

The Omnigraffle Sitemap Generator is a script that auto creates nicely looking sitemaps from a given XML file. It’s really just a simple byproduct from the guys over at Fuzzy Math. If this is your cup of tea, Jason, also wrote up a table generator script. Hope this saves someone some time.

Download the Sitemap Generator

Credits: Jason Kunesh

Usability Test Data Logger

Tuesday, August 10th, 2010

The Usability Test Data Logger is an interesting excel sheet for capturing usability test results. It’s not new (first released in 2002) but still fully valid (with the latest release in 2008). Brought to you by the guys over at Userfocus, the tool is customizable, cross platform, captures both qualitative and quantitative data and generates reports. The excel file also comes with an embedded timer for logging time on task. If you find this free tool really useful and like to support other’s work, you may do so as it’s released under donationware.

Download the Data Logger (Excel & Manual).

Mental Notes

Tuesday, July 13th, 2010

A copy of Mental Notes just arrived on my desk and it looks like a great little design tool. The mental notes are a stack of 52 cards which can be used in conceptualization phases to help with idea generation. Each card conveys an inspirational thought related to psychology that touches upon such themes as: persuasion, comprehension, memory, attention and comprehension. The set of cards comes very well presented in a leather case with wonderful illustrations (Kevin Cornell) on each card. If you need to sprinkle a bit of randomness and brainstorming into your process, this set could very well be an interesting way to help you achieve just that.

In Stephen’s own words:

The Mental Notes cards were designed to be idea starters and can be used at almost any stage of product development. They’re great for generating new product or feature ideas or finding creative solutions to problems.

While there is no one right way to use these cards (it’s fun to simply learn or review these ideas!), I’ve found the following phrase quite helpful during brainstorming sessions: “How can we use [card] to … [goal]?”

Credits: Stephen P. Anderson


Friday, July 9th, 2010

Quplo is an emerging prototyping tool still in preview phase (requires an invite). The tool is geared towards people who create UI prototypes but are not afraid of code. The central working space is therefore a panel where HTML can be written out. More so, the unique thing which Quplo brings to the table are a few new tags which spice up the HTML making it more suitable for the task. One such tag is “part” which allows designers to reuse parts of their code as components of sorts. Other extensions to HTML include the ability to hold and display variables, as well as do conditionals. It’s still in the making, but feels like an interesting concept and a bit fresher from the other tools out there.

Signup for the preview.

Dragon Stop Motion

Wednesday, July 7th, 2010

Dragon Stop Motion as the name indicates, is software for shooting stop motion animations. The program allows you to hook up a video / photo / webcam input source and take stills which can then be reorganized into scenes. There are a couple of powerful features in this highly specialized tool which make this process a lot easier. One useful thing is the ability to control camera settings (aperture, focus, shutter speed, etc) from the software itself without having to adjust it on the physical device. Another great thing is the ability to toggle between past shots and the live preview which helps to align past shots to the next one and thus establishing a greater continuity. Related to this is the “short play” ability which plays back the last 12 frames. Users can also setup time lapsed shots and export to multiple formats (JPG, Quicktime, etc.) Once enough shots or frames are taken, the X-sheet view allows you to edit and manage them.

How useful is this for interaction designers? I think stop-frame animation has a great deal of potential for demonstrating and communicating highly interactive elements. Although I doubt it makes any sense in doing the full scope of a project in this format, using stop motion for parts of a prototype could be the way to go.

Download the 10 day trial.

ILoveSketch: 3D Sketching

Thursday, June 24th, 2010

ILoveSketch is a 3D curve sketching system done as an academic project by a few University of Toronto students. The software tool looks like it allows designers to draw out concepts using a tablet based system while automatically approximating the drawn curves in a 3D space. Designers can easily zoom, pan, and tumble through their work space as well as make use of a few gestural interactions for deleting and redrawing lines. Unfortunately, I wasn’t able to actually find the download option to try it out. A design tool like this is perhaps geared more at industrial or product designers, and less so UI interaction designers. Nevertheless I still wanted to share it as I think it’s something really unique and perhaps a bit inspirational. Makes me wonder what a 3D UI wireframe would look like. :)

Credits: Seok-Hyung Bae, Ravin Balakrishnan, and Karan Singh

Briefs: Wireframes Remade for Cocoa Touch

Thursday, June 10th, 2010

Briefs is a little application toolkit for iPhone based prototypes released by Rob Rhyne. The process is as follows. First, you simply use a visual design tool of your choice to export your image files as scenes or actors. You then attach actions (behaviours) to your actors (screen elements) by writing a BriefScript with the provided syntax. Once that’s done, you compile the script into a binary plist with a .brieflist extension on a Mac and copy it to the phone. Sharing the Briefcast (“brief://”) prototype is also possible by placing it on a server.

A cool idea, but there is a small catch. If I understand correctly, the whole thing is still waiting to get approved to the App Store and there is some uncertainty if it will or not get accepted. Either way, the code is also open sourced and should be available on git hub, so at least it should be available for internal development purposes. In Rob’s own words:

The Briefs toolkit was created for rapidly building & iterating design concepts. It allows one to quickly prototype those concepts and run them on iPhone OS devices. These prototypes run directly on the phone, like actual apps, but require much less time and code to produce than a prototype built using only the native APIs. Less code means faster design cycles followed by more a efficient development cycle.

Find out more at

Naview Beta

Thursday, June 3rd, 2010

Last month Naview went into a beta phase. Congrats! As mentioned earlier, the tool allows designers to quickly auto generate a multi level and fully functional navigation from a text file or an XLS spreadsheet. With the new beta version, Jussi, packed in a few extra features that also allow you to test the navigation with end users and measure results. This is done through surveys that can be easily setup and tested remotely. Since the application is in beta, there is an additional “early access” plan to the already existing free plan and both provide a nice way to get a better sense of how it all works.

Give it a shot and try it out.


Tuesday, March 30th, 2010

K-Sketch, The Kinetic Sketch Pad is a pretty cool piece of software that came out of the Human-Computer Interaction and Design group from the University of Washington and is lead by Prof. Richard Davis. As the name indicates, the software allows to create quick sketches in time with a pretty simple and lightweight interface. Users can draw free form shapes and then transform those objects in a recording mode. The result is an animation composed of various objects that have their own animating paths.

I still haven’t tried out this tool on a real UI design project, but the concept is definitely inspirational and so I thought to share it. The K-Sketch project opens up the possibility and idea of sketching in the context of a timeline, which I think is quite novel in itself. If the desire of designers to express interactions seamlessly with the use of animation is strong enough (which I think it is), my guess is that we’ll be seeing more and more of functionality such as this in our prototyping tools of the future.

Download it and try it out yourself.

Here is another explanation straight off from their website:

K-Sketch allows ordinary computer users to create informal animations from sketches. Current tools for creating animation are extremely complex. This makes it difficult for designers to prototype animations and nearly impossible for novices to create them at all. Simple animation systems exist but severely restrict the types of motion that can be represented. To guide the design K-Sketch, we have conducted field studies into the needs of professional and novice animators. These studies showed the wide variety of motions that users desire in informal animations and indicate how to prioritize these types of motion. Our design allows the most important types of motion to be defined with pen gestures, and gives visual feedback for coordination of events.

Credits: Prof. Richard Davis


Monday, March 22nd, 2010

Microsoft Expression Studio 3 now comes with SketchFlow which is a powerful new tool that helps designers to move from sketches to interactive prototypes. It’s loaded with features which you’d expect such as support for multiple states, a sketchy style, reusable components, automatic document generation and the ability to share and gather feedback from clients. SketchFlow also allows to inject rich interactivity into your work by means of attachable behaviours (such as changing properties dynamically, states or navigating to various screens). More so, the software allows designers to prerecord animatios and bind them with a wider range of transitional effects. Once you’re ready to share you’re work, you can export as a Word document or more interestingly as a Silverlight prototype.

SketchFlow I’d say is a bit more of an advanced prototyping tool. It comes with a lot of menus, options and tool bars. At the same time this opens up more flexibility for creating more interactive prototypes supported by various rules. One of the really interesting thing in this software is the juxtaposition of the canvas along side a site map view. In the SketchFlow Map view, users basically can manage their pages and components, create a flow between them, and rearrange them in a two dimensional space in whichever way they see fit. This provides a quicker way to access the items being worked on and at the same time gives a good overview of the flow in between screens.

To see for yourself, jump right in and try out the demo.