A referee signal quiz app made with AppInventor

Increasingly, free tools are becoming available that allow designers to prototype and test rich applications for mobile devices without developing fully-realized apps. In this post I give an overview of an example for each of the three major platforms.

Windows Mobile – Microsoft TouchStudio
TouchStudio allows you to develop simple apps directly on your phone. While it might seem a silly idea at first, the concept of a mini-app developed with TouchStudio as an ‘intant mashup’ or ‘multimedia smart playlist’ is an intriguing one. The would-be-developer still has to write some ‘code,’ although the app does help you along. Unfortunately Microsoft Research dropped the ball with support – little documentation exists and it’s difficult to share code, so it’s doubtful that a thriving community will rise up around this project. TouchStudio is free on the Windows Phone Marketplace.

Android – App Inventor
Rather than develop a mashup directly on your phone, App Inventor takes a different tack. It begins with an intuitive web-based interface and allows you to build a simple app using a layout editor and patch-style programming interface for programming behaviors. App Inventor seems much more powerful than TouchStudio, and a bit less programming-centric. App Inventor runs in your browser after you run the free setup program

iPhone – Touch Application Prototypes (TAP)
Apple is notorious for guarding its ecosystem of apps and phone features, so it’s no surprise that no equivalent development tool exists for iPhone. However, a Dutch design firm called Unitid has come up with TAP, an interesting alternative. It allows designers to develop and test interactions within a semi-functional click-through prototype from within Safari. With a full suite of transitions and effects, as well as the ability to use most browser functionality (compose email, initiate phone call etc,) TAP could be a valuable tool for a visual designer or information architect who wants to experiment with the look and feel of a mobile app before developing full functionality. TAP requires you to use Fireworks and is available for download at Unitid’s website

Got a budget? These three solutions are free of charge. If you find yourself with a working with a large team or needing a solution for ongoing work, consider a paid prototyping tool such as JustinMind, Axure or ProtoShare.

UPDATE: 04/28/11

Blueprint Screenshot

MakeDo is a deceptively simple system for quickly and easily assembling pieces of cardboard, paper, fabric or plastic into … anything! The system includes basic connectors, as well as two different types of hinges. Also included is a special tool for cutting and poking the necessary holes in your materials. With only the tools and parts you find in the box, you can assemble structures, creatures, costumes or anything else you can dream up.

MakeDo is clearly marketed toward children, but having spent my share of time in both product design and exhibit design firms building mockups and prototypes, I can say these little snaps and hinges would be a welcome addition to the gaffers tape, hot glue, foamcore and exacto-knives of a professional model or prototype shop. Check out this quick video for a sense of what’s possible.

TouchOSC also includes a companion layout editor. This free desktop application allows you to define custom screen layouts of UI elements and then upload them to your iPhone. Unfortunately there are only a limited number of UI widgets, and because the software was designed to control realtime sound apps, they naturally tend toward realtime control- knobs, faders and toggles as opposed to forms, dropdowns and checkboxes of more rich interfaces. Still, if all you need is a few buttons and a slider to control an interactive system and you aren’t able to develop a native iPhone app, TouchOSC offers some enticing potential. See below the jump for some examples of unexpected uses.

This guy uses TouchOSC to control a robot!

You can even access the iPhone’s accelerometer and send that data over OSC (warning:video has loud sound).

osc, processing and an iphone accelerometer from codingnature on Vimeo.

If you’re using Flash, I recommend flosc for parsing and sending/receiving messages. There are many resources out the for using OSC with Python, Processing and a variety of software packages. So build you UI, teach your software prototype to speak OSC and you’re set!

TouchOSC homepage
TouchOSC @ iTunes Store

Scribbles is an ideal addition to any visual designer’s toolkit – it is simple without being simplistic, has features designed to enable creative flow and speed, and generally does a good job at what it claims to do. While I found its control over color a bit frustrating, the layer control and ‘trace’ tool were both features that I can actually see myself using. For a small piece of software like this that relies on demo versions to spur purchases, a handful of features that stick in a user’s mind can mean the difference between an application that is used once out of curiosity and one that is purchased and becomes a valued tool.

With that said, after using Scribbles for an hour or so, the biggest insight I came away with was that it really is designed to be used on a tablet computer, or at least with a tablet input device. First, Scribbles’ tools respond to pressure, which obviously makes use of a tablet ideal. Second and more importantly, without the array of mechanical tools like bezier curves, lassos, masks and all of the other little robot helpers designers use, Scribbles relies on the fine motor abilities of the user’s hand. In fact I feel that the design is revolutionary precisely because it it designed from the ground up with the hand in mind.

MacLife had this to say:

Its bare-bones aesthetic doesn’t come from dumbing down the program’s capabilities, but rather from cleverly removing unnecessary complexity.

Personal Anecdote: A classmate of mine in design school hurt his right hand badly in an accident during the school year. A talented and experienced illustrator, he was distraught that the multiple surgeries and six months of physical therapy would derail his entire semester. One of his professors took it in stride and simply said to him – “well, just use your left hand.” He did, and being the talented individual he was, could soon draw and paint deftly with his left hand, with a looser, more expressive (and IMO more interesting) style.

I suppose this story goes to the heart of the point I am trying to make here, that sometimes removing ‘crutches’ that we use and starting from the ground up allows us to see things and communicate in ways we didn’t even know we could. I look forward to more software that challenges us in this way.

