Aurora

Opdrachtgever: We Are Reasonable People (WARP)

Categorie: UX & interaction design

Gebruikte programma’s: Adobe Xd, Adobe Illustrator & Miro

Gemaakt in een team van vier in het eerste jaar van de studie CMD


“Hoe kunnen we het infotainment system zo ontwerpen dat fysieke knoppen overbodig worden en de bestuurder alle functies op één plek kan bereiken, zonder dat er wordt ingeleverd op gebruiksvriendelijkheid?”

Dit auto infotainment systeem is gemaakt om een efficiënt en simpel infotainment systeem te creëren voor de autobestuurders die nog niet gewend zijn aan de nieuwe techniek in de auto’s van tegenwoordig. Dit systeem is zo simpel mogelijk gehouden, voor de doelgroep.

​De auto’s van tegenwoordig krijgen een steeds uitgebreider systeem met veel toevoegingen zoals stuur verwarming, Netflix, etc. Dit is best ingewikkeld voor volwassenen die de ‘oude’ modellen zijn gewend, waar het niet allemaal via een scherm wordt bedient. 

​Wij hebben het systeem vereenvoudigt en ervoor gezorgd dat alle knoppen niet meer nodig zijn. Deze zitten namelijk in het systeem! Zo is alles gemakkelijk te vinden en te besturen via het scherm in het midden.


Hoe werkt het systeem en welke functies worden er aangeboden?

Naast mijn onderdeel communicatie waren er nog 3 andere onderdelen: mediaplayer, climate control en navigatie. Door de onderdelen samen te voegen creëerden we een simpel infotainment systeem die geen overbodige knoppen gebruikt. Het systeem werkt voor een groot deel hetzelfde als een telefoon of iPad/tablet. De climate control werkt hetzelfde als een auto die er knoppen voor heeft, zodat er geen verwarring ontstaat.

Klik op deze link om het prototype te bekijken/testen: https://xd.adobe.com/view/a6e22391-2d9f-4d78-9251-758c3e9e6d33-f3b1/ 


Wat hoort er precies bij mijn onderdeel?

Mijn onderdeel was communicatie. Bij dit onderdeel hoorde de functies: 

  • Telefoongesprek starten
  • Telefoongesprek afwijzen
  • Telefoongesprek ophangen
  • Telefoongesprek ontvangen
  • Telefoongesprek muten
  • Toegang tot numeriek toetsenbord
  • Deelnemer toevoegen aan telefoongesprek
  • Berichten ontvangen
  • Berichten inzien
  • Kiezen welke telefoon verbonden is aan de auto
  • “Niet storen” functionaliteit aan/uit zetten

Ik had er na alle testen bewust voor gekozen om de Apple functies en iconen te gebruiken voor mijn onderdeel. Mijn doelgroep gaf in meerdere testen en A/B testen de voorkeur aan de apple iconen. Ook koos ik ervoor om een bericht pas leesbaar te maken als de auto stil staat, omdat de doelgroep aangaf dat ze het tegenwoordig veel te gevaarlijk vinden dat je kan SMS-en tijdens het rijden.

Hiernaast ziet u twee afbeeldingen. De bovenste afbeelding is pop-up die je te zien krijgt als iemand een bericht stuurt via WhatsApp of SMS. De onderste afbeelding is wat je te zien krijgt als iemand je belt.

Klik op deze link om de rest van mijn onderdeel te bekijken/testen: https://xd.adobe.com/view/788d0427-d773-4297-8335-f14796ba9e70-2dde/

Wat deed ik in dit project?

Onderzoek

Ik kreeg als onderdeel de communicatie. Dit bestond uit bellen, sms-en, een gesprek opnemen/ophangen/muten, etc. Dit had ik kort onderzocht in andere auto’s.

Testen

Ook moest ik mijn onderdeel testen met de doelgroep, zodat ik zeker wist dat het goed werkte.

Prototyping

Ten slotte moest ik per iteratie een prototype maken, die ik d.m.v. testen kon verbeteren.

Wie is de doelgroep nou eigenlijk?

