Interaction Design Jungle Rating

1,461 views
1,368 views

Published on

Pres van Wim Bertram en Jona Burgdorffer aan Jungle Rating adviseurs en interimmers Amsterdam oct 08

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,461
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Interaction Design Jungle Rating

  1. 1. interaction visual service web interface digital -design een praktische inventarisatie JungleRating 6 okt 08 Jona Burgdorffer & Wim Bertram
  2. 2. Praktische info voor webdesign projecten • Intro • Multidisciplinaire complexiteit • Het ontwerpproces • Interaction design in de breedte • De interaction designer • Voorbeelden wireframes & IO prototype • Meer tips, tricks & tools • Case
  3. 3. In den beginne schiep God de punch card…….
  4. 4. en de nerd….
  5. 5. En God zeide: Daar zij licht! en daar werd licht.
  6. 6. En op de 6e dag .....
  7. 7. Multidisciplinaire complexiteit toename controle en ondersteuning budget multi channel business de alles weter requirements back end systemen change management techniek paketten support redactie design team user centered manager product specialist service design marketeer specialist
  8. 8. Website Design Cyclus 2 tot 5 jaar Kleinere Kleinere Kleinere aanpassingen aanpassingen aanpassingen (Re)design Project (Re)design Project
  9. 9. Website design project • Analyse en Definitie (Inception) van de benodigde online oplossing en de wijze waarop deze online oplossing in één of meerdere projecten gerealiseerd kan worden • Detaillering (Elaboration): de online oplossing wordt in detail uitgewerkt en ontworpen • Bouw (Construction): de online oplossing wordt technisch ontwikkeld • Overgang (Transition): De geproduceerde online oplossing wordt naar de productie omgeving gebracht en een acceptatie test vindt plaats
  10. 10. Naam Beschrijving Visie & Strategie • Zakelijke doelstellingen en visie - en hoe een online oplossing aan het bereiken daarvan moet bijdragen - worden vastgelegd • De huidige online oplossing (indien aanwezig) wordt getoetst op sterke en zwakke punten. Wanneer van toepassing wordt er gebenchmarkt t.o.v. concurrerende sites. Eindgebruikers • Gebruikersgroepen en hun (online) behoeften worden gedefinieerd • Typische gebruikersprofielen worden beschreven door middel van Persona’s. • Indien mogelijk worden huidige gebruiksstatistieken geanalyseerd om inzicht te krijgen in het gedrag en de behoeften van eindgebruikers. Content • De huidige content wordt geïnventariseerd en geanalyseerd om inzicht te krijgen welke bestaande content gebruikt moet worden in de nieuwe online oplossing • Gewenste nieuwe content wordt globaal gedefinieerd Functies • Voor de nieuwe online oplossing worden globaal beschreven: • De belangrijkste gebruikersscenario’s • Belangrijkste business rules die toegepast moeten worden • Gewenste functionaliteiten Grafisch ontwerp • Definitie van de richtlijnen met betrekking tot de grafische vormgeving van de nieuwe online oplossing Meten • Bepalen van de belangrijkste KPI’s • Globaal wordt bepaald hoe meeting aan de nieuwe online oplossing worden verricht Techniek • Globale architectuur in een HLD (High Level Design) • Criteria voor de keuze van software • CMS opzet • Hosting opzet • Overzicht externe systemen waarmee geïntegreerd moet worden. Realisatie • Inhoud en begrenzingen (scope) voor de realisatie worden bepaald • Risico’s voor de realisatie worden geïdentificeerd • Een tijdspad (roadmap) wordt bepaald, die aangeeft hoe de visie & strategie gefaseerd gerealiseerd zouden kunnen worden. • Indien van toepassing worden de kosten voor de volgende fase(s) bepaald • Glossary van gebruikte terminologie (zowel klant als bureau) wordt vastgelegd
  11. 11. Naam Beschrijving Wireframes • Op basis van de gewenste content, wensen voor wijzigingen en aanvullingen wordt een nieuwe structuur ontworpen (wireframes), die aansluit bij de wensen van de klant en geformuleerde gebruiksscenario’s Interactie Ontwerp • Op basis van de wireframes zal worden bepaald hoe de belangrijkste interactie elementen zullen gaan werken, zoals de navigatie, pagina layout, homepage en enkele belangrijke subpagina’s. • In totaal zullen plusminus 10 pagina’s ontworpen worden als clickable wireframes. Dit prototype zal gebruikt worden om de discussie met de klant over het ontwerp te faciliteren. • Voor een aantal functionele elementen (afhankelijk van de aard van de online oplossing) zal de interactie verder uitgewerkt worden. Normaal gesproken betreft dit 5-7 functionaliteiten. Grafisch Ontwerp / Style • Op basis van het interactie ontwerp wordt het grafisch ontwerp uitgevoerd. Guide • Dit wordt opgeleverd in de vorm van visuele templates, eventueel ondersteund met moodboards. • Het goedgekeurde grafisch ontwerp wordt beschreven in een styleguide. Hierin staan alle relevante aspecten van het grafisch ontwerp, zoals: layout, uitlijning, kleurgebruik, het gebruik van logo’s en lettertypen. Rationale • De concept rationale is de onderbouwing van het ontwerp, waarin de genomen beslissingen worden toegelicht Testen van het ontwerp • Met behulp van het clickable prototype en beschikbare visuele ontwerp kan een beperkte test worden gedaan met een selectie uit de doelgroep(en). High-level content plan • Bepalen hoe content voor de nieuwe site wordt gerealiseerd door middel van het bepalen van: rolverdeling, technische aspecten en identificatie in detail van aan te passen of te schrijven content. Tagging plan • Ten behoeve van het meten van bezoekersgedrag zal de site getagged moeten worden. • De tagging oplossing hangt af van de gewenste analyse mogelijkheden, het gekozen metrics pakket en de gedetailleerde site structuur. Functioneel Ontwerp • De benodigde functionaliteiten worden in detail uitgewerkt, waarbij de gewenste gebruikersscenario’s en toe te passen business rules als use cases worden opgeleverd. Systeem architectuur • Op basis van het interactie ontwerp, de nieuwe content structuur en het functioneel ontwerp zal een technisch ontwerp worden opgeleverd • Het technisch ontwerp bevat onder meer: de systeem architectuur, data modellen, database gebruik, veiligheid en aanverwante zaken Realisatie • Planning van de bouwfase wordt gemaakt of eventueel aangepast • Indien van toepassing worden de kosten voor de volgende fase(s) aangepast.
  12. 12. Interaction design
  13. 13. http://www.designinginteractions.com/interviews/BillVerplank http://www.designinginteractions.com/downloads/DesigningInteractions_1.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_2.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_3.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_4.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_5.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_6.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_7.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_8.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_9.pdf http://www.designinginteractions.com/downloads/DesigningInteractions_10.pdf
  14. 14. Getting the user to click on the right link is the very essence...
  15. 15. Interaction designer ?
  16. 16. Multidisciplinaire complexiteit toename controle en ondersteuning budget multi channel business de alles weter requirements back end systemen change management techniek paketten support redactie design team user centered manager product specialist service design marketeer specialist
  17. 17. C Gijs de Ridder
  18. 18. C Gijs de Ridder
  19. 19. C Gijs de Ridder
  20. 20. C Gijs de Ridder
  21. 21. C Gijs de Ridder
  22. 22. Web/ visual designer • Wetmatigheden + talent + gut feel • Geen animator of sound designer • No ego & star complex • Zonder interactie inzicht (bijv. zakelijke RIA’s) = HELL
  23. 23. tips & tricks
  24. 24. Groene weide = HELL
  25. 25. Beamers zijn HELL Ondersteunen met boards. Niets verklappen, hanteer de spanning. Geef directe link voor individuele review.
  26. 26. Competentie aan klantzijde afdwingen, omdat je niet constant “nee” wilt verkopen.
  27. 27. Wees streng op beschikbaarheid en levering van huisstijl en content. Let op bij iconografie, koppelingen, rich media en pakket/platform requirements.
  28. 28. Design het liefst 1op1 met competente decision makers. Geen lagen, commisies, etc Maar geef wel ruimte voor inbedding.
  29. 29. Gebruik de huisstijl van de klant geheel correct en pas op met fake tekst.
  30. 30. Goed idee om te testen en te prototypen. Maar iteraties passen ook in tijd en budget?
  31. 31. Techneuten creeren problemen om ze zelf weer op te lossen.
  32. 32. Bij de grotere corporates woedt meestal een ongelofelijke machtstrijd over eigendom van webspace.
  33. 33. Projectmanagers vermoorden projecten. Disciplines juist direct laten samenweken.
  34. 34. A lot of times people do not know what they want until you show them.
  35. 35. Imagine the user and picture the new website.
  36. 36. IE T ! N VS is VS 1 2 3 4 5 s R d it R it i d
  37. 37. IE T ! N VS is VS 1 2 3 4 5 s R d it R it i d
  38. 38. jona_burgdorffer@burgdorffer.biz wim@oudnieuw.nl

×