Beluister de audioversie van dit artikel
Als een standaardonderdeel van het UX-proces maken ontwerpers informatiearchitectuur bij het bouwen van producten. Het definiëren van alle wegen en paden die gebruikers door een app of website kunnen nemen, informatie-architectuur is veel meer dan alleen een sitemap om te laten zien welke pagina waar naartoe leidt.
Gelijk aan bouwarchitecten die een blauwdruk gebruiken om elk onderdeel van een huis te bouwen, van fysieke structuren tot meer complexe binnenwerken zoals elektriciteit en loodgieterswerk, beschrijft informatie-architectuur de hiërarchie, navigatie, functies en interacties van een website of applicatie. En net zoals blauwdrukken voor een architect het meest waardevolle document zijn om te gebruiken bij de bouw van een gebouw, kan informatie-architectuur het krachtigste instrument zijn in het arsenaal van een ontwerper.
Het ontwikkelen ervan is echter niet zo eenvoudig als een lijst met functies bij elkaar zetten en in kaart brengen hoe ze werken – laten we het proces onderzoeken.
Wat is informatie-architectuur, en waarom is het belangrijk?
Informatie-architectuur (IA) is, net als een blauwdruk, een visuele weergave van de infrastructuur, functies en hiërarchie van het product. De mate van detail is aan de ontwerper, dus IA kan ook navigatie, toepassingsfuncties en gedragingen, inhoud, en stromen omvatten. Er is geen vaste limiet aan de omvang of vorm van IA; niettemin moet het de algemene structuur van het product omvatten, zodat iedereen (theoretisch) in staat zou moeten zijn om het te lezen en te begrijpen hoe het product werkt.
We zullen de blauwdrukreferentie vaak gebruiken omdat het doel van beide documenten vrijwel identiek is. Net als een blauwdruk biedt IA ontwerpers (maar ook productontwikkelings- en engineeringteams) een overzicht van het hele product. Het hebben van een enkel document dat een eenvoudige en begrijpelijke voorstelling geeft van hoe de applicatie of website werkt, is van vitaal belang voor het ontwikkelen van nieuwe functies, het bijwerken van bestaande functies, en om te zien wat er mogelijk is gezien het bestaande product.
Met IA beschikbaar, wordt het aanzienlijk gemakkelijker om belangrijke beslissingen te nemen voor nieuwe functies en implementaties, om tijdlijnen voor productwijzigingen te begrijpen, en om gebruikersgedrag door meerdere processen te volgen.
Laten we in een basisvideo duiken om te zien hoe een IA wordt gebouwd.
Hoe informatiearchitectuur te ontwerpen
Als onderdeel van het UX-proces, volgt IA-ontwerp zeer vergelijkbare patronen als flowcharting: Voeg vormen toe en verbind ze met lijnen op een georganiseerde manier tot een enkel document. De uitdaging bij het bouwen van IA ligt in het begrijpen hoe uw app of website eigenlijk werkt vanuit het perspectief van de gebruiker, en hoe die informatie te organiseren in een leesbaar, leesbaar formaat.
Er zijn twee belangrijke vereisten voor het daadwerkelijk construeren van IA: het organiseren door middel van een visuele hiërarchie (dat wil zeggen, een hiërarchie van functies, functies en gedrag) en het creëren van een legenda voor het weergeven van verschillende soorten functies, interacties, en stromen. Bij een standaard stroomdiagram volgen de vormen specifieke vereisten (rechthoeken zijn processen, ruiten zijn beslissingspunten, enz.); het volgen van die nomenclatuur is echter geen vereiste.
Met andere woorden, de belangrijkste factoren bij het bouwen van uw IA zijn waar individuele componenten van de architectuur worden geplaatst (hiërarchisch), en hoe ze worden gelabeld en weergegeven.
Inzicht in en weergave van visuele hiërarchie
Het meest uitdagende aspect van het maken van een nieuwe informatie-architectuur is bijna altijd de hiërarchische opbouw ervan. Het is een veel voorkomende misvatting dat IA “van boven naar beneden” moet worden opgebouwd. Dat is bijna altijd moeilijker om te doen, tenzij het een bestaand product is, zoals in de video hierboven.
Bij het opbouwen van IA vanaf nul, tenzij uw website of applicatie een standaardindeling volgt, is het uittekenen van alles na het topniveau erg moeilijk. Het is alsof je een monteur vraagt om een auto van bovenaf op te bouwen in plaats van in onderdelen. Elk onderdeel moet van tevoren worden opgebouwd met zijn eigen onderzoek, tijd voor ontwerp, en ontwikkeling. Hetzelfde geldt voor IA.
Het weergeven van visuele hiërarchie is een waardevolle aanwinst voor IA, niet alleen omdat het de lezer een betere context biedt, maar ook omdat het belangrijke delen van het product veralgemeent. Als de belangrijkste functie van je app het bestellen van een rit is (a la Uber of Lyft), wat vanaf de homepage kan worden gedaan, dan zal die pagina de meeste touchpoints hebben en de meeste waarde voor het product. Hetzelfde geldt voor de visuele hiërarchie.
Sitemaps zijn handig om de hiërarchie te begrijpen, omdat ze pagina’s numeriek ordenen (zoals 1.0 Home, 2.0 Payment, 2.1 Add Pay Method, etc.). Of kijk eens naar het voorbeeld in de onderstaande afbeelding van de bibliotheekwebsite van Duke University, waar de topnavigatie niet alleen bovenaan staat, maar ook is gemarkeerd zodat deze zichtbaar is in de hele toepassing.
Hiërarchie van vormen, kleuren en andere visuele elementen
Naast hiërarchie doet de bovenstaande architectuur nog iets goed: Het toont elk betrokkenheid punt uniek als nodig door middel van een eenvoudige legende en een paar sleutelzinnen. De legende geeft het type pagina en inhoud aan, en het geeft variaties aan tussen kleuren van vormen. Dit is belangrijk omdat, hoewel de site van Duke vrij eenvoudig lijkt, de IA slechts drie niveaus diep gaat. Elke gele rechthoek geeft een toepassing aan, dus de processen in elk van die vakjes zijn niet in dit document opgenomen!
Zelfs zonder die onderdelen is de structuur zodanig dat we kunnen begrijpen hoe we door de website kunnen navigeren door de IA alleen. Dat houdt op als we een toepassing binnen de website bereiken – dat hoeft niet.
De IA hieronder is voor een spelletje. Door gebruik te maken van vier vormen, geen kleur en slim geplaatste tekstfragmenten is elke belangrijke interactie begrijpelijk zonder prototypes, en wat nog belangrijker is, het kan worden begrepen door iedereen die eraan werkt.
Dit model is niet perfect, maar het organiseert de hiërarchie van apps duidelijk en bakent af wat de gebruiker op een bepaald punt ziet of doet.
De beste informatie-architectuurtools
Er zijn tal van softwaretoepassingen waarmee een IA kan worden gebouwd, maar er zijn er maar weinig die eenvoudig en snel genoeg zijn om de ervaring plezierig te maken. Of op zijn minst eenvoudig te beheren.
Draw.io, gebruikt in de video hierboven, is volledig gratis voor persoonlijk en professioneel gebruik en sluit automatisch aan op Google Drive. Het heeft ook integraties met Confluence en JIRA, die betaald zijn. Draw.io is uitstekend geschikt voor flowcharting, het maken van gebruikersstromen en informatiearchitectuur, en met de Drive-functionaliteit kunnen meerdere mensen aan hetzelfde document werken en wijzigingen live zien. Er is ook een gratis offline versie.
Lucidchart is een andere geweldige tool die een iets betere ervaring biedt dan Draw.io en extra voordelen heeft zoals vooraf gebouwde sjablonen, veel meer integraties, een mobiele app (beoordeeld op 2,5 sterren in de App Store), en ondersteuning voor bedrijven.
Omnigraffle en Visio zijn al lange tijd vaste waarden in de sector en werken uitstekend voor het maken en onderhouden van een IA-ontwerp, hoewel Visio alleen online beschikbaar is (de oudere offline versie is alleen voor Windows beschikbaar), terwijl Omnigraffle alleen voor Mac is en afzonderlijke aankopen vereist voor de MacOS- en iOS-versies. OmniGraffle heeft één voordeel ten opzichte van de grote concurrenten: het biedt JavaScript- en AppleScript-automatisering, wat voor de meeste ontwerpers misschien onnodig is, maar meestal waarderen fulltime informatie-architecten het.
Alle hierboven genoemde tools zijn gemaakt voor snelheid en gebruiksgemak, specifiek rond flowcharting, dat bijna identieke principes volgt als informatie-architectuur. Andere toepassingen zoals Balsamiq, MindMeister, MindManager, of XMind bieden allemaal een vergelijkbare stijl, maar zijn gebouwd voor andere belangrijke doeleinden, zoals prototyping of mind mapping.
Information Architecture Best Practices
Hoewel er weinig gedefinieerde regels zijn voor wat informatiearchitectuur is, overweeg bij het doorlopen van het proces het volgende:
Don’t Focus on Hierarchy, Focus on Structure
Hierarchie is aanpasbaar. De homepage zal altijd de homepage zijn, maar waar die naartoe leidt, hoe gebruikers op die plaatsen komen, en alles daartussen en daarbuiten wordt later bepaald.
Alle processen moeten logisch zijn
Ook al is de IA in het UX-proces bedoeld voor gebruikersinteracties, elke stap moet logisch zijn. Registratieschermen moeten niet naar instellingen leiden, een camerafunctie moet niet naar een kaartweergave springen…de lijst gaat maar door.
Houd het UX-proces in gedachten
Een veelgemaakte fout is om gewoon IA te maken, zonder middelen, onderzoek, of andere middelen of werk. Dat is alsof je een auteur vertelt een boek te schrijven zonder een schets, of een programmeur vertelt een app te coderen zonder prototypes.
Jij bent de cartograaf
Cartografen houden rekening met alles op een kaart, van bergketens tot staatsgrenzen. Net als kaartenmakers bepalen ontwerpers wat er in het IA-ontwerp komt. Afzonderlijke pagina’s, specifiek gebruikersgedrag, context voor beslissingspunten… enzovoort.
Uiteindelijk beslist de cartograaf wat er op de kaart komt, op basis van de behoeften van de gebruiker. Hetzelfde geldt voor ontwerpers, dus bouw de IA voor de eindgebruiker, namelijk de productontwikkeling en het ontwerp teams.
Information Architecture Is Ever-Changing and Evolving
Om het punt nog eens te boren, alle IA’s zijn gebouwd voor verandering. Producten evolueren, ontwerpen veranderen, gebruikers passen zich aan, en de cyclus gaat door, keer op keer. Neem het niet te serieus en weet dat er altijd ruimte voor verbetering zal zijn. Streef niet naar perfectie; bouw een eenvoudige, aanpasbare IA.
Mijn informatie-architectuur is klaar… Wat nu?
Het is een algemene opvatting dat elk ontwerpwerk nooit echt af is, en dat is zeker het geval met informatie-architectuur. Ze groeien en krimpen en veranderen net als onze producten. In tegenstelling tot een blauwdruk voor een gebouw, zal IA altijd evolueren op basis van alles, van gebruikersbehoeften tot nieuwe functies of een productrevisie. Veel van de structuur kan hetzelfde blijven en zorgen voor consistentie tussen versies, zodat gebruikers niet in de war raken.
En dat is een goede zaak. De wetenschap dat IA een vloeibaar document is – een document dat waarschijnlijk wekelijks en soms zelfs dagelijks verandert – is een krachtige manier om de algehele structuur van uw app of website te behouden zonder ooit de code aan te raken of nieuwe prototypen te maken. Hoe beter het hele productontwikkelingsteam de IA kent, hoe sneller iedereen weet wat wel en niet mogelijk is, en hoe serieus vermeend “gemakkelijk werk” werkelijk is.
Dat brengt ons bij de echte schoonheid van informatiearchitectuur: Er is geen vooraf gedefinieerd startpunt. Hoewel het traditionele UX-ontwerpproces dicteert dat de IA wordt gebouwd na het voltooien van voldoende gebruikersstromen; gewapend met veel gebruikers- en concurrentieonderzoek, kan het ook het eerste zijn wat wordt gedaan… of het laatste. Het prototyping proces brengt vaak informatie naar boven over hoe bepaald gedrag of acties zouden moeten plaatsvinden die moeilijk voor te stellen zouden zijn vanuit een logische of fantasieloze IA.
Als een zich steeds ontwikkelende praktijk, is IA-ontwerp zowel een kunst als een vaardigheid, wat deels de reden is waarom grote bedrijven informatie-architect posities hebben. Deze ontwerpers zijn de poortwachters van enorme systemen, en met hun inzicht in productgroei in de tijd, helpen ze product-, ontwerp- en engineeringteams om de juiste beslissingen te nemen over een periode van jaren. Die schaal van organisatie is niet voor alle ontwerpers weggelegd, maar elke ontwerper kan een eenvoudige, begrijpelijke informatiearchitectuur bouwen.
– – –
Aanbevolen lectuur over informatiearchitectuur
IA voor het web en daarbuiten
How to Make Sense of Any Mess: Informatie Architectuur voor Iedereen
Informatie Architectuur Basis
Het Verschil Tussen Informatie Architectuur en UX Design