App Sketcher is a lightweight prototyping tool for developing interactive HTML prototypes or wireframes. The software installs as a standalone Adobe AIR application and therefore may run on a number of platforms. There is a left hand pane which contains draggable and editable user interface components – perhaps one the most common features shared across some other tools out there. Unlike most other tools though, App Sketcher uses real web controls such as HTML elements, jQuery components and Google Maps in this pane.

App Sketcher’s end deliverable is a fully interactive HTML prototype. Clicking on the prominent “Run in Browser” button results in a seamless transition into the browser window where the prototype can be experienced (or shared with someone else without the need for any additional plugins).

One small detail which caught my attention is how interactivity is discoverable in the final prototypes. App Sketcher does this by showing a tiny lightning icon wherever an action is assigned to. This small but useful feature might help people notice and differentiate what is actually clickable from what is not.

Other features that are also present include such things as: multi-page support, CSS themes, object alignment, and multi level undos.

Download and try out the software.

Credits: Feng Chen

PowerMockup is a simple UI design plugin for Microsoft PowerPoint that makes it easy to create low fidelity wireframes. Perhaps one of its core strengths is that it has a low barrier to entry, since many people out there already have access to PowerPoint. The plugin speeds up the design process by letting users insert fully editable UI elements (containers, navigation items, icons, and text elements) onto the canvas.

The merits of PowerPoint as a prototyping tool have been discussed in the past and are definitely worth to consider. For one, PowerPoint supports basic interactivity and nonlinear page linking. Personally however, I still like to think of a the page-by-page linear narrative nature of PowerPoint as an equally strong alternative presentation style to interactive prototypes. With a defined beginning and an end, a PowerPoint deck ensures that viewers don’t have to discover interactivity, but instead can be guided across flows.

Would I personally use this tool as an interaction/interface designer? I’m not sure. I’ve come to love Illustrator, endless canvases, and free-form electronic sketching as a technique. So moving away from that style of working would require something more than a set of pre-canned elements. I’d still recommend it to others on a more multidisciplinary team – especially if there were people with less of a design background, but still a desire to express their ideas quickly.

Overall, a great little product. Thanks Andreas!

Credits: Andreas Wulf

Do you use Omnigraffle and annotate your work with little, round and numbered circles? Meredith just recently created a bunch of scripts which help with these dot annotations. The scripts automatically generate the numbers and thus make it easier to add and remove notes without having to readjust the numbering all the time on all remaining dots. Looks useful. Thanks!

In her own words:

The problem is that it’s not uncommon for me to have 20-30 dots on a single wireframe. What happens if I need a new “1″? Without a script, it means creating a new “1″ dot, then changing the old “1″ to “2″, the old “2″ to “3″, etc. I don’t have time for that!

Credits: Meredith Noble (Usability Matters)

The guys over at nForm recently shared their home brewed sketching table composed of IKEA bits and pieces. It has the ability to store past sketches in a number of compartments right underneath, and an awesome kraft paper roller on top (possibly for saving large canvases of related sketches). More importantly, it looks like it’s inviting collaboration as Gene Smith suggests:

The total cost was about $500, and we’re seeing two benefits: it’s much easier for us to incorporate sketching into our daily workflow, and we’re having lots of quick feedback sessions since the table makes it easy for us to share and sketch ideas.

Thanks for sharing.

Credits: nForm

Tiggr has recently surfaced as an additional tool to choose from for people interested in building interactive UI prototypes. It is currently in beta phase and is being developed by a team over at Exadel. It comes loaded with a set of typical features you would expect from an online prototyping tool. Among these there are: a snapping grid to place work on, multiple project/screen support, and the option to drag and drop existing controls. At a high level, controls here have been organized into two sets belonging to web based and mobile ones. The mobile components are based on the jQuery Mobile framework (pretty cool?). And yes, the tool also allows you to link up pages in order to inject a greater degree of interactivity in the preview mode.

Tiggr prototypes are also very easily shared with a team. Since the tool is hosted online, when previewing the prototype in a browser, the link can simply be sent off to others for review. With a comment and chat system in place, the tool invites users to provide feedback. Additionally, the prototype can also be exported as a standalone HTML bundle that can further be worked on locally and separately from the web based interface.

As far as I know today, these guys will always have a free version and there might be some paid plans in the future. I believe they are also planning to extend the components library and provide more ready to use elements.

Jump in and give it a try to see if it’s for you.

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

The time has finally come to update the Interactive Sketching Notation for the new year. This time around it now comes with an Adobe Illustrator template that’s loaded with swatches, character styles, and symbols ready for use. The whole sketching system has also been elaborated to also include such things as: variation, notes, scenarios, and multiple user types. The notation can be applied for use with traditional pen and paper media but has advantages when using a computer and a tablet.

Please let me know how you use it or if you have recommendations. Enjoy.

Updated: to work with Illustrator CS4 and CS5

Credits: Jakub Linowski

Here comes Wirify (or here). It’s a great little bookmarklet tool brought to you by Volkside that renders wireframes from any web page with a click of a button. Typically we’re accustomed to moving from wireframe to visual design to finished product. The wirify script however flips this around enabling the movement from finished HTML back to wireframe. I think it’s just awesome when people upset the linearity of design processes. Great work! So, why would anyone want to do this? Jussi writes:

There are some compelling reasons for viewing a live web page as a wireframe:

1. The wireframe allows you to step back and see the big picture. By tuning out the detail it lets you study the building blocks of the page and their relationships.
2. The wireframe is a great learning and teaching tool. Many of the design concepts that underpin page layouts become easier to identify and analyse in a wireframe. Think visual hierarchy, whitespace, symmetry, chunking, grid systems, golden ratio, rule of thirds, etc. etc.
3. The wireframe is a useful redesign tool that stops you getting bogged down in detail in the very early stage of a website redesign project.
4. The wireframe looks cool. You can now turn all the live sites in your portfolio into large wireframes and plaster them on your studio walls ;)

By the way, have a read through the terms of use at the bottom of the page. Wirify is freeware and there is also some basic analytics logging going on. Thanks Jussi!

Credits: Jussi Pasanen

Jason does quite a lot of collaborative sketching, business modelling and multidisciplinary design workshops. Recently he shared a set of downloadable cards in PDF form that are aimed at helping to facilitate such sessions. The cards help move the conversation away from the tactical nature of interface design to more high level business strategy with keywords such as: customers, channels, cost structure and value proposition. Additionally, he also wrote up an awesome blog post about facilitating a collaborative process, which sheds more context into how these cards could be used. It’s always interesting to see design intersect with other disciplines (such as business in this case). Thanks Jason!

Credits: Jason Furnell

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