In december (2010) werden we gevraagd om het interactie ontwerp voor de Ziggo iPad app te maken. Leuk! TV gidsen, daar wisten we inmiddels wel wat van af. Ondermeer dat dit best een lastig karwei is. Daar mochten we dan zeker wel even over nadenken. Ja. Twee weken om precies te zijn. Gelukkig hebben wij ons ontwerpproces en bijbehorende methodes en tools goed op orde en hebben we in korte tijd een hele mooie app ontworpen, die tot nu toe dik 4+ aan sterren scoort in de App Store.

Ziggo TV laat je in één oogopslag zien wat er op tv is. De app toont programma informatie van meer dan 160 zenders, waarvan de volgorde naar eigen voorkeur in te stellen is. Je kunt tot een week vooruit kijken, waarbij je kunt zoeken op zender, genre of trefwoord. Heb je iets leuks gevonden, dan kun je dat via Twitter, Hyves, Facebook of e-mail delen met anderen. Ook kun je het programma opslaan als favoriet zodat je geen aflevering mist. Daarnaast geeft de Ziggo TV app kijktips over leuke programma’s die te zien zijn.

Ontwerp proces

Om de belangrijkste wensen voor de app naar boven te krijgen startten we met een brainstorm/schetssessie. Vervolgens zijn we hiermee aan de slag gegaan voor het ontwerp gedeelte.

Met behulp van onze eigen prototype tools (TAP) hebben we voor deze applicatie snel prototypes kunnen maken van onze interactie ontwerpen. Op deze manier konden we direct testen of datgene wat we bedacht hadden ook daadwerkelijk werkte. We konden het ontwerp op de iPad presenteren, supersnel aanpassen en optimaliseren.

Inmiddels zijn we bezig met het ontwerpen van verbeteringen en nieuwe features, binnenkort dus een update!

We zijn er al een tijdje mee bezig, en het zal voorlopig een work in progress-project blijven, maar het verdient inmiddels wel een blog post: onze Interaction Pattern Library voor Android op androidpatterns.com. Designers en ontwikkelaars hebben deze site inmiddels al opgepikt. We tellen ruim 3000 bezoekers maandelijks vanuit uit 77 landen en dat aantal neemt gestaag toe. Waarom zijn we aan dit project begonnen? En wat heeft de wereld er aan? Een kleine geschiedenis…

Interactie ontwerpers en pattern libraries
Pattern libraries zijn websites met verzamelingen interactiepatronen, waar wij als interactie ontwerpers vaak gebruik van maken in onze dagelijkse ontwerppraktijk. Ze laten zien hoe bepaalde ontwerpproblemen opgelost kunnen worden aan de hand van voorbeelden. Veel geraadpleegde libraries zijn onder andere Yahoo, Welie, UI-patterns, Patternry en Pattern Tap. Deze zijn gemaakt voor het web, en gelden dus niet voor mobiele apparaten.

Apple’s richtlijnen en Google’s broncode
Ontwerpers voor iPhone- of iPad-applicaties kunnen voor hulp bij Apple’s eigen iOs ontwerprichtlijnen terecht. Hierin wordt nauwgezet uitgelegd hoe de door Apple bedachte User Interface (UI) elementen moeten worden toegepast. Het is geen pattern verzameling zoals eerder genoemde voorbeelden, maar wel een heel nuttig document, waarin Apple laat zien hoe onderdelen moeten werken. Het is uitgebreid en compleet. Alles staat er in om te kunnen ontwerpen voor iPhone of iPad, en bestudering van deze richtlijnen kan je als ontwerper voor dit platform niet achterwege laten.

Apple’s tegenhanger Google gaat met Android, hun open source project, anders te werk. Op de Android developers site kunnen ontwikkelaars van software en hardware de nodige tools, documenten en broncode vinden waarmee ze helemaal hun gang kunnen gaan. In deze broncode staan alle elementen gedefinieerd, die door de ontwikkelaars van Google zijn gemaakt. De code kan worden gebruikt en aangepast door de ontwikkelaars zelf. Er zijn geen regels vooraf of achteraf. Applicaties hoeven niet te worden goedgekeurd zoals bij Apple’s App Store, met als resultaat dat de UI’s van verschillende door Android bestuurde apparaten er op onderdelen behoorlijk anders uit kunnen zien.

