Ontwerpen van een niet-web beleving

Transcriptie

1 Ontwerpen van een niet-web beleving Namen: Klas: Han van de Werken, Michel de Leef, Koen Gorissen DCMD2

2 Inhoud Deelopdracht 1 Analyse apps... 3 Door: Koen Gorissen... 3 Door: Han van de Werken... 6 Door: Michel de Leef... 8 Deelopdracht 2 - Functioneel ontwerp Deelopdracht 3 - Testplan bruikbaarheidsonderzoek Deelopdracht 4 - Reflectie Koen Gorissen Han van de Werken Michel de Leef... 19

3 Deelopdracht 1 Analyse apps Door: Koen Gorissen Iphone Navigon Meest waarschijnlijke gebruikscontext De gebruiker zal deze app voornamelijk gebruiken om te navigeren. De voornaamste context is dan ook buiten: te voet, te fiets of in de auto. Dit betekent dat de gebruiker minimale tactiele interactie met de app zal kunnen hebben. Want, laten we eerlijk zijn, een route intoetsen tijdens het autorijden moet de veiligheid niet in het gedrang brengen. Het scherm moet veel informatie kunnen verschaffen, omdat van scherm wisselen tijdens het navigeren niet wenselijk is. Daarbij moeten de iconen voor de gebruiker makkelijk te herkennen zijn. Gebruikers hebben te voet wat meer mogelijkheden om van scherm te wisselen of informatie in te toetsen, maar de app is ontworpen voor het meest waarschijnlijke. Meest waarschijnlijke gebruiksscenario 1. De gebruiker stapt in de auto en plaatst de iphone in de autohouder. 2. De gebruiker start Navigon. 3. De gebruiker toetst een locatie in op de iphone om naartoe te rijden. 4. De gebruiker navigeert d.m.v. de applicatie en krijgt de nodige informatie. 5. De gebruiker sluit Navigon en pak de iphone uit de autohouder.

4 Waarom de applicatie op deze manier is ontworpen De applicatie maakt gebruik van grote knoppen voor de belangrijkste functies. Tijdens het autorijden heb je als gebruiker geen grote nauwkeurigheid met je vinger, waardoor grote knoppen ideaal zijn. Daarbij is het aantal functies en dus de keuzemogelijkheden in een dergelijk scherm beperkt. Geavanceerde functies worden kleiner weergegeven, omdat ze niet tot de kernfunctionaliteiten behoren op de bewuste stap van het scenario. Het navigeerscherm bevat genoeg informatie om de gebruiker op dat moment te helpen met navigeren. Het merendeel van het scherm Aanvullende informatie kan gevonden worden vanuit opties, maar dit is geen informatie vereist voor het navigeren. Tijdens het autorijden ziet de gebruiker waar hij zich bevindt, wat de volgende stap is en de maximale snelheid op de desbetreffende weg. De gebruiker kan extra informatie oproepen, maar deze functies staan de gebruiker het navigeren niet in de weg.

5 Windows Mobile - Buienradar Meest waarschijnlijke gebruikscontext De gebruiker zal deze app maar kort gebruiken, omdat het geen andere functionaliteit biedt dan het bekijken van het weer/de weersverwachting. Voor mensen die veel buiten zijn is het gebruik wel regelmatiger, maar per bezoek van korte duur. Informatie zal eenvoudig en overzichtelijk weergegeven moeten worden. Meest waarschijnlijke gebruiksscenario 1. De gebruiker pakt zijn Windows Mobile Phone en start de Buienradar. 2. De gebruiker is benieuwd waar momenteel de buien hangen en zoekt deze informatie op. 3. De gebruiker sluit Buienradar. Waarom de applicatie op deze manier is ontworpen Het merendeel van het scherm wordt ingenomen door het belangrijkste stuk informatie: de radar. Onderaan het scherm kan de gebruiker kiezen voor een andere radar: bijv. buiten in Europa. De applicatie bevat maar een paar knoppen en is bedoeld om de gebruiker snel van informatie te voorzien.

