IA WORKSHOP #1 NAVIGATION #2 IA STRUKTUR #3 WIREFRAME
# 1 NAVIGATION DESIGN BRUGERENS VEJ TIL INDHOLD
NAVIGATION ER ALLE DESIGN ELEMENTER DER GUIDER BRUGEREN TIL INDHOLDET
HVOR ER JEG LAD BRUGEREN VIDE HVOR DE ER
HVOR VAR JEG LAD BRUGEREN VIDE HVOR DE HAR VÆRET
HVOR SKAL JEG HEN? LAD BRUGEREN VIDE HVOR DE SKAL HEN
GIV BRUGERNE EN CONTEXT Klassificer indholdet Brug landing pages til at samle relateret indhold Giv links til relateret indhold Vær konsekvente i klassifikation
FØLG KONVENTIONERNE (Også selvom du synes det er kedeligt) Home/forside konvention for navnet på øverste niveau på IA strukturen About/Om os beskriver organisationen historie, værdier, mål, mission etc. Kontakt/Kontakt os email, tlf, adresse, location Logoet skal linke tilbage til forsiden Søgefelt på alle sider
Hvilket website er jeg på? Hvordan kan jeg søge? Hvor er jeg? Hvad er hovedsektionerne? (Global navigation) Hvad er mine muligheder på dette niveau (lokal navigation) og hvad er min kontekst?
1. Klik jer rundt på hjemmesiderne (links på næste to side) 2. Diskuter fordele og ulemper ved de forskellige typer af navigation 3. Diskuter undervejs, hvilken type navigation, der vil egne sig til jeres website 4. Opsamling og spørgsmål i plenum
Horisontal Vertical Tabs Omvendt L Drop down Helside Side-indhold Kontekstuel Relateret Fly-out Brødkrumme Tag-cloud
Footer Alfabetisk Filter Kort Alt på en side Kreativ
# 2 KORTSORTERING, LABELS & IA STRUKTUR
LABELS /...SUCCESS COMES DOWN TO WHAT YOU CALL THINGS DONNA SPENCER
LABELS / DE GODES KARAKTERISTIK SKAB GODE LABELS VED AT: kalde ting ved deres rette navn være konsekvent i jeres brug vide hvilke termer brugerne benytter sig af være så tydelig som mulig
LABELS / IDEER TIL LABELS HVOR KOMMER LABELS IDEER FRA Indhold Brugerundersøgelser Kortsortering Hvad gør andre/konvention
SKAB DIN IA KORTSORTERING Grupper & brugerbehov Grupper, labels, & brugerbehov Iterationer Organisering af indhold
NO COMPUTERS ONLY POST-ITS #2 ØVELSE KORTSORTERING, LABELS & IA STRUKTUR 1. Skriv indhold på post-it sedler (se eksempel på næste side) 2. Grupper indholdet i kategorier og underkategorier og giv dem et sigende label/overskrift. Imens I organisere indholdet finder I måske på nye label, I må gerne omdøbe de eksisterende, men brug en anden farve label til argumentation for hvorfor. 3. Diskutér I gruppen, hvilken IA struktur egner sig bedst til jeres site ift. content, people og context. 4. Tegn et første udkast til jeres IA sitemap på papir (s. 245-253)
PAPIR TEST AF IA KAN BRUGERNE FINDE FREM TIL DET DE SKAL Brugerscenarier Kategorier Underkategorier
# 3 WIREFRAMING VISUALISERING AF INDHOLD OG NAVIGATION
HVAD ER WIREFRAMES OG HVORFOR WIREFRAME simple linier få farver fokus på lay-out brugere skal kunne finde rundt på en wireframe trods manglende visuelt design detaljegrad er varierende FORMÅL: Illustrere websitets indhold uden at forholde sig farve, typografi etc.
REFENCE ZONE WIREFRAME
DETALJERET WIREFRAME
KOMBINERET WIREFRAME
KOMBINERET WIREFRAME
KOMBINERET WIREFRAME
FINJUSTÉR MED GRÅSKALA
SKETCHY WIREFRAMES
OVERSÆTTELSE FRA WIREFRAME TIL VISUAL www.wirefy.com wireframed version af sites
# 3 LAV WIREFRAMES 1. Beslut jer for hvilken type information der skal være på jeres website (tekst, lyd, billeder, video, animation) 2. Tegn wireframes på papir af minimum 2 forskellige sider (forsiden + indholdsside/underside). Jeres wireframes skal illustrere både indhold og navigation (herunder også interne links som genveje og links til relateret indhold). 3. Eksperimenter. Lav flere iterationer der tester måden indholdet bliver struktureret og præsenteret for brugeren. 4. Opsamling og spørgsmål i plenum
INPUT TIL PROJEKTUGEN: TOOLS & TEST Test af IA Papirtest (s.231-237) eller digital test (s.237-240) Test af navigation Gangstertest/trunk test Tænke-højt-test på interaktiv prototype, her kan for eksempel testes efter samme scenarie som i papirtesten af IA Online wireframing tool (gratis) http://mashable.com/2010/07/15/wireframing-tools/ http://axure.com (30 dages free trial) Digitale wireframes i egne programmer Photoshop, illustrator, indesign (interaktiv)