De doelgroep is ‘Bestuurders van 40-60 jaar met minimaal 20 jaar rijervaring.’ Wij hadden deze doelgroep gekozen, omdat jongere bestuurders al gewend zijn aan technologie, en al bekend zijn met infotainment systemen zonder knoppen. Oudere bestuurders rijden ”minder” vaak nieuwere en technischere auto’s, waardoor ze zo een systeem minder snel zullen snappen dan een jongere bestuurder. Wij wilden een infotainment systeem ontwerpen die zou voldoen aan hun wensen, en dus simpeler is om te gebruiken.


Testen maar!

Klik op deze knoppen om er meer over te lezen!

Concept testing & 1-op-1 interview

Mijn eerste test was een concept test met behulp van een paper prototype. Ik koos voor een paper prototype samen met deze test, zodat de respondenten goed op het concept konden oordelen en niet op het uiterlijk. Wat ik wilde testen was de lay-out van het prototype, het concept en de werking van een aantal functies, zodat ik hiermee verder kon met mijn volgende prototype. De methodes die ik in dit onderzoek heb toegepast zijn: een 1-op-1 interview en concept testing. Ik heb de werking van het prototype uiteindelijk niet uitgebreid getest, omdat ik de functies nog niet uitgebreid had getekend. Wat ik wel had getekend heb ik wel getest. Wat ik heb getest waren onder anderen: Van het Startscherm bij het numeriek toetsenbord scherm komen, een oproep aannemen/weigeren, een oproep muten, een persoon toevoegen aan het gesprek en hoe een melding eruit ziet als je deze krijgt.
Ik hield een kort 1-op-1 interview met de respondenten, zodat ik erachter kon komen wat ze van de infotainment systemen van tegenwoordig vinden. Zo kon ik met mijn prototype letten op wat ze wel en niet goed vonden aan het systeem.

Uit de eerste test haalde ik een aantal punten die ik moest aanpassen. Op de vragen kreeg ik veel dezelfde antwoorden. Ze wilden allemaal een spraakbediening. Eén respondent wilde alleen spraakbediening als er een aan- en uitknop voor was. Ook kwam er uit dat ze het meest de bel functie gebruiken en bijna nooit de SMS functie gebruiken (als ze dit deden was het alleen om het even te lezen). 
Bij de concept test konden de respondenten alle icoontjes en functies erg makkelijk vinden.  De pop-up vonden ze te klein, omdat ze bij een melding dan veel moeite moeten doen om te lezen.  Ook kwam merkte ik dat een respondent het lastig vond om het ‘niet storen’ icoontje aan te wijzen, omdat hij geen idee had hoe dit eruit zag. Hierdoor besliste ik om deze te veranderen naar het iPhone icoon in mijn tweede prototype.

Usability test & hardop denken observatie

De tweede test die ik deed was een usability test, bij deze usability test deed ik nog een observatie genaamd ‘hardop denken observatie’. Bij deze test wilde ik erachter komen of de communicatieonderdelen werkten en of alle knoppen, meldingen, etc. op de gewenste plek staan (en de juiste grootte hebben), zodat ik dit in mijn derde en laatste prototype kon gebruiken. 
Als eerst gaven de respondenten feedback over het kleurthema. Ze vonden dat er wat meer kleurcontrast in mocht, omdat het paars, zwarte thema die ik had gekozen te rust gevend was. Ik merkte door de observatie dat ze de sms functie zelden gebruikten, Ze vonden de functie nu wat te uitgebreid en afleidend, dit moest ik in mijn derde prototype anders aanpakken. Mijn originele plan was namelijk dat je een melding kreeg, deze kon openen, en een bericht terug kon sturen door te typen of in te spreken. 

Vergelijkings test & usability test

De derde, en laatste, test endie ik deed waren een vergelijkingstest en een usability test. Mijn team en ik hadden een aantal opties voor de icoontjes en wisten niet precies wat onze doelgroep het duidelijkst, mooist, etc. zou vinden. De eerste A/B test die ik deed was voor alle iconen die we hadden (Zie de afbeelding hieronder). We hadden de iPhone icoontjes nagemaakt in verschillende kleuren en een paar verschillende variaties. Ik had ze allemaal laten zien en vroeg welke ze het beste en duidelijkst vonden. Ze gaven allemaal aan dat ze de apps aan de linkerkant van het scherm het fijnst vonden. Voor de icoontjes koos de meerderheid voor de derde, omdat dit het best te herkennen was. Deze waren namelijk nagemaakt van de telefoon apps, zodat het niet verwarrend zou zijn. 

