Bonuskaart of airmiles?

Door Ivo Willekens, partner / CFO - @ivowillekens
18 mei 2012 - 2173 x bekeken - Categorieën: Tech

Begin dit jaar kwam er een ongebruikelijke maar buitengewoon interessante opdracht op ons pad: het ontwerpen van een interface voor een kassasysteem. Ongebruikelijk omdat van oudsher onze focus ligt op internet en een kassasysteem daar op het eerste gezicht niet veel mee te maken heeft. Interessant omdat het enerzijds iets heel nieuws was. Anderzijds omdat het systeem dusdanig intensief gebruikt gaat worden, dat een intuïtief en doeltreffend interactieontwerp onontbeerlijk is. Bovendien is de wereld van touchscreens met de komst van de tablets enorm in beweging. In deze blogpost kun je lezen over het proces dat we doorlopen hebben en de motivaties achter de keuzes tijdens dat proces.

De kennismaking

Zoals elke opdracht begon deze ook met een kennismakingsgesprek, dit maal op locatie bij AXI in Breda. Wat al snel duidelijk werd is dat AXI bewust koos om de techneuten er (nog) niet bij te betrekken. Reden hiervoor is om het creatieve proces de vrije loop te laten en niet bij aanvang al direct in technische beperkingen te denken. We hebben dus feitelijk alle vrijheid gekregen van AXI. Op zich een prettig gegeven maar dat betekende ook extra verantwoordelijkheden. Want hoewel we niet direct rekening hoeven te houden met de uitwerking, willen we wel een product neerleggen waarvan wij met enige zekerheid kunnen zeggen dat het uitgewerkt kan worden binnen het .NET-framework. We hebben zodoende research gedaan naar het .NET-framework en het WPF-formaat (Windows Presentation Foundation).

Verder kwam tijdens de kennismaking naar voren dat AXI veel waarde hecht aan het grafisch ontwerp. Wij zijn er echter van overtuigd dat het grafisch ontwerp ondergeschikt dient te zijn aan het interactieontwerp. Bovendien zijn we van mening dat een degelijk interactieontwerp een goede basis biedt voor elk grafisch ontwerp. Aangezien het grafisch ontwerp generiek dient te zijn in verband met branding, hebben we de meeste tijd en energie in het interactieontwerp gestopt.

Bepalen grafische stijl: METRO

Hoewel het bepalen van de grafische stijl bij ons normaal pas na het interactieontwerp komt, hadden we met AXI afgesproken hier eerst een aanzet voor te doen. Mochten er nadien nog zaken gewijzigd moeten worden kon dit altijd achteraf doorgevoerd worden. Door te beginnen met het grafisch ontwerp speelden we enerzijds in op de behoefte van AXI. Anderzijds was het ook een prettige methode om erachter te komen of de gekozen grafische stijl uit te werken is en gedragen wordt door de developers van AXI.

Om een grafische stijl te bepalen, moesten we eerst weten wat er wel en niet mogelijk was binnen het .NET-framework en de Windows Presentation Foundation. En het was verassend genoeg deze research die inspireerde. Enkele artikelen hadden namelijk ook betrekking op de METRO ontwerptaal van Microsoft. METRO is een ontwerptaal ontwikkeld door Microsoft. De taal is geoptimaliseerd voor touchscreens en zal breed worden ingezet door Microsoft vanaf Windows 8. De Zune-player, Windows Media Center en de nieuwe Windows Phone maken al gebruik van METRO.

We hebben voor METRO gekozen om verschillende redenen. Op de eerste plaats sluit het uiterlijk ervan goed aan bij de wensen van AXI: modern en duidelijk. Ook de filosofie erachter past bij het kassa-systeem: alles in beeld staat er met een reden. Daarbij is de taal opgezet met gestures en touch in het achterhoofd. Het lettertype (Segoe UI) is klein (zeer) leesbaar en METRO is berekend op animatie; een echte authentieke digitale ontwerptaal.  Zodoende leek ons METRO de juiste keuze voor dit product: het is tenslotte een ontwerptaal die uitvoerig onderzocht is door Microsoft. We kunnen dus met enige zekerheid zeggen dat deze taal werkt. Het is bovendien niet realistisch om een soortgelijk omvangrijk onderzoek zelf op te zetten. 

De eerste presentatie

Een belangrijk aspect van het grafisch ontwerp, was dat het gedragen werd op de werkvloer van AXI. Zij moeten er per slot van rekening mee aan de slag en dat gaat beter als (nagenoeg) iedereen achter het ontwerp staat. Om hier zeker van te zijn alvorens we begonnen aan het interactie, hebben we een presentatie ingepland voor de developers van AXI: ongeveer 20 man. Een spannend moment aangezien we ontwerpen normaliter niet voor zo'n grote groep presenteren. Hoewel er zeker opmerkingen terug kwamen, gingen deze eigenlijk met name over functionaliteit, niet over het grafisch ontwerp. Met het grafisch ontwerp zaten we dus op de goede weg en de opmerkingen konden direct meegenomen worden in het interactieontwerp.

Het interactieontwerp

