Foundation course in interaction design : kernconcepten

Transcriptie

1 Foundation course in interaction design : kernconcepten Scenario v1.0 James M. Boekbinder Skype: jboekbinder james.boekbinder@gmail.com Blog: Inhoud: Wat betekent scenario in interaction design? Welke types scenario bestaan er? Hoe wordt een scenario geschreven? Hoe gebruiken we scenario s? Let op: de definitie die we hier geven is niet allesomvattend, of de enige of beste. Hij is bedoeld om eerstejaars interaction design studenten te helpen aan het werk te gaan en in deze eerste fase zoveel mogelijk te leren. Voor andere definities, zie de bronnenlijst aan het einde van dit document. Wat betekent scenario? Een scenario is een verhaal waarin je beschrijft hoe een gebruiker een product gebruikt. Meestal gaat het om een product dat nog niet of alleen gedeeltelijk ontworpen is. Het scenario beschrijft een concreet geval van gebruik waarin de gebruiker stap voor stap een doel bereikt. De hoofdrolspeler in een scenario is een fictieve gebruiker die het gebruikersprofiel vertegenwoordigt. Het scenario beschrijft wat deze gebruiker waarneemt, denkt, voelt en doet, en wat het product daarbij doet. De gebruiker wordt in de derde persoon beschreven ( hij, zij ). Het scenario vindt plaats binnen de relevante context van gebruik. We gebruiken het begrip scenario in de breedste zin van het woord. Het behelst alle beschrijvingen van de interactie tussen menselijke gebruikers 1 en het interactief product. Welke types scenario bestaan? 1 Naarmate artificiële intelligentie zich ontwikkelt, zullen scenario s ook apparaten zoals Unmanned Autonomous Vehicles in de rol van gebruiker behandelen. Op dit moment en op het niveau van de Foundation Course is dit nog niet aan de orde.

2 Scenario s kunnen verschillen in: de mate waarin een product expliciet beschreven wordt (techniek en vormgeving) de mate van detail Fig. 1 De scenario s die we in de Foundation Course schrijven lijken het meest op context en key path scenario s. Een context scenario 2 legt de nadruk op de motivaties, doelen en gewenste resultaten voor gebruikers, zonder de exacte technologie en vorm vast te stellen. Vaak wordt het geschreven volgens het principe: Pretend it s magic. Het wordt meestal vroeg in het ontwerpproces geschreven, als een prototype in woorden waarmee je de ideale uitwisseling tussen gebruiker en product voorstelt. Een use case daarentegen beschrijft de werking van de betrokkene functionaliteiten in detail. 3 Voorbeeld: online applicatie waarmee onderzoekers enquêtes inzetten als onderzoeksinstrument Het (toekomstig) product is een online applicatie waarmee onderzoekers enquêtes creëren. Een scenario zou kunnen beschrijven hoe een onderzoeker een beschrijving maakt voor verschillende stakeholders, respondenten werft, en resultaten ontvangt en publiceert. Bij de beschrijving van de manier waarop een onderzoeker respondenten werft, zou een globaal, technoagnostiek scenario zo min mogelijk specifiek ingaan op techniek en vormgeving: De onderzoeker wil een enquête onder middelbare scholieren uitzetten als onderdeel van een onderzoek naar veelvoorkomende problemen op school. Hij ziet een optie om een selectie te maken uit een overzicht van alle deelnemers. Daarin ziet hij dat hij kan selecteren op basis van leeftijd en ook een aantal andere criteria, waaronder thema s gerelateerd aan veelvoorkomende problemen. Hij wil beginnende middelbare scholieren onderzoeken want daar doen zich de meeste problemen voor. Hij denkt dat deze tussen de 13 en 15 jaar oud zullen zijn. Hij geeft aan dat hij respondenten wil tussen 13 en 15 jaar oud. Het overzicht verandert en toont nu uitsluitend deelnemers met die leeftijd. Een meer gedetailleerde, techno-specifiek scenario zou anders klinken: De onderzoeker wil een enquête onder middelbare scholieren uitzetten als deel van een onderzoek naar veelvoorkomende problemen op school. Hij opent de applicatie. Op het scherm staan een enkel kader met daarin een knop met de tekst Stap 1: Kies respondenten. Hij klikt daarop. Een overlay venster met een 2 Deze term wordt gebruikt in About Face 3 (Cooper, Alan, Reimann, Robert en Cronin, David, (2007), About Face 3, The Essentials of Interaction Design, Indianapolis, IN, USA: Wiley Publishing, Inc., p ; ). 3 Voor een beschrijving van use cases, zie: Saffer, Dan (2007), Designing for Interaction: Creating Smart Applications and Clever Devices, Berkeley, CA, USA: New Riders, p )

