Just thought I’d stir up the readers in here and see if I can get some interesting submissions in. Although I’m always on the look out for any type of design deliverables or tools to write about, I thought perhaps I’d throw out a concrete request for example visualizations of usability testing results. Perhaps you came up with a cool way of conveying findings to your team, or you invented a new way of prioritizing issues? If so, and eager to share, please send me an email (visible on the right) and I’d love to post it up in here. Cheers. Jakub

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

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.

Here is a downloadable stencil straight from Nokia for wireframing within their S60 touch devices. The stencil includes workable source files for Adobe Illustrator CS4 and Fireworks CS4 loaded with useful components, portrait and canvas interface views. (Thanks Ivana!)

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