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.

Architectuurgids MIMOA is vanaf nu ook beschikbaar op de iPhone. De MIMOA app is gebaseerd op MAPPS, de unieke en flexibele iPhone app die UNITiD heeft ontwikkeld in samenwerking met Elements Interactive en HBMEO.

MIMOA is de online gids voor moderne architectuur. De site bevat een paar duizend projecten die continu worden aangevuld door bezoekers. Ieder project wordt getoond op een kaart en bevat, naast een omschrijving, prachtige foto’s van het object. Verder zijn kenmerken als de architect, het bouwjaar en de functie terug te vinden.

Met de komst van de MIMOA app heb je nu overal beschikking over deze gids. Moderne architectuur in je binnenzak! Met behulp van Google Maps zijn alle projecten en hun locatie te vinden. Overal ter wereld is het mogelijk om met één druk op de knop te bekijken welke projecten er in jouw buurt zijn. Daarnaast kun je de app te gebruiken zonder internetverbinding omdat alle informatie (behalve kaarten en afbeeldingen) op de telefoon zijn opgeslagen. De app kost € 1,59 is hier te vinden in de app store.

Wil je net als MIMOA dat  je klanten of bezoekers op elk moment en vanaf elke plek toegang hebben tot jouw gegevens? Dat kan met MAPPS! Het enige dat je nodig hebt is een database met locatiegegevens. Uiteraard kan een eigen huisstijl worden toegepast, zodat elke MAPPS applicatie uniek is. MAPPS kent 3 versies: Basic, Extended of Premium.

Van een simpele lijst- en kaartweergave, en een detailpagina met koppelingen naar Maps (route), Safari (website) en Phone (bellen). Tot naadloze navigatie tussen de lijst- en kaartweergaves en zoeken op trefwoord en bladeren door categorieen.

Om MAPPS te realiseren werkt UNITiD samen met Elements Interactive, verantwoordelijk voor development, en HBMEO voor advertising en PR. Deze samenwerking heeft geleid tot een unieke en flexibele iPhone app. Meer informatie over de mogelijkheden van MAPPS vind je op mapps.nl.

Mail of bel ons gerust als je wilt weten hoe we je kunnen helpen met MAPPS!

• Waar is hier een Volkswagen dealer te vinden?
• In welke tent treedt mijn favoriete festival artiest op?
• Waar vind ik het voordeligste product?
• Is er een zwembad op loopafstand?

Voor MIMOA werkt UNITiD nu aan een iPhone app met MAPPS, zodat gebruikers overal en altijd toegang hebben tot de allernieuwste architectuurprojecten.

Bij MIMOA, de online gids voor moderne architectuur, kun je nu al zoeken in een paar duizend projecten die continu worden aangevuld door gebruikers van de website. Deze informatie is straks ook beschikbaar op de iPhone.

Voor SpecialBite werkt UNITiD ook aan een locatiegebaseerde iPhone app. Vinden van bijvoorbeeld het dichtsbijzijnde Thaise restaurant, en een omschrijving en waardering van bezoekers, is daarmee mogelijk.

MAPPS versies

Wil jij ook een iPhone app waarmee je klanten of bezoekers op elk moment en vanaf elke plek toegang hebben tot jouw gegevens, dan kan dat met één van de 3 versies van MAPPS; Basic, Extended of Premium.

Van een simpele lijst- en kaartweergave, en een detailpagina met koppelingen naar Maps (route), Safari (website) en Phone (bellen). Tot naadloze navigatie tussen de lijst- en kaartweergaves en zoeken op trefwoord en bladeren door categorieen.

Om MAPPS te realiseren werkt UNITiD samen met Elements Interactive, verantwoordelijk voor development, en HBMEO voor advertising en PR. Deze samenwerking heeft geleid tot een unieke en flexibele iPhone app. Meer informatie over de mogelijkheden van MAPPS vind je op mapps.nl.

