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

1. interaction visual
service web
interface digital
-design
een praktische inventarisatie
JungleRating 6 okt 08
Jona Burgdorffer & Wim Bertram

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. In den beginne schiep God de punch card…….

4. en de nerd….

6. En God zeide: Daar zij licht! en daar werd licht.

7. En op de 6e dag .....

8. 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

9. Website Design Cyclus
2 tot 5 jaar
Kleinere Kleinere Kleinere
aanpassingen aanpassingen aanpassingen
(Re)design Project (Re)design Project

10. 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

11. 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

12. 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.

14. Interaction design

25. 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

27. Getting the user to click on the right link is
the very essence...

28. Interaction designer
?

29. 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

30. C Gijs de Ridder

31. C Gijs de Ridder

32. C Gijs de Ridder

33. C Gijs de Ridder

34. C Gijs de Ridder

38. Web/ visual designer
• Wetmatigheden + talent + gut feel
• Geen animator of sound designer
• No ego & star complex
• Zonder interactie inzicht (bijv. zakelijke
RIA’s) = HELL

39. tips & tricks

40. Groene weide = HELL

41. Beamers zijn HELL
Ondersteunen met boards.
Niets verklappen, hanteer de
spanning. Geef directe link
voor individuele review.

42. Competentie aan klantzijde
afdwingen, omdat je niet
constant “nee” wilt verkopen.

43. Wees streng op
beschikbaarheid en levering
van huisstijl en content. Let
op bij iconografie,
koppelingen, rich media en
pakket/platform
requirements.

44. Design het liefst 1op1 met
competente decision makers.
Geen lagen, commisies, etc
Maar geef wel ruimte voor
inbedding.

45. Gebruik de huisstijl van de
klant geheel correct en pas
op met fake tekst.

46. Goed idee om te testen en te
prototypen. Maar iteraties
passen ook in tijd en budget?

47. Techneuten creeren
problemen om ze zelf weer
op te lossen.

48. Bij de grotere corporates
woedt meestal een
ongelofelijke machtstrijd
over eigendom van
webspace.

49. Projectmanagers
vermoorden projecten.
Disciplines juist direct laten
samenweken.

50. A lot of times people do not
know what they want until
you show them.

51. Imagine the user
and picture
the new website.

52. IE T !
N VS
is VS 1 2 3 4 5
s R
d it R it i
d

53. IE T !
N VS
is VS 1 2 3 4 5
s R
d it R it i
d

54. jona_burgdorffer@burgdorffer.biz
wim@oudnieuw.nl