Uit de usability test kon ik alleen halen dat het duidelijker
moest worden wanner de ‘niet storen’ functie aan of uit stond. 
(De tweede optie voor de iconen is nooit afgemaakt door degene die deze taak kreeg. Mijn excuses hiervoor)


De prototypes

Klik op deze knoppen om er meer over te lezen!

Prototype 1: paper prototype

het allereerste prototype die ik maakte voor dit project was een paper prototype. In iteratie 1 ben ik begonnen met het maken van een flowchart en wireframes. Ik was bewust begonnen met de wireframes, zodat ik daarna de flowchart precies kon uitwerken zoals het eerste prototype ging werken. Het maken van de wireframes maakte ik, omdat dit me een visueel beeld gaf voor mijn paper prototype. En de flowchart gaf me een goed beeld over de werking van mijn prototype, zodat ik het zo functioneel mogelijk kon maken voor de test (hier kunt u over lezen bij test 1).

Prototype 2: clickable prototype

Het tweede prototype die ik maakte was een clickable prototype. Dit was de eerste keer dat ik met Adobe Xd werkte.  Dit prototype bevat een aantal dingen die mijn paper prototype nog niet had. De nieuwe functies zijn een werkende ‘niet storen’ knop, een SMS scherm, een pop-up melding en een werkende mute en speaker knop. De schermen die qua lay-out en functie hetzelfde zijn gebleven, zijn: het scherm dat je ziet tijdens de oproep, het numeriek toetsenbord & contacten scherm, het bluetooth scherm en het scherm tijdens de oproep.  In mijn tweede prototype hield ik rekening met de testresultaten van prototype 1 en de eisen van de opdrachtgever. Wat ik had meegenomen uit de eerste testresultaten ging vooral over de functies die ik nog toe moest voegen.
 
In mijn vorige prototype had ik het Startscherm van communicatie gebaseerd op die van een auto en een beetje op een Android telefoon. Ik merkte dat de doelgroep dit niet echt fijn vond en besloot om het in dit prototype meer op die van IOS te baseren. Ik merkte wel dat ze de Bluetooth functie makkelijk vonden op de manier van prototype 1, daarom heb ik deze in dit en het derde prototype niet veranderd. Dit is een link naar prototype 2 voor een beter beeld: https://xd.adobe.com/view/db3d098c-4797-40a9-b97a-82bb5b9673f5-8e6e/?fullscreen&hints=off  

Prototype 3: clickable prototype

het derde, en laatste, prototype die ik had gemaakt was nog een clickable prototype gemaakt in Adobe Xd. In dit prototype heb ik alle onderdelen uitgebreid verwerkt. Wat ik had meegenomen uit de tweede testresultaten ging vooral over de lay-out van het prototype. Ook had ik beter nagedacht over zo min mogelijk afleiding en hoe ik ze zo min mogelijk hoef te laten klikken om bepaalde functies te gebruiken. Voor dit prototype hadden mijn teamgenoten een styleguide gemaakt met meer kleurcontrast.

Dit prototype vond ik veel beter gelukt dan mijn tweede prototype. Het was veel uitgebreider en had meer functies. Ook had ik een aantal dingen aangepast en toegevoegd van het tweede prototype. Ik had de gehele SMS functie verandert, zodat dit veiliger en minder afleidend werd. Ook had ik de lay-out van een aantal schermen aangepast. Ten slotte had ik het zoeken van contacten makkelijker gemaakt, en had ik een pop-up gemaakt die over bijvoorbeeld navigatie (als deze aanstaat) komt te staan tijdens je oproep. Dit prototype had ik getest met de doelgroep, deze feedback had ik er meteen in verwerkt.
Dit is een link naar mijn 3e prototype voor een beter beeld.: https://xd.adobe.com/view/788d0427-d773-4297-8335-f14796ba9e70-2dde/