Informationsarkitektur - att planera en webbplats

Relevanta dokument
Tillämpad programmering CASE 1: HTML. Ditt namn

WEBB365.SE. Hur skriver man sökmotoroptimerade texter

1. Polopoly och webbpublicering på SU

Wireframe när, vad, hur och varför?

Poddar, bloggar, twitter, youtube, facebook, snapchat, instagram, hemsidor och annat kul på nätet

Starta din försäljning med hjälp av sociala medier

Sociala medier för företag

Fritid för alla - Fritidswebben. En förstudie av Markus Blomqvist & Anna Stam People and technology

Bloggar - Som marknadsföring och varumärkesbyggande. Calle Johansson Essä i Digitala Distributionsformer Högskolan Väst - 23 maj 2011

Prisma Västra Götaland

Synlighet och en dröm. Karl Norrbom, 2013

Gör en egen webbplats

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?

Kategorisidor optimeras för sina produktkategorier och synonymer till dem.

Populärt på internet. 56 Kampanjguide

Att skriva för webben

De 10 mest basala avslutsteknikerna. Direkt avslutet: - Ska vi köra på det här då? Ja. - Om du gillar den, varför inte slå till? Ja, varför inte?

Programmering och begrepp

Sociala medier och Flickr som marknadsföring Essä i kursen Digitala Distributionsformer Högskolan Väst Av: Nicklas Johansson

HANDLING TILL. Från tanke. Metodblad: Påverka på webben

För dig som lärare har vi placerat nya inkomna svar från elever under Följ upp uppgifter medan elev på samma ställer ser alla sina aktiva Uppgifter.

Under Kurser visas dina kurser som kort och om där finns nya uppgifter eller anslag visas antalet i kurskortet.

FEMSTEGSMODELLEN: ÖVNING & CHECKLISTA FÖR EN ÖPPEN OCH TILLGÄNGLIG VERKSAMHET

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Fem tips för att HANTERA en oförstående omgivning!

Kort om World Wide Web (webben)

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér

årskurs F-3 Berättelsen tar sin början.

Pass 2: Datahantering och datahanteringsplaner

SEMSEO sökmotoroptimering SEO "Google Top 10. Google SEO sökmotoroptimering Seminarier 2011

Uppdateramera. Tio tips för en bättre webbplats. PRODUKTIONSBYRÅ AB. 1 Krokedil Produktionsbyrå AB

Källkritik. - om att kritiskt granska och värdera information. Ted Gunnarsson

FEMSTEGSMODELLEN: ÖVNING & CHECKLISTA FÖR EN ÖPPEN OCH TILLGÄNGLIG VERKSAMHET

Denna guide beskriver hur en nyhetsfunktion sätts upp med nyheter från DN. Två delmoment krävs för denna funktionalitet:

En dansk version av detta dokument kan laddas ned här: people/hagerman/retningslinjer.pdf (pdf, 500 kb)

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

GRATIS SEO, SÖK- OPTIMERING? JA, DETTA KAN DU GÖRA SJÄLV!

Optimering av webbsidor

Sovra i materialet. Vad är viktigt? Vad kan tas bort? Korta ner långa texter.

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2.

En introduktion till Community i Mediakatalogen

Pussel DISC/Morot Kombination

Programmering och digital kompetens

Styrelsebloggens bruksanvisning

TDDC74 - Projektspecifikation

Tomas Axelsson

Instruktioner för roedeers.se

Jag är tacksam för synpunkter och medskick, fördelen med en studiehandledning som sprids digitalt är att det är lätt att uppdatera den.

Nya sundbyberg.se. Webbkoncept. v1.0, Sundbyberg där staden är som bäst

En introduktion i sökmotoroptimering för besöksnäringen i Västsverige

Umgås på nätet KAPITEL 6. Chatta via webbläsaren

Slutprojekt 2010 Medieinstitutet. Förstudie Hur Icakuriren ska utveckla sin närvaro i sociala medier för att marknadsföra sig på webben

Lässtrategier för att förstå och tolka texter från olika medier samt för att urskilja texters budskap,

Så skapar du fler affärer på nätet

Skapa spellista i play.lnu.se Gör en samling med filmer som hör ihop

Bra konvertering Grunden till en lönsam affär för alla parter. A. Lägg grunden: Prioritera Strukturera - Fokusera

LYCKA TILL! Inbjudan till DM

Webbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism:

Söktips Att hitta det man letar efter

Programmering och begrepp

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Google Analy+cs. Umeå universitet

Visions guide i sociala medier

Besökarnas utvärdering av. Perioden svar

Välkommen till Studiekanalen.se

HANDLEDARE: Jonny Pedersen Datum: (Detta skrevs i November 09)

Att skriva för webbplatsen. Stöd för webbredaktörer

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

Lägga till bild i e- handeln