6 Door: Han van de Werken Nu.nl gebruikerscontext in een drukke wereld waarin afspraken zich afwisselen met deadlines heb je geen moment de tijd om het nieuws in de gaten te houden. NuApp geeft de mogelijkheid om binnen enkele tellen een overzicht te krijgen van het laatste nieuws op je mobiel. Heb je een paar tellen meer kan je 1 of 2 artikelen lezen. En de wereld neemt je weer mee naar de volgende afspraak. gebruiksscenario Maandagochtend vroeg stapt Elke naar het station vanuit haar huis. Ze heeft een druk weekend achter de rug. Stappen en vrienden ontmoeten hebben zich daarin afgewisseld. Op weg naar haar werk wil ze nu de laatste nieuws feiten even snel doornemen voordat ze op de werk komt. Ze moet nog 2 minuten wachten op haar trein en dat moment heeft ze de tijd om de eerste drie headlines te lezen. Ingestapt heeft ze geen zitplaatsje kunnen bemachtigen. Maar dat is geen ramp het is maar 10 minuten naar haar bestemming. Met 1 druk op de knop komt ze terug in de nu.nl app en leest verder waar ze gebleven was. De headlines waren doorgenomen en neemt nu de tijd om de laatste roddels te lezen. Ze wil mee kunnen praten als ze koffie gaat halen dadelijk. Uitgestapt is het 5 minuten lopen en heeft ze haar eerste meeting. Zelfverzekerd en helemaal op de hoogte stapt ze het kantoor binnen. whatsapp gebruikerscontext De gebruiker heeft vele vrienden en kennis waarmee hij verschillende gesprekken voert. Whatsapp bied de mogelijkheid om persoonlijke gesprekken te voeren door de dag heen. Je bent niet meer beperkt tot een tijdstip plaats of omgeving. De gehele dag door praat je met je vrienden. gebruiksscenario 12uur.: Niek loopt naar de kantine en kijkt even op whatsapp of 1 van zijn lopende gesprekken is aangevuld door 1 van zijn vrienden. Hij leest zich door de verschillende reply s heen en betaald zijn lunch tussen door. Aan zijn lunch spreekt hij live met wat collegas en gaat daarna roken. Alleen in de kou geeft hij antwoord op verschillende vrienden via whatsapp. Hij merkt dat 1 van zijn vrienden ook online is en hij chat daar even mee. Kaarten gebruikerscontext De gebruiker is in een nieuwe omgeving of gaat naar een nieuwe omgeving. Het enige wat hij ter handen heeft is zijn mobiele telefoon. De mensen om hem heen spreken misschien niet eens zijn taal. Kaarten geeft de mogelijkheid om je weg te vinden waar je je ook bevind in de wereld. gebruiksscenario Aangekomen in Oslo is Ilse gelijk op de bus naar bergen gestapt. In die stad zou ze haar vriendin ontmoeten die daar sinds een paar maanden werkt. Halverwege de rit krijgt ze een telefoontje dat haar vriendin die dag moet overwerken en dat ze zelf de weg naar haar appartement moet vinden. Bij de receptie weten ze ervan en kan ze de sleutel ophalen. Ilse krijgt instructies hoe ze moet lopen en waar ze op moet letten. Eigenlijk weet ze al dat ze haar instructies niet zal gebruiken. Kaarten zal haar leiden tot waar ze moet zijn. Aangekomen start ze de app op en toont haar waar ze is. Ze zoekt op het adres van haar vriendin en laat de route berekenen. De app dirigeert haar nu stap voor stap naar het appartement. Nog sneller dan verwacht staat ze voor de deur.