Zoals eerder aangegeven hechtten wij de meeste waarde aan het interactieontwerp. De voornaamste reden hiervoor is dat de gebruikers het systeem soms wel tot 8 uur per dag bedienen. Daarom is het van wezenlijk belang dat frustraties tot een minimum beperkt worden.

Voordat we begonnen met het uittekenen van de wireframes, hebben we eerst de gebruiker en de situatie waar hij de kassa bedient geanalyseerd. Op basis hiervan hebben we een aantal richtlijnen opgesteld welke als leidraad dienen bij het interactie-ontwerp. De belangrijkste conclusies van deze analyse waren:

  • AXI heeft te maken met een diverse groep gebruikers. Gebruikers kunnen jong of oud, geschoold of ongeschoold zijn. Denk bijvoorbeeld aan een ongeschoolde full-timer in een Intratuin ten opzichte van een universiteitsstudent met een bijbaan bij de Bijenkorf; beide klanten van AXI.
  • Het kassa-systeem moet prettig te gebruiken zijn door zowel links- als rechtshandige mensen. Kleurenblindheid mag bovendien geen probleem zijn.
  • Het systeem wordt afgestemd op de normale / ervaren gebruiker. We hebben bewust niet gekozen om het af te stemmen op de beginneling, want hoewel het systeem dan eenvoudiger te leren zou zijn, zullen veel handelingen voor ervaren gebruikers omslachtig overkomen. De ervaren gebruikers zijn in de meerderheid te opzichte van de beginnelingen.

Het proces van het tekenen van de wireframes was het leeuwendeel van de opdracht. In totaal zijn er meer dan 60 wireframes gerealiseerd welke samen de processen voor de gebruiker inzichtelijk maken. Veel van deze wireframes zijn na testen aangepast en opnieuw getest. Om te testen hebben we de schermen nagebouwd in Flash. Reden dat we voor Flash gekozen hebben, is omdat wireframes hierin eenvoudig te kopiëren zijn vanuit Illustrator.

Tijdens het realiseren van de wireframes zijn er een aantal interessante keuzes gemaakt. Zo is er vlak na aanvang een wijziging gekomen in de hardwarespecificaties, welke een gunstig effect had op de gebruiksvriendelijkheid. Aanvankelijk konden we niet uitgaan van multitouch en gestures vanwege hardwarebeperkingen. Echter heeft AXI besloten de minimale systeemeisen op te schroeven, zodat dit wel mogelijk werd. Enkele knoppen konden daarom vervangen worden met gestures. Met name bij scrollen was dit erg prettig, aangezien de bediening hiervan op een touch-screen zonder gestures heel beroerd is, terwijl scrollen met gestures nu juist heel intuïtief is. Verder is er voor extra marge gekozen voor de knoppen. Knoppen zijn van zichzelf altijd minimaal 45 pixels hoog en breed. Elke knop heeft echter een extra marge van minimaal 9 pixels om mis klikken te voorkomen. Zeker voor de oudere gebruikers is dit van belang.

Het grafisch ontwerp

AXI hechtte veel waarde aan het grafisch ontwerp omdat dat o.a. hun klanten moet overtuigen tijdens presentaties. Hoewel veel klanten hun eigen look 'n feel aan de applicatie willen geven, moet er ook een generiek ontwerp gemaakt worden dat ingezet kan worden tijdens presentaties om klanten te overtuigen. Naast het generieke grafisch voorstel is er ook een voorstel voor Praxis uitgewerkt, een potentiële klant van AXI. Door in Fireworks slechts enkele stijlen aan te passen, was het ontwerp voor Praxis praktisch afgerond. Dit bevestigde ons idee: door een aantal variabelen aan te passen, kun je een heel nieuw ontwerp neerzetten.

Een echte uitdaging bij het grafisch ontwerp was het ontwikkelen van de iconen. Voor het merendeel van alle acties zijn iconen ontwikkeld, ter ondersteuning van het button label. Deze iconen zijn vervolgens in een eigen lettertype gestopt, zodat AXI ze eenvoudig aan kan roepen in haar applicatie. We hebben om verschillende redenen gekozen voor een lettertype om iconen weer te geven. De iconen zijn schaalbaar in een lettertype en dus zonder kwaliteitsverlies groot te gebruiken. Bovendien kan de kleur eenvoudig worden aangepast, wat het ontwerp generiek maakt: het gehele uiterlijk is dus met code aan te passen.

Conclusie

Dit was een project waarin we veel geleerd hebben. Niet op de laatste plaats omdat het buiten ons normale straatje van web- en appdevelopment ligt. Zo bleek bijvoorbeeld onze workflow voor wireframes niet optimaal voor deze opdracht. Dit omdat het aantal verschillende schermen kleiner is dan bij een webpagina, maar het aantal mutaties op die schermen vele malen groter. Dit zorgde voor een aantal itererende correcties. Kennis die we meenemen voor de ontwikkeling van volgende applicaties.

Style tiles: Voor als een moodboard te 'vaag' is en een ontwerpvoorstel te concreet

Door Sjoerd van Oosten

Als designer heb ik de uitdagende taak om de eerste oplossingen en ideeën visueel en concreet te maken. Dat is in de meeste gevallen niet zo… - Lees meer

Lees verder