Lions Clubs Internationals användarhandbok för e-klubbhuset

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X

Social media strategi för föreningen Vasamuseets vänner

Vad är Internet? Innehåll: Inledning Vad är Internet? Om du kan Internetadressen Söka på Internet Länklistor Övningar Repetition

Självhjälpsprogram för ADHD. Del 1 Att hitta din väg

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson

Internet En enkel introduktion

Avstämning med Referensgrupp Sprint 11 lnu.se + Mina saker

SEMSEO sökmotoroptimering SEO

Projektet. TNMK30 - Elektronisk publicering

Sociala medier för företag

Sociala medier. #val14 #svpol #eupol #ep2014

Skriv före adressen och lämna bort www enligt modellen:

Köpguide för mobila växlar. Modern telefoni till företaget är långt ifrån vad det var för bara några år sedan.

LEKTIONSTIPS. Lektionstips 2:4. Skribenten vill antingen uttrycka en åsikt för att få andra att reagera, eller

Gör en egen webbplats

ASTRAKAN COURSEPLAN. Programmet som sparar tid och förenklar kursadministrationen! ASTRAKAN COURSEPLAN BESTÅR AV TVÅ DELAR:

LATHUND FÖR FRAMGANGSRIKT PAVERKANSARBETE. 2. Möte med. att tänka på före, under och efter besöket

Att skapa en webbplats

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm

Evaluation Summary - CDT104 Grundläggande Webbdesign HT07 Dan Levin

Kom-igång-hjälp för hemsida & e-butik. Praktiska tips för hur du lyckas med innehåll, design och sökmotoroptimering.

BLOGG PETER DPI.FI

Här är några tips om hur du kommer igång med vanliga uppgifter. Komma igång -serien

HUR VI ANVÄNDER SOCIALA MEDIER

Undersök Google. Sida 1 av 9. En digital lektion från

CONTENT MARKETING. 4 steg som hjälper dig att skapa en träffsäker strategi.

annonsinformation Annonsera på en av landets mest besökta turistportaler!

Lata marknadsföraren

SMARTA SÄTT ATT HITTA NYA KUNDER! Lyckas är att ligga steget före

Kom med! Vi har en uppgift som passar dig.

Transkript:

Informationsarkitektur - att planera en webbplats Introduktion Planeringsstadiet för en webbplats (eller vilket projekt som helst) kan vanligtvis bli lite stressigt. Alla har en åsikt om hur en webbplats ska byggas och ofta krockar synpunkterna med varandra. Ditt primära mål för varje webbplats bör vara att bygga något som är användbart för personerna som kommer att använda den. Det spelar ingen roll vad din chef säger, vad killen längre ner i korridoren med doktorshatt i programmering säger eller ens vad du själv föredrar. När allt kommer omkring är det bara åsikterna hos den grupp du bygger webbplatsen för som spelar någon roll. I artikeln kommer vi att titta på de tidiga stadierna i planeringen av en webbplats. Detta arbete kallas ofta informationsarkitektur, IA. Det omfattar att tänka kring vilken din målgrupp är, vilken information och vilka tjänster de behöver från webbplatsen och hur du bör strukturera den för att de ska få detta. Du ser över all information som behöver finnas på webbplatsen och tänker igenom hur du kan bryta ner den i mindre delar, samt hur dessa delar ska förhålla sig till varandra. Artikeln är indelad i följande stycken: Du behöver planera webbplatsen du bygger Introduktion av The Dung Beatles Och sen? Rita en karta över webbplatsen Namnge dina sidor Lägg till några detaljer Sammanfattning Övningsfrågor Du behöver planera webbplatsen du bygger Du kommer nog att trilla på udda webbprojekt som du bara kan kasta dig över utan någon eftertanke, men dessa är utan jämförelse undantag, inte norm. Vi ska använda ett låtsasband, The Dung Beatles, och försöka hjälpa dem genom det tidiga planeringsstadiet för sin webbplats. Vi ska prata med bandet och ta reda på vad de tänkt med sin webbplats och vad de vill se på den. Sedan ska vi hugga i och börja arbeta med att bygga en struktur för bandets information. Introduktion av The Dung Beatles The Dung Beatles (TDB) har ett problem. De är det mest populära bandet i Moose Jaw, Saskatchewan, men de behöver slå ett slag för sin image inför en kommande turné i Nordamerika denna sommar. De har bokade spelningar över hela Kanada och USA, men de är i praktiken helt okända utanför sin hemstad. Om det bara fanns ett sätt att genom teknologi nå ett antal Beatlesfans för en liten kostnad. Som tur är för TDB finns webben. De bestämmer sig för att bygga en sajt som svarar mot deras behov. TDB behöver en plats att göra reklam för spelningarna på sin turné, bygga en bas av fans i andra städer och göra bandet känt. Du ska arbeta igenom deras idéer med dem och se om du kan mejsla fram en plan för deras webbplats. Du bokar ett möte med dina nya kunder för att vaska fram detaljerna i det de är på jakt efter och för att bestämma datum och kostnader. Du inleder mötet med att föreslå ett samtal om mål och syfte med webbplatsen, så du kan få en uppfattning om vad de är ute efter. Vad hoppas bandet nå med en egen webbplats? - 1

