Select Page

I have become somewhat fascinated over the past year or two in how we communicate design (as this is where I usually have the most trouble with clients/stakeholders). It is, indeed, a critical component of the UX and development process. And, as I have noted in a number of posts on the topic, it can truly make or break your design. I have developed a number of methods in communicating design over the years and getting to the handoff.  One of the tricks in my bag is to develop short video demos of the primary interactions in an interface. I have had good success with these – especially on projects that are very conceptual and where new designs and ideas are converging. Creating these does take a little time, but I believe I save time in eliminating questions for clarification and multiple meetings with stakeholders.

Below is a demo of a past video I used for a project (I tend to have a little fun with these things sometimes). There is no audio because I use the videos to walk through the design during Live Meetings via Microsoft where I can pause the player and start again at will. I could (and do) easily add audio with an iPad, a $40 directional mic and the Garageband app.

The video itself is created using Screenflow on an iMac. You don’t have to create a single video. You can create short snippets. The advantage to using a video in the first place is you know where the links are and what the prototype does. If while creating the video, you mess up or the prototype is broken in a spot (which invariably seems to happen during a live demo with the clients), you can stop and edit the video or fix your prototype then continue recording your video. The result is a smooth demo rather than those demos we all do in a meeting (after generating a version of the prototype) where everything seems to go wrong.

Another advantage to a video or short snippets is you can embed them in the specifications as I mentioned in an earlier post this week. If you work with the Adobe Suite to develop specifications, Adobe allows you to embed Flash and export. As I mentioned in my post, A Practical Guide to UX Specifications, I don’t use Axure or Adobe for specifications. I have been using Screensteps from Blue Mango, which allows me to embed Flash. I don’t know if there new version of Clarify will allow this though. But, you can also use Acrobat pro to embed Flash video.

Here is an example of specification output using this tool.

I have found Screensteps to be the easiest software for putting specifications together because I can adjust screenshot size, get closeups and easily annotate features as well. You can even export to HTML and include videos for each step. Basically, my process works like this: I create my prototype in Axure. I then run it as a prototype (or export it to HTML), capture the screens and interactions from Screensteps, annotate them and export this document to an MS Word and save a final version as a PDF. There are lots of other ways you could do this. But this is my process and it works for those projects where you have to communicate a complicated interface.

So if you have a conceptual project you are working through and trying to push through approval with your stakeholders, this could be a method that will work for you. Once again, there is a lot of up front work in this, but I always say: If a picture is worth a thousand words, a video is worth 10,000 or more. Give it a try and let me know if it works for you.