opdracht interactieve media ontwerpen
docent: bram simons
afdeling: grafisch ontwerpen
klas: deeltijd 3e jaar 2007-2008
laatste wijziging: 28/01/2008 12:25

de laatste jaren is er een sterke verandering te zien in de manier waarop mensen het internet gebruiken. dit is in eerste instantie niet een technisch fenomeen. de gebruiker is steeds meer het uitgangspunt en is niet alleen meer afnemer maar in toenemende mate ook aanbieder van informatie.

hierover wordt wel gesproken als de tweede generatie internet, web 2.0. bij deze ontwikkeling hoort een groot aantal specifieke begrippen. voor web 2.0 bestaat echter niet een enkele definitie en het wordt te pas en te onpas gebruikt. het staat in ieder geval voor het interactief delen en (her-)gebruiken van informatie. het is een ontwikkelling van één- naar tweerichtingsverkeer, naar veel-op-veel-communicatie. van allerlei verschillende desktop-toepassingen naar het gebruik van webdiensten via de webbrowser.

enkele voorbeelden van web 2.0 sites zijn wikipedia.org, flickr.com, maps.google.com, youtube.com en er zijn vele andere. vaak zul je het begrip beta zien staan: de software is nog volop in ontwikkeling, maar wordt wel al actief gebruikt. de gebruikers zijn meteen de testers van de toepassingen.

de opdracht

ontwerp en maak een prototype van een website waar gebruikers interactief informatie met elkaar kunnen delen. de gebruikers zijn nadrukkelijk niet alleen de ontvangers maar ook de aanbieders en beheerders van de informatie. dit kan informatie van allerlei aard zijn. de manier waarop dit gebeurt komt voort uit de behoeftes van de doelgroep. de beschrijving van de context en het onderzoek naar de doelgroep is dan ook de eerste stap in het proces. je gaat stapsgewijs verder met als uiteindelijk resultaat een werkend prototype van de site. je werkt afwisselend in een groep en individueel aan deze opdracht.

met deze opdracht doorloop je het hele proces van het ontwerpen van een website, onderzoek je het begrip 'web 2.0', leer je samen te werken, je proces te documenteren en te presenteren.

een aantal begrippen die aan bod komen: web 2.0, perpetual beta, prototyping, ajax, fluid design, the network is the computer, statisch versus dynamisch, web design patterns, RSS, folksonomy versus taxonomy, tags.

je wordt niet alleen op het uiteindelijke prototype beoordeeld, maar ook op hoe je het hele proces aanpakt, documenteert en communiceert.

het is niet de bedoeling dat je alles technisch tot in detail beheerst, maar wel dat je de techniek begrijpt qua mogelijkheden en beperkingen.

stappen

  1. bepaling doelgroep en probleemstelling
  2. onderzoek naar de doelgroep
  3. plan en tijdpad
  4. functionele specificaties en functioneel ontwerp
  5. schetsproces en schermontwerp
  6. realisatie prototype
  7. eindpresentatie en schriftelijk verslag

werkwijze

begin met het formeren van groepen van 3 tot 5 studenten. elke groep bepaalt met elkaar een doelgroep en scenario en een manier van onderzoeken, documenteren en presenteren. onderzoek de doelgroep en het begrip web 2.0. bezoek, gebruik en vergelijk daarbij onder andere de volgende sites.

over web 2.0

web 2.0 sites

bedenk welke van deze sites je actief kunt inzetten bij je proces, bijv. blogger.com om de voortgang in bij te houden en te publiceren, writely.com om samen aan een document te werken, kiko.com om je planning in bij te houden. bekijk dan meteen hoe gebruiksvriendelijk deze sites zijn. door ze in te zetten, word je zelf gebruiker van dergelijke sites en kan je het meenemen in je onderzoek.

probleemstelling

het plan zou moeten beginnnen met een probleemstelling of een scenario. hierin beschrijf je de situatie waarin de interface gebruikt gaat worden door de gebruikersgroep(en). je moet duidelijk maken voor welke groep(en) van eindgebruikers het ontwerp is bedoeld en hoe je denkt hen in kaart te kunnen brengen. als je in contact kunt komen met een representatieve groep gebruikers, doe dan een onderzoek of interview onder hen en achterhaal zo relevante punten van aandacht voor je project. onderzoek bestaande publicaties (sites, tijdschriften) die de eindgebruikers gebruiken of beschrijven. in elk geval moet je de achtergrond en de terminologie van de verwachte gebruiker definiëren. denk aan zaken als (voor-)kennis, opleiding, interesses, behoeften. stel je zelf onder meer de volgende vragen... is het een onervaren of ervaren gebruiker? wat is de leeftijd? wie zijn de primaire gebruikers? wat moeten ze denken of doen voor, tijdens en/of na bezoek aan de website? hoe komen ze op de site terecht?

documentatie

bedenk voor de schriftelijk in te leveren onderdelen een systeem en vormgeving. op alles wat je inlevert staat bijvoorbeeld dus niet alleen je naam, maar ook een versienummer en datum en wat verder relevant is om het overzichtelijk te houden. na het verzamelen van de essentiële kennis over de gebruiker moet je een overzicht geven van de veronderstelde gevolgen voor het ontwerp. bedenk dat dit ook online kan, bijvoorbeeld in de vorm van een weblog.

