Lyssna på ljudversionen av den här artikeln
Som en standarddel av UX-processen skapar designers informationsarkitektur när de bygger produkter. Informationsarkitekturen definierar alla vägar och stigar som användarna kan ta genom en app eller webbplats och är mycket mer än bara en sitemap som visar vilken sida som leder vart.
Likt byggnadsarkitekter som använder en ritning för att konstruera varje del av ett hus, från fysiska strukturer till mer komplexa inre funktioner som el och VVS, beskriver informationsarkitekturen hierarkin, navigeringen, funktionerna och interaktionerna på en webbplats eller i en applikation. Och precis som ritningar är det mest värdefulla dokumentet för en arkitekt att använda vid uppförandet av en byggnad, kan informationsarkitektur vara det mest kraftfulla verktyget i en designers arsenal.
Att utveckla en sådan är dock inte så enkelt som att sätta ihop en lista med funktioner och kartlägga hur de fungerar – låt oss undersöka processen.
Vad är informationsarkitektur och varför är det viktigt?
Informationsarkitektur (IA) är, likt en ritning, en visuell representation av produktens infrastruktur, funktioner och hierarki. Detaljnivån är upp till designern, så IA kan också omfatta navigering, programfunktioner och beteenden, innehåll och flöden. Det finns ingen fastställd gräns för IA:s storlek eller form, men den bör ändå omfatta produktens generaliserade struktur så att vem som helst (teoretiskt sett) ska kunna läsa den och förstå hur produkten fungerar.
Vi kommer ofta att använda oss av referensen till blåkopian eftersom syftet med de båda dokumenten är nästan identiskt. Precis som en blåkopia ger IA konstruktörer (samt produktutvecklings- och ingenjörsteam) ett fågelperspektiv över hela produkten. Att ha ett enda dokument som ger en enkel och begriplig bild av hur applikationen eller webbplatsen fungerar är avgörande för att utveckla nya funktioner, uppdatera befintliga funktioner och för att se vad som är möjligt med tanke på den befintliga produkten.
Med IA tillgänglig blir det betydligt lättare att fatta viktiga beslut för nya funktioner och implementeringar, att förstå tidslinjer för produktförändringar och att följa användarnas beteende genom flera processer.
Låt oss dyka ner i en grundläggande video för att se hur en IA byggs upp.
Hur man utformar informationsarkitektur
Som en del av UX-processen följer IA-utformningen mycket likartade mönster som flödesschemat: Lägg till former och förbind dem med linjer på ett organiserat sätt i ett enda dokument. Utmaningen när man bygger IA ligger i att förstå hur din app eller webbplats faktiskt fungerar ur användarens perspektiv och hur man organiserar den informationen i ett läsbart och lättläst format.
Det finns två huvudkrav för att faktiskt konstruera IA: att organisera den genom en visuell hierarki (det vill säga en hierarki av funktioner, funktioner och beteenden) och att skapa en legend för att visa olika typer av funktioner, interaktioner och flöden. Med ett standardflödesschema följer formerna specifika krav (rektanglar är processer, diamanter är beslutspunkter etc.); att följa denna nomenklatur är dock inget krav.
Med andra ord är de viktigaste faktorerna för att bygga din IA var enskilda komponenter i arkitekturen är placerade (hierarkiskt) och hur de är märkta och visade.
Förstå och visa visuell hierarki
Den mest utmanande aspekten av att skapa en ny informationsarkitektur är nästan alltid att konstruera den hierarkiskt. Det är en vanlig missuppfattning att IA måste byggas ”uppifrån och ner”. Det är nästan alltid svårare att göra om det inte är en befintlig produkt, som i videon ovan.
När du bygger IA från grunden, om inte din webbplats eller applikation följer ett standardformat, är det mycket svårt att rita upp något efter den översta nivån. Det är som att be en mekaniker att bygga en bil uppifrån och ner i stället för i delar. Varje del måste konstrueras i förväg med egen forskning, tid för design och utveckling. Samma sak gäller för IA.
Den visuella hierarkin är en värdefull tillgång för IA, inte bara för att den ger läsaren ett bättre sammanhang, utan också för att den generaliserar viktiga områden i produkten. Om den viktigaste funktionen i din app är att beställa en resa (a la Uber eller Lyft), vilket kan göras från hemsidan, kommer den sidan att ha flest beröringspunkter och det största värdet för produkten. Samma sak gäller för den visuella hierarkin.
Sitemaps är praktiska för att förstå hierarkin eftersom de organiserar sidorna numeriskt (t.ex. 1.0 Startsida, 2.0 Betalning, 2.1 Lägg till betalningsmetod etc.). Eller tänk på exemplet i bilden nedan för Duke Universitys bibliotekswebbplats, där den översta navigationen inte bara finns högst upp utan också är markerad så att den är synlig i hela applikationen.
Hierarki av former, färger och andra visuella element
Bortsett från hierarkin gör arkitekturen ovan en annan sak bra: Den visar varje engagemangspunkt unikt efter behov genom en enkel legend och några nyckelfraser. Legenden anger sid- och innehållstyp och anger variationer mellan färger och former. Detta är viktigt, för även om Dukes webbplats verkar ganska enkel, går IA bara tre nivåer djupt. Varje gul rektangel betecknar en applikation, så processerna inom var och en av dessa rutor ingår inte i det här dokumentet!
Även utan att dessa delar finns tillgängliga är strukturen sådan att vi kan förstå hur man navigerar på webbplatsen enbart genom IA. Det slutar när vi når en applikation inom webbplatsen – det behöver det inte göra.
I IA nedan är för ett spel. Med hjälp av fyra former, ingen färg och smart placerade textstycken är varje viktig interaktion begriplig utan prototyper, och ännu viktigare är att den kan förstås av alla som arbetar med den.
Denna modell är inte perfekt, men den organiserar app-hierarkin tydligt och avgränsar vad användaren antingen ser eller gör vid varje given tidpunkt.
De bästa verktygen för informationsarkitektur
Det finns gott om mjukvarutillämpningar som gör det möjligt att bygga en IA, men få är tillräckligt enkla och snabba för att göra upplevelsen rolig. Eller åtminstone lätt att hantera.
Draw.io, som används i videon ovan, är helt gratis för personligt och professionellt bruk och ansluts automatiskt till Google Drive. Det har också integrationer med Confluence och JIRA, som är betalda. Draw.io är utmärkt för flödesscheman, skapande av användarflöden och informationsarkitektur, och med Drive-funktionen kan flera personer arbeta på samma dokument och se ändringar live. Det finns också en gratis offlineversion.
Lucidchart är ett annat bra verktyg som ger en något bättre upplevelse än Draw.io och har ytterligare fördelar som förbyggda mallar, många fler integrationer, en mobilapp (betygsatt med 2,5 stjärnor på App Store) och stöd för företag.
Omnigraffle och Visio är sedan länge viktiga stöttepelare i branschen och fungerar utmärkt för att bygga upp och underhålla en IA-design, även om Visio endast är online (den äldre offline-versionen är endast Windows-versionen) medan Omnigraffle endast är Mac-versionen och kräver separata köp för MacOS- och iOS-versionerna. OmniGraffle har en fördel jämfört med de stora konkurrenterna, nämligen att det tillhandahåller JavaScript- och AppleScript-automatisering, vilket för de flesta formgivare kan vara onödigt, men typiskt sett uppskattar heltidsanställda informationsarkitekter det.
Alla verktyg som anges ovan är gjorda för snabbhet och användarvänlighet, särskilt när det gäller flödesscheman, som följer nästan identiska principer som informationsarkitektur. Andra program som Balsamiq, MindMeister, MindManager eller XMind erbjuder alla ett liknande beteende men är byggda för andra huvudsyften, t.ex. prototypframställning eller tankekartläggning.
Bästa metoder för informationsarkitektur
Det finns få definierade regler för vad som utgör informationsarkitektur, men när du går igenom processen bör du tänka på följande:
Förhåll dig inte till hierarki, utan fokusera på struktur
Hierarki är justerbar. Hemsidan kommer alltid att vara hemsidan, men vart den leder, hur användarna tar sig till dessa platser och allt däremellan och bortom bestäms senare.
Alla processer ska vara logiska
Även om IA i UX-processen är till för användarinteraktioner måste varje steg på vägen vara logiskt. Registreringsskärmar ska inte leda till inställningar, en kamerafunktion ska inte hoppa till en kartvy … listan är lång.
Håll dig till UX-processen
Ett vanligt misstag är att bara göra IA, utan resurser, forskning eller andra tillgångar eller arbete. Det är som att säga till en författare att skriva en bok utan en översikt, eller till en programmerare att koda en app utan prototyper.
Du är kartografen
Kartografer tar hänsyn till allt på en karta, från bergskedjor till statsgränser. Precis som kartmakare bestämmer designers vad som ingår i IA-designen. Enskilda sidor, specifika användarbeteenden, sammanhang för beslutspunkter… och så vidare.
I slutändan bestämmer kartografen vad som ska finnas på kartan utifrån användarnas behov. Samma sak gäller för designers, så konstruera IA för slutanvändaren, nämligen produktutvecklings- och designteamen.
Informationsarkitektur är ständigt föränderlig och utvecklande
För att ytterligare en gång slå fast poängen är alla IA:er byggda för förändring. Produkterna utvecklas, designen ändras, användarna anpassar sig och cykeln fortsätter om och om igen. Ta det inte på för stort allvar och var medveten om att det alltid kommer att finnas utrymme för förbättringar. Sträva inte efter perfektion, utan bygg en enkel, anpassningsbar IA.
Min informationsarkitektur är klar… vad händer nu?
Det är en vanlig föreställning att designarbete aldrig är riktigt färdigt, och det är definitivt fallet med informationsarkitektur. De växer och krymper och förändras i takt med att våra produkter gör det. Till skillnad från en ritning för en byggnad kommer IA alltid att utvecklas utifrån allt från användarnas behov till nya funktioner eller en produktöversyn. En stor del av strukturen kan förbli densamma och ge konsistens mellan olika versioner så att användarna inte blir förvirrade.
Och det är en bra sak. Att veta att IA är ett flytande dokument – ett som sannolikt ändras varje vecka, och ibland till och med dagligen – är ett kraftfullt sätt att upprätthålla den övergripande strukturen för din app eller webbplats utan att någonsin röra koden eller skapa nya prototyper. Ju bättre hela produktutvecklingsteamet känner till IA, desto snabbare kommer alla att veta vad som är möjligt och vad som inte är möjligt, och hur seriöst allt förmodat ”enkelt arbete” verkligen är.
Vilket för oss till den verkliga skönheten med informationsarkitektur: Det finns ingen fördefinierad utgångspunkt. Medan den traditionella UX-designprocessen dikterar att IA byggs efter att ha slutfört tillräckligt många användarflöden; beväpnad med massor av användar- och konkurrensundersökningar, kan det också vara det första som görs … eller det sista. Prototypprocessen ger ofta information om hur vissa beteenden eller handlingar bör ske som skulle vara svåra att föreställa sig från en logisk eller fantasilös IA.
Som en praxis i ständig utveckling är IA-design en konst lika mycket som en färdighet, vilket delvis är anledningen till att stora företag har tjänster som informationsarkitekter. Dessa designers är portvakter för massiva system, och med sin förståelse för produktutveckling över tid hjälper de till att driva produkt-, design- och ingenjörsteam att fatta rätt beslut under flera år. Den skalan av organisation är inte för alla designers, men varje designer kan bygga en enkel, begriplig informationsarkitektur.
– – – –
Rekommenderad läsning om informationsarkitektur
IA för webben och bortom den
Hur man får en mening med vilken röra som helst: Informationsarkitektur för alla
Grunderna i informationsarkitektur
Skillnaden mellan informationsarkitektur och UX-design