Er bestaan wel UI richtlijnen op de Android developers site die designers kunnen helpen bij het ontwerpen van applicaties, maar die behandelen slechts de basis van het Android systeem, hoe menu’s werken en hoe ze worden opgeroepen. Alle andere elementen worden alleen vanuit de code behandeld. Daar kunnen wij als interactie ontwerpers niet veel mee.

Een pattern library is geboren
We liepen zelf inmiddels tegen veel vragen op: “Hoe werkt dat op Android?”, “Is dit een gangbare oplossing?” en “Kan ik dit ook anders oplossen?” Waar we bij ontwerpen voor het web konden teruggrijpen op bovengenoemde libraries, was er nog niks online te vinden. Door het ontbreken van hulpmiddelen voor UI designers van Android applicaties ontstond het idee om zelf een pattern library samen te stellen. De url was snel geregistreerd. Daarna hebben we met een groep vaste Android gebruikers binnen UNITiD een plan gemaakt voor de opzet van de site en zijn we aan de slag gegaan.

Wireframe als basis
In de loop van de maanden verzamelden we honderden screenshots waaruit we de patterns konden destilleren. Hierbij hanteerden we de definitie dat een pattern pas daadwerkelijk een pattern is, als het meer dan één keer heeft bewezen dat het werkt. Het uitgangspunt van deze pattern library is dat ontwerpers zoals wij moeten worden bediend. Daarom gaan we op de site uit van ontwerpvragen die we tegen kunnen komen tijdens het ontwerpproces. Deze vragen zijn ingedeeld in categorieën en de antwoorden op de vragen vormen ieder een pattern.

Als interaction designers zijn we gewend om met behulp van wireframes ons verhaal over te brengen. Een mooie manier om ook de werking van Android patronen uit te leggen, vonden we. Elke pattern-pagina opent daarom met een wireframe waarin wordt uitgelegd hoe het werkt. Daarna wordt de context behandelt: wanneer wordt het interactiepatroon toegepast, wanneer niet en aan welke patronen zou je in deze context nog meer kunnen denken. Hierna sommen we voor- en nadelen op en als laatste zijn het de voorbeelden die het harde bewijs leveren dat het daadwerkelijk om een pattern gaat.

Meedoen?
Het zou natuurlijk super zijn als deze library, net als de genoemde voorbeelden boven, een (groeiende) vaste schare bezoekers zal blijven trekken in de toekomst. Tot nu toe zijn er 50 patterns gepubliceerd verdeeld over 6 categorieën, en we hebben er nog veel meer verzameld die allemaal een plekje op de site zullen krijgen. Bovendien blijft Android zich razendsnel ontwikkelen, met dit jaar zelfs een eigen besturingssysteem voor tablets. We hebben dus nog genoeg te doen!

Heb jij ook een pattern ontdekt die je graag zou willen delen met ons? Op de site lees je hoe je dit kan doen. Je krijgt uiteraard alle credits en een link naar je eigen website.

Het lange wachten wordt eindelijk beloond. Pas vanaf morgen is de iPad officieel in ons land verkrijgbaar, maar wij hebben hier niet stilgezeten. Al enkele maanden werken we aan het interactie ontwerp van de NU app. Een mooie uitdaging; breng de grootste nieuwssite van Nederland, NU.nl, naar de iPad. Combineer verschillende bronnen van nieuws, video, foto’s en live berichten in één applicatie. De app moet goed inspelen op de nieuwe mogelijkheden en consumptietijdstippen van de iPad.

Bekijk hier alvast een voorproefje van de app:

Lees ook even de eerste reacties in de appstore

Hij werkt super, Maakt geweldig gebruik van het scherm van de iPad, je kan precies doen wat ik hoopte dat het zou doen. (door ilno)

Nu.nl heeft weer een parchtige applicatie in de App Store gezet. De functionaliteit en de layout van de schermen zijn goed gekozen….Ze hebben de lat hoog gelegd. Ik hoop dat andere Nederlanse media prberen deze standaard te halen en waar mogelijk te overtreffen (door Hoedje)

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.

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)

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.

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.

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.