$30 off During Our Annual Pro Sale. View Details »

Informatie Architectuur & WireFraming

Informatie Architectuur & WireFraming

Inventis MasterClass 07/03/2012

Inventis Web Architects

March 09, 2012
Tweet

More Decks by Inventis Web Architects

Other Decks in Design

Transcript

  1. INFORMATIE ARCHITECTUUR & WIREFRAMING

  2. None
  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