Presentation laddar. Vänta.

Presentation laddar. Vänta.

Informationsstrukturering – Så funkar det! Jeanin Day och Sara Rutgersson, Antrop Umeå 24 april 2007.

Liknande presentationer


En presentation över ämnet: "Informationsstrukturering – Så funkar det! Jeanin Day och Sara Rutgersson, Antrop Umeå 24 april 2007."— Presentationens avskrift:

1 Informationsstrukturering – Så funkar det! Jeanin Day och Sara Rutgersson, Antrop Umeå 24 april 2007

2 Upplägg  Kort om oss  Informationsstrukturering i teorin  …och praktiken  Praktiska tips och råd  Intressanta exempel  Övning i kortsortering  Frågor?

3  Jeanin Day Senior interaktionsarkitekt Antrop sedan 2006, Ericsson etc sedan 1997 Socialstyrelsen, Folksam, Vattenfall, Ams, Regeringskansliet. Läst medie- och kommunikation, samt biblioteks- och informationsvetenskap  Sara Rutgersson Interaktionsarkitekt Jobbat på Antrop sedan 2005 CSN, Ams, HO, Vattenfall, Ongame Läst kognitionsvetenskap i Linköping

4 Informationsstrukturering i teorin

5 Citat ur Vägledningen 24-timmarswebben

6 Utgångspunkt 1 Innehåll Användare Kontext

7 Utgångspunkt 2 Gränssnitt Informationsstruktur

8 Tre nivåer av design och struktur Grafisk form Informationsdesign Informationsstruktur

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

10 Paretos princip  20% av innehållet besvarar 80% av frågorna …men vilka 20%?

11 Två tillvägagångssätt Uppifrån och ner Nerifrån och upp

12 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

13 Nerifrån och upp  Utgår från befintligt innehåll och funktionalitet  Innehållsinventering och - analys  Viktigt vid vidareutveckling

14 …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

15 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…

16 Ofta kombinerade sökmetoder Söka Fråga om hjälp Klicka sig runt

17 Tre typer av informationsbehov Vill veta allt ”Known item”-sökning Vill få en introduktion/översikt

18 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

19 Bred informationsstruktur Startsida

20 Djup informationsstruktur Startsida

21 Informationsstrukturering i praktiken

22 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

23 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

24 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

25 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

26 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

27 Kortsorteringsövningar  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

28 Exempel - Regeringskansliets intranät  Personalinformation på intranätet  Kortsorteringsövningar

29 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

30 ”Lediga tjänster” ”Kompetens- utveckling” ”Arbetsmiljö” ”Riktlinjer” Presentation av statistisk analys i EZCalc.

31 Dokumentation och prototyp Bland de program man kan använda finns:  Word  Mindmapper  PowerPoint  MS Visio  Axure

32 Exempel 1 – MindMapper Struktur åt konsultföretag

33 Exempel 2 – Word Förslag till ny struktur för personalinformation på Regeringskansliets intranät.

34 Exempel 3 – PowerPoint Ny struktur för Ams webbplats

35 Praktiska tips och råd

36 Principer för navigationen  Konsekvent och förutsägbar  Ansluta till de facto-standarder på webben Innehåll Global navigation Lokal navigation

37 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

38 Principer för navigationen Var är jag? Vad i när- heten? Länk till startsidan Sök på alla sidor Saknas: Var har jag varit? Oftast via markering av besökta länkar. Ev. länkstig.

39 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!

40 Exempel Vattenfall – fem nivåer i vänster- spalten ARN - tre nivåer i vänsterspalten SSAB – Första och andra nivån i sid- huvudet och tredje nivån i vänsterspalten

41 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

42 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 MKC – Hm… vad betyder det nu igen? Exempel på tydliga rubriker enligt standard

43 Färgkodning  Mycket effektivt sätt att särskilja sektioner  Använd inte enbart färgkodning på grund av färgblindhet

44 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

45 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

46 Webbkarta  Sorterad efter samma rubriker och hierarki som själva sajten  Ger överblick och visar samtliga nivåer

47 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

48 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

49 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

50 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

51 Informativa webbadresser & sidtitlar  Unik och informativ webbadress (URL:er) på varje sida  Samt unik och informativ sidtitel på varje sida Pga:  Kunna göra bokmärken till enskild sida  Enkelt kunna länka till varje sida  Bättre sökbarhet  Lättare att veta var man befinner sig

52 Rätt längd på rätt sida  Sidor med enbart navigation bör vara korta  Generellt hellre kortare sidor som länkas emellan  Oerfarna användare föredrar korta sidor  Text som läses från början till slut hellre på en sida  Om uppkopplingen långsam hellre en lång sida  Det viktigaste innehållet ska synas utan scrollning

53 Använd inte ramar  Svårt att göra bokmärken  Svårt att skriva ut  Svårt att spara eller skicka en länk  Svårt att bli indexerad bra av sökmotorer  Svårt för besökare som kommer via sökmotorer  Svårt för besökare med skärmläsare eller textwebbläsare  Kan användas när man behöver ”fast” navigation på föränderlig sida  Ange för varje ram  Koppla ihop ramarna så att innehåll inte visas utan navigation om man tex kommer via sökmotor

54

55

56

57

58

59

60 Fem enkla tips

61 Fem enkla råd 1.Ha ”referrer” påslagen i besöksstatistiken 2.Kolla sökorden i webbplatsens egen sökfunktion 3.Ha direktlänkar till de mest populära sidorna på startsidan 4.A-Ö-listor över innehåll är ofta mkt populära 5.Arbeta med delar av webbplatsens informationsstruktur

62 Ytterligare läsning  Information Architecture for the World Wide Web, Louis Rosenfeld & Peter Morville, O’Reilly, 2006 (3 ed.)  Research-based Web Design and Usability Guidelines, U.S. Department of Health and Human Services,  Nyhetsbrev och rapporter från User Interface Engineering,  Artiklar från Boxes and Arrows, tex: nitive_guide nitive_guide

63 Övning i kortsortering  Enkelt sätt att undersöka hur användare grupperar innehåll för olika typer av IT-system.  Resultatet kan användas som stöd för att skapa en informationsstruktur och organisera innehåll.  Fri övning  Tid: 20 min

64 Tack!


Ladda ner ppt "Informationsstrukturering – Så funkar det! Jeanin Day och Sara Rutgersson, Antrop Umeå 24 april 2007."

Liknande presentationer


Google-annonser