7 Nu.nl als de gebruiker de app opent ziet hij wat hij zoekt, het laatste nieuws. omlaag voor meer nieuws. de gebruiker krijg dus snel het laatste nieuws te zien. hij krijgt de mogelijkheid om even snel een stukje nieuws te lezen en weer verder te gaan om later weer terug te komen. Wat dan weer handig is, is dat nu.nl onthoud waar de gebruiker is gebleven. Zo kan de gebruiker doorlezen waar hij eerder begonnen is. bijzaak zijn de opties die meer nieuws bieden. whatsapp Whatsapp is er op gericht om de gebruiker SMSgesprekken te laten voeren met zijn vrienden. favorieten leid tot een lijst met vrienden die whatsapp al hebben. Daar kan je een nieuw gesprek mee aangaan. status daar kan je je eigenstatus invullen, ben je wel of niet in staat om een gesprek aan te gaan. contacten daar kan je andere vrienden uitnodigen om whatsapp te gebruiken. chats daaronder worden de gesprekken gevoerd de ontwerpers hebben rekening gehouden met de gebruikerscontext d.m.v. het makkelijk terug lezen van de gesprekken. wanneer je de app verlaat onthoud hij waar de gebruiker is gebleven. de gebruiker kan zonder moeite continue tussendoor een gesprek voeren met 1 of meerdere vrienden. Kaarten ook deze app opent met de kern belofte: waar de gebruiker is. dankzij de twee knoppen. kan je locaties zoeken en routes berekenen. opties zijn verstopt onder een unieke knop, maar die zijn dan ook niet belangrijk voor de kernbelofte. het mooiste aan kaarten is dat hij je inzicht geeft over waar je bent. verander je van positie dan laat kaarten dit ook zien. daarnaast houd hij rekening met de gebruikerscontext doordat de app vooral veel overzicht wil bieden. zoveel mogelijk ruimte geven aan de kaart en beperkte kleine ruimte die gegeven wordt aan knoppen.

8 Door: Michel de Leef De Opdracht: Wat is de meest waarschijnlijke gebruikscontext voor deze app? Geef in grote lijnen het meest waarschijnlijke gebruiksscenario weer. Leg uit aan de hand van context en scenario waarom de app op deze manier is ontworpen. Waaraan in het interface herken je dit scenario? Op welke manier is er in het app ontwerp rekening gehouden met de gebruikscontext? MICHEL DE LEEF DCMD02

9 1. Gebruikerscontext Facebook Facebook is een applicatie die dezelfde functionaliteiten bied als de website. Hier is het grote doel het online socializen met je vrienden, nieuwe mensen leren kennen of oude contacten herstellen. Ook is het gebruikelijk om dingen te delen. Van websites, blogposts tot muziek op YouTube en foto s vanuit je foto album. De meeste gebruikelijk: Het meeste gebruikelijke is dat je iets wil mededelen aan je vriendenlijst wat je bent tegen gekomen of hun wil laten weten. Dit kan verschillen van wat je aan het doen bent tot een mooie foto die je net gemaakt hebt. 2. Gebruiksscenario De gebruiker loopt op straat en wil snel iets delen met zijn vrienden. De gebruiker heeft vanavond nog geen plannen en wil graag zien of ze vrienden al wat hebben. De gebruiker zit in de trein en zoekt even naar wat vermaakt tussen de posts van zijn vrienden. 3. Is het ontwerp correct? De header heeft een standaard layout met een knop naar het hoofdmenu en de andere naar de belangrijkste geziende functie, de live feed waar alle updates van vrienden binnenkomen. Onder de header staat 2 button (shortcuts) die zoals aangegeven naar de foto s en naar een menu gaan om je eigen status snel te wijzigen.

10 Rechts het Live Feed menu. Deze geeft een snelle in de posts en mededelingen van je vrienden. Wat hier opvalt dat ze veel informatie weergeven maar dat dit wel volledig past in de app. Dezelfde header is hier te vinden en ook dezelfde snelkoppelingen. Door op het wolkje links te klikken kan je net zoals dat je snel je status kan wijzigen hier een snelle reactie geven op wat je vrienden hier mededelen. Ook is te zien dat de foto s netjes worden aangepast op de grote van je scherm. De thumbnails staan netjes in de lijn van de tekst en je zal er niet per ongeluk op drukken. Wanneer er comments zijn gegeven kan je deze ook makkelijk lezen door op de blauwe banner te drukken die je dan een volgend scherm laat zien waar de post en de comments netjes onder elkaar zijn gesorteerd. Wanneer we in de header op de knop drukken. Verschijnt het scherm hier links. Deze is totaal gericht op de mobiele gebruiker. Je kan hier snel via de shortcuts naar andere delen van de Facebook app. Ook krijg je de nodige informatie toegestuurd in de onderstaande balk. De header is hier wel gewijzigd. Vanuit hier kan je naar je account gegevens en geven ze de mogelijkheid om meer shortcuts toe te voegen aan deze pagina. Eigenlijk is dit een mooie copy van het wel bekende iphone menu. Die dezelfde layout heeft en ook de mogelijkheid bied om hier nieuwe app/shorts op toe te voegen. Ook is hier een zoekfunctie te vinden. De facebook app is wel degelijk gericht op de gebruikers context. Door gebruik te maken van iconen die veel vertellen en die ook op de normale desktop website terug te vinden zijn, hebben ze een overzichtelijk en herkenbare layout gecreëerd. Door gebruik te maken van het facebook blauw met hier op mededelingen in het wit en rood zie t de gebruiker meteen de belangrijkste nieuwtjes die ze moeten weten. Een herkenbare layout en een header die zoveel mogelijk hetzelfde blijft zijn ook eisen voor een gebruiker die graag even wil lezen wat er te doen is en ook graag zijn status wil delen met de rest van de wereld.

