Mediamatic voor Eden | Interactie Ontwerpendonderdag 23 augustus 2007 Ino Paap Interactie Ontwerpen.

Presentatie over: "Mediamatic voor Eden | Interactie Ontwerpendonderdag 23 augustus 2007 Ino Paap Interactie Ontwerpen."— Transcript van de presentatie:

1 Mediamatic voor Eden | Interactie Ontwerpendonderdag 23 augustus 2007 Ino Paap Interactie Ontwerpen

2 2 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie ontwerpen  Ontwerpen van een flow  Sturen van gewenst gedrag Begeleiden van de bezoekers bij het doen van een bepaalde taak Uitsluiten van afleidingen/ sturen op succes User in drivers seat  Ontwerptaal, tools, oefeningen, tips en ervaringen Soms wat oppervlakkiger, soms wat dieper Vragen stellen kan altijd!

3 3 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Koffie zetten

4 4 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Taakanalyse  Inventariseer functionaliteit/ taakanalyse  Wat is het doel van de bezoeker  Wat heeft hij nodig om dit doel te bereiken Online boek kopen  Boek zoeken, boek kiezen, boek bestellen  Schrijf usecases + prioritisering  Baseer siteontwerp op usecases  Gebruiker in actie: Kleine stappen, veel controle Stappen allemaal ongeveer even groot Duidelijke, positieve, constructieve foutmeldingen

5 5 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Usability  Consistentie AanmakenBewerkenVersturen

6 6 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Richtlijnen  Duidelijkheid  Leerbaarheid  Consistentie  Informatieve feedback & feedforward  Lage belasting korte termijn geheugen  Effectiviteit  Foutmeldingen

7 7 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Links  Links op websites creëren verwachtingen  Gebruiker kiest ingang/ link met een verwachting Links binnen de site: __, » Links naar andere sites:.nl Downloads:.doc.pdf

8 8 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Conventies  Leesrichting  Plaats link naar de homepage  Plaats zoekveld onder logo of rechtsboven  Plaats 'annuleren' en 'OK'  Kleurgebruik Voor ordening en groepering in de pagina Rood en groen hebben een betekenis Effect van kleurcodering is zeer zwak

9 9 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie patronen  Standaard patronen voor verschillene interactie- principes binnen een bepaalde context  Een patroon is niet origineel maar een proven solution  Library van interaction patterns: http://www.welie.com http://developer.yahoo.com/ypatterns  Gebruik zo min mogelijk verschillende patronen

10 10 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Navigatie met tagclouds  Websites die ‘automatisch’ inhoud structureren  Ieder item in de site heeft metadata Geeft de gebruiker een minisamenvatting Laat het systeem gelijkenissen uitrekenen  www.geheugenvanoost.nl www.geheugenvanoost.nl  www.picnicnetwork.org/weblog www.picnicnetwork.org/weblog

11 11 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Keywords  ‘Vaste’ trefwoordenlijst 30 - 50 trefwoorden Krachtig door het maken van combinaties  Vrije ‘tags’  Combineren van trefwoordenlijst en vrije tags

12 12 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Ajax  Techniek om pagina’s interactiever te maken www.mediamatic.net  Gebruik van applets http://java.sun.com/applets/jdk/1.4/index.html  Gebruik van webservices zoals Google Maps www.rhiz.eu

13 13 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Usability van ajax  On the page edit  Lightbox www.mediamatic.net  Content en ‘administratie’ van de UGC www.flickr.com www.mediamatic.net

14 14 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen  Gestandaardiseerde modelleer taal  Documentatie en communicatie Maakt het mogelijk de structuur, navigatie en interactie vast te leggen zodat opdrachtgevers, visueel ontwerpers, interactie ontwerpers, programmeurs en projectleiders begrijpen wat er gemaakt wordt.  Onafhankelijk van proces, programmeertaal etc.  Vastleggen requirements in concept- en ontwerpfase Unified Modelling Language