TDB berättar om sin kommande turné och hur de vill få ut information till alla Beatlesälskare på platserna de ska besöka. Nu är det februari och de inleder sin turné om fem månader. Ett ögonblick! En webbplats blir inte automatiskt välbesökt eller publicerar sig själv. Av samtalet hittills förstår du att huvudsyftet för webbplatsen är att ge alla som gillar TDB en plats på nätet. Där ska de kunna hålla sig a jour med de senaste nyheterna, turnéplanen och spelställena. Genom fansen (som berättar för varandra) och olika annonsplatser kommer nya besökare att komma till webbplatsen, där de kan ladda ner låtar, se bilder på bandet (i full mundering) och läsa var de kan se dem live. Raul McCoffee, gruppens frontfigur, påpekar att det vore bra om man kunde få in lite extra pengar till turnén genom att sälja CD och souvenirer. Du samlar bandet och skissar snabbt upp vad besökare kan vilja ha när de kommer till sajten. Det är bara en grov idéskiss och har i det här läget knappast någon struktur. Det kommer att finnas två grupper som besöker sidan: de som redan känner till TDB och gillar dem och de som är nyfikna. Det gäller att tillfredsställa båda grupperna på olika sätt. De som är möjliga fans behöver upptäcka gruppen och gilla den, medan de nuvarande fansen helt enkelt vill öka sitt beroende (bildligt talat). Vilken slags information kommer dessa båda grupper att söka? Figur 1 ger en antydan om detta. Det är en typisk skiss på vad du kommer att göra i fortsättningen när du är i detta skede på ett webbprojekt. Ur den kommer du att arbeta fram vilka sidor webbplatsen behöver och hur de ska länkas samman. Figur 1: Detta vill dina besökare se - 2

Ni bestämmer en budget och kommer överens att publicera webbplatsen om en månad. Du lovar att återkomma till bandet om några dagar med skisser på den inriktning webbplatsen kommer att få. Och sen? Rita en karta över webbplatsen Många skulle rita en sajtkarta i detta skede - det ser ju ut som ett organisationsschema. Det är en enkel grafik som helt enkelt visar namnen på varje sida och hur de hör hemma i den övergripande strukturen på sajten. Personligen vill jag lägga till lite mer detaljer och fundera över syfte och innehåll med varje sida. Ta till exempel startsidan. Vad är den egentligen? Är den ett enkelt välkommen till vår sida -budskap (suck!) eller är det en mer dynamisk sida som innehåller nyheter och spännande foton? Fundera några minuter på vad sidorna i skissen ovan skulle kunna bli och vad som skulle kunna finnas på de olika sidorna. Försök rita din egen sajtkarta innan du fortsätter med nästa avsnitt. Nu är det dags för grunderna: ett av dessa organisationsschema som jag nämnde ovan. Figur 2 visar mitt försök att ta den första skissen och omvandla den till ett orgnisationsschema för sajten: Figur 2: Första sajtstrukturen - 3

Ovanstående sammanfattar allt vi behöver på vår sida - men det finns ingen riktigt ordning här. Nu är det bara en stor samling sidor, och hittills har jag inte heller funderat mycket över vad saker och ting kallas. Under ytterligare ett arbetspass försökte jag gruppera informationen i lite större områden. Figur 3 visar det jag gjorde: Figur 3: Den nya sajtstrukturen Jag har gjort några olika saker med den förnyade strukturen. Sidan Band News ger TDB en plats att posta allt de vill dela med sina fans. När deras sommarturné är över och sidan Tour dates & locations (turnédatum och platser) är inaktuell kommer de att kunna lägga ut material. Om de använder bloggformatet blir det möjligt för fansen att kommentera de olika inläggen och kommer att hjälpa till att bygga en community på nätet runt TDB. Det är förmodligen nyheter och turnén som kommer att väcka mest diskussion, så vi för samman dessa. Dessutom är ordet News (nyheter) ett enklare mer allmänt ord, som folk kommer att känna igen snabbare om de ögnar sidan för att hitta det de söker. - 4