3 lijst van alle deelnemers in het systeem opent zich, in de vorm van een tabel met klikbare contentitems. In de eerste cel staat het nummer van de deelnemer met daarnaast geslacht en leeftijd. Aan de linkerkant staat een aantal filters onder elkaar. Het eerste is Leeftijd. Onder deze kop ziet hij twee dropdowns: Van en Tot, met twee spinners achter elk. Hij gebruikt deze om de leeftijd van 13 tot 15 in te stellen. De tabel past zich meteen aan. Er blijven 10 items over, allemaal deelnemers met de gewenste leeftijd, met de jongste bovenaan. Hoe wordt een scenario geschreven? Er zijn vier stappen bij het schrijven van een scenario: Noteer een hoofddoel van gebruik voor de hypothetische gebruiker: het 'primaire doel van gebruik'. Beschrijf stap voor stap wat de gebruiker tegenkomt, waarneemt, denkt, voelt en doet. Beschrijf daarbij hoe het product handelt en reageert. 4 (De relevante delen van de interface wordt hier met de nodige mate van detail beschreven.) Beschrijf het resultaat van gebruik (de uiteindelijke situatie nadat de gebruiker het doel bereikt heeft). Let op: er zijn verschillende typen doelen. Een gebruiker kan een halfuurtje afleiding zoeken tijdens een pauze, of een specifiek product willen aanschaffen, of zich aan het oriënteren zijn op opleidingen om er een keuze uit te maken, of informatie zoeken die helpt bij een moeilijke schoolopdracht. Het doel van gebruik bepaalt in grote mate het gedrag van een gebruiker. Voorbeeld: online winkelen Stel dat het product een online kledingwinkel is (gericht op een breed publiek). In dit geval is de gebruiker gebaseerd op het gebruikersprofiel van iemand die precies weet wat hij wil en op een doelgerichte manier zoekt. Het scenario zou ongeveer als volgt kunnen klinken: De gebruiker gaat binnenkort naar een afscheidsreceptie van de directeur van het bedrijf waar hij werkt. Hij wil een nieuw overhemd kopen om onder zijn lichtgrijze pak te dragen. Hij wil iets in een effen kleur, liefst grijs of lichtblauw, wat past bij zijn grijze pak. Van een stof met een beetje textuur, karakter, niet te glad. Eigenlijk precies het type overhemd dat hij al heeft. Hij opent de website en merkt als eerst de reclame-uiting op midden op de pagina met een speciale aanbieding voor de feestdagen. Hij ziet niets in die uiting wat direct over overhemden gaat, en scant de pagina verder op zoek naar een onderdeel met kleren voor mannen. Dat ziet hij meteen in de hoofdnavigatie boven; de link Mannen. Als hij er met zijn cursor op staat, opent een panel met een lijst van alle producten, onderverdeeld in Featured, Kleren, Schoenen en accessoires. Onder Kleren ziet hij Overhemden (formeel). Hij klikt hierop - dit is precies wat hij zoekt. Hij bevindt zich nu op een pagina waarop hij een groot aantal afbeeldingen van overhemden ziet, in rijen van 3. Hij heeft meteen het gevoel een beetje overstelpt te worden met variaties. Type en kleur kraag, decoratieve patronen en type textiel verschillen in elke voorbeeld. In de beschrijvingen staan termen die hij niet kent: Ainsley, Tattersall, Broadcloth French cuff. Hij ziet niet meteen wat hij zoekt en scant verder hij ziet een overhemd dat meer lijkt op wat hij zoekt. Klassiek katoen, Oxford, button down, traditional fit... Oxford, zo heet deze stijl, dus. Goed om te weten voor de volgende keer. Hij klikt op de afbeelding, en komt terecht op een pagina met een 4 Meestal beschrijf je hiermee een van de belangrijkste paden die een gebruiker volgt door het product. Scenario s kunnen helpen om deze paden vast te stellen en uit te werken. Soms worden zij key paths genoemd. (Zie ook: Cooper, Alan, Reimann, Robert en Cronin, David, (2007), About Face 3, The Essentials of Interaction Design, Indianapolis, IN, USA: Wiley Publishing, Inc., p.113).

