Yes, another post in English, especially for all interaction designers out there using OmniGraffle. We are planning a “Tools” section especially for everybody involved in UX. We have a major update of iPrototype on the way and maybe you have missed our OmniGraffle gesture stencil

Most of us use OmniGraffle for making flows and documenting wireframes (documenting, not drawing, but that is another post) and our documents tend to get long, like over 50 pages. A table of contents would be nice, but this button is not in OG…. Since I started using OmniGraffle a few years ago I already was searching the web for a solution, but found nothing really useful until last week. I improved the method and now it is possible to create a ToC in a single click. Great until OmniGraffle 6 comes out (it is in there, right?).

I found this post, from a guy called Joshua Dickens. An AppleScript that automatically generates a TOC from all your canvases. Nice, thanks Josh. I made some improvements to the page numbering. This was not working out for our documents as the order of the canvases in a document has nothing to do with the canvas ID. Also I added some easy configuration and a multiple column layout and of course some oral feedback, as this is the first AppleScript I have written .

Can’t wait?

Download the script

What does it do

• Adding a Table Of Contents of all your canvases to the second canvas of the document based on the Canvas Title
  You can change it to the first or third or every canvas you like. You probably figured out to use “<%Canvas%>” as a canvas title.
• If the list gets too long (you decide how long it should be) it automatically creates a new column. Ideal for landscape documents, like ours.
• If you open the document in presentation mode (View > Start Presentation) or export as PDF, the TOC will link to the page. How cool (thanks agian Joshua, that’s his part)

How to use it

Configure

I advice to first change the script so it will fit your page setup and style

1. Download the script and unzip
2. Open “Create Table Of Content.scpt” with AppleScript Editor
3. Change configuration. See the script comments for explanation. The default values are based on our company template, which is probably different from yours.
4. Open an OmniGraffle document
5. Create an empty second canvas
6. Run the script
7. Tweak configuration

Getting easy access to the script

1. Open your AppleScript Editor (of course using Launchbar, Quicksilver or spotlight if you will)
2. Go to preferences, tab general and select “Show script menu in the menu bar” and show computer scripts at the top
3. Open Omnigraffle (we use OmniGraffle Pro 5.2.3 at the moment)
4. Click  in the menu bar and select “Open Scripts Folder > Open OmniGraffle Pro Script folder”
5. Drop your unzipped file in the folder
6. Restart OmniGraffle

From now on, just do this

1. Open any OmniGraffle document
2. Make some space on the second canvas
3. Run the script using the icon in the menu bar

Vis is gezond en lekker, maar het is niet altijd eenvoudig in te schatten welke vis verantwoord is om te kiezen. Niet alle vis kunnen we onbeperkt eten, sommige vissen zijn zo zwaar bevist dat ze dreigen uit te sterven. Het WNF en Stichting De Noordzee willen consumenten en ondernemers in de visketen informeren, stimuleren en inspireren om te kiezen voor vissoorten die niet overbevist worden of die op een milieuvriendelijke manier worden gekweekt.

Daarvoor zijn al een website en een papieren VISwijzer beschikbaar, en sinds kort ook een iPhone app. UNITiD is verantwoordelijk voor het concept, interactie ontwerp en grafische uitwerking. De app is ontwikkeld door The Mobile Company.

Via de iPhone app kan informatie over vissen worden opgezocht en eenvoudig worden gedeeld met anderen. De belangrijkste vragen over de VISwijzer zijn opgenomen in een vraag-en-antwoord overzicht. Bovendien heeft de gebruiker de mogelijkheid feedback te geven aan het WNF, wanneer een vis bijvoorbeeld niet in de VISwijzer te vinden is. Een tell-a-friend functie mocht natuurlijk niet ontbreken, en is dus ook ingebouwd. Daarnaast heeft de gebruiker de mogelijkheid éénmalig €1,- aan het WNF en Stichting De Noordzee te doneren via SMS, of donateur te worden van het WNF via een webformulier.