functionele specificaties en functioneel ontwerp

na het verzamelen van de essentiële kennis over de gebruiker moet je een overzicht geven van de veronderstelde gevolgen voor het ontwerp. dit vormt het uitgangspunt voor een functionele specificatie en een functioneel ontwerp. geef daarbij ook je overwegingen aan en bedenk alternatieven waar je later op kunt terugvallen in een later stadium.

tijdpad

een ander vereist onderdeel is een gedetailleerde opzet voor een tijdpad waarin je je activiteiten gaat uitvoeren. dit moet in overeenstemming zijn met de opgegeven planning van de lessen. je moet zoveel mogelijk stappen in je project van te voren plannen. maak niet alleen een planning voor onderzoek en schetsproces, maar bijvoorbeeld ook voor het documenteren, presenteren en het realiseren van een definitief prototype van je site.

presentaties

iedere groep presenteert steeds elk onderdeel aan de klas en wordt daarna in de les besproken.

schetsproces en schermontwerp

nadat de plannen, functionele specificaties en het functioneel ontwerp besproken en eventueel aangepast zijn begint ieder voor zich aan het schetsproces, zowel op papier als op het scherm. dit moet leiden tot een schermontwerp. in de les bespreek je eerst de schetsen en ontwerpen per groep en daarna presenteer je deze per groep aan de klas.

prototype

als laatste stap werkt ieder voor zich aan het realiseren van een werkend prototype van de site. dit moet samen met de andere onderdelen een duidelijk beeld geven hoe de interface straks gaat werken. een beperkt functionerende maar goed ontworpen interface geniet de voorkeur boven een compleet functionerende slecht ontworpen interface.

eindpresentatie en verslag

aan het einde van je project presenteert elke groep de oplossingen die ieder gemaakt heeft aan de klas. verder levert ieder een vormgegeven verslag in. dit bestaat uit je originele plan en tijdpad en de veranderingen die je in je plan hebt gemaakt. ook de functionele specificaties en het functioneel ontwerp met eventuele wijzigingen of aanvullingen horen erbij. ook moet je uitleggen welke onderdelen niet haalbaar waren en waarom. je moet afsluiten met een conclusie waarom jouw ontwerp en terminologie geschikt of juist ongeschikt is voor de voorgestelde omgeving en gebruiker.

planning

  • 10/09/2007
    • uitleg opdracht
    • uitleg basis van web 2.0
    • uitleg werkwijze, presenteren, documenteren
    • uitleg welke web 2.0-tools te gebruiken in het proces, zoals weblog, writely, online calenders etc.
    • groepen formeren
    • per groep werken aan:
      • vaststellen doelgroep
      • veronderstellingen formuleren.
      • documentatiesysteem bedenken.
    • in groepjes bespreken, dan klassikaal.
  • 24/09/2007
    • per groep een presentatie aan de klas van:
      • de gekozen doelgroep
      • onderzoek web 2.0
      • plan, veronderstellingen
      • voorstel documentatie-systeem
    • klassikaal bespreken, discussie.
  • 08/10/2007
    • per groep een presentatie aan de klas van:
      • resultaten onderzoek van de doelgroep
      • voortgang onderzoek web 2.0
      • uitwerking plan
    • uitleg structureren, site niveau, pagina niveau, web design patterns
    • uitleg functionele specificaties en functioneel ontwerp
    • uitleg presentatiemiddelen/tools
  • 29/10/2007
    • per groep een presentatie aan de klas van:
      • functionele specificaties en functioneel ontwerp
    • uitleg schetsproces en -middelen
    • aanpassingen in functionele specificaties en functioneel ontwerp
    • begin schetsproces
  • 12/11/2007
    • per groep een presentatie aan de klas van:
      • aangepaste functionele specificaties en functioneel ontwerp
      • eerste schetsen
    • schetsen uitwerken
    • begin schermontwerp
  • 26/11/2007
    • schermontwerp uitwerken
  • 10/12/2007
    • tussenbeoordeling: per groep een presentatie aan de klas van ieders schermontwerp.
  • 07/01/2008
    • individuele beoordeling
  • 23/01/2008
    • collectieve beoordeling
  • 28/01/2008
    • uitleg prototyping, werkwijze, tools
    • begin realisatie prototype
    • bespreken voortgang verslag
  • 11/02/2008
    • per groep bespreken voortgang prototype
    • verdere uitleg prototyping, werkwijze, tools,
      zie ook links en downloads
    • uitwerken realisatie prototype
    • bespreken voortgang verslag
  • 03/03/2008
    • per groep een presentatie aan de klas van ieders prototype.
  • 17/03/2008
    • per groep bespreken aanpassingen prototype
    • prototype afmaken
    • bespreken voortgang verslag
  • 07/04/2008
    • per groep bespreken laatste aanpassingen prototype
    • prototype afmaken
    • laatste wijzigingen verslag
  • 21/04/2008
    • eindpresentatie: per groep een presentatie aan de klas van ieders uiteindelijke prototype.
    • verslag gereed
  • 19/05/2008
    • individuele beoordeling
  • 04/06/2008
    • collectieve beoordeling