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.
It doesn’t look like Clarify is being supported anymore since it’s last update was in 2015. Have you still been using it as your main documenting tool or have you been using a different process. I agree that embedded video is a huge plus.
Thank you for the informative articles on UX documentation! I’ve been working in a lean environment for the past couple years and recently made a switch to a company that seems heavy on documentation and specs. I’m hoping to come up with a solution that combines the best of both worlds and Clarify seems like it could do that but my hesitation is that it’s not being supported any longer and might not work on my machine.
Blue Mango, I think, has been concentrating more on their Screensteps platform in recent years. I know they have done a little work with Clarify, but believe they acquired it a few years back and didn’t change it much after the second major release. I can’t say for sure whether or not they are still supporting Clarify, but believe they still are and I have used it within the last year. They just haven’t released any updates since 2015. Greg DeVore is the CEO of Blue Mango and I emailed him a few years back. Clarify fills a certain niche in the market that Screensteps does not. So I am speculating, but do believe they will continue to keep the product in their lineup. Greg is pretty good with his email, so you might just want to reach out and send him a line.
I should probably post an update to this article. I rarely use any software for specifications these days, but when I do, I keep it lean using only PowerPoint or sometimes building the specs right into Axure or Sketch. There are some new tools out there I am exploring with my team now as we do have a need for “light specs” in our designs. However, it is hard to beat a Power Point file with annotated images. It’s a format everyone has access to and can easily be converted to a PDF.
Very helpful! Thanks!
Do you have examples of how you’ve been creating documentation via Axure or PPT? I’ve tried the Axure Export to Word doc and it’s a bit clunky. Trying to come up with a better way in my new role where I’m the lead UX Designer at this company.
Thanks again for the tips.
Most of what I have in PPT or Axure flows fall under disclosure agreements. But I sent you a separate email where I attached some versions of files from previous positions (where the software has been released) that give you an idea of how you can do this.
With PPT you can just slap an image into a blank slide, add a text box to the right of it and you are on your way. Keep the slides in chronological order (i.e. how the user will move through a feature or application) so you tell a story. Also, keep the text light in terms of how many words you use. The idea is not to give a detailed account of every single function, but rather give an overview. If you are using an atomic design methodology as my team currently does, you can refer back to style guides etc. for detailed functionality so you aren’t duplicating your work or turning spec writing into a full-time job.
With Axure, you can annotate your screens instead of exporting as a spec. I agree with you, Axure’s specifications are clunky. I build annotated flows (see attached) and then compile them into PDF docs if there are more than one. You can also put all of your annotations right on a screen/wireframe in Axure, turn them into dynamic panels and set hidden when you don’t want to show them. I usually don’t go this far. I like slicing up pieces of the screen and building a flow (or story).
If you use a tool like Sketch, there are plugins for annotations. Sketch Notebook is one of them: http://marcosvid.al/sketch-notebook/. I have used this when I need specs to be pretty.
Which method I use, depends on what I need to get the job done. I quit trying to standardize specs a few years back. Templates and standards only slow a team down. Specs should be the bare minimum to communicate your ideas.
There is the obvious issue with any of these approaches as to how to manage large screens. With Axure, I slice the screens down or crop them down using the snapshot feature in RP8. With PPT files, I show the larger screen on the first slide and then begin cropping out and enlarging features I want to highlight in subsequent slides. So each screen, might end up having 4-5 slides devoted to it as I zoom in on different aspects of the screen.
I hope this helps, but feel free to respond if you have other questions.