15 15 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen  Use case  Use case packages  Flow chart  Activity chart  State chart UML

16 16 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Use case  Functionele eenheid, beschrijft één taak  Inhoud van een use case Nummer en titel Korte beschrijving, samenvatting Actors Voorwaarden Flow of events Varianten op de flow Betrokken pagina's Status van de usecase

17 17 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Use case package  Groepering van use cases

18 18 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Flow chart  Duidelijke structuur  Niet geschikt voor navigatie

19 19 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Activity chart  Schematische weergave van de activiteiten van een scenario/ use case  Chart toont activiteiten en hun onderlinge relaties  Geschikt om activiteiten van één use case te tonen Scenario's Statische systemen zoals een wizard  Niet geschikt voor hele website

20 20 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Activity chart notatie  Startpunt  Activiteit  Beslissing  Synchronisatiebalk  Overgang, trigger  Voorwaarde  Opmerking

21 21 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Koffie zetten en ns-automaat

22 22 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen State chart  Toont mogelijke toestanden van een systeem  Gebruiker brengt systeem naar andere toestand dmv actie  Geschikt voor notatie van interactie en navigatie  Representatie van systeem en transitie events

23 23 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen State State = Toestand van het product  Statisch (koffieapparaat staat uit)  Bezig zijn met (koffieapparaat staat te pruttelen)  Mogelijkheden voor de gebruiker

24 24 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen State chart notatie  Startpunt  State  Voorwaarde  Overgang  State met mogelijke activiteiten

25 25 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Koffiezetapparaat en pinautomaat

26 26 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Nesten van states  Navigatie van een website in één figuur  Verzamelingen states met hetzelfde gedrag  Inzoomen

27 27 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Nesten van states

28 28 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Domeinmodel  Weergave van de informatiestructuur Welke soorten informatie hebben we Welke relaties hebben deze items

29 29 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Voorbeeld domeinmodel  Verhalen website

30 30 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Wireframes  Schematische weergave van een pagina  Snelle manier om de verschillende pagina’s voor de website te visualiseren  Op papier/ in html In html is het een snelle prototypetool

31 31 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Samenvatting modellen  Activity chart Schema voor activiteiten/ functionaliteit  Statechart Schema voor statussen  Domeinmodel Schema voor informatie representatie  Wireframe Schema voor bovenstaande items samen

32 32 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Pauze

33 33 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Oefening domeinmodel  Welke informatiesoorten hebben we op een Eden-blog  Welke relaties kunnen die informatiesoorten hebben?

34 34 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Oefening Wireframes  Maak op basis van het domeinmodel een ontwerp voor de Eden blog Welke pagina’s heb je nodig Welke informatie staat op welke pagina

35 35 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Icons  Icons zijn doorgaans onbegrijpelijk  Inhoud site te abstract voor icon en andersom.  Tekst is beter Combineren logo & tekst

36 36 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Icons  E-mail  Stadsinfo  Adverteerdersindex  Agenda  De stad  Eten drinken en slapen  Colofon  Winkelen  Info Leiden

37 37 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Interactie Icons

38 38 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Tools  Visio/ Conceptdraw/ Omnigraffle voor UML  Fullshot voor screencaptures op PC

39 39 donderdag 23 augustus 2007Mediamatic voor Eden | Interactie Ontwerpen Literatuur  The Unified Modeling Language User Guide, Grady Booch, James Rumbaugh, Ivar Jacobson (Addison-Wesley, 1998)  The Unified Modeling Language Reference Manual, Grady Booch, James Rumbaugh, Ivar Jacobson (Addison-Wesley, 1998)  Applying use cases - A practical guide Geri Schneider, Jason P.Winters (Addison-Wesley, 1998)  Patterns for Effective Use Cases Steve Adolph, (Addison Wesley, 2002)  UML resource center http://www.rational.com/uml/index.jsp

40 Mediamatic voor Eden | Interactie Ontwerpendonderdag 23 augustus 2007 ino@mediamatic.nl Einde