Tijdens de conceptfase zijn er nog veel meer functionaliteiten bedacht die het helaas niet hebben gehaald naar deze release. Zo zijn we bezig geweest met een recepten op basis van goede vissen. Helaas is ook de restaurantzoeker niet in deze release meegekomen, omdat er nog niet genoeg restaurants zijn die MSC-gecertificeerd zijn. Misschien dat deze functies in toekomstige releases nog worden toegevoegd.

Frog AGV Systems ontwerp en ontwikkelt AGV systems. AGV staat voor Automated Guide Vehicles of in het Nederlands: Automatisch Geleide Voertuigen. Deze voertuigen rijden probleemloos rond in bijvoorbeeld fabrieken, magazijnen en havens, supersnel, zonder te botsen en volautomatisch. In 2007 kreeg Frog de opdracht om een transportsysteem te ontwikkelen voor een groot ziekenhuis in de VS. Een zeer complexe omgeving. Een grote uitdaging vormde de bediening van het systeem. Waar eerder engineers en slimme software de voertuigen naar de juiste plek stuurde, daar zal nu het ziekenhuispersoneel verantwoordelijk voor zijn. Dit personeel reed voorheen linnengoed, maaltijden, medicijnen en afval met karretjes door de kelder. Nu gaan ze een systeem dat deze taak overneemt bedienen middels touchscreens en Pocket PC’s. Dat vroeg om een goed doordacht interactieontwerp.

Ontwerp

Het ontwerp bestond uit twee onderdelen. Een interface voor een 15′ touchscreen en een interface voor een Pocket-PC. Met het 15′ touchscreen konden de voertuigen vanuit verschillende depots naar alle uithoeken van het ziekenhuis verstuurd konden worden. De Pocket-PC informeerde de operators van bepaalde gebouwen dat voertuigen onderweg waren, wat deze vervoerden en in welke kamer de vracht uiteindelijk afgeleverd moest worden.

90% van alle zendingen is eenvoudig. Afval gaat altijd naar de afvalverwerking, linnen naar de wasserij, borden en bestek terug naar de keuken. De acties die hiervoor uitgevoerd moeten worden zijn minimaal. Operators zien nauwelijk meer knoppen of mogelijkheden dan op dat moment nodig is. De interface biedt echter ook uitgebreide functionaliteiten voor Supervisors. Een uitgebalanceerd ontwerp dat voor diverse rollen geoptimaliseerd is.

Ontwerp proces

Van elke rol van het bedienend personeel werden personas gemaakt. Door middel van scenarios werd de toekomstige situatie in beeld gebracht. De scenarios werden verder uitgewerkt in Flow Diagrams. De user interface werd in een groot aantal page elements en wireframes gedefinieerd. Van de wireframes werd een prototype gemaakt die in een gebruikers test op locatie met de verschillende gebruikers is getest.

Update: This article is also available on the Adobe Developer Connection. The article is edited and therefore a better version of what you read here. Of course you are welcome to continue reading this page, result is the same!

Update: We are working with the patched version of Fireworks CS4 for a few weeks now and most of the problems are fixed. I removed the negative comments in this article on the bugs in CS4.

So, you are a designer. A concept-, interaction- or visual designer and you use Adobe Fireworks for sketching, wireframing, visual design and of course prototyping. Great choice. I have been working with this program for many years.  I think it is the most efficient tool for creating anything based on pixels and consisting of more than one screen. In this post I use Fireworks CS3, but you won’t have any problems creating something simular using CS4.

Lately we are working on quite some iPhone applications. We always aim to see the design we make on the device it is made for as soon as possible. For web design this is easy. Use the “preview in browser” function in FW. But for iPhone it is a bit harder. We created 320*480 png’s and synced these “photos” with the iPhone so we could get a bit of a feel of how it looks on the handheld. But we wanted more.

The idea

This is what you want:

• Click through the screens the way you normally do with a FW mock up.
• Make use of the full screen (no Safari buttons).
• Export directly from Fireworks without the need of changing CSS or HTML afterward.
• Opening the app from the home screen.
• Disable zoom.
• Be able to send links to every iphone without even be an official iPhone developer.

This is what you don’t want:

• Learn Objective C or depend on someone who can.
• Take many actions before you can actually see the screens on the device.
• Wait for a new screen to load every time you click a button.