Vår nya sida About The Dung Beatles (Om The Dung Beatles) grupperar bandmedlemmarnas biografier och bilder. Detta val ger oss en startpunkt för de enskilda bandmedlemmarnas biografier. Om vi följer resonemanget ovan, är About (om) ett vanligt begrepp som används på många webbplatser. När en besökare vill lära sig mer om ett företag, en produkt, en tjänst eller en person söker de som regel efter en About (om)- länk. Till sist konstaterar vi att Discography (diskografi) är en lite väl tekniskt begrepp. Troligen förstår färre personer vad det innebär än The Music (Musik). Det öppnar även för att lägga till ytterligare material: var man hämtat inspirationen, bakgrunden till en särskild låt... du förstå vad jag menar. Nu är det nog dags att dra igång. Efter att jag sagt något om att ge vettiga namn till sidorna, kommer vi att lägga till ytterligare något om varje sida. Namnge dina sidor Sidnamnen kan vara en av de mest avgörande besluten du gör under konstruktionen av en webbplats. Det är inte bara viktigt för dina besökare, så de hittar på sajten, det är ytterligare en av sakerna som bestämmer hur lätt det är att finna sidan genom en sökmotor (du kommer att finna en hel del hänvisningar till sökmotoroptimering under kursen). När sökmotorer bestämmer hur viktig en webbsida är letar den efter text som finns på sidan, dess URL (sökväg) och texten på länkar till sidan. Att ge dina sidor vettiga namn och vettiga URLer kommer att underlätta för alla som länkar till sina sidor att ge vettiga beskrivningar. Vi tar ett exempel. Låt oss säga att du är ett bilföretag med en modell som kallas The Speedster. Du har en webbplats för att göra reklam för bilen och en av sidorna räknar upp de egenskaper bilen har. Kallar du denna sida för egenskaper, tillgängliga egenskaper, Speedsters egenskaper eller extrautrustning? Jag skulle föreslå att Speedsters egenskaper är det bästa alternativet av dessa. Det talar om vad sidan innehåller och har stora möjligheter att visas högt upp på en söksida och kommer att vara framträdande (bra för sökmotorindexering) och du kanske till och med kan få med den i URLen (ungefär www.bilfirma.se/speedster/speedster-egenskaper ). Lägg till några detaljer Du behöver inte lösa allt just nu, men du behöver åtminstone ta fram en kort beskrivning av vad du tänkt till varje sida. Numrera varje sida och ge en kort beskrivning av den, efter att du tagit fram strukturen på sajten. Se figur 4 för ett exempel på hur det kan se ut för startsidan (du kommer att få möjlighet att praktisera på de övriga sidorna i en av övningsuppgifterna i slutet av artikeln.) - 5

Figur 4: Detaljer om sida för startsidan Det är ungefär så mycket du behöver göra just nu. Du behöver inte beskriva sidans funktionalitet, teknologin för att bygga den eller design/layout närmare. Beskriv bara det du tänkt i allmänna ordalag. Målet här är att kommunicera det du tänker till din kund och att tvinga dig själv att tänka igenom det hela. I det här stadiet är det inte ovanligt att inse att man har för många sidor och att man inte kommer att hitta innehåll för alla. När man skapar en sidhierarki kan det faktiskt gå till överdrift. Tänk om bandmedlemmarna bara vill ha en mening om sig själva, då är det onödigt att skapa en biografisida för varje medlem. Det skulle kunna göras på en sida. Sammanfattning Artikeln har tagit upp en webbplats ur ett helhetsperspektiv och hur du ska tänka när du bygger strukturen för den. I nästa artikel kommer du ner på sidnivå och undersöker vad som krävs för att göra en bra sajt, vilka egenskaper den bör ha och var de ska finnas. Artikel 8, 9 och 10 tar sedan upp den visuella designen på en sida. Det sker alltså i 3 logiska steg (kontrollera med kunden vid varje steg för att försäkra dig om att de är med på noterna): 1. Först bestämmer du innehållet på webbplatsen och bestämmer vilken struktur innehållet ska ha. 2. I nästa steg bestämmer du vilken funktionalitet som ska finnas på webbplatsen. 3. I sista steget, innan du ger dig på att koda din webbplats, tar du fram den visuella designen på den - sidlayouter, färgschema etc. Övningsfrågor Titta på figur 1 och försök att göra en liknande brainstorm för en webbplats om en bil (ta vilken befintlig eller påhittad modell du vill). Vad vill besökarna på webbplatsen veta? Finns det något på befintliga webbplatser för bilar som du anser vara viktigt? Malplacerat? Ta din brainstorm och försök organisera informationen. Hur grupperar du sidorna på ett vettigt sätt? Sök efter sajter för band och se vad de erbjuder. Missade vi något? - 6

Se på figur 4 och försök göra liknande beskrivningar för de övriga sidorna jag identifierat på webbplatsen. Artikeln är en översättning av Thomas Lindbjer av en artikel: http://dev.opera.com/articles/view/6-information-architecture-planning-o/ Den ingår i en hel serie med artiklar: http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Den är använd i en webbdesignkurs vt 2009, te3.tittahit.se - 7