IA WORKSHOP #1 NAVIGATION #2 IA STRUKTUR #3 WIREFRAME

Transkript

1 IA WORKSHOP #1 NAVIGATION #2 IA STRUKTUR #3 WIREFRAME

2 # 1 NAVIGATION DESIGN BRUGERENS VEJ TIL INDHOLD

3 NAVIGATION ER ALLE DESIGN ELEMENTER DER GUIDER BRUGEREN TIL INDHOLDET

4 HVOR ER JEG LAD BRUGEREN VIDE HVOR DE ER

5 HVOR VAR JEG LAD BRUGEREN VIDE HVOR DE HAR VÆRET

6 HVOR SKAL JEG HEN? LAD BRUGEREN VIDE HVOR DE SKAL HEN

7 GIV BRUGERNE EN CONTEXT Klassificer indholdet Brug landing pages til at samle relateret indhold Giv links til relateret indhold Vær konsekvente i klassifikation

8 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 , tlf, adresse, location Logoet skal linke tilbage til forsiden Søgefelt på alle sider

9 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?

10 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

11 Horisontal Vertical Tabs Omvendt L Drop down Helside Side-indhold Kontekstuel Relateret Fly-out Brødkrumme Tag-cloud

12 Footer Alfabetisk Filter Kort Alt på en side Kreativ

13 # 2 KORTSORTERING, LABELS & IA STRUKTUR

14 LABELS /...SUCCESS COMES DOWN TO WHAT YOU CALL THINGS DONNA SPENCER

15 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

16 LABELS / IDEER TIL LABELS HVOR KOMMER LABELS IDEER FRA Indhold Brugerundersøgelser Kortsortering Hvad gør andre/konvention

17 SKAB DIN IA KORTSORTERING Grupper & brugerbehov Grupper, labels, & brugerbehov Iterationer Organisering af indhold

18 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 )

19 PAPIR TEST AF IA KAN BRUGERNE FINDE FREM TIL DET DE SKAL Brugerscenarier Kategorier Underkategorier

20 # 3 WIREFRAMING VISUALISERING AF INDHOLD OG NAVIGATION

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

22 REFENCE ZONE WIREFRAME

23 DETALJERET WIREFRAME

24 KOMBINERET WIREFRAME

25 KOMBINERET WIREFRAME

26 KOMBINERET WIREFRAME

27 FINJUSTÉR MED GRÅSKALA

28 SKETCHY WIREFRAMES

29 OVERSÆTTELSE FRA WIREFRAME TIL VISUAL wireframed version af sites

30 # 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

31 INPUT TIL PROJEKTUGEN: TOOLS & TEST Test af IA Papirtest (s ) eller digital test (s ) 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) (30 dages free trial) Digitale wireframes i egne programmer Photoshop, illustrator, indesign (interaktiv)