11 1.Gebruikerscontext SoundHound Stel, je bent lekker aan het werk op je bureau, de radio staat aan en er komt net een lekker flitsend nummer voorbij. Normaal zou je al je collega s navragen of de teksten onthouden die je hebt gehoord zodat je thuis opzoek kan gaan naar het nummer. Of nog erger je komt aan bij de Free Record Shop met de vraag ik ben opzoek naar dat nummer met die triangels en die onwijs hoog zingende vrouw. Soundhound is een app die je hierbij helpt, deze kan doormiddel van een stuk van een nummer, het neuriën van een nummer, intikken van de titel of artiest of zelfs het zingen van een nummer, in de microfoon van de iphone (of Android) telefoon het nummer herkennen. Wat al de vorige rompslomp achter zich laat. 2. Gebruikerscenario De gebruiker is in de buurt van een radio De gebruiker zit TV te kijken De gebruiker staat op een feestje (werkt niet bij live muziek) De gebruiker luistert muziek via de applicatie 3. Is het ontwerp correct? Op de hoofdpagina van SoundHound valt de grote Tap Here button meteen op. Oftewel een transient posture. Felle kleuren, veel contrast, duidelijke buttons. Het tweede wat opvalt zijn de cardstack buttons onderaan de app. Deze geven de andere pagina s weer van de applicatie. Zo is er een History, What s Hot, Upgrade to Pro en Now Playing pagina. Waar de laatste niet anders is als de ipod app. Het history gedeelte laat een lijst zien met wat je via SoundHound hebt gevonden. Netjes op datum gesorteerd. Het vreemde is dat opeens de onderstaande cardstack is verdwenen en er een SoundHound button bij is gekomen (rechtsboven) die is een button die je te alle tijde kan gebruiken om terug te keren naar het hoofdscherm en zullen we ook vaker zien (in de andere schermen). Via de buttons rondom de history (nummers) kan je meerdere kanten op. De rechter (soundhound logo) kan je het nummer kopen op itunes. Door het rechtergedeelte te klikken kan je meer informatie over je spot vinden. Locatie waar je hem hebt gespot plus de rest van de nummer die je daar hebt gespot. Jammer genoeg is er alleen niet duidelijk gemaakt wat welke button nu precies doet. Ook is het vreemd dat ze opeens overstappen van een cardstack menu naar een bar aan de bovenkant van het scherm.

12 Het scherm What s Hot is heel makkelijk gezegd een kopie van het History scherm. Dit laat zien wat er op dit moment Hot is om te vinden via SoundHound op te vragen. Een leuke toevoeging maar zelf denk ik dat dit de minst gebruikte feature is. Ook wat overbodig omdat dit geen Top 40 app is maar iets om meer informatie te krijgen app is. Wat wel opvalt in het What;s Hot scherm is dat de rechter vlakken bij de nummer in tegenstelling tot het History scherm opeens wel uitleg hebben gekregen. Dit maakt het vlak opeens meer bruikbaar, maar heeft de keerzijde dat het scherm erg vol overkomt. Het Now Playing scherm heeft dezelfde look (als ik al eerder zei) als de ipod. Alleen gedoopt in een sausje genaamd SoundHound. Dezelfde oranje tinten komen terug en ook zien we de bekende bar aan de bovenkant. De knoppen spreken hier voor zichzelf. Weinig onderscheidend van andere players. Ook deze functie voegt naar mijn mening weinig toe doordat je vaak al weet welk nummer je al afspeelt. Wel kan dit een goede koppeling zijn om meer informatie te verschaffen over de artiest. Soundhound laat duidelijk zien dat het een applicatie is die je snel kan gebruiken en dit hebben ze ook met duidelijk iconen vast gelegd. Nadelen zijn eigenlijk de featureset die ze gebruiken. Dit heeft nog wel koppeling met de origine van de app maar voegt jammer genoeg weinig toe. De layout van de buttons is duidelijk. Maar het is een vreemde overgang van een cardstack gedeelte naar een top menu waar ook de originele iconen niet meer terug te vinden zijn. Door het overmatige kleurgebruik van de kleur oranje is de app af en toe minder fraai. Hierin hebben ze nog geen goede balans gevonden.