As an exhibit designer, I personally found Prezi’s strong emphasis on scaling inspiring. Since exhibition designers use scale as one of their primary mechanisms of information organization, I can even see Prezi as a potential tool for prototyping exhibit content, where the ratio in size between header graphics, sub-headers, body text and captions can be as high as 100:1.

Like most sketching tools written about on this site, Prezi’s success relies as much on its limitations as it does in its features. While the possibilities for creating zooming presentations seems endless, Prezi keeps its users on track by providing only a few design templates, not allowing users to edit transition times between ’slides’ and otherwise keeping the system as simple as possible. A professional motion graphics designer might find this constraining, but a casual user (like me) can create very professional looking results in less than a half hour. See below for an example I created (oh yeah, the final product is easy to share, download and embed in a website.)

Click Read More for more analysis.

The main editor menu in Prezi offers some innovative interactions. Organized in a visual hierarchy where the current tool selection is displayed as a top-level menu with available sub-commands below it, the process of building a Prezi slideshow relies heavily on mastering this unconventional interface. New users may be confused that the tools for creating and those for editing the size/placement of elements such as text exist on separate levels of the menu hierarchy, but with a variety of different media types to wrangle, and a variety of different parameters to edit within each slideshow, I found the separation of creation and layout interesting. Also, quickselect keyboard commands offer the potential of making the process of creation even faster.

The Prezi ‘dartboard’ (my name not theirs) is another innovative UI element that users will quickly become acquainted with (my labels added to the screenshot at left). When an element is selected for editing, the dartboard is overlaid on top of it. The various sections of this widget allow users to place, scale and rotate an element or group of elements. Again, the separation of creation and layout, while seemingly limiting, actually makes laying out presentations easier. It also must be noted that Prezi projects are created entirely within a browser and the Prezi team must be applauded for implementing such intuitive editing tools within the somewhat-limiting constraints of a web browser.

After wrestling a bit with OS- and browser incompatibilities and getting acquainted with the unconventional UI, I found Prezi extremely fun to use, and even after a half hour of noodling found myself wanting to play more.

As visual designers and not scientists, we won’t pretend we have any clue how EnzymeX works or how it is used, but given its glowing reviews from MacUpdate to the New York Times, and with features such as the ability to “Directly search and download sequences from the NCBI Entrez nucleotide database.” and “Simply and reliably determine which buffer is most suitable for a double digestion.”, we have no doubt that EnzymeX is allowing an enterprising scientist or two the ability to test theories, perform faster or at the very least settle a few barstool bets as to the effectiveness of various protein sequencing motifs.

So with a cure for the common hangover as yet unfound, I say young scientists of the world, sequence away!

Like any tool, a whiteboard is only as good as the person who uses it. On the other hand, easy access to space to let ideas fly can be valuable, and there is a lot to be said for ‘breaking the frame’.

IdeaPaint lets you paint a whiteboard anywhere you want it.

via FastCompany

]]> http://www.poxod.cc/blog/2009/12/13/make-an-entire-wall-into-a-whiteboard-with-ideapaint/feed/ 0 http://www.poxod.cc/blog/2007/02/13/sketchup-6-is-out/ http://www.poxod.cc/blog/2007/02/13/sketchup-6-is-out/#comments Tue, 13 Feb 2007 23:49:45 +0000 cc http://www.poxod.cc/blog/2007/02/13/sketchup-6-is-out/ Since being purchased by Google, Sketchup has been split into two products: Sketchup Pro and ‘Google Sketchup’, the free version, and many of the features available in Sketchup 6 are available to users of both versions. Google offers an explanation of the difference between the products, which essentially boils down to: Google Sketchup is for use only with Google Maps, while Sketchup Pro is a full-featured 3D visualization tool for professionals.

Now Sketchup 6 is available, with a raft of new features. Users can now superimpose their creations into photos and match perspective using the Photo Match tool. I have been using Sketchup to pre-visualize media installations, and this tool is an invaluable time-saver. All you need is a few photos of a site and you can superimpose your creation into it.

The other feature that will take up much of your precious noodling-time is the ‘sketchy lines’ capability. In addition to giving users more control over the way lines look in general, you can now alter the stroke of a line and make your model look like a calligraphic painting, a whiteboard sketch or a ball-point pen drawing. Notably missing is the ability to scale the strokes, or create your own. See these instructions if you want to make your own style (it isn’t a trivial task.) Regardless, combined with the ability to set background color and watermark, it’s clear that the Sketchup team has worked hard to make sure that the world doesn’t get inundated with Sketchup renderings that look exactly the same. Long live style!

See Also:
Google Buys At Last Software

Some recent developments in the system are particularly exciting to me: I was exctied to see new support for Arduino, Phidgets and Wiring. The system was also on display at the 2006 Maker Faire in San Francisco, and a new hardware design (left) has been developed, which means that it lives on.

d.tools was developed at the Stanford HCI Group.

…combines control of six distinct, complex user movements (X, Y, Z rotations and X, Y, Z translations) into a single liquid-proof joystick, while providing the functionality of a standard 2D mouse for interaction with GUI functions.

This is obviously a groundbreaking advance in medical technology. With surgeons and medical professionals increasingly having access to a wide array of 3D patient data, the ability to easily accessing and interpret that data during surgery is truly a step forward.

With that said, it should only be a matter of a few years until we see devices with these capabilities crop up on our own desktop for use in non life-or-death situations. The ability to intuitively manipulate and control 3D data along that number of axes with only one hand will make the experience of 3D modelling a step closer to creating objects by hand.