Informatie Architectuur & WireFraming

Inventis MasterClass 07/03/2012

Transcript

1. INFORMATIE ARCHITECTUUR &
   WIREFRAMING
   

   View Slide

2. View Slide

3. WIE BEN IK?
   !  Jente Kasprowski
   !  Medezaakvoerder
   !  Verantwoordelijk voor design & IA
   

   View Slide

4. WAT IS INFORMATIE
   ARCHITECTUUR?
   

   View Slide

5. WAT IS IA?
   !  Inhoud structureren zodat mensen
   intuïtief hun doel bereiken
   !  Helaas niet altijd even boeiend
   

   View Slide

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!
   

   View Slide

7. WIE DOET AAN IA?
   !  Information architects
   !  Usability specialisten
   !  Webdesigners
   !  Webdevelopers
   !  Projectmanagers
   !  Klanten
   !  Iedereen wie wil!
   

   View Slide

8. WIE DOET AAN IA?
   !  Maakt niet uit wie, maar iemand moet
   er bewust mee bezig zijn!
   

   View Slide

9. STAP1: DOELEN
   

   View Slide

10. STAP 1: DOELEN
    !   Wat gaan we maken?
    !   Wat willen we bereiken?
    !  Balans tussen doelen van de
    organisatie en de gebruikers bepaalt
    de IA
    

    View Slide

11. STAP 1: DOELEN
    !   Bepaal de toptaken van de bezoekers
    !   Bepaal de doelen van de organisatie
    !   Bepaal de doelen SMART
    

    View Slide

12. STAP2: DOELGROEP
    

    View Slide

13. STAP 2: DOELGROEP
    !   Bepaal je doelgroep
    !   Personas
    !   Storyboarding
    

    View Slide

14. STAP3: CONTENT ANALYSE
    

    View Slide

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)
    

    View Slide

16. STAP4: INFORMATIE
    SCHEMA’S EN CATEGORIEËN
    

    View Slide

17. STAP 4: INFORMATIE SCHEMA’S
    EN CATEGORIEËN
    !  Categorie = een concept, niets
    tastbaars, organisatie label
    !  Iedereen heeft zijn eigen beeld
    

    View Slide

18. TASSEN
    

    View Slide

19. TASSEN
    

    View Slide

20. STAP 4: INFORMATIE SCHEMA’S
    EN CATEGORIEËN
    !  Taal/cultuur gebonden
    

    View Slide

21. RAAM OF KOZIJN?
    

    View Slide

22. VOOR- OF HOOFDGERECHT?
    

    View Slide

23. STAP 4: INFORMATIE SCHEMA’S
    EN CATEGORIEËN
    !  Categorie = vaak niet duidelijk
    afgelijnd (tas vs koffer)
    !  Wees consistent (spelconsoles vs
    gameconsoles)
    

    View Slide

24. VERSCHILLENDE
    INFOMATIESCHEMA’S
    !  Exact
    !  A-Z
    !  Geografisch
    !  Specifieke doelgroep
    !  Tijd/datum
    !  Grootte
    !  Fysieke meetbare criteria, niet voor
    interpretatie vatbaar
    

    View Slide

25. VERSCHILLENDE
    INFOMATIESCHEMA’S
    !  Voor interpretatie vatbaar
    !  Taak
    

    View Slide

26. TAAK GERICHT
    

    View Slide

27. VERSCHILLENDE
    INFOMATIESCHEMA’S
    !  Voor interpretatie vatbaar
    !  Taak
    !  Doelpubliek
    

    View Slide

28. DOELGROEP
    

    View Slide

29. VERSCHILLENDE
    INFOMATIESCHEMA’S
    !  Voor interpretatie vatbaar
    !  Taak
    !  Doelpubliek
    !  Onderwerp
    !  Usability
    !  IA
    !  …
    

    View Slide

30. VERSCHILLENDE
    INFOMATIESCHEMA’S
    !  Welk schema hanteren?
    !  De oplossing voor al uw IA problemen
    is…
    

    View Slide

31. VERSCHILLENDE
    INFOMATIESCHEMA’S
    !  Helaas onbestaande…
    !  Content heavy sites zijn bijna altijd
    een gebalanceerde mix van
    verschillende schema’s
    

    View Slide

32. STAP 5: NAVIGATIE
    !  Sitemap uittekenen
    

    View Slide

33. SITEMAP
    

    View Slide

34. STAP 5: NAVIGATIE
    !  Een goede IA zorgt voor een Balans
    tussen zakelijke en gebruikers doelen
    !  Testen! Aftoetsen met doelen,
    personas en toptaken
    

    View Slide

35. IA IS NIET GEMAKKELIJK!
    !  www.bol.com
    

    View Slide

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
    

    View Slide

37. WIREFRAME
    

    View Slide

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
    

    View Slide

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

    View Slide

40. STAP 6: WIREFRAME
    !  Wireframe tools
    !  Potlood & papier
    !  (webdesign)schetsboek + potlood
    !  Axure
    !  Snel
    !  Copy/paste
    !  Prototypes
    

    View Slide

41. STAP 6: WIREFRAME
    !   http://www.inventis.be/clients/SMC/
    

    View Slide

42. TITEL PRESENTATIE
    

    View Slide