Posłuchaj wersji audio tego artykułu
Jako standardowa część procesu UX, projektanci tworzą architekturę informacji podczas budowania produktów. Definiując każdą drogę i ścieżkę, którą użytkownicy mogą podążać przez aplikację lub witrynę, architektura informacji to coś więcej niż tylko sitemapa pokazująca, która strona prowadzi gdzie.
Podobnie jak architekci budowlani używają schematu do zbudowania każdej części domu, od fizycznych struktur po bardziej złożone elementy wewnętrzne, takie jak elektryka i hydraulika, architektura informacji opisuje hierarchię, nawigację, funkcje i interakcje witryny lub aplikacji. I tak jak plany są najcenniejszym dokumentem dla architekta, z którego może korzystać przy budowie budynku, architektura informacji może być najpotężniejszym narzędziem w arsenale projektanta.
Jednakże opracowanie takiej architektury nie jest tak proste, jak zestawienie listy funkcji i określenie sposobu ich działania – zbadajmy ten proces.
Co to jest architektura informacji i dlaczego jest ważna?
Architektura informacji (IA) jest, podobnie jak schemat, wizualną reprezentacją infrastruktury, funkcji i hierarchii produktu. Poziom szczegółowości zależy od projektanta, więc IA może również obejmować nawigację, funkcje aplikacji i zachowania, zawartość i przepływy. Nie ma określonego limitu rozmiaru lub kształtu IA; niemniej jednak, powinna ona obejmować uogólnioną strukturę produktu, tak aby każdy (teoretycznie) mógł ją przeczytać i zrozumieć, jak produkt działa.
Będziemy często używać odniesienia do schematu, ponieważ cel obu dokumentów jest prawie identyczny. Podobnie jak schemat, IA zapewnia projektantom (jak również zespołom rozwoju i inżynierii produktu) widok z lotu ptaka na cały produkt. Posiadanie jednego dokumentu, który dostarcza prostej i zrozumiałej reprezentacji tego, jak działa aplikacja lub strona internetowa, jest kluczowe dla rozwoju nowych funkcji, aktualizacji istniejących i zobaczenia, co jest możliwe, biorąc pod uwagę istniejący produkt.
Dzięki dostępnej IA, podejmowanie kluczowych decyzji dotyczących nowych funkcji i wdrożeń, zrozumienie harmonogramów zmian produktu oraz śledzenie zachowania użytkownika w wielu procesach staje się znacznie łatwiejsze.
Zanurzmy się w podstawowym filmie, aby zobaczyć, jak zbudowana jest IA.
Jak zaprojektować architekturę informacji
Jako część procesu UX, projektowanie IA odbywa się według bardzo podobnych schematów do flowchartingu: Dodaj kształty i połącz je liniami w zorganizowany sposób do pojedynczego dokumentu. Wyzwaniem podczas tworzenia IA jest zrozumienie, jak Twoja aplikacja lub witryna faktycznie działa z perspektywy użytkownika i jak zorganizować te informacje w czytelny, czytelny format.
Istnieją dwa główne wymagania dotyczące faktycznego konstruowania IA: zorganizowanie go poprzez hierarchię wizualną (czyli hierarchię cech, funkcji i zachowań) oraz stworzenie legendy do wyświetlania różnych typów cech, interakcji i przepływów. W przypadku standardowego diagramu przepływu, kształty są zgodne z określonymi wymaganiami (prostokąty to procesy, diamenty to punkty decyzyjne, itd.); jednak przestrzeganie tej nomenklatury nie jest wymogiem.
Innymi słowy, najważniejszymi czynnikami w budowaniu IA są to, gdzie poszczególne komponenty architektury są umieszczone (hierarchicznie) oraz jak są etykietowane i wyświetlane.
Zrozumienie i pokazanie wizualnej hierarchii
Najtrudniejszym aspektem tworzenia nowej architektury informacji jest prawie zawsze zbudowanie jej w sposób hierarchiczny. Powszechnie panuje błędne przekonanie, że IA musi być budowana „od góry w dół”. Jest to prawie zawsze trudniejsze do zrobienia, chyba że jest to istniejący produkt, taki jak na powyższym filmie.
Podczas budowania IA od podstaw, o ile witryna lub aplikacja nie jest zgodna ze standardowym formatem, narysowanie czegokolwiek po najwyższym poziomie jest bardzo trudne. To tak, jakby poprosić mechanika o zbudowanie samochodu od góry w dół zamiast w częściach. Każdy kawałek musi być skonstruowany z wyprzedzeniem, z własnymi badaniami, czasem na projektowanie i rozwój. Tak samo jest z IA.
Wyświetlanie hierarchii wizualnej jest cennym atutem IA, nie tylko dlatego, że zapewnia lepszy kontekst dla czytelnika, ale także uogólnia kluczowe regiony produktu. Jeśli najważniejszą funkcją Twojej aplikacji jest zamawianie przejazdu (a la Uber czy Lyft), co można zrobić ze strony głównej, to ta strona będzie miała najwięcej punktów styku i największą wartość dla produktu. To samo będzie prawdziwe dla wizualnej hierarchii.
Sitemapy przydają się do zrozumienia hierarchii, ponieważ organizują strony numerycznie (takie jak 1.0 Strona główna, 2.0 Płatność, 2.1 Dodaj metodę płatności, itp.) Można też rozważyć przykład na poniższym obrazku witryny biblioteki Uniwersytetu Duke’a, gdzie górna nawigacja jest nie tylko na górze, ale również wyróżniona, aby była widoczna w całej aplikacji.
Hierarchia kształtów, kolorów i innych elementów wizualnych
Poza hierarchią, powyższa architektura robi jeszcze jedną rzecz dobrze: Wyświetla każdy punkt zaangażowania w sposób unikalny, tak jak jest to potrzebne, poprzez prostą legendę i kilka kluczowych fraz. Legenda oznacza typ strony i treści, a także różnice między kolorami kształtów. Jest to ważne, bo choć strona Duke’a wydaje się dość prosta, IA sięga tylko trzech poziomów. Każdy żółty prostokąt oznacza aplikację, więc procesy w każdym z tych pól nie są zawarte w tym dokumencie!
Nawet bez tych części struktura jest taka, że możemy zrozumieć, jak poruszać się po witrynie tylko dzięki IA. To się kończy, gdy docieramy do aplikacji w witrynie – nie musi.
Poniższa IA jest dla gry. Używając czterech kształtów, bez koloru i sprytnie rozmieszczonych fragmentów tekstu, każda główna interakcja jest zrozumiała bez prototypów, a co ważniejsze, może być zrozumiana przez każdego, kto nad nią pracuje.
Model ten nie jest idealny, ale jasno organizuje hierarchię aplikacji i określa, co użytkownik widzi lub robi w danym momencie.
Najlepsze narzędzia do architektury informacji
Jest mnóstwo aplikacji, które pozwalają na budowanie IA, ale niewiele z nich jest wystarczająco prostych i szybkich, aby uczynić to doświadczenie przyjemnym. Lub przynajmniej łatwe do zarządzania.
Draw.io, używany w powyższym wideo, jest całkowicie darmowy do użytku osobistego i profesjonalnego i automatycznie podłącza się do Google Drive. Posiada również integracje z Confluence i JIRA, które są płatne. Draw.io jest doskonały do flowchartingu, tworzenia przepływów użytkownika i architektury informacji, a dzięki funkcjonalności Drive, wiele osób może pracować nad tym samym dokumentem i widzieć zmiany na żywo. Istnieje również bezpłatna wersja offline.
Lucidchart to kolejne świetne narzędzie, które zapewnia nieco lepsze doświadczenie niż Draw.io i ma dodatkowe korzyści, takie jak wstępnie wbudowane szablony, wiele więcej integracji, aplikacja mobilna (oceniona na 2,5 gwiazdki w App Store) i wsparcie dla przedsiębiorstw.
Omnigraffle i Visio to długoletnie wizytówki branży, które doskonale sprawdzają się przy tworzeniu i utrzymywaniu projektu IA, choć Visio jest dostępne tylko online (starsza wersja offline jest dostępna tylko w systemie Windows), natomiast Omnigraffle jest przeznaczony tylko dla komputerów Mac i wymaga osobnego zakupu wersji dla systemów MacOS i iOS. OmniGraffle ma jedną zaletę w stosunku do głównych konkurentów, ponieważ zapewnia automatyzację JavaScript i AppleScript, co dla większości projektantów może być zbędne, ale zazwyczaj pełnoetatowi architekci informacji to doceniają.
Wszystkie wymienione powyżej narzędzia są stworzone z myślą o szybkości i łatwości użycia, szczególnie w zakresie tworzenia wykresów przepływu, które opierają się na niemal identycznych zasadach jak architektura informacji. Inne aplikacje, takie jak Balsamiq, MindMeister, MindManager lub XMind, oferują podobny styl zachowania, ale są stworzone do innych celów, takich jak prototypowanie lub tworzenie map myśli.
Najlepsze praktyki architektury informacji
Pomimo że istnieje niewiele zdefiniowanych zasad dotyczących tego, co stanowi architekturę informacji, podczas przechodzenia przez ten proces należy rozważyć następujące kwestie:
Nie skupiaj się na hierarchii, skup się na strukturze
Hierarchię można regulować. Strona główna zawsze będzie stroną główną, ale gdzie ona prowadzi, jak użytkownicy dostają się do tych miejsc i wszystko pomiędzy i poza nią jest ustalane później.
Wszystkie procesy powinny być logiczne
Mimo że IA w procesie UX jest dla interakcji użytkownika, każdy krok na drodze musi mieć sens. Ekrany rejestracyjne nie powinny prowadzić do ustawień, funkcja aparatu nie powinna przeskakiwać do widoku mapy… lista ciągnie się dalej.
Pamiętaj o procesie UX
Częstym błędem jest po prostu robienie IA, bez zasobów, badań lub innych aktywów lub pracy. To tak, jakby powiedzieć autorowi, aby napisał książkę bez konspektu, lub programiście, aby zakodował aplikację bez prototypów.
Jesteś kartografem
Kartografowie biorą pod uwagę wszystko na mapie, od pasm górskich po granice stanów. Podobnie jak twórcy map, projektanci określają, co wchodzi w skład projektu IA. Poszczególne strony, określone zachowania użytkowników, kontekst dla punktów decyzyjnych… i tak dalej.
Ostatecznie, kartograf decyduje, co znajdzie się na mapie w oparciu o potrzeby użytkownika. To samo odnosi się do projektantów, więc skonstruuj IA dla użytkownika końcowego, czyli zespołów rozwoju produktu i projektowania.
Architektura informacji jest ciągle zmienna i ewoluuje
Aby jeszcze raz wbić sobie do głowy ten punkt, wszystkie IA są budowane z myślą o zmianach. Produkty ewoluują, projekty się zmieniają, użytkownicy się dostosowują, a cykl trwa w kółko. Nie traktuj tego zbyt poważnie i wiedz, że zawsze będzie miejsce na ulepszenia. Nie dąż do perfekcji; zbuduj prostą, adaptowalną IA.
My Information Architecture Is Done… Now What?
Powszechnie uważa się, że jakakolwiek praca projektowa nigdy nie jest naprawdę skończona, i tak jest z pewnością w przypadku architektury informacji. Rosną one, kurczą się i zmieniają tak jak nasze produkty. W przeciwieństwie do projektu budynku, IA zawsze będzie ewoluować w zależności od potrzeb użytkowników, nowych funkcji czy przebudowy produktu. Duża część struktury może pozostać niezmieniona i zapewnić spójność pomiędzy wersjami, aby użytkownicy nie byli zdezorientowani.
I to jest dobra rzecz. Świadomość, że IA jest płynnym dokumentem – takim, który prawdopodobnie zmienia się co tydzień, a czasem nawet codziennie – to skuteczny sposób na utrzymanie ogólnej struktury aplikacji lub witryny bez konieczności dotykania kodu lub tworzenia nowych prototypów. Im lepiej cały zespół rozwoju produktu zna IA, tym szybciej wszyscy będą wiedzieć, co jest, a co nie jest możliwe, i jak poważna jest każda rzekoma „łatwa praca”.
Co prowadzi nas do prawdziwego piękna architektury informacji: Nie ma predefiniowanego punktu wyjścia. Podczas gdy tradycyjny proces projektowania UX dyktuje, że IA jest budowana po wykonaniu wystarczającej ilości przepływów użytkownika; uzbrojona w mnóstwo badań użytkowników i konkurencji, może być pierwszą rzeczą zrobioną… lub ostatnią. Proces prototypowania często przynosi informacje na temat tego, jak pewne zachowania lub działania powinny wystąpić, które trudno byłoby sobie wyobrazić na podstawie logicznego lub pozbawionego wyobraźni IA.
Jako stale rozwijająca się praktyka, projektowanie IA jest sztuką tak samo jak umiejętnością, co jest częściowo powodem, dla którego duże korporacje mają stanowiska architektów informacji. Projektanci ci są strażnikami ogromnych systemów, a dzięki swojemu zrozumieniu rozwoju produktu w czasie pomagają zespołom ds. produktu, projektowania i inżynierii podejmować właściwe decyzje na przestrzeni lat. Taka skala organizacji nie jest dla wszystkich projektantów, ale każdy projektant może zbudować prostą, zrozumiałą architekturę informacji.
– – – –
Recommended Reading About Information Architecture
IA for the Web and Beyond
How to Make Sense of Any Mess: Information Architecture for Everybody
Information Architecture Basics
The Difference Between Information Architecture and UX Design
.