Jeff recently has been experimenting with a remote sketching technique in a distributed team scenario. In the article, he describes the setup, technique and learnings in great detail. Interesting things that were mentioned included:

1. use of multiple Skype accounts, cameras and dual monitors (to see both the sketches and the team in parallel)
2. initial priming of participants
3. use of an excel spreadsheet for rapid idea generation
4. use of 1 and 6 screen per page templates
5. facilitation of a 8 person team

Awesome work and thanks for sharing!

Credits: Jeff Gothelf

Jason & Sam are over at the Dublin Interaction12 conference this year and have been running a Sketching Interfaces Workshop for which they released some slides. The slides are loaded with a few handy tips and rants (i.e. of what sketches are not). They also look at sketching as a number of activities pertaining to: warming up, capturing, focusing, writing, styling, and adding interaction. I’m sure looking through slides probably isn’t as awesome as meeting these two in person at an event. At least it’s something for those who weren’t able to make it to Ireland. :) Cheers and thanks for sharing!

Credits: Jason Mesut & Sam Smith

Johannes Tonollo’s thesis project explores a number of interesting user interface transitions, and how they can be used to create meaning by complementing static UIs. They have been segmented into six categories: Orientation, Spatial Extension, Awaking Controls, Highlight, Feedback and Feedforward. The site has a large number of examples or patterns for each category that are pure inspiration. Interesting stuff! Traditionally, UI designers have been reinforcing meaning by relying on gestalt principles using proximity, alignment, positioning and contrasts. Johannes shows that these could be extended with transitions and the element of time. With CSS animations getting more and more powerful, these transitions don’t seem so far fetched any longer. Thanks Michael (@konigi) for finding this!

Credits: Johannes Tonollo

A few weeks ago, I started a personal pattern project which I’m finding useful and thought to share as a potential design activity. After grabbing a blank notebook, I basically began sketching out and writing down various examples of interesting interactions I find all over the web. The idea isn’t completely new as design and interface patterns have been around us for quite a while now. In fact, some really awesome collections have sprung up that are great for designing interactions and interfaces. If you’re seeking inspiration from these publicly available pattern libraries some existing resources include:

1. UI Patterns
2. Pattern Tap
3. Patternry
4. Little Big Details
5. Designing Web Interfaces: Principles and Patterns for Rich Interactions (Book)
6. Welie.com – Patterns in Interaction Design
7. UIPatterns.net
8. Quince

By personalizing these patterns however, there could be a few added benefits beyond just observing other people’s work passively. For one, I’m beginning to notice that after drawing out some selected examples it becomes easier to internalize and remember them later on in the future. When working on projects, these sketched patterns tend to emerge from memory more vividly than ones that were just seen somewhere. Secondly, when recording these patterns personally it is also possible to gain another chance at practising and evolving your own personal sketching style. Patterns are a great source of more complex user-interface interactions which may push the boundaries of your visual communication and sketching abilities.

There is no set standard on how to record them. Some things which I thought might be useful to include were elements such as: a title, a few screens (tied together with user actions), a simple description, a date, and an example URL. But really, these being personal, it’s all up to you to come up with your own style. So go ahead and grab that fresh notebook …

Credits: Jakub Linowski

Here comes another awesome design related card set. This time it’s from Jasper who has recently been doing a PhD thesis over at TU Delft on the topic of Managing Product Usability. As a side effect of his time spent dug up in the subject, he has summarized some of his key ideas as recommendations in a card set format (PDF download link at the bottom of that post). The set is composed of 25 recommendations which are organized by themes pertaining to: Usability, Process, Team, Project, Company and Market. It’s an inspiring piece of work that might be of use to all those thinking of usability in the larger context of an organization or business. Thanks Jasper!

Here is how he explains it himself:

Based on learnings from the case studies as well as on existing literature on usability in practice, I wrote 25 recommendations for industry that describe how I would organize product development if the goal is to make usable electronic consumer products. The recommendations were ‘user tested’ by product development researchers and practitioners.

Credits: Jasper van Kuijk

Filmmakers have been sketching, storyboarding and playing with the element of time for quite a while now and we can definitely learn from them. Here comes an inspirational resource loaded with tutorials and videos on the topic of storyboarding. It contains tips on showing movement, zooming, panning and highlighting story points. Perhaps one interesting thing that emerges as one looks at these screens is that only minimal amounts of drawing is done in order to convey screen-to-screen changes more clearly. Could be great to pick some ideas up from these guys.

In addition there is also a list of storyboarding software, such as Celtx, that can be used for this process. Enjoy.

Credits: FilmmakerIQ.com

MoobileFrames is an emerging collection of sketches, wireframes and interface drawings in the mobile application space. The tumblr site has been recently started by Hannah and new content is still being scanned in and added. Thanks for sharing!

Credits: Hannah Milan

A rather interesting experimental wizard of oz sketching tool has been developed a few years ago by a group at the University of Washington. The setup requires two separate monitors with the user on one and the designer on another. The person evaluating the prototype can then use a standard computer or a pen based input to perform actions on one monitor. While the screen pauses on the user’s monitor, the designer (acting as the wizard) then spontaneously draws up or selects what the user will see as a consequence, and so on.

Today’s popular prototyping tools for the most part rely on a similar approach to handling interactivity, which might be a bit stale. There is a large focus on trying to predict all possible interactions in advance and prerecording event handlers (such as onclicks and mouseovers) ahead of time. I find SketchWizard on the other hand provides a more spontaneous way of playing out interactions with a prototype. While it alleviates the need to have everything thought out before hand, the one catch might be that the user has to occasionally wait a few seconds longer before a new screen comes into view (as the designer is preparing it quietly on the other end). Perhaps it would be interesting to see more prototyping tools take on this approach as well.

There are binary releases and videos available right there on the project page.

Credits: Richard C. Davis, T. Scott Saponas, James A. Landay

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

The other week while discussing the idea of narrative with Bob, he reminded me of the Choose Your Own Adventure books from the 80-90s. These types of books basically are written in a second-person point of view and readers are given choices requiring to flip back and forth throughout the book. As the plot unfolds, readers also may find themselves finishing with various types of endings, with some being less desirable than others. Looking for examples of CYOA books I also came across a superb narrative visualization project by Christian Swinehart. Christian analyzed a couple of these books and began comparing which pages are composed of pure story, decisions and endings.

What does all of this have to do with the remaining design artifacts scattered throughout this blog? I think books like these through their combined use of nonlinearity, choice and guidance raise a few interesting points around how our time based (flow) deliverables could potentially look like and behave. What if readers of our deliverables were guided through a set of predefined flows? What if the flows we design required readers to make choices in order to achieve multiple endings? On one end of the extreme spectrum we have passive documents such as wireframe decks where there is often a single thread of experience. Here we have guidance, but no choice as we flip from the first page till the end. On the other hand of the spectrum, we might have a fully interactive prototype. Here we have zero guidance and tons of choice (perhaps even too much). Could this more balanced combination of guidance and choice then be a more powerful means of conveying interaction and narrative in our field? I’d think so.

Credits: mewrite (flickr image), and Christian Swinehart (visualizations)