Love em or hate em, we still annotate our work be it for ourselves or others during a design process. Jason has just released some quick tips on how to setup annotations in Omnigraffle as to make them optionally disappear when exporting to an interactive prototype. The use case being, at times it makes sense to have annotations visible (documentation), whereas at other times it makes sense to hide them (prototype). The technique involves the creation of a few canvases and layers as well as running of an AppleScript. An example graffle file with the working script is also offered. I haven’t actually tried this one, but I hope it’s useful to some of you knowing that there are quite a few Omnigraffle users out there in the UX community. Thanks Jason! Enjoy.

Credits: Jason Kunesh of Fuzzy Math

Some time ago, Chris Neale showed off an awesome video of his stop motion animation prototypes. More recently, he has now published a software tool he built in Processing to create such videos. The tool is quite simple and basically allows users to capture screens with a webcam and export them to a folder. The Animationizer also supports a playback feature at 12 frames per second. Chris’ approach is to playback the animations and re-record them with a separate tool such as Screenflow or Silverback. (I also found CamStudio as an open source alternative). The tool is free of charge and comes with a Creative Commons Share Alike license. Thanks Chris! In his own words:

The Animationizer makes stop-frame animations quickly and easily using a webcam. I put it together to help make early prototypes for user experience design projects I’ve been working on. It might also be useful for art projects or science experiments – or maybe just to keep the kids occupied on a rainy afternoon.

For installation, basically you need to install Processing first and then download the code from his website. For those users on Windows, you might also need the WinVDIG for QT driver.

Quick product update. Last month ForeUI 2.0 has been released and came out with a set of new features. The prototyping tool now supports the sharing of resources on a hosted web site from which users could download or publish custom elements. Other new features include the ability to change themes (Windows 7 style has been added), hierarchical page management, and full customization of all draggable elements being displayed on the left hand navigation.

Visit: www.foreui.com

Peldi of Balsamiq is opening up the floor to a design discussion around how the upcoming “components” feature might work. Reusing objects or items across a UI program is quite important and so it will finally be making it’s way into an implementation plan. There are a couple of use cases on this feature already publicly available but he’s looking for more ideas from the community of course. So if designing in the open or giving feedback is your cup of tea, feel free to jump right in. :)

An interesting depiction of user experience has surfaced the other week over at the nForm blog in the form of an experience map. Gene and his team has come up with a way to represent gaming related experiences of three distinct gamers. In a way then this is a merger between a persona and a time based representation. The other interesting thing about this is the visualization and separation of at least three types of experiences: ongoing, exploratory and influenced. Each type of experience has been shown in a standardized and specific way. Furthermore, the diagram also captures and represents a variety of channels which the personas are utilizing at a given point in time. Overall, it’s always interesting to see when designers attempt to convey such comprehensive and unified high level deliverables.

Credits: Gene Smith of nForm

Thinking about improving the user interface of this site, I did a couple of minor adjustments over the weekend which I thought I’d share. Basically I focused on how the left menu with all the posts works (accessible by pressing CTRL). The improvement is that an open left menu navigation is now persistent across pages, which allows for easier browsing of posts. The left menu now also focuses to the selected post when opening. Finally, the menu does not come into view when pressing CTRL while typing inside a textbox or input box (users can still press CTRL twice to force the menu to open in such a situation).

I also visually brought out the two ways to subscribe to the site in the top right hand corner by means of stronger Twitter and RSS icons. Oh right, and also added an easier way to retweet directly by means of the TweetMeme WP plugin.

Just thought to share and perhaps hear out what other ideas for improving this site readers might have. Feel free to comment here or add ideas to the uservoice page.

Cheers,
Jakub

Speaking with Greg the other day I learned about Use Case Maps. This notation which has been initially the work of Raymond Buhr, has its roots in software engineering and perhaps could be an area to draw inspiration from. Use Case Maps intend to convey sequences of events by showing the paths of users over a backdrop of structured system representations. With these flexible scenario-like visualizations, software engineers ensure that the element of time is considered. As part of the notation, Use Case Maps have starting and stopping points and can also branch out. It seems like Daniel Amyot has contributed to this work as well and has published a decent Quick Tutorial with a reference guide at the end. In a nutshell, here is what Daniel writes about the philosophy of UCM:

The Use Case Map notation aims to link behavior and structure in an explicit and visual way. UCM paths are first-class architectural entities that describe causal relationships between responsibilities, which are bound to underlying organizational structures of abstract components. These paths represent scenarios that intend to bridge the gap between requirements (use cases) and detailed design.

Credits: Raymond A. Buhr & Daniel Amyot

Ron has recently initiated a project with the intention of creating a visual language for representing gesture based user actions. He shares the belief of “gain[ing] common grounds when discussing interactions” and has just released the Gesturcon Touch Pack under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. The zipped file contains EPS, PNG and Illustrator files for your use. His approach supports such interactions as taps, holds, double taps, flicks and is achieved with circular shapes. @vitorious also threw the idea of combining this with my own notation. Hmm, pretty cool.

Credits: Ron George

InPreso Screens is another web based wireframing application in the making to keep an eye out for. The company offers a hosted app as well as a downloadable stand alone version. One interesting feature which is being highlighted on their site includes the ability to embed inPreso files into other project collaboration tools such as Basecamp or Confluence. Being hosted, the web player tool also allows users to share their projects as a link and have the readers preview the work on a page by page basis. Heading in the direction of sharing, inPreso only naturally allows for multi user commenting and feedback features. As it stands today, the hosted application comes at around $79 per year. Have a look.

Try out the online version.

Justinmind has recently kicked off the beta phase of their next version of the Prototyper application. These guys are also running a contest for testers which will last up until February 26 and are giving away free licenses. Have a look, as the 3.0 version brings forth a new “Expression Editor” which allows to specify interactions by means of drag and drop. The instructions for downloading the beta apps for either MAC or Windows are available on their blog.