1.1 DE OPDRACHT IN HET KORT

Transcriptie

1 Opdracht 03: een formulier ontwerpen Versie voor studenten v James M. Boekbinder Skype: jboekbinder Blog: 1 Introductie: doel en omschrijving Hoe zorg je ervoor dat de dialoog tussen gebruiker en interface zo goed mogelijk verloopt? Dat gebruikers alles begrijpen, de interactie leuk vinden, hun doelen bereiken en de informatie vinden die ze zoeken? Door een formulier te ontwerpen leer je: de grondslagen van gebruik van 'controls' - schermobjecten die gemanipuleerd kunnen worden de grondslagen van visuele organisatie - hoe visuele vormgeving gedrag stuurt contentvaardigheden het creëren van goede content als basis van een ontwerp documentatietechnieken 1.1 DE OPDRACHT IN HET KORT Ontwerp een online formulier dat een uitgebreide profielpagina zal genereren voor een lid van een community-site. Deze pagina zal het 'gezicht' zijn van deze persoon in de site: de eigenschappen waarmee hij of zij gezocht, herkend, gevonden en door andere leden en betrokken wordt in activiteiten en uitwisselingen. Door middel van een profielpagina laat deze persoon de anderen weten wie hij of zij is, op een manier die aansluit bij de doelstellingen van de persoon, community en site. Het formulier wordt ontworpen op basis van een conceptbeschrijving van een community die je ontvangt aan het begin van de opdracht. Dit is een individuele opdracht. Het zal worden vervaardigd in de loop van 4 lesactiviteiten. In elke lesactiviteit maak je een begin aan een deelopdracht die vervolgens als huiswerk wordt voltooid. Extra tijd wordt gegeven (1 lesweek) om het eindverslag af te maken.

2 1.2 ACTIVITEIT 1: INHOUD VAN HET FORMULIER BEPALEN Verslag met opsomming van inhoud (content items) van formulier, met verantwoording van elk item Content van een formulier bepalen aan de hand van een conceptbeschrijving Individuele studielast huiswerk: 8 uur Denk aan het formulier als een dialoog. Het dialoog gaat over mensen en de relatie die ze hebben (en ontwikkelen) met de community. Wat is hun relatie met de community? Wat willen ze over zichzelf vertellen om effectief met andere leden te communiceren en samenwerken? Welke onderwerpen komen aan bod? - Stel je voor hoe een echte 'intake gesprek' voor zo'n community zou klinken als het offline gebeurde. - Maak een lijst van alle onderwerpen, vragen en antwoorden die in het formulier aan bod zouden moeten komen. - Doe desk en/of andere onderzoek om meer over de potentiele activiteiten van zo'n community te weten te komen. - Schrijf een kort verslag met: - een opsomming van alle content items - bij elke item een onderbouwing (waarom dit belangrijk is voor het formulier) - Lever versie 1 van het verslag in aan het einde van de les. NB: neem de definitieve versie mee naar de volgende les (2). Let op: 1. De keuze van content items hangt nauw samen met de aard en doelen van de community. Wat voor community is het? Welke activiteiten ontplooien de leden? Wat willen ze van elkaar weten om welke doelen te bereiken? 2. Het gaat om meer dan persoonlijke gegevens als 'voor-, achternaam', etc. Deze komen aan bod, maar vergeet niet: het formulier vraagt veel meer dan alleen basis-gegevens. 1.3 ACTIVITEIT 2: INDELING VAN HET FORMULIER EN CREËREN VAN LABELS/VELDEN/VRAGEN Verslag met overzicht / indeling van vragen (labels) en ander elementen in het formulier - Content voor een formulier in bruikbare categorieën organiseren - Doeltreffende 'labels' creëren voor een formulier - 'Labels' (vragen) in een formulier beoordelen op kwaliteit - Meest veelvoorkomende types 'controls' benoemen - Juiste gebruik van controls uitleggen Individuele studielast huiswerk: 4 uur Als je het formulier bekijkt als een gesprek, merk je dat het bestaat uit onderwerpen met pauzes ertussen. In het formulier moeten de vragen en antwoorden, die bij deze onderwerpen horen, in 1

