640 likes | 955 Views
Informationsstrukturering – Så funkar det!. Jeanin Day och Sara Rutgersson, Antrop Umeå 24 april 2007. Upplägg. Kort om oss Informationsstrukturering i teorin …och praktiken Praktiska tips och råd Intressanta exempel Övning i kortsortering Frågor?.
E N D
Informationsstrukturering – Så funkar det! Jeanin Day och Sara Rutgersson, Antrop Umeå 24 april 2007
Upplägg Kort om oss Informationsstrukturering i teorin …och praktiken Praktiska tips och råd Intressanta exempel Övning i kortsortering Frågor?
Jeanin DaySenior interaktionsarkitektAntrop sedan 2006, Ericsson etc sedan 1997Socialstyrelsen, Folksam, Vattenfall, Ams, Regeringskansliet.Läst medie- och kommunikation, samt biblioteks- och informationsvetenskap Sara RutgerssonInteraktionsarkitekt Jobbat på Antrop sedan 2005 CSN, Ams, HO, Vattenfall, Ongame Läst kognitionsvetenskap i Linköping
Utgångspunkt 1 Innehåll Kontext Användare
Utgångspunkt 2 Gränssnitt Informationsstruktur
Tre nivåer av design och struktur Grafisk form Informationsdesign Informationsstruktur
En bra informationsstruktur? Effektiv Flexibel Enkel Logisk? Snabbt, lätt och enkelt för användarna att hitta info eller göra den uppgift de vill utföra.
Paretos princip 20% av innehållet besvarar 80% av frågorna …men vilka 20%?
Två tillvägagångssätt Nerifrån och upp Uppifrån och ner
Uppifrån och ner Utgår från besökarnas frågor eller uppgifter Dessa identifieras med hjälp av användarstudier Lätt stort fokus på start-sidan och huvudrubriker-nas startsidor
Nerifrån och upp Utgår från befintligt innehåll och funktionalitet Innehållsinventering och -analys Viktigt vid vidareutveckling Nerifrån och upp
…och inifrån och ut, i ”kärnmodellen” Utgår från ett antal prioriterade kärnsidor eller funktioner Optimerar dessa sidors sökbarhet (vägar in och vidare) via Google, menyer, startsida etc Skapar informationsdesign och struktur utifrån det prioriterade innehållet
Informationssökningsbeteenden Två huvudmetoder: Att bläddra och klicka sig fram”browsning” Att söka i sökruta Varierar utifrån person och situation Viktigt att tillgodose alternativa söksätt:navigation, webbkarta, sökfunktion, A-Ö-index…
Ofta kombinerade sökmetoder Klicka sig runt Söka Fråga om hjälp
Tre typer av informationsbehov Vill få en introduktion/översikt Vill veta allt ”Known item”-sökning
Fungerande informationshierarkier Förr regler av typen ”max 7 klick” UIE - idé: ”The scent of information” Viktigast att känna att man är på rätt väg och att doftspåren blir starkare Användarna söker efter ”trigger words” Viktigt att identifiera och använda dessa
Bred informationsstruktur Startsida
Djup informationsstruktur Startsida
Hur gör man då? • Utgå från faktiska nuläget inte imaginära nolläget • Utvärdera, testa, granska dagens lösning, +/- • Risk 1 – Den Stora Omdesignen av Allt • Risk 2 – Nytt publiceringssystem
Användarnas behov och krav Involvera användarna genom tex: Referensgrupper Användningstester Intervjuer Genomgångar/granskningar av webbplatsen Identifiera och prioritera gärna olika användargrupper Personas kan vara ett bra verktyg för prioritering av krav
Effektmål Ofta definieras endast projektmål:- ”Den nya webbplatsen ska lanseras 1 maj 2007”- Vi ska öka antalet besökare med 50% Effektmål är mätbara och kopplade till verksamhetens mål.- Effektivisera handläggarnas arbete med 25%- Ge svar på alla medborgarnas frågor inom 36 timmar- Minst 100 personer begär mer info om att bo i kommunen via webbplatsen- Minst 20 intresseanmälningar från företag om att etablera sig på orten
Kravspecifikation och prototyp Användarkrav och effektmål dokumenteras i kravspecifikation- Innehåll- Funktionalitet- Icke-funktionella krav - Följa standarder (tex 24-webben, HTML, WAI)- Uppföljning av mål Första prototypen utvecklas: - Informationsstruktur och navigation
Att skapa en informationsstruktur Fria workshops med ”post it”-lappsövningar Kortsorteringsövningar - Individuellt eller i grupp- Öppna eller slutna Frågor och svar- Ha uppgifter, visa rubriker Användningstester
Kortsorteringsövningar 20-80 kort Rubriker över befintlig/planerad innehåll och funktionalitet Rubriker per sida eller avdelningar (kan blanda) Ta med tomma kort Gärna i grupper om 3 Representativa användare Tar mellan 1-2 timmar Dokumentera med kamera eller i Excel-ark Manuell eller statistisk analys Tips: olikfärgade korthögar
Exempel - Regeringskansliets intranät • Personalinformation på intranätet • Kortsorteringsövningar
Regeringskansliets intranät 3 definierade målgrupper:- Handläggare/dep.sekreterare (inkl. personalare)- Assistenter- Chefer 3 träffar med 3 p. ur varje målgrupp - totalt 9 träffar Varje träff tog två timmar, individuell + gemensam sortering Totalt 27 enskilda och 9 gemensamma strukturer, dvs 36 st 88 kort med befintligt och planerat innehåll Manuell och statistisk analys
Presentation av statistisk analys i EZCalc. ”Lediga tjänster” ”Kompetens-utveckling” ”Arbetsmiljö” ”Riktlinjer”
Dokumentation och prototyp Bland de program man kan använda finns: Word Mindmapper PowerPoint MS Visio Axure
Exempel 1 – MindMapper Struktur åt konsultföretag
Exempel 2 – Word Förslag till ny struktur för personalinformation på Regeringskansliets intranät.
Exempel 3 – PowerPoint Ny struktur för Ams webbplats
Principer för navigationen Konsekvent och förutsägbar Ansluta till de facto-standarder på webben Global navigation Lokalnavigation Innehåll
Principer för navigationen Var är jag? Var kan jag gå? Var har jag varit? Länk till startsidan Länk till sökfunktion och ev. sajtkarta Ingen länk till sidan där du befinner dig Se vilka sidor som ligger nära den där du befinner dig
Principer för navigationen Länk till startsidan Sök påalla sidor Var är jag? Var är jag? Saknas:Var har jag varit?Oftast viamarkering avbesökta länkar.Ev. länkstig. Vad i när-heten?
Utformning av navigationssystem U.S. Guidelines: undersökning visar att den mest effektiva navigationen har:- Huvudrubrikerna i vänsterspalten- Andra och tredje nivåns rubriker tillsammans- Bäst fungerade det med alla tre i vänsterspalten- Alla tre i högerspalten nästan lika bra Sidhuvud eller vänsterspalt är de facto-standard Relaterat innehåll grupperas tillsammans Bygg inte upp navigationen med javaskript!
Exempel SSAB – Första och andra nivån i sid-huvudet och tredje nivån i vänsterspalten ARN - tre nivåer i vänsterspalten Vattenfall – fem nivåer i vänster-spalten
Akta er för högerspalten Blind yta för många användare Lägg inte viktigt innehåll här Undvik reklamliknande puffar Högerspalten används på 2:a men inte 3:e nivån
Utformning av rubriker Använd samma ord som besökarna Använd samma ord som andra webbplatser Använd inte kryptiska förkortningar Använd inte VERSALER Exempel på tydliga rubriker enligt standard MKC – Hm… vad betyder det nu igen?
Färgkodning Mycket effektivt sätt att särskilja sektioner Använd inte enbart färgkodning på grund av färgblindhet
Länkstigar (”breadcrumbs”) Forskningsresultat: - ingen skillnad på effektivitet med eller utan länkstigar En introduktion till hur länkstigar fungerar ökade effektiviteten avsevärt- Bra investering för ”super-användare” eller på intranät
Sökfunktion Sökruta på alla sidor Användarna vill ha det ”som på Google…” Ofta räcker enkel sökruta Fungera både med Enter och sökknapp Stor eller liten bokstav bör ej göra skillnad Frekvent använda ord ska ge relevanta resultat, tex ”dagis” Överskådlig resultatlista Informativt felmeddelande med tips
Webbkarta Sorterad efter samma rubriker och hierarki som själva sajten Ger överblick och visar samtliga nivåer
A-Ö-lista Ofta flitigt använda Alternativ informationsstruktur Leder direkt till innehållet Ofta manuellt arbete att uppdatera och underhålla Olika varianter av A-Ö-listor
Rör inte min bakåt-knapp! Mycket viktig funktion för många Ta inte bort bakåt-knappens funktionalitet Öppna inte nya fönster. Om ni gör det: - täck inte hela skärmen- visa tydligt hur man stänger fönstret- visa att ett nytt fönster öppnas med ikon/text OK nya fönster:- Om loggat ut från skyddad del- Just gjort elektronisk underskrift
Listor i rullgardinsmenyer mm Ordnas så effektivt som möjligt för användaren Tydlig rubrik ovanför listan Gärna listor i brödtexten Oftast: Det viktigaste/mest använda alternativet överst Alfabetisk eller numerisk ordning
Utformning av länkar Länka betydelsebärande ord Undvik ”läs mer” och ”klicka här” Forskningsresultat – De mest effektiva länkarna är cirka 20 tecken långa Markera länkar tydligt med färg och understrykning Markera besökta länkar i mer dämpad ton Markera aktiva länkar Länkar i textformat hellre än bilder Samma ordalydelse i länk och rubrik på målsidan