Informatie Architectuur & WireFraming

Inventis MasterClass 07/03/2012

Transcript

1. INFORMATIE ARCHITECTUUR & WIREFRAMING
3. WIE BEN IK? !  Jente Kasprowski !  Medezaakvoerder !  Verantwoordelijk voor design & IA
4. WAT IS INFORMATIE ARCHITECTUUR?
5. WAT IS IA? !  Inhoud structureren zodat mensen intuïtief hun doel bereiken !  Helaas niet altijd even boeiend
6. WAAROM IA? !  Niet om saai te zijn !  Inhoud die snel en gemakkelijk gevonden wordt zorgt voor een betere website !  Een betere website zorgt voor meer conversie !  Onmisbaar voor een grote website!
7. WIE DOET AAN IA? !  Information architects !  Usability specialisten !  Webdesigners !  Webdevelopers !  Projectmanagers !  Klanten !  Iedereen wie wil!
8. WIE DOET AAN IA? !  Maakt niet uit wie, maar iemand moet er bewust mee bezig zijn!
9. STAP1: DOELEN
10. STAP 1: DOELEN !   Wat gaan we maken? !   Wat willen we bereiken? !  Balans tussen doelen van de organisatie en de gebruikers bepaalt de IA
11. STAP 1: DOELEN !   Bepaal de toptaken van de bezoekers !   Bepaal de doelen van de organisatie !   Bepaal de doelen SMART
12. STAP2: DOELGROEP
13. STAP 2: DOELGROEP !   Bepaal je doelgroep !   Personas !   Storyboarding
14. STAP3: CONTENT ANALYSE
15. STAP 3: CONTENT ANALYSE !  Leer over het onderwerp !  Maak een inventaris van ALLE content !  Welke content is nuttig? (doelen!) !  Welke content is overbodig? !  Welke content hoort samen? (begin stap 4)
16. STAP4: INFORMATIE SCHEMA’S EN CATEGORIEËN
17. STAP 4: INFORMATIE SCHEMA’S EN CATEGORIEËN !  Categorie = een concept, niets tastbaars, organisatie label !  Iedereen heeft zijn eigen beeld
18. TASSEN
19. TASSEN
20. STAP 4: INFORMATIE SCHEMA’S EN CATEGORIEËN !  Taal/cultuur gebonden
21. RAAM OF KOZIJN?
22. VOOR- OF HOOFDGERECHT?
23. STAP 4: INFORMATIE SCHEMA’S EN CATEGORIEËN !  Categorie = vaak niet duidelijk afgelijnd (tas vs koffer) !  Wees consistent (spelconsoles vs gameconsoles)
24. VERSCHILLENDE INFOMATIESCHEMA’S !  Exact !  A-Z !  Geografisch !  Specifieke doelgroep !  Tijd/datum !  Grootte !  Fysieke meetbare criteria, niet voor interpretatie vatbaar
25. VERSCHILLENDE INFOMATIESCHEMA’S !  Voor interpretatie vatbaar !  Taak
26. TAAK GERICHT
27. VERSCHILLENDE INFOMATIESCHEMA’S !  Voor interpretatie vatbaar !  Taak !  Doelpubliek
28. DOELGROEP
29. VERSCHILLENDE INFOMATIESCHEMA’S !  Voor interpretatie vatbaar !  Taak !  Doelpubliek !  Onderwerp !  Usability !  IA !  …
30. VERSCHILLENDE INFOMATIESCHEMA’S !  Welk schema hanteren? !  De oplossing voor al uw IA problemen is…
31. VERSCHILLENDE INFOMATIESCHEMA’S !  Helaas onbestaande… !  Content heavy sites zijn bijna altijd een gebalanceerde mix van verschillende schema’s
32. STAP 5: NAVIGATIE !  Sitemap uittekenen
33. SITEMAP
34. STAP 5: NAVIGATIE !  Een goede IA zorgt voor een Balans tussen zakelijke en gebruikers doelen !  Testen! Aftoetsen met doelen, personas en toptaken
35. IA IS NIET GEMAKKELIJK! !  www.bol.com
36. STAP 6: WIREFRAME !  "If you fail to plan, you plan to fail” !  Wireframe zet IA om in iets concreter, visueler… !  Wireframe != design !  Wireframe is het bouwplan van een website
37. WIREFRAME
38. STAP 6: WIREFRAME !  Waarom wireframen? !  Stap voor stap voel je de site groeien !  Over ieder onderdeel moet worden nagedacht !  Klant en team krijgen een beeld van de site !  Wireframe tijd win je dubbel en dik terug !  Problemen tegenkomen en ze oplossen
39. STAP 6: WIREFRAME “If a wireframe document is destined to stop and never directly become the actual design, don't bother doing it. If the wireframe starts as a wireframe and then morphs into the actual design, go for it.”
40. STAP 6: WIREFRAME !  Wireframe tools !  Potlood & papier !  (webdesign)schetsboek + potlood !  Axure !  Snel !  Copy/paste !  Prototypes
41. STAP 6: WIREFRAME !   http://www.inventis.be/clients/SMC/
42. TITEL PRESENTATIE