3 duidelijke groepen worden onderverdeeld. De vragen worden de 'labels'; de antwoorden zijn de velden en andere controls die de gebruiker invult. Wat zijn de onderwerpen in het gesprek tussen de community en haar leden over hun identiteit op de site? Welke vragen en antwoorden komen daarin voor? Verdeel alle vragen en antwoorden in groepen n.a.v. het onderwerp. Beoordeel elke vraag - is het nodig? Op welk moment zou de vraag gesteld moeten worden? NB: Optionele vragen kunnen soms beter aan het einde worden gesteld, nadat de belangrijke informatie ingevuld is. Labels - kunnen enkele woorden als labels dienen, of moeten de labels als zinnen worden geformuleerd? Welke tone-of-voice, taalgebruik? Lever versie 1 van het verslag in aan het einde van de les. Neem de definitieve versie mee naar de volgende les. (3). NB: Soms kan een formulier beter over verschillende pagina's / schermen worden verdeeld. Als een formulier bijvoorbeeld een groot aantal vragen bevat, verdeeld over een handvol onderwerpen, is het waarschijnlijk beter om deze over een aantal pagina's te verdelen. Als het een groot aantal vragen bevat over één onderwerp kunnen ze wellicht beter in één lange pagina worden ondergebracht. 1.4 ACTIVITEIT 3: WIREFRAME VAN FORMULIER Wireframe (schematische weergave) van het formulier - Een schematische prototype maken van een formulier Individuele studielast huiswerk: 8 uur - Maak een schematische weergave met verklaringen (bijv. een wireframe met annotaties, of een andere vorm) met een volledige uitleg van de werking van alle elementen in het formulier. - Lever versie 1 van het verslag in aan het einde van de les. Neem de definitieve versie mee naar de volgende les (4). 1.5 ACTIVITEIT 4: VISUEEL ONTWERP VAN FORMULIER Verslag met visueel ontwerp van het formulier - Een formulier visueel vormgeven Individuele studielast huiswerk: 8 uur - Maak een compleet visueel ontwerp van je formulier, voorzien van alle nodige uitleg. - Schrijf een eindverslag waarin het visueel ontwerp wordt uitgelegd. Lever versie 1 van het verslag in aan het einde van de les. Je hebt nog 1 lesweek om de definitieve versie in te leveren. Je docent zal de exacte deadline voor inlevering kenbaar maken. Je verslag is een PDF document. Het bevat o.a.: - Titelpagina bevat naam van opdracht, docent, teamleden, klasnummer, datum - Inhoudsopgave 2

4 - Pagina-nummering - Introductie beknopt beschrijving van de community en van je oplossing - Definitieve opsomming van content, met verantwoording /uitleg - Visueel ontwerp van het formulier, voorzien van alle benodigde uitleg - Evt. een conclusie met aanvullende reflecties en gedachten over de opdracht. Wat heb je geleerd? Heeft het wat opgeleverd? Heb je twijfels of vragen? - Bijlagen - wireframes van formulier (en andere materialen, indien relevant, bijv. resultaten van onderzoek naar de concept-community) - Bronnenlijst (indien relevant) Raadpleeg de instructies in 'Rapportage voor het vak Interaction Design' (bestandsnaam: IAD rapportage instructies.doc) 3

5 2 Evaluatie: hoe wordt je werk beoordeeld? 1. Content creatie - Wat is de kwaliteit van het buro- en creatief onderzoek om tot content te komen voor het formulier? - Is het overzicht van content uitgebreid genoeg, passend en compleet? - Is de content doeltreffende gegroepeerd? - Is de keuze van content en functionaliteiten goed onderbouwd? 2. Vastlegging van de structuur (vastgelegd in de wireframes) - Is de wireframe van goede kwaliteit en volgens de richtlijnen opgesteld? - Is de wireframe een heldere en complete weergave van alle functionaliteiten (waaronder controls) van de interface? - Zijn alle controls en andere functionaliteiten compleet en op de juiste wijze toegepast (bijv. fout- en succesmeldingen, inline of ander hulpfuncties)? 3. Visuele vormgeving (vastgelegd in het uiteindelijke ontwerp) - Is het formulier aantrekkelijk vormgegeven binnen de aangegeven grenzen - minimalistisch in contrast, kleurgebruik, proportie, fontkeuze en layout maar met een duidelijk en passende uitstraling? - Ondersteunt het visuele ontwerp de visuele hiërarchie en flow? (Uitlijning, positie van labels/velden, indeling en layout, enz.) 4. Rapportagetechniek - Structuur en volledigheid van het verslag - Leesbaarheid, spelling, verzorging, stijl 4

6 3 Bronnen Saffer, D. (2007). Designing for Interaction. Berkeley, CA: New Riders. ISBN: Wroblewski, L. (2008). Web Form Design, Filling in the Blanks. Rosenfeld Media, New York Tidwell, J. (2006). Designing Interfaces. Sebastopol, CA: O Reilly & Associates, Inc. ISBN: Cooper, A., Reimann, R. & Cronin, D. (2007). About Face 3: The Essentials of Interaction Design. Indianapolis, IN: Wiley Publishing, Inc. ISBN: Brown, D. (2006). Communicating Design: Developing Web Site Documentation for Design and Planning. New Riders 5