The Net-Map Toolbox is collaborative and physical tool developed by Eva Schiffer with the aim to visualize influencers in a social context. The maps generated with this approach are a snapshot of a social setting with key influencers being emphasized (raised). I found it interesting to see an attempt to capture more complex social situations with multiple people in the equation. In Alan Cooper’s book, The Inmates Are Running the Asylum, the traditional direction given was to design for a single user. Could this rule be breaking down today in light of designing for more complex contexts? Here is a description about the toolbox directly from the Net-Map website:

Net-Map is an interview-based mapping tool that helps people understand, visualize, discuss, and improve situations in which many different actors influence outcomes. By creating Influence Network Maps, individuals and groups can clarify their own view of a situation, foster discussion, and develop a strategic approach to their networking activities. More specifically, Net-Map helps players to determine

* what actors are involved in a given network,
* how they are linked,
* how influential they are, and
* what their goals are.

Credits: Eva Schiffer

Here is an interesting idea of showing a user’s experience in the context of multiple browser tabs. In the modern browser it’s quite popular that people spend their attention in various modes of activity as they switch back and forth. Nik here tried to capture just that in a diagram which shows the currently selected tab over time. I guess it’s interesting to see a sample which aims to represent multiple potential activities that the a person can engage in, instead of a single over simplified linear one. Even more generally, a diagram such as this perhaps could even step above tabs and represent tasks or activities outside the browser just as well. Nik writes:

I’d like to share a little chart I put together to illustrate the concept of Dwell Time. This has come up more and more recently as clients are asking if the recent trend in tabbed browsers is responsible for an observed upward trend in reported dwell times.

I think one thing we should bear in mind is that a high dwell time can be both good and bad, not just because we may be including time spent on another site (in another tab), but also a high dwell time on an experiential site would be considered a good thing. However similar values on a registration form may suggest usability issues.

Credits: Nik Lazell

It has been a while since the last giveaway, so here we go. In return for some new sample submissions (from you), we’re giving away three full year accounts of Creately – the online diagramming tool. The winners will be determined randomly. Want to join in? If interested, here are the requirements:

1. Submit your own work of wireframes, sketches, a UI design technique, user flow, persona, time based interactions, or any other UI/UX design documentation or technique, by email to me. (any standard formats such as PDF, PNG, JPG, GIF, etc are fine)
2. Your sample has to cover a technique, visual, symbol, representation or approach previously not seen on Wireframes Magazine :)
3. By submitting, you should also be comfortable with me posting your work or approach online.
4. Optionally, feel free to describe what you did.

The draw will take place on December 14. Please send em in …

Creately is an online diagramming tool which makes it almost feel like a web version of Visio. This flash based tool definitely has nice collaborative support that allows sharing and commenting. On top of the expected flows, workflows, sitemaps and UML diagrams, if one looks closely under the hood, Creately also allows to mockup quick UI representations. The User Interface Mockups tab of course is loaded with a bunch of preexisting interface patterns ready to be dragged and dropped.

Try it out yourself and sign up here.

IxEdit is a Javascript tool for specifying jQuery based interactions on top of existing HTML pages. This tool allows users to easily set actions (event based) and reactions to various page elements. The really nice thing is that you can click on elements directly in order to select which ones are to be worked on. Finally, the other great feature is the ability to export or deploy the interactions as code that can be eventually attached to the HTML. IxEdit also requires Google Gears to run and save the data locally. So if you don’t want to learn Javascript, this tool might make it easier to explore interactions.

Thanks Joshua & Michael for finding this.

Download it here.

Here is a cool idea of combining multi layered interfaces in the physical world. Ondřej has created a paper cutout for this sketches that allows him to reuse parts of his interface by means of overlapping screens. Real world masters? :) In his own words:

As a part of a school project of mine I created such prototype. Having considered all the problems I’m going to resolve I’ve made a list of proper goals:

1. I have to create a paper prototype of an audio/video manager app. I already have the creative brief and the technical brief.
2. The prototype should contain all the screens and dialogue boxes of the app. It should be compact, easy to store, portable all-in-one solution.
3. It should provide quick and fancy user testing.

I wanted to have the whole app in a single notebook. Because the app would have a single window interface, the solution had crossed my mind immediately.

The result with all its benefits you can see above.

1. A page = a screen. Using such solution provides you with a lot of space around every screen. Put down some thoughts, notes and explanations.
2. The main frame of the app can serve as a stencil when drawing new screens. Speeds ups the drawing process and keeps the notebook full of drawings clean and consistent.
3. In addition, the space around every screen serves as a place for pop-up windows, dialog boxes and other elements made from post-it papers.
4. The main frame stencil can hide all the stuff around a screen and turns a set of described wireframes into a testable prototype in a moment.

Take such prototype anywhere, create new screens in a bus or train, test with your mates during a coffee break and finally archive it next to your past prototypes. Worth trying, isn’t it?

Credits: Ondřej Válka

Another sketchy library has been recently released. This time by Kevin Wick for the Axure Prototyping software. This is version 2 and comes with support for the following widgets: lightbox, scrollbars, konveyor, shapes, hyperlinks, and improved button highlighting. Here is the demo and the download.

Credits: Kevin Wick

Protoscript, is a Javascript based notation started by Bill Scott for making interactions and behaviours easier to prototype. Protoscript makes it possible to transform interface objects with a range of standard events (such as mouse clicks, hovers, keypresses, etc) and “sprinkle interactive behaviors”. So if you’re into prototyping with code, this just might be worth looking into. Although the code has not stirred in a while now, it is still very much available and hosted online over at google.

In Bill’s own words:

Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it’s easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.

Try out the demos.

If you are a PHP or Javascript developer that is, and like the world of open source, please talk to me (yup that email on the right). The fluidia.org project sets out to create an online prototyping tool, which a group of people has been dabbling in for a few months now. I think we’re at a point where it would be nice to find another pair of eyes and brains to look through the code that is publicly visible over at github. There is a server component that Alex is leading (PHP + REST), and a front end Javascript counterpart (jQuery heavy) that I’m pushing through. Chris is also around to refactor code, increase code quality and eventually integrate some of his own awesome Claypool work. There are still a few open issues before we can release 0.1, so if this sounds interesting to you, do let me know. :)

For the non-programmer types who are eager to sketch and generate UI / UX ideas of what this tool could become, I also welcome you to submit your thoughts by means of posterous. Therein lies the information on how to submit ideas in the form of text, visuals, storyboards, wireframes or sketches. Believe it or not, whatever is submitted will magically appear for all to see over in the sketching section.

Keeping fingers crossed as 0.1 crawls into view.

Best,
Jakub

Mockingbird, is not yet just another online wireframing tool. This fully web based beta software based on the Cappuccino framework, comes with a few interesting features that will make the life of UI designers a bit easier. One of these is the ability to share work online directly as a link. Another cool one is the ability to resize objects or components while their properties and innards automatically scale.

Other than that, the rest of the features are also very much useful, but have been visible in other tools already. These include the ability to double click on a UI component and edit its properties as text. Another one is the ability to drag components and make clickable links between pages. I like it very much and am curious when the full version will be released, as the interaction feels good.

For now, you can try the beta online for free.