4 viewer met 4 verschillende afbeelding van het overhemd. Daarnaast ziet hij een aantal vergelijkbare overhemden, met een header: Meer in deze stijl. Dit is wat hij zoekt. Alleen: wat betekent traditional fit? Hij klikt op het symbooltje naast het woord. Een overlay pagina opent met een uitleg van het begrip en de titel Fit guide. Daar ziet hij een pagina met drie illustraties. De tekst legt uit dat traditional de ruimste snit is. De illustraties maken duidelijk dat traditional vooral betekent ruimer uitgesneden mouwen. Daar houdt hij ook van - zo heet dat, dus. Hij sluit deze pagina van de Fit guide. Voor het eerst merkt hij een aantal filters op naast de afbeelding van het overhemd: kleur, type kraag, manchetten, collectie, maat. Hij vinkt de traditional fit optie aan, en daarna de kleur grijs, en kiest de maat L. French cuff...? Wat zou dat zijn eigenlijk? Even experimenteren. Hij vinkt deze optie aan. De afbeelding blijft hetzelfde behalve dat de manchetten vervangen worden met een ander type. Grappige, ouderwetse vierkante manchetten. Misschien wel leuk voor een van die erg formele gelegenheden...na een tijdje met de opties gespeeld te hebben, besluit hij bij zijn eerste keuze te blijven. Mooi! Dit is hem dan. In dit scenario, denk je mee met een gebruiker die wel een duidelijk beeld heeft van het product dat hij zoekt, maar weinig weet van de terminologie of traditie rondom het product. Hij oriënteert zich in eerste instantie bijna uitsluitend visueel. Het scenario beschrijft niet alleen wat de gebruiker doet, maar laat ook zien hoe hij zich oriënteert, leert, nieuwsgierig raakt, experimenteert, een nieuw idee opdoet. Hij leert hoe de stijl die hij zoekt heet en dit helpt hem bij het zoeken. Hij oriënteert zich eerst visueel door een aantal producten te scannen en verdiept zich vervolgens in de verschillende aanpassingen die mogelijk zijn. Dit doet hij door actief te spelen met filters, waarbij hij ook een aantal daarvoor onbekende begrippen leert. Door deze aankoop te doen, heeft hij dus een aantal dingen geleerd waarmee hij in de toekomst gemakkelijker een selectie zal kunnen maken (en misschien op een andere manier, bijvoorbeeld door meteen de juiste termen te gebruiken bij het zoeken of filteren; of door ze op te slaan in een profiel). Op basis van het scenario weten de ontwerpers van de website dat ze een zeer snel scanbaar visueel overzicht moeten creëren, en niet moeten uitgaan van basiskennis van de standaardtermen waarmee het product beschreven wordt. Ze weten dat een gebruiker pas gericht zal zoeken of zijn keuze zal verfijnen als hij zich zeker voelt over zijn eerste stap. Daarom kunnen termen wel als filter dienen maar pas nadat een eerste keuze gemaakt is. Dit is dan ook het moment om de gebruiker te verleiden tot iets nieuws maar niet door een andere type product te laten zien. Dit zou weer verwarring op kunnen leveren. Ook moet hij snel vanuit elke bestemming opnieuw kunnen terugkeren naar het overzicht. Als de klant of technische partner een homepagina zou voorstellen met geavanceerde zoekfilters of facets klaar voor gebruik op de eerste pagina, zou het scenario een basis bieden om dit af te wijzen. De potentiële klant zal niet genoeg weten om ze te gebruiken, en zal zich toch voornamelijk visueel oriënteren om een eerste keuze te maken. Pas als hij zich zeker voelt over zijn eerste stap zal hij zich vrij voelen om even te spelen, en dan alleen binnen de kaders van zijn primaire keuze. Het scenario beschrijft het scannen op een realistische manier. Hij moet wel even zoeken, maar kan snel genoeg een keuze maken op visuele basis. Het is dus van kritisch belang dat deze content goed genoeg is. Dit kan een opdrachtgever zich ervan bewust maken dat hier de nodige aandacht aan besteed moet worden. Als de eindgebruikers mensen zouden zijn die diezelfde formele kleding kopen maar dan als bedrijfskleding, zou deze interface misschien niet optimaal werken. Het scenario zou dan aantonen dat zij juist wel veel terminologie kennen, en niet alleen op visuele verkenning hoeven te steunen. De hoofdcategorieën van de

5 navigatie zouden dan eerder gerelateerd zijn aan hun functie of specifieke onderdelen van hun beroepspraktijk. Scenario met tekst en beelden De scenario s die je maakt voor de Foundation Course bevatten niet alleen tekst, maar ook schetsen van de interfaces. Deze schetsen van interfaces staan bij de stukken scenario die erbij horen. Zo kan een lezer de interactie gemakkelijk volgen. Hieronder zie je een voorbeeld van een enkele pagina uit een scenario, gemaakt door een eerstejaars student. Het beschrijft het gebruik van een website voor liefhebbers van traditionele Engelse tuinen. Fig. 2 Let op: de eerste alinea bevat een klein deel van het scenario. De tweede bevat een korte functionele beschrijving van enkele belangrijke features van deze pagina (categorieën van productinformatie). Waar nodig kan dit soort functionele informatie apart opgesomd worden. Hoe gebruiken we scenario s? We gebruiken scenario s vooral in het begin van het ontwerpproces. Een scenario dient: om je de te ontwerpen producten al in gebruik voor te stellen om behoeftes, wensen en problemen te ontdekken die het ontwerp kunnen beïnvloeden

6 om je attent te maken op punten in de interactie die je ontwerp niet ondersteunen (en om deze gaten te dichten) Literatuur Saffer, Dan (2007), Designing for Interaction: Creating Smart Applications and Clever Devices, Berkeley, CA, USA: New Riders Cooper, Alan, Reimann, Robert en Cronin, David, (2007), About Face 3, The Essentials of Interaction Design, Indianapolis, IN, USA: Wiley Publishing, Inc.