De opdracht was om een Ipad interface te ontwerpen voor De Bibliotheek die ervoor zou zorgen dat middelbare scholieren worden aangemoedigd om boeken te selecteren (en uiteindelijk te lezen) door technieken zoals wishlists, animaties en duidelijke navigatie toe te passen.
Om een beter beeld te krijgen van de doelgroep ben ik begonnen met het maken van een moodboard. Dit zou ervoor zorgen dat ik met de juiste mindset kon gaan schetsen.
Ook het stijlonderzoek behoorde tot de voorbereiding. Met dit onderzoek wilde ik voor mezelf op een rijtje zetten wat De Bibliotheek nou De Bibliotheek maakt en niet een andere bibliotheek zoals OBA.
Met de verschillende schetsen was het ook een kwestie van testen welke vormen het beste zouden werken. Uit mijn moodboard was gebleken dat middelbare scholieren erg veel verschillende prikkels krijgen en steeds meer moeite hebben met concentreren op 1 ding. Hoewel het dus leuk zou zijn om de informatie als een boek te presenteren, zou het waarschijnlijk de doelgroep niet bereiken. Hierdoor moest ik dus voor een oplossing gaan die zo min mogelijk tekst gebruikt.
Die hoeveelheid tekst werd ook getest met schetsen van alle andere schermen. Hiermee kon ik ook meteen layouts vormgeven.
Nog meer variaties van de schermen, waarmee ik met consistente vormgeving de gebruiker door het hele proces wil begeleiden.
Na de schermschetsen begon ik met het schetsen van een mogelijke animatie om de interactie soepeler te maken en de acties die de gebruiker uitvoert duidelijker maakt. In dit geval is het de wenslijst-functie, waarmee de gebruiker een boek kan opslaan om later te lezen.
Na de schetsen op papier werd het tijd voor de digitale schetsen, waarmee ik ook kleur en afbeeldingen kon gebruiken. Daarnaast zouden de afmetingen met deze schetsen getest kunnen worden.
Een andere digitale schets om het hoofdmenu te testen. Deze layout is met de grote afbeelding aantrekkelijker, maar er was nog wel een kleine verbetering mogelijk. De kijklijnen van de mensen op de foto kijken namelijk niet naar het vak wat aangeeft hoe de gebruiker verder kan komen in het proces. In de volgende schets had ik dit dus verbeterd.
Bij dit scherm heb ik een foto gekozen waarbij iemand een bepaalde richting op kijkt. Daarna heb ik het zo geplaatst dat het lijkt alsof het meisje naar de tekst kijkt om verder te gaan in het proces.
Na de schetsen op papier en de digitale schetsen kwam het uitwerkproces, waarbij ik alle schermen digitaal heb uitgewerkt en in een prototype heb geplaatst.
Omdat De Bibliotheek een enorme database aan boeken heeft heb ik een filterfunctie toegvoegd zodat de gebruiker zijn/haar voorkeuren kan doorgeven. Mocht de filter moeten worden aangepast, dan is dat mogelijk met een duidelijke oranje knop aan de linkerkant.
Ook de sorteerfunctie is overzichtelijk en altijd bereikbaar om interactie zo snel mogelijk te laten verlopen. Rechtsboven staat de knop voor de Wishlist met een notifcatie om aan te duiden dat er iets achter de knop schuilt en er interactie nodig is om dat scherm te openen.
Het detailscherm, met nogmaals duidelijke oranje knoppen om de mogelijke acties direct aan te geven. Om de gebruiker niet met tekst te bombarderen heb ik de rest verstopt achter een kleine "lees meer" knop. Dit laat het intiatief en het scanvermogen aan de gebruiker.
Een scherm dat de loading state toont om de gebruiker op de hoogte te houden van het proces. De tekst geeft ook aan wat er achter de schermen gebeurt zodat de gebruiker zich geen zorgen hoeft te maken.
Een scherm dat de error state toont. Door duidelijk te vertellen wat er is misgegaan en de gebruiker maar 1 mogelijke actie te geven wordt het proces wel onderbroken, maar ook weer snel verder begeleidt.