This is what you might wish, but is a bit harder:

(we are working on it)

• Animations, within a screen or from screen to screen.
• Using real form elements (that trigger the default iPhone UI elements).

Demo

Time to try it out to get the idea. We made a little demo, this is what you do:

1. Be sure you are a fast network, Wifi or 3G with your iPhone
2. Open this link in Safari on your iPhone: http://www.unitid.nl/iprototype/demo (I usually mail links to myself and open them on the phone)
3. Follow the instructions.

This demo is made in Fireworks, with the help of PHP and jQuery. We tried using Axure, IUI and webapps.net as well, but did not succeed this far creating something that was really easy to make.

How does it work?

Just very quickly, I explain more in detail later on:

1. Download this zip file containing some folders with PHP files and jQuery.
2. Create the screens with FW like you normally do. Start with a 320*480 canvas and call the first page “index” (no capitals please!).
3. Use hotspots (instead of slices) for creating links to the different pages.
4. Export the mockup to HTML and images like you normally do to test the mockup in a browser.
5. Everything OK? Now export the file to Dreamweaver Library (.lbi) to
   the folder named “Library”.
6. Upload everything to a server that can execute PHP.
7. Get your iphone and visit http://www.yourwebsite.com/..path..to..iprototype/iprototype.

But how does it really work?

Technically speaking.  (if you are not interested, skip to “creating the mockup with FW“)

1. When you open the URL on the iphone, jQuery will check the height of the screen, so it knows if you already have added the link to your homescreen.
2. If not (screenheight is under 480px) it alerts you to add the link to your homescreen
3. If you enter the site from the homescreen, the height of your window is 480px. So jQuery gets the content of the mockup using PHP.
4. All .lbi files are loaded and changed a bit by PHP to correct path to images, remove unnecessary tags and change the links so jQuery can work with it. Also some DIV tags are wrapped around the images and the ID attribute is set to the name of the file.
5. jQuery hides all DIV’s found in the generated HTML, but makes the screen (page) named “index” visible.
6. Clicking the image maps (hotspots) on this image shows the DIV the URL links to.

Take a look at the source code of the files for even more details (I figured most of you are designers not interested so much in code, like myself most of the time)

Do it yourself

Download the files

Files in the zip

Download this zip and extract it to your hard-disk. All of these files have to be uploaded to a server, so make sure you can find them in your FTP client or put them directly on the server.  About the files in the folder “iPrototype”:

• index.html; the file the browser opens. The file contains some metatags, CSS, javascript and a call to the php file.
• The folder “includes”: A folder with some files needed for the prototype to work.
  • js/jquery.js: the javascript libary
  • icon.png: The icon that is put on the iPhone homescreen (you can change this)
  • functions.php: A file to read and modify the exported files from Fireworks.
• The folder “Library”: This is where you export your files to from Fireworks. (you can use these files to test, but you should delete these before exporting your own prototype)

Create the Fireworks PNG

If you are new to Fireworks, there are many tutorials to be found on the web. I won’t go into detail about how to use the program, but will point out a few important things for making prototyping for the iPhone work.

A great way to start is getting the iPhone UI elements from Metaspark (thanks for this guys!). Open Fireworks and create a new file setting the canvas to 320 by 480 pixels and name the first page “index”. This is important because otherwise you’ll get a black screen opening the first page on your iPhone.

Pages and hotspots

Fireworks makes use of pages. Every page can have its own graphics, buttons and settings. To be able to click through the screen, you need more than one page and link these pages together using hot-spots. This easiest way to create a hot-spot is to right click the element you want to be a button and select “insert hot-spot”. In the properties panel you enter the page name you want the button to link to. You can enter this manually or use the pull-down menu. If you create a link to a page that does not exist, you will see a black (or whatever background color you set) screen and you’ll have to reload the prototype. Make sure all links are correct. You can export the prototype as “HTML and images” to check everything in your favorite browser.

Creating the hotspots

Exporting to .lbi