13 Deelopdracht 2 - Functioneel ontwerp

14 Deelopdracht 3 - Testplan bruikbaarheidsonderzoek Testplan voor observatie van respondenten Doelgroep: Gebruikers vanaf 18 jaar die gebruik maken van een iphone en de Koninginnedag 2010 in Amsterdam hebben bezocht. Daarbij maken ze regelmatig gebruik van social media. Onderzoeksvraag: Maakt het prototype het mogelijk dat de respondenten makkelijk de gewenste informatie m.b.t. Koninginnedag vinden en kunnen ze gemakkelijk contact leggen met andere gebruikers/profielen. Wie: Gebruikers in de leeftijd van jaar die gebruik maken van een iphone en Koninginnedag 2010 in Amsterdam hebben bezocht. Daarbij maken ze regelmatig gebruik van social media. Waar: De observatie vindt bij de gebruiker thuis plaats. Wanneer: De gebruikers worden s avond na 6 uur tot maximaal 1 uur lang geobserveerd, wanneer zij het prototype van de applicatie gebruiken. Subvragen: De antwoorden op de volgende subvragen zullen samen het antwoord vormen op de onderzoeksvraag: 1. Kunnen de respondenten tijdens het eerste gebruik van de applicatie de structuur van de applicatie doorgronden? (de flow) - tabbladensysteem? Wij verwachten dat de respondenten de structuur binnen het eerste gebruik zullen begrijpen. 2. Zijn de iconen herkenbaar/verklaarbaar? Wij verwachten dat de respondenten de iconen zullen herkennen/begrijpen. 3. Is de opeenvolging van de schermen in de wizard duidelijk? - wederom flow Wij verwachten dat de respondenten de wizard zonder vragen zullen doorlopen.

15 4. Zijn de instellingen voor de kaart eenvoudig aan te passen? De instellingen voor de kaart zijn door de respondenten eenvoudig aan te passen. 5. Kunnen de respondenten via een podiumprofiel informatie over artiesten vinden? De respondenten zullen begrijpen dat ze via het podiumprofiel het artiestenprofiel kunnen bereiken. Te beantwoorden door observatie - Welk onderdeel is niet geplaatst binnen het (iphone) verwachtingspatroon van de respondent? - Welke iconen zijn onduidelijk voor de respondent? - Zijn er stappen overbodig of te weinig tijdens de navigatie van de respondent? Te beantwoorden door de testgebruiker te bevragen na de uit te voeren opdrachten - Welk onderdeel van de applicatie vindt de respondent het leukst/meest interessant? - Wat ontbreekt er volgens de respondent binnen de applicatie? - Welk onderdeel van de applicatie vindt de gebruiker moeilijk/onlogisch in gebruik? - Komt het gebruik van de applicatie overeen met het gebruik van andere iphone applicaties? Vastleggen observaties De observaties worden vastgelegd door middel van notaties met pen en papier. Tevens zullen de gehele tijd van observatie alle handelingen binnen het prototype worden opgenomen. De gebruikte software is: CamStudio (Open Source) Rekening houdend met de privacy van de gebruiker zullen deze gegevens alleen voor testdoeleinden worden gebruikt.