Mail of bel ons gerust als je wilt weten hoe we je kunnen helpen met MAPPS!

Jaarlijks wordt het centrum van iedere grote universiteitsstad overspoeld met hordes nieuwe studenten. Om hen wegwijs te maken in hun nieuwe stad biedt ABN AMRO een handige applicatie aan, de ABN AMRO STUDENT CITY GUIDE (en die titel past net niet helemaal onder het icoontje)

De iPhone app serveert een heel scala van functies die handig of nuttig kunnen zijn voor studenten en natuurlijk ook om de weg te wijzen naar de ABN AMRO voor de nodige financiele ondersteuning.

Xwits huurde ons in om van dit alles iets begrijpelijks te maken. Middels onze iPhone prototype methodes konden we snel onze ideeën inzichtelijk maken. Op onze beurt vroegen wij Resoluut om een na te denken over het grafisch ontwerp.

Zelf downloaden (niet alleen voor studenten)

Ontwerpen voor de mobiele gebruikscontext

Waar het bij een gewone website redelijk goed te voorspellen is in welke omgeving de gebruiker zich bevindt wanneer hij de site bezoekt, kan het bij mobiel zo ongeveer overal zijn. In een volle tram, op de fiets, op het toilet en ga zo maar door.
De tijd en aandacht die gebruikers hebben voor de mobiele site of applicatie is daardoor zeer beperkt. Bovendien kan het gebruik onderbroken worden doordat gebruikers worden afgeleid door andere taken of impulsen vanuit de omgeving. Daarom is het van belang de structuur zo simpel mogelijk te houden en de navigatie zo te ontwerpen dat het gebruikers voldoende houvast biedt.
Om tegemoet te komen aan de beperkte tijd en aandacht van mobiele gebruikers is het aan te raden zoveel mogelijk te focussen op hun behoeften en alleen die informatie aan te bieden die zijn in hun mobiele context nodig kunnen hebben. Anders dan achter een computer zijn in de mobiele gebruikscontext ook (en vooral) tijd- en plaats-gerelateerde zaken van belang. Mobiele gebruikers zijn vaak op zoek naar informatie die hen op die plaats, op dat moment uit de spreekwoordelijke brand helpt. Laat dat ook net hetgeen zijn waar mobiel goed in is; veel mobiele telefoons kunnen met GPS bepalen waar je bent, je draagt je telefoon bijna altijd bij je en in slechts enkele seconden heb je een browser (of app) opgestart.
Kortom, de mobiele gebruikerscontext stelt hele andere eisen aan het ontwerp en het volstaat dus niet om een bestaande website met een soort handheld stylesheet geschikt te maken voor mobiel. Het is belangrijk voorafgaand aan het ontwerpen je te verdiepen in de mobiele behoeften van je doelgroep. Het gebruik van scenario’s en/of persona’s helpt bij het selecteren van de juiste functies en informatie voor de beste mobiele user experience.

Ontwerpen voor mobiele devices

Hoewel het ontwerpen voor de desktop ook vele onzekerheden kent kunnen we er eigenlijk altijd wel vanuit gaan dat een schermresolutie van 1024×768 pixels ondersteund wordt, dat we weten waar de vouw van de pagina ongeveer terechtkomt en dat gebruikers een muis en een keyboard tot hun beschikking hebben. Bij mobiel is dit lastiger; mobiele devices verschillen sterk in schermgroottes, er zijn verschillende inputmogelijkheden (numerieke toetsen, ‘pointers’, qwerty-toestenborden, touchscreens, etc.), verschillende besturingssystemen en dito browsers.
Gelukkig is het niet nodig voor ieder device dat op de markt is een apart ontwerp te maken. Ook hier is het van belang je te verdiepen in de doelgroep om de mogelijke devices die gebruik gaan maken van de site of applicatie te achterhalen (zeker als je overweegt een applicatie te maken omdat dit je doelgroep nog smaller maakt). Ook bij mobiele sites vallen sommige devices al snel af vanwege hun beperkte of verouderde mogelijkheden en zelfs als je het aantal beperkt houdt kun je toch snel een groot gedeelte van de doelgroep voorzien.
Om het ontwerpproces eenvoudiger te maken kun je de geselecteerde devices indelen in categorieën. Omdat bij mobiele devices de schermbreedte van het scherm belangrijker is dan de lengte kun je dit als basis gebruiken voor de categorisering. Natuurlijk spelen ook de inputmogelijkheden en rol hierbij.

