Visuele consistentie in apps

De eindgebruikers van je app willen zich op een plezierige manier kunnen verplaatsen door deze app. Een visueel aantrekkelijke lay-out is hierbij van groot belang. Waar plaats je welke informatie? Hoe navigeert de gebruiker zich door je app of website? Tijdens het vak Visual Interface Design worden dit soort vraagstukken behandeld. Ik heb geleerd hoe ik de interface van mijn app coherent en consistent kan maken en heb dit toegepast in de onderstaande eindopdracht.

De eindopdracht

De Openbare Bibliotheek van Amsterdam (ObA) wilt jongeren weer aan het lezen krijgen. Om de jongeren te helpen bij het kiezen van een geschikt boek, wilt de ObA een app ontwikkelen waarmee jongeren op een speelse manier en met behulp van filters een boek kunnen kiezen dat echt bij ze past. Ook is het de bedoeling dat deze jongeren met behulp van de app gemakkelijk nieuwe boeken en genres kunnen ontdekken en reserveren en zo geïnspireerd raken om meer te gaan lezen. Het is ten slotte van belang dat de app goed aansluit op de nieuwe huisstijl die de ObA al enige tijd hanteert.

Het onderzoek

Om meer inzicht te krijgen in de nieuwe huisstijl van de ObA, begon ik mijn ontwerpproces met een stijlonderzoek. Ik ben eerst op zoek gegaan naar alle fonts, kleuren en logo’s die de ObA gebruikt. Vervolgens heb ik hier mijn eigen passende kleuren en iconen aan toegevoegd, zodat de huisstijl in de gehele app consistent blijft.​​​​​​​

Een aantal prototypes en flink wat schetsen later ben ik tot enkele interessante conclusies gekomen. Zo had ik bijvoorbeeld het idee om van de app een one-page-website te maken, maar leek dit op technisch gebied lastig te realiseren. De boekgegevens en overige data moeten immers ingeladen worden en deze laadtijden zijn beter te verbergen achter knoppen. Ook kwam in een test naar voren dat het niet zo prettig was om constant heen en weer te moeten scrollen om keuzes te wijzigen.​​​​​​​​​​​​​​​​​​​​​

Hierdoor besloot ik over te stappen op een meer traditionele navigatie. Omdat ik zelf geen voorstander ben van (kleine) knoppen op smartphone formaat, maak ik in m’n ontwerp vooral gebruik van gestures om door de app te navigeren. Deze zijn naar mijn mening beter geschikt voor een mobiel platform. De paar knoppen die dan wel in m’n interface voorkomen zijn groot en geven duidelijk aan wat de functie achter de knop is, zodat de gebruiker gemakkelijk door de app kan navigeren.​​​​​​​

Het eindproduct

Van de applicatie heb ik een prototype gemaakt, die de belangrijkste stappen van het zoek- en bestelproces toont, met de toegepaste visuele stijl die ik voor ogen had.

Het beginscherm

De gebruiker moet gelijk kunnen zien dat de app van de ObA is. Daarom wilde ik het hoofdscherm zo herkenbaar mogelijk maken. Dit heb ik gedaan door het ObA-logo bovenaan de pagina te zetten en het boek de rode kleur uit de huisstijl te geven. Ook zorgt de mascotte op de cover ervoor dat de app zich onderscheidt van andere apps. ​​

De zoekschermen

De zoekschermen (leeftijdscherm, themascherm, resultatenscherm) wilde ik dezelfde indeling en visuele stijl geven. De knoppen en de content waar uit gekozen kan worden staan, om de consistentie te bevorderen, allemaal op dezelfde plek. Ik ben een groot voorstander van het ‘One Primary Action Per Screen’-principe, waardoor ik er voortdurend op heb gelet dat elke nieuwe keuze (Leeftijd, Thema, Boek kiezen) op een aparte pagina staat. Dit zorgt ervoor dat de gebruiker stapsgewijs op een gemakkelijker manier door het zoekproces kan komen. Om de schermen wat speelser te maken heb ik veel verschillende kleuren gebruikt en heb ik gekozen voor een simpele, maar kindvriendelijke artstyle.

De informatieschermen

De informatieschermen zijn schermen als de boekdetailpagina, bibliotheekdetailpagina en bevestigingspagina. Omdat het nogal een uitdaging is om deze schermen visueel aantrekkelijk te maken heb ik vooral als prioriteit gesteld dat alle informatie duidelijk is en de navigatie gelijk is aan de andere schermen op de app. Om de informatie dan toch wat speelser te brengen, heb ik een boek-aesthetic gebruikt, zodat de schermen herkenbaar zijn en niet enkel een saai lijstje aan informatie bevatten. ​​​​​​​

Het bevestigingsscherm

Op het bevestigingsscherm wordt de gebruiker op de hoogte gebracht van zijn voltooide reservering en kan hij terugkeren naar het hoofdscherm. Om de ‘vicieuze cirkel’ van de app rond te maken, leek het me gepast om dit scherm dezelfde stijl te geven als het welkomstscherm.

Reacties zijn gesloten.

Blog op WordPress.com.

Omhoog ↑