16 Instructie Allereerst bedankt voor het meedoen aan dit onderzoek! Dit onderzoek is bedoeld om een antwoord te krijgen op onze onderzoeksvraag, namelijk of onze applicatie het mogelijk maakt dat u makkelijk de gewenste informatie m.b.t. Koninginnedag vindt en u gemakkelijk contact kan leggen met andere gebruikers/profielen. Ik ga u observeren terwijl u het prototype gebruikt en zal u enkele vragen stellen om bovenstaande voor het onderzoek te verduidelijken. Vragen vooraf - Hoelang ben je in het bezit van een iphone? - Hoevaak per dag maak je gebruik van de iphone? - Welke applicaties gebruik je het vaakst op je iphone (noem er 3)? - Met welke regelmaat maak je gebruik van Social Media (Hyves, Facebook, LinkedIn etc.)? Opdrachten Wij verzoeken je om onderstaande opdrachten naar eigen inzicht uit te voeren. Mocht je toch vastlopen of is er iets niet duidelijk schroom dan niet om dit te laten weten. Je komt aan op het drukke station van Amsterdam Centraal. Rondom je zie je feestende mensen op weg in hun oranje outfits. De massa gaat één kant op en je loopt tussen de gezellige, feestende mensen dezelfde richting op. Buiten het station zie je een billboard over de Koninginnedag-applicatie iappsterdam. Op het billboard staat de instructie dat je de bluetooth-verbinding moet activeren op je iphone. Hierna krijg je al snel een melding op je iphone (pushbericht) en besluit de applicatie te downloaden en installeren. 1. Start de applicatie en meld je aan bij verschillende social media (minimaal 2). Je bent niet voor niets naar Amsterdam gekomen en je wil samen met de dansende massa een podium met livemuziek te gaan bezoeken. Omdat je niet alle muziek kent wil je eerst wat meer weten over een bepaalde artiesten die in Amsterdam te vinden zijn. 2. Ga in de applicatie naar een podium en bezoek de pagina van een artiest die daar speelt. Je besluit om te gaan kijken naar het optreden van DJ Armin van Buren. Omdat je van het optreden niets wilt missen wil je graag weten hoelaat en op welk podium het optreden precies is. Ook wil je graag de locatie op de kaart markeren.

17 3. Zoek uit hoe laat en waar de DJ Armin van Buren draait. 4. Zoek de locatie van het podium waar de DJ Armin van Buren draait. Het is wel zo gezellig om naar de muziek te gaan luisteren met een paar van je vrienden. Je weet dat er al een paar vrienden in Amsterdam te vinden zijn en je besluit te kijken waar ze zich bevinden. 5. Zorg dat de locatie van je vrienden zichtbaar wordt op de kaart. Je ziet dat een vriend(in) van je zich aan de andere kant van Amsterdam bevindt en wil graag dat hij/zij ook mee gaat naar DJ Armin van Buren. Je besluit hem/haar een bericht te sturen via de iappsterdam. 6. Zoek een vriend(in) en stuur hem/haar een bericht. De tijd begint een beetje te dringen en oponthoud onderweg naar het optreden zou ervoor kunnen zorgen dat je toch te laat bent voor de eerste noten. 7. Bekijk of er onderweg naar het podium waar Armin van Buren draait drukke gebieden gepasseerd moeten worden. Je bent aangekomen bij het optreden van DJ Armin van Buren en wilt nu ongestoord naar de muziek kunnen luisteren samen met je vrienden. 8. Zorg dat je zelf niet meer zichtbaar bent voor anderen binnen de applicatie.

18 Bij het podium staan twee grote schermen waarop allerlei berichten verschijnen van de mensen om je heen. Jij wilt anderen ook laten weten hoe goed dit optreden is. 9. Post een bericht op de videowall. Bedankt voor je deelname aan dit onderzoek!

19 Deelopdracht 4 - Reflectie Koen Gorissen Mijn rol in het team was deelname bij het opstellen van de flowchart en het opstellen van het testplan. De lessen IAD hebben gezorgd voor een goede screening van de verschillende wireframes en de flow ervan. Zoals te zien in deelopdracht 2 hebben we een aantal flow-problemen kunnen oplossen met informatie opgedaan in de lessen. Ook het testplan hebben we kunnen herschrijven naar een betere versie door het door andere ogen (lees: docent en leerlingen) te laten bekijken. Han van de Werken Michel de Leef