Meer weten?

Wil je meer weten over hoe wij ontwerpen voor mobiel of heb je hulp nodig bij het neerzetten van de beste mobiele user experience neem dan contact met ons op!

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 populariteit van de iPhone en de exponentiële groei van iPhone apps is indrukwekkend. In december ’08 is de 100.000e iPhone verkocht door T-Mobile (en dan spreken we alleen over de officiële cijfers). Een spannende ontwikkeling voor ons als interaction designers. Mobiel internet, location based services en touchscreen en gesture based interfaces gaan een steeds grotere rol spelen in de wereld van de digitale interacties.

Mobiel internet groeit zienderogen
In Nederland surfen zo’n 1,6 miljoen gebruikers één of meerdere keren per maand over het mobiele web. (Mobiel internet Nederland 2008). Niet in de laatste plaats is het gebruik van mobiel internet gestegen door de introductie van de iPhone. Ondermeer Pathé, Nu.nl, Publieke Omroep en Hyves zien een onevenredig hoog deel van hun mobiel verkeer van applicaties komen. (Emerce, 11 februari 2009) “In december zagen we het gemiddelde datagebruik stijgen naar 2 TeraByte per dag. Ten opzichte van vorig jaar is dat bijna 7 keer zoveel,’ zegt Bart Weijermars, Directeur Marketing bij T-Mobile in Nederland.” (Persbericht van T-Mobile 23-12-2008) Eén van de meest succesvolle voorbeelden is de Pathé applicatie. De iPhone app was een regelrechte uitschieter. De helft van alle iPhone-gebruikers in Nederland heeft hem intussen geïnstalleerd. De iPhone-applicatie genereert 550.000 pageviews per maand 67% van al het verkeer op de mobiele websites van Pathé!

UNITiD ontwerpt voor Mimoa

Ook wij zijn bezig met ontwerpen voor iPhone. Onder andere met het ontwerp van de iPhone applicate van Mimoa, ‘the free online architecture guide’. In deze app wordt gebruik gemaakt van de lokatie van de gebruiker om interessante architectuur in de directe omgeving te vinden. Ideaal voor een stedentripper die de lokale architectuur wil ontdekken! Het ontwerp ligt klaar, en de dames van Mimoa hebben de achterban gevraagd voor naam suggesties voor de nieuwe app. En zoekt nog naar geinteresseerde partijen voor verdere ontwikkeling. Links een voorproefje van het eindresultaat.

Ontwerpen van een iPhone app biedt nieuwe mogelijkheden en uitdagingen, anders dan die websites of ‘traditionele’ mobiele applicaties. Om er maar een paar te noemen:

• Context: de Phone wordt ‘on the go’ gebruikt en vaak en kort geraadpleegd.
• Schermgrootte: Het scherm is compact, er moet dus selectief ontworpen worden.
• Interactie: touchscreen vraagt ook om specifieke ontwerpoplossingen, vingers zijn ten slotte geen cursor.
• En hoe kan de iPhone app ook interessant zijn voor gebruikers van de andere 450 verschillende handsets die op de markt zijn?

Jaap paste de Omnigraffle stencils van Dan Saffer aan om de juiste handbewegingen bij touchscreen ontwerpen te kunnen laten zien. Deze nieuwe vector-versie is inmiddels al meer dan 300 keer gedownload!