1
Inhoudsopgave Inleiding Geinterviewde persoon 1e Ontwerp - Zoeksuggesties Probleem Oplossing 2e Ontwerp - Lijst van producten in Kavel Probleem Oplossing 3e Ontwerp - Opslaan knop Probleem Oplossing 4e Ontwerp - Direct bieden Probleem Oplossing Wireflow 2 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Inleiding Dit is een ontwerpdocument voor de webapp van BVA auction. In dit document kaart ik, doormiddel van jobstories, een gehouden interview en een mentaal model, 4 problemen aan. Per probleem ga ik doormiddel van patronen, en rekening houdend met de mentaal model, opzoek naar oplossingen voor het probleem. Achterin het document vind je een wireflow waarin de oplossingen en werking achter elkaar staan en met elkaar verbonden zijn. Dit document is gemaakt voor het vak Models & Processes. Geinterviewde persoon Sandra (22 jaar) Studente PABO aan de Marnix Sandra is een PABO studente aan de Marnix in Utrecht. Ze is in bezit van een iphone en ze surft gemiddeld 1 uur per dag via haar mobiel op het web. 2
Zoekopdracht suggesties Als ik een zoekopdracht uitvoer, wil ik de resultaten kunnen zien, zodat ik een specifiek product kan vinden. 3
Huidige situatie Patronen Facebook Google Zoeken Spotify Vragen aan gebruiker Je zoekt in de BVA app een specifiek product. Hoe zou je hier naar opzoek gaan en hoe zou je de resultaten willen ontvangen? Ik vul rechtsboven in de zoekbalk in wat ik wil vinden. Wanneer ik begin met typen ontvang ik suggesties van de app. Zoals Google en Facebook dat doen. Waarom ontvang je suggesties? Dit maakt mijn zoekopdracht gemakkelijk. Soms weet je niet precies waar je naar opzoek bent en dan type je een trefwoord in. Dan krijg je vaak toch meer het specifieke waarnaar je opzoek bent. Al staat het er niet tussen druk ik op enter. Hoe zou je de zoekresultaten willen ontvangen? Niet in een lijstje met veel tekst. Ik vind een lijst niet zo overzichtelijk. Je moet er ook zolang doorheen scrollen. Ik zie me producten liever naast elkaar. Hoe zie je dat voor? Een beetje als de H&M app. Je ziet daar telkens 3 afbeeldingen naast elkaar, met daarbij en prijs. Als je dan op de foto klikt krijg je meer informatie over het product. De zoeksuggestie geeft een foto, De zoeksuggestie geeft woorden De zoeksuggestie geeft 1 top artiest naam en korte beschrijving van de en zinnen gebaseerd op jouw en artiesten gebaseerd op jouw persoon. kernwoorden. kernwoorden. Mentale model gebruiker Gekozen oplossingsrichting De gebruiker verwacht dat er een zoekbalk recht bovenin het hoofdscherm van de app staat. Wanneer ze daarin begint te typen verwacht ze dat er automatisch relevante suggesties worden getoond. Wanneer ze die niet ziet en op enter klikt wilt ze een lijst met alle zoekresultaten. Het Probleem De gebruiker wilt zoeksuggesties krijgen wanneer ze begint met typen. Verschil tussen de oplossingen De Facebook en Spotify suggesties zijn meer visueel ingesteld. Ze nemen het hele scherm in plaats van een dropdown menu te laten zien, zoals Google doet. Facebook geeft meer resultaten dan Spotify, maar spotify geeft de optie om er gelijk wat mee te doen (de 3 puntjes). Gekozen oplossing Er is gekozen voor de Facebook oplossing. Het is visueler en je krijgt meer suggesties terug, waardoor de gebruiker sneller haar resultaat vind wanneer ze trefwoorden invoert. 4
Nieuw ontwerp van zoek suggesties Gekozen LoFi Ontwerp A Dit ontwerp is meer gefocust op de tekst van een zoeksuggestie. Dit ontwerp komt overeen met dat van Facebook. Een afbeelding links. Daarnaast een titel met daaronder hoe lang de veiling nog open is of hoe lang het nog duurt voordat die open gaat. Rechtsboven in de kaders vind je de huidige bod. Het witten vlak onder is waar het toetsenboord van de OS zich bevind. Ontwerp B Dit ontwerp is meer gefocust op de foto s. De gebruiker gaf aan geen tekst persoon te zijn. De tekst staat daarintegen wel krapper op elkaar. Het witten vlak onder is waar het toetsenboord van de OS zich bevind. structureel niveau Verschil tussen de oplossingen De verschillen van de ontwerpen ligt hem in de focus. De eerste richt zich meer op de tekst en tweede op de foto. Ook zitten er bij de tweede 2 resultaten naast elkaar in plaats van dat een resultaat de gehele breedte inneemt en is er ruimte voor meer resultaten. Gekozen oplossing De keuze ligt bij ontwerp B. De gebruiker gaf zich meer aangetrokken te voelen tot foto s van het product. Hierdoor ontstaat er wel een gebrek aan ruimte. De tijd is ingekort tot een icoon met het aantal uur en minuten of dagen. Wanneer de veiling dicht is heeft het vlak een grijze achtergrond. Het dronker grijze vlak onder is waar het toetsenboord van de OS zich bevind. 5
Lijst van producten in kavel Als ik een specifieke kavel heb gevonden, wil ik alle details kunnen bekijken, zodat ik een keuze kan maken of deze kavel interessant voor mij is. 6
Huidige situatie Patronen H&M Uitbieding.nl Google Play Vragen aan gebruiker Je hebt het specifieke kavel gevonden en wilt hier meer over weten. Hoe kom je achter meer informatie over de kavel? Door op de kavel te klikken. Dat je dan foto s ziet van de producten met titel en laatste bod. Hoe zie je die pagina voor je? De titel, omschrijving en hoe lang de kavel nog open blijf bovenin. De producten weer een beetje als de H&M app. Telkens 3 foto s naast elkaar met de prijs en titel. Ook is het handig als je ziet op welke product je al geboden hebt of opgeslagen is. Als je dan op de foto klikt ga je verder. Waarom zo? Foto s herken je beter en ga je dus ook snel doorheen. Als een foto onduidelijk is kijk je toch snel naar de titel. Ook wil je snel kunnen zien of een kavel is opgeslagen of dat jij er al op geboden hebt, zodat je aandacht daar niet blijft hangen. En de laatste bod? Ook erbij. Als een product jouw aandacht trekt wil je toch snel weten hoeveel het je gaat kosten. Uit die informatie bepaal je of je dan verder klikt. 3 foto s met prijs elegant naast 3 foto s met label (nieuw), countdown, 3 foto s met titel, prijs en opties in elkaar. Het overbodige weggelaten. titel, omschrijving, waarde, huidige bod een kader naast elkaar. en button in een kader naast elkaar. Mentale model gebruiker Gekozen oplossingsrichting De gebruiker klinkt op de kavel (het gehele blok). Op deze pagina vind ze meer informatie over de kavel: De titel, beschrijving, wanneer de veiling open gaat of sluit en de producten die zich daarin bevinden. Ze kan snel door de producten heen, doordat ze alleen de benodigde informatie (foto, titel, laatste bod en of de product al is opgeslagen) bevatten. De producten staan onder elkaar in rijen met op elke rij 3 producten, waarbij de foto s het meest opvalt. Het Probleem De gebruiker wilt de producten in de kavels overzichtelijker en visueler hebben en niet de producten als lange lijsten onder elkaar hebben staan. Verschil tussen de oplossingen Uitbieding.nl geeft teveel onnodige informatie (label, waarde, button) en is daarom te druk. Wel bieden hun een countdown en prijs wat de gebruiker belangrijk vind. Google Play en Uitbieding.nl plaatsen de informatie in een kader. H&M maakt het heel minimalistisch door zelfs de titel weg te laten. Gekozen oplossing De keuze gaat naar een combinatie van uitbieding. nl en H&M. De gebruiker gaf aan de foto, titel, countdown en prijs belangrijk te vinden. De manier waarop H&M het aanbood vond ze weer aantrekkelijk. Ontwerper: Ted Godyla Studentennummer: 500685196 Klas 7
Nieuw ontwerp van productenlijst Gekozen LoFi structureel niveau Verschil tussen de oplossingen Het verschil in de ontwerpen ligt in de plaats van de tijd en huidige bod. Gekozen oplossing De keuze ligt bij ontwerp A. De gebruiker gaf aan de H&M website oplossing fijn te vinden. De tekst onder de afbeelding wordt echter wel erg krap, omdat de gebruiker ook aangaf meer informatie bij het product te willen dan de H&M website heeft. Daarom is er gekozen om 2 blokken naast elkaar te doen inplaats van 3. Ontwerp A Dit ontwerp lijkt erg op het ontwerp van de H&M website. Een simpele afbeelding met daaronder de titel, prijs en tijd. Aangezien dit de zoekresultaten staan kun je rechtsboven snel wel een andere zoekopdracht invullen. Ontwerp B In dit ontwerp wordt de tijd en huidige bod over de afbeelding geplaats. Dit is gedaan om meer ruimte te bieden voor de titel. Aangezien dit de zoekresultaten staan kun je rechtsboven snel wel een andere zoekopdracht invullen. 8
Opslaan knop Als ik een interessante kavel heb gevonden, wil ik het kunnen opslaan, zodat ik het makkelijk terug kan vinden en op de hoogte van blijf van de start van de veiling. 9
Huidige situatie Patronen Troostwijk veilingen Play Kiosk Spotify Vragen aan gebruiker Je wilt een kavel opslaan, zodat je deze kunt terug vinden en op de hoogte kan blijven van de start van de veiling. Hoe zou je dat doen? Ik neem aan dat je hiervoor een account moet hebben. Ik zou op winkelwagentje klikken als in opslaan. Dan komt het in je opslag box te staan tussen al je opgeslagen veilingen. Waarom een winkelwagentje? Ik noemde het wel een winkelwagentje, maar het is gewoon een opslaan knop. Met een icoontje dat duidelijk maakt dat je de kavel opslaat (misschien een floppie). Of een grote groenen button ergens rechts. Als het maar opvalt. Wat moet er gebeuren als je op de knop klikt? Deze veilig is opgeslagen. Dan gaat die weg en ga je terug naar waar je gebleven was (zelfde positie). Waarom dat? Je wilt toch weten of het gelukt is met het opslaan. Als je daarna weer terug gaat kan je ook snel weer verder zoeken naar andere producten. Het opslaan knop is een kleine en Het opslaan knop is een kleine icoon Het opslaan knop is een combinatie duidelijke icoon (ster) die zich een (bladwijzer met plus) die zich op de een icoon (plus) en tekst (opslaan) beetje op de achtergrond bevind. voorgrond bevind. die zich onder opties bevind. Mentale model gebruiker Gekozen oplossingsrichting De gebruiker gaat er vanuit een account nodig te hebben. Wanneer ze een interessante kavel ziet druk ze op een opvallende knop met een icoontje die duidelijk maakt dat de kavel wordt opgeslagen. Ze krijgt dan een melding dat de kavel is opgeslagen en gaat dan terug naar de lijst met producten. Het Probleem De gebruiker wilt een makkelijk te herkennen opslaanknop. Verschil tussen de oplossingen Troostwijk gebruikt een bekend favorieten icoon die waaraan ze ook een pagina gekoppeld hebben. Play Kiosk en Spotify maken gebruik van een plus. Play Kiosk kiest voor een bladwijzer (misschien omdat het over boeken gaat) en Spotify maakt het duidelijk met een woord erbij. Gekozen oplossing De keuze gaat naar de manier van Troostwijk. Een icoon die ook gebruikt wordt als pagina icoon. We richten ons op terugkomende gebruikers, dus de knop kan zich meer op de achtergrond bevinden. 10
Nieuw ontwerp voor de opslaan knop Gekozen LoFi structureel niveau Verschil tussen de oplossingen Het verschil in de ontwerpen ligt in de plek van de opslaan knop. Ook is er in ontwerp A een slider te zien en staat de tekst in tabellen. Gekozen oplossing De keuze ligt bij ontwerp A. De gebruikers komen vaker op de app. Daarom is het prima als de opslaan knop wat minder opvalt. Wanneer de icoon van de opslaan knop ook aan de pagina voor opgeslagen kavels komt te hangen is het voor de gebruiker duidelijk wat de knop doet. Ontwerp A Hier is gekozen om de opslaan knop rechts boven te stoppen zoals troostwijk veilingen doet. De knop bevind zich meer op de achtergrond op de content van de pagina meer centraal te stellen. Ontwerp B Hier is er gekozen om de opslaan knop beter in beeld te zetten. Met de tekst opslaan moet het nog duidelijker zijn wat je met de knop doet. 11
Direct bieden Als de veiling open gaat, wil ik op het product kunnen bieden, zodat ik het product koop. 12
Huidige situatie Patronen Vakantieveiling app Bijdeveiling.nl Uitbieding.nl Vragen aan gebruiker Een veiling gaat open en je wilt op een product bieden. Hoe zou je dit doen? Ik moet nu heel erg aan vakantie veiling denken. Wanneer de veiling start vul je een bedrag in, druk je op enter en je hebt geboden. Hoe ziet die pagina eruit? Je ziet een lijst met de foto en naam van de kavel en met recht een countdown ding met wanneer die gaat starten. Klik je op de naam van de kavel of op een knop bied nu klikt dan ga je naar die pagina van die kavel. Daar kan je dan bieden. Waarom moet je daar bieden? Omdat als je er heen gaat je kunt zien wat er als laatst geboden is. Maar direct in de opslag box is eigenlijk beter. Waarom dat? Dan hoef je minder stappen te doen, kost minder tijd en je kunt sneller je lijst afgaan omdat er misschien wel meerdere op hetzelfde moment starten. Je vult een bedrag in bij jouw bod Je vult een bedrag in bij jouw bod Je drukt op +1 op direct 1 euro meer te (label met inputveld) en drukt op (inputveld met placeholder) en drukt bieden of vult een bedrag in bij Uw bod Plaats bod! of op de enter toets. op Bied mee of op de enter toets. hier (placeholder) en drukt op Bied mee!. Mentale model gebruiker Gekozen oplossingsrichting De gebruiker ziet de opslag box als een lijst met opgeslagen kavels met daarin een countdown (hoe lang het duurt voordat de veiling start of stopt) en de laatste bod (indien de veiling is gestart). Je kunt direct vanaf hier een bod uitbrengen op de kavel. Het Probleem De gebruiker wilt vanaf de pagina met opgeslagen producten/kavels direct kunnen bieden op een kavel Bijdeveiling.nl en Uitbieding.nl kiezen voor de tekst Bied mee en gebruiken een placeholder bij de inputveld. Vakantieveiling kiest voor Plaats bod en een label. Vakantieveiling en Bijdeveiling.nl kiezen voor een oranje knop en uitbieding.nl geel. Uitbieding.nl biedt nog een optie om 1 euro meer te bieden dan de voorganger. Gekozen oplossing De keuze gaat naar de oplossing van kamerveiling. Plaats bod geeft minder het idee van een groepsactiviteit en kansspel. Een oranje knop past bij BVA en geeft over het algemeen de hoogste conversie. Alleen de label plaats bod is overbodig. Ontwerper: Ted Godyla Studentennummer: 500685196 Klas 13
Nieuw ontwerp voor direct bieden Gekozen LoFi structureel niveau Verschil tussen de oplossingen Ontwerp A focust meer op tekst. Ontwerp B meer op de foto. Gekozen oplossing De keuze ligt bij ontwerp B. Dit ontwerp is meer consistent in vergelijking met de andere detail schetsen. Dit komt omdat hier ook weer de focus ligt op foto s. Hierdoor is er wel minder ruimte. Net als bij de zoekopdracht wordt nu aangegeven met de achtergrond kleur of een veiling open is of niet. Ontwerp A Dit ontwerp is gefocust op tekst. In de knop voor bieden staat Plaats bod. De afbeelding is klein om meer ruimte te bieden aan de titel, tijd en huidige bod. Het minimum voor het nieuwe bod staat al ingevuld in de inputveld. Ontwerp B In dit ontwerp is weer gekeken naar de vraag van de gebruiker om foto s meer naar voren te laten komen. Er staan nu 2 blokken naast elkaar. De ruimte voor tekst is hierdoor kleiner. In plaats van een button met tekst is er gekozen voor een icoontje. 14
Wireflow 15
Pagina s Zoeken zoekresultaten Kavel overzicht Product Home Mijn kavels Wireflow Mijn opgeslagen kavels Beginnen met typen Product opgeslagen Menu uitgeklapt Bedrag intypen Zoeksugesties Bedrag geboden States Ted Godyla 500685196 16