Click “file>export” in Fireworks. Find the “Library” folder. Export the file as Dreamweaver Library Items. Dreamweaver library items are small pieces of HTML code that you normally insert into webpages and will update automatically, but forget about that. Other settings:  Don’t bother entering a “file name” as the files will be named after your pages, “Slices: None”, Check “Put images in subfolder (images)”, uncheck “Current frame only”. Hit “Export”.

Upload and view it on your iPhone

The message you get when opening in Safari

All files in the iPrototype folder should be on a server that can execute PHP. I normally use FTP in Dreamweaver to do this. Take your iPhone and navigate to the address, ending with /iprototype. Follow the instructions on the screen.

Having trouble?

Let us know! We can also create a prototype for you, or help out with the design, that is what we do!

De opdracht was uitdagend:

Ontwerp een interface voor het nieuwe paradepaardje van Eurologics; Een “Car Entertainment System” dat geheel bediend wordt met een 7 inch touchscreen. De toekomstige gebruiker is meestal tussen de 6 en 14 jaar oud, en zal voornamelijk DVD’s kijken. Maar… het komt natuurlijk ook voor dat een minister tussen twee afspraken even het laatste NOS journaal aanzet. De bediening moet dus kinderlijk eenvoudig zijn, maar wel klasse uitstralen. Vanaf de achterbank kijk je naar films, digitale TV en fotos. Vanaf een DVD, CD of USB stick. Natuurlijk kan je ook luisteren naar muziek, allerlei voorkeuren instellen en tal van andere functies aantikken die ik hier voor het overzicht even niet noem.
Het ontwerp moet binnen drie weken gereed zijn…

Card-sorting met iconen

Dat is even doorwerken, maar voor ons natuurlijk niet de eerste keer dat we zoiets doen. Na de briefing begonnen we met een sketchboard sessie met drie van mijn collega’s om de eerste interactieprincipes te ontwerpen. Het een en ander werd snel uitgewerkt in een aantal flows en wireframes. Deze werden besproken met de product managers van Eurologics en het ontwikkelteam in Azie. We maakten een eenvoudige mock-up van de interface met daarin de belangrijkste schermen. Deze mockup werd samen met een set iconen getest in een gebruiksonderzoek met een paar kids uit de doelgroep. Genoeg informatie om samen met Resoluut het grafisch ontwerp in de derde week af te ronden. Net voor de deadline konden we nog 360 iconen exporteren en de documentatie opstellen voor de ontwikkelaars in Korea.

Reactie van bezoekers op de RAI

Benieuwd naar het resultaat? Vraag naar een Vision Touch systeem bij aankoop van uw nieuwe slee, of neem contact op met Eurologics om dit product te laten installeren in uw wagen. U wilt het gratis? Dan moet u zich even melden op de autovakRAI, daar wordt er 1 verloot.

Eurologics stond op de RAI dit jaar en hier een leuk filmpje van de reacties van het publiek.

MIMOA is een online architectuur gids. Bezoekers kunnen zelf projecten toevoegen en natuurlijk op allerlei manieren de gegenereerde content weer kunnen gebruiken. Het mooie van dit project is dat het heel klein begon, en geleidelijk, maar gecontroleerd, is uitgegroeid tot een zeer succesvolle community.

Wij hebben de laatste jaren aan heel wat sites gewerkt met “user generated content” en “community” features. Uit ervaring weten we dat dit erg lastige projecten zijn met vele valkuilen. Bij MIMOA ging het wonderbaarlijk goed. Een paar succesfactoren: Heldere focus en scope. Gefaseerde ontwikkeling. Veel aandacht voor User Experience. Een passievolle organisatie die 100% achter het concept staat en de tijd heeft de website draaiende te houden.

Sinds de start van MIMOA zijn we nauw betrokken geweest bij het project. We hielpen met het maken van een roadmap, release planningen, ontwierpen de structuur, navigatie en de layout. Daarnaast installeerden we het blog, nieuwsbrief-software en een advertentie beheersysteem.

Er staat nog heel wat op de planning. De iPhone applicatie is ondertussen beschikbaar op iTunes. Ook wordt er gewerkt aan een API, city pages en pro accounts. Nog steeds werken we gefaseerd door aan de site en wordt MIMOA elke maand beter.