Autodesk SketchBook Mobile Brings Sketching to iPhone

I’ve had SketchBook Pro for the Mac for a few years now. I bought it before it was acquired by Autodesk from Alias, mostly for art work, but also to experiment with it as a tool for interface sketching. But while I wanted to use it more, I find myself falling back on paper and pencil almost all of the time. Autodesk recently released iPhone versions of the app (1 version is free, and the full version is $2.99) and I think it might actually be more useful to me than the desktop version.

I’ve been playing around with the app as a possible tool for user interface sketching, and am impressed with what I could do with the limited canvas of the iPhone. Right now it feels a little limited for my use. But I am more excited at the opportunities this might provide in the future if any of the Apple Tablet rumors come true.

Using SketchBook Mobile on the iPhone is pretty tough. You can see in the demo video above that the user is drawing with his fingernails and working zoomed in much of the time, rather than drawing at 100%. Zooming is easy with the pinch gesture, but having to constantly zoom in and out is a little tedious when you need to back up and see the whole of your drawing. Using stubby finger tips is also hard, but you can get around that largely by using a stylus.

The interface feels exactly like the SketchBook Pro desktop app. The radial menus are easy access, and thoughtful shortcuts for clearing and undo are provided with double clicks. Panning is a 2 finger gesture, and zooming is familiar using the pinch gesture. The iPhone version actually uses the same paint engine as SketchBook Pro, so it uses the same drawing tools, and they feel and look the same. The same interfaces for layers, color picking, and brush creation are also offered. Saving and sharing is also possible, either by saving to your photo library, or exporting as PNG to email.

Where the small iPhone canvas feels restrictive in SketchBook Mobile, I imagine that a 10” touch screen canvas will feel absolutely perfect. I’m currently using a process for recording and reviewing sketches where I sketch in either of my small 8” or 5” notebooks, snap a photo with my iPhone, and then post via email to our company’s CMS, where I can annotate and people can review and comment. But I would be more than willing to try to sketch directly in SketchBook and post those drawings rather than having to jump through the hoops I do now, few as they are.

As you can tell, I’m sort of excited by the idea, and I’m feeling like there are enough indicators that the rumors for the Apple Tablet may be justified. Keeping my fingers crossed.

Treejack - Information architecture testing

Treejack is a tool to help you test the effectiveness of an information architecture.  Use it to find out which categories are strong, which labels need tweaking and what tasks people are struggling with.  Because you can upload an existing or proposed IA, and test with participants remotely, you get rapid feedback at a fraction of the cost of in-person testing.

Often, usability testing only reveals flaws with the interaction and interface elements.  Treejack is a way to effectively test the quality of an information architecture itself.

Here is an example of a Treejack survey that a participant may complete:

Check out what Treejack results look like and sign up for free.

ForeUI: Create Skinnable & Interactive Prototype

ForeUI is a handy UI prototyping tool. It can rapidly create skinnable and
clickable UI prototype for your website or software, and run the interactive
simulation in your web browser.

ForeUI provides a set of predefined elements for creating mockup, you can drag
them into the editing area and tweak them. You can also create your own elements
and libraries.

ForeUI makes prototype skinnable, by changing the UI theme, all elements in
the prototype will change their look. Currently ForeUI provides four UI themes
for prototyping, including Hand Drawing, Wireframe, Windows XP and Mac OS X
themes. These UI themes cover the high, middle and low fidelity degrees, you
can switch the UI themes at anytime, thus the fidelity of wireframe will be
switched as well. The figures below is the same mockup rendered with different
UI themes.


You can define the prototype behavior by creating the flow chart for handling
specific events, it will work as you expected during the simulation.

You can click the "Run Simulation" button to run the prototype in
your web browser. All defined behavior will be converted to JavaScript and work
in the browser.

ForeUI works on Windows, Mac OS X, Linux and Solaris. You can choose the tool
look and feel if you’d like. Here are some screen shots for ForeUI with various
look and feel.

ForeUI with the default EaSynth look and feel

ForeUI with Windows XP native look and feel

ForeUI with Mac OS X native look and feel

Camtasia for Mac

TechSmith, makers of Morae and Snagit, have released a Mac version of Camtasia, the screencast video recording software. The software allows you to capture the screen, audio and iSight input, and provides simple drag and drop editing including a lot of built-in transitions and effects. You can then easily export the HTML and SWF for embedding in a web page.

Looks like an easy to use alternative that might take the work out of producing screencasts. The video suggests that TechSmith have really thought about the primary demo and training use cases.

SlideSix Multimedia Presentation Sharing

SlideSix is a presentation sharing service that let’s you upload presentations (PowerPoint, OpenOffice, PDF) with recorded narration or video imported from the web, e.g. from YouTube. Presentation pages provide social features (comments and chat), embedding info, and rating.

Napkee: Create Prototypes from Balsamiq Mockups

Napkee is a very exciting tool that extends the quick and easy wireframing process in Balsamiq Mockups by importing your Balsamiq files and generating interactive prototypes in Flex or HTML version.

To start off, you build your series of wireframes in Mockups, optionally creating links between pages. The screenshot below shows a wireframe of a fictional news site I created to try it out. I mocked up a site home page, and a login screen for my test.

Mockups lets you do all presentation you need with static images, and links between pages, but what’s been lacking so far is the ability to demonstrate interactivity. The magic of Napkee happens after you import the mockups. The interface below shows the my 2 mockups in Napkee. The selected mockup displays tabs for viewing the BMML (Balsamiq’s markup language), HTML, CSS, and JS source. If you’re going to export to Flex, you’ll see MXML and Action Script source.

The final step is to export the project to HTML or Flex. For the HTML version, Napkee creates all the markup and a stylesheet that lays out the elements with absolute positioning. It also generates the Javascript (jQuery) for any components you might have added that require animation or state changes, e.g. tabs and accordions. You’ll have an html page that loads in your browser, with links, operational components such as accordions and tabs, and form fields that you can type into.

I haven’t learned all of the rules for binding elements together, e.g. my radios aren’t grouped, and my links appear to be broken at the moment. But you can play with the form fields and UI components in the 2 exported pages below.

This is a pretty cool tool for anyone that’s been using Balsamiq, or has been considering using it, but have also wanted to more effectively demonstrate interactivity in their wireframes. I’ll have to play with it a bit more to really understand how to make it work for me, but I think it’ll definitely become a regular tool for a lot of web designers.

Napkee sells for $79 per user. As with Balsamiq, there are also gratis licenses for nonprofits. Check it out.