Kompleksowy przewodnik po architekturze informacji

Posłuchaj wersji audio tego artykułu

W ramach standardowej części procesu UX projektanci tworzą architekturę informacji podczas tworzenia produktów. Definiując każdą ścieżkę i ścieżkę, którą użytkownicy mogą obrać za pośrednictwem aplikacji lub witryny, architektura informacji to znacznie więcej niż tylko mapa witryny pokazująca, dokąd prowadzi strona.

Podobnie jak architekci budowlani wykorzystujący plan do budowy każdej części domu, od struktur fizycznych po bardziej złożone wewnętrzne prace, takie jak instalacje elektryczne i hydrauliczne, architektura informacji opisuje hierarchię, nawigację, funkcje i interakcje strony internetowej lub aplikacji. I tak jak plany są najcenniejszym dokumentem, który architekt może wykorzystać podczas budowy budynku, tak architektura informacji może być najpotężniejszym narzędziem w arsenale projektanta.

Jednak opracowanie jednego nie jest tak proste, jak złożenie listy funkcji i mapowanie ich działania — zbadajmy cały proces.

Czym jest architektura informacji i dlaczego jest ważna?

Architektura informacji (IA) jest, podobnie jak plan, 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 i zachowania aplikacji, zawartość i przepływy. Nie ma ustalonego limitu rozmiaru ani kształtu IA; niemniej jednak powinien obejmować uogólnioną strukturę produktu, aby każdy (teoretycznie) mógł go przeczytać i zrozumieć, jak działa produkt.

Będziemy często używać odwołania do schematu, ponieważ cel obu dokumentów jest prawie identyczny. Podobnie jak plan, IA zapewnia projektantom (oraz zespołom zajmującym się rozwojem produktu i inżynierami) widok całego produktu z lotu ptaka. Posiadanie jednego dokumentu, który w prosty i zrozumiały sposób przedstawia sposób działania aplikacji lub witryny internetowej, jest niezbędne do opracowywania nowych funkcji, aktualizowania istniejących i sprawdzania, co jest możliwe w przypadku istniejącego produktu.

Dzięki dostępności IA znacznie łatwiej jest podejmować kluczowe decyzje dotyczące nowych funkcji i wdrożeń, rozumieć ramy czasowe zmian produktów i śledzić zachowanie użytkowników w wielu procesach.

Zanurzmy się w podstawowym filmie, aby zobaczyć, jak zbudowany jest IA.

Jak zaprojektować architekturę informacji

W ramach procesu UX, projektowanie IA przebiega zgodnie z bardzo podobnymi wzorcami do schematów blokowych: dodawaj kształty i łącz je liniami w zorganizowany sposób w pojedynczym dokumencie. Wyzwaniem podczas tworzenia IA jest zrozumienie , jak Twoja aplikacja lub witryna faktycznie działa z perspektywy użytkownika oraz jak uporządkować te informacje w czytelny i czytelny format.

Istnieją dwa główne wymagania dotyczące faktycznego konstruowania IA: zorganizowanie jej za pomocą hierarchii wizualnej (tj. hierarchii cech, funkcji i zachowania) oraz utworzenie legendy do wyświetlania różnych typów cech, interakcji i przepływów. W przypadku standardowego schematu blokowego kształty spełniają określone wymagania (prostokąty to procesy, diamenty to punkty decyzyjne itp.); jednak przestrzeganie tej nomenklatury nie jest wymagane.

Innymi słowy, najważniejszymi czynnikami przy tworzeniu IA są miejsca, w których rozmieszczone są poszczególne komponenty architektury (hierarchicznie) oraz jak są one oznaczane i wyświetlane.

Zrozumienie i pokazanie hierarchii wizualnej

Najtrudniejszym aspektem tworzenia nowej architektury informacji jest prawie zawsze konstruowanie jej hierarchicznie. To powszechne błędne przekonanie, że IA należy budować „od góry do dołu”. Prawie zawsze jest to trudniejsze, chyba że jest to istniejący produkt, taki jak w powyższym filmie.

Kiedy budujesz IA od podstaw, chyba że twoja strona internetowa lub aplikacja ma standardowy format, wyrysowanie czegokolwiek po najwyższym poziomie jest bardzo trudne. To tak, jakby poprosić mechanika o zbudowanie samochodu od góry do dołu, zamiast na części. Każdy element musi być skonstruowany z wyprzedzeniem z własnymi badaniami, czasem na projekt i rozwój. To samo dotyczy IA.

Wyświetlanie hierarchii wizualnej jest cennym atutem IA, nie tylko dlatego, że zapewnia czytelnikowi lepszy kontekst, ale także uogólnia kluczowe obszary produktu. Jeśli najważniejszą funkcją Twojej aplikacji jest zamawianie przejazdu (a la Uber lub 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 dotyczyło hierarchii wizualnej.

Mapy witryn są przydatne do zrozumienia hierarchii, ponieważ porządkują strony numerycznie (np. 1.0 Strona główna, 2.0 Płatność, 2.1 Dodaj metodę płatności itp.). Lub rozważ przykład na poniższym obrazku dla witryny internetowej biblioteki Duke University, gdzie górna nawigacja jest nie tylko u góry, ale także podświetlona, ​​aby była widoczna w całej aplikacji.

Hierarchia kształtów, kolorów i innych elementów wizualnych

Oprócz hierarchii, powyższa architektura dobrze robi jeszcze jedną rzecz: wyświetla każdy punkt zaangażowania w unikalny sposób, zgodnie z potrzebami, za pomocą prostej legendy i kilku kluczowych fraz. Legenda określa typ strony i treści oraz różnice między kolorami kształtów. Jest to ważne, ponieważ chociaż strona Duke'a wydaje się dość prosta, IA sięga tylko do trzech poziomów. Każdy żółty prostokąt oznacza aplikację, więc procesy w każdym z tych pól nie są uwzględnione w tym dokumencie!

Nawet bez tych części, struktura jest taka, że ​​możemy zrozumieć, jak poruszać się po stronie tylko przez IA. To kończy się, gdy docieramy do aplikacji w witrynie — nie musi.

Poniższy IA dotyczy gry. Dzięki czterem kształtom, brakowi koloru i sprytnie umieszczonym fragmentom tekstu każda poważna interakcja jest zrozumiała bez prototypów, a co ważniejsze, może być zrozumiana przez każdego, kto nad nią pracuje.

Ten model nie jest doskonały, ale jasno porządkuje hierarchię aplikacji i określa, co użytkownik widzi lub robi w dowolnym momencie.

Najlepsze narzędzia architektury informacji

Istnieje wiele aplikacji, które pozwalają na budowanie IA, ale niewiele jest prostych i wystarczająco szybkich, aby sprawić, że wrażenia będą przyjemne. A przynajmniej łatwe w zarządzaniu.

Draw.io, użyty w powyższym filmie, jest całkowicie darmowy do użytku osobistego i profesjonalnego i automatycznie podłącza się do Dysku Google. Posiada również integracje z Confluence i JIRA, które są płatne. Draw.io doskonale nadaje się do tworzenia schematów blokowych, tworzenia przepływów użytkowników i architektury informacji, a dzięki funkcji Dysku wiele osób może pracować nad tym samym dokumentem i oglądać zmiany na żywo. Dostępna jest również darmowa wersja offline.

Lucidchart to kolejne świetne narzędzie, które zapewnia nieco lepsze wrażenia niż Draw.io i ma dodatkowe korzyści, takie jak wstępnie zbudowane szablony, wiele innych integracji, aplikacja mobilna (ocena 2,5 gwiazdki w App Store) i wsparcie dla przedsiębiorstw.

Omnigraffle i Visio są długoletnimi filarami branży i doskonale sprawdzają się w tworzeniu i utrzymywaniu projektu IA, chociaż Visio jest tylko online (starsza wersja offline jest tylko dla systemu Windows), podczas gdy Omnigraffle jest tylko dla komputerów Mac i wymaga oddzielnych zakupów dla systemów MacOS i iOS wersje. OmniGraffle ma jedną przewagę nad głównymi konkurentami, ponieważ zapewnia automatyzację JavaScript i AppleScript, co dla większości projektantów może być niepotrzebne, ale zazwyczaj doceniają to architekci informacji na pełny etat.

Wszystkie wymienione powyżej narzędzia zostały stworzone z myślą o szybkości i łatwości użytkowania, w szczególności wokół schematów blokowych, które opierają się na prawie identycznych zasadach jak architektura informacji. Inne aplikacje, takie jak Balsamiq, MindMeister, MindManager lub XMind, oferują podobne zachowanie, ale są budowane do innych głównych celów, takich jak prototypowanie lub mapowanie myśli.

Najlepsze praktyki w zakresie architektury informacji

Chociaż istnieje kilka zdefiniowanych zasad dotyczących tego, co stanowi architekturę informacji, przechodząc przez ten proces, weź pod uwagę następujące kwestie:

Nie skupiaj się na hierarchii, skup się na strukturze

Hierarchia jest regulowana. Strona główna zawsze będzie stroną główną, ale dokąd prowadzi, w jaki sposób użytkownicy dostają się do tych miejsc i wszystko pomiędzy i dalej jest określane później.

Wszystkie procesy powinny być logiczne

Mimo że IA w procesie UX dotyczy interakcji z użytkownikiem, każdy krok musi mieć sens. Ekrany rejestracji nie powinny prowadzić do ustawień, funkcja kamery nie powinna przeskakiwać do widoku mapy… lista jest długa.

Pamiętaj o procesie UX

Częstym błędem jest po prostu robienie IA, bez zasobów, badań lub innych zasobów lub pracy. To tak, jakby powiedzieć autorowi, żeby napisał książkę bez konspektu, albo programiście, żeby zakodował aplikację bez prototypów.

Jesteś kartografem

Kartografowie biorą pod uwagę wszystko, co dotyczy mapy, od pasm górskich po granice państwowe. 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 punktów decyzyjnych… i tak dalej.

Ostatecznie kartograf decyduje o tym, co dzieje się na mapie, w oparciu o potrzeby użytkownika. To samo dotyczy projektantów, więc skonstruuj OW dla użytkownika końcowego, czyli zespołów ds. rozwoju produktu i projektowania.

Architektura informacji ciągle się zmienia i ewoluuje

Aby jeszcze raz przeanalizować tę kwestię, wszystkie IA są budowane z myślą o zmianach. Produkty ewoluują, projekty się zmieniają, użytkownicy dostosowują się, 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ą, elastyczną IA.

Moja architektura informacji jest gotowa… Co teraz?

Powszechnie uważa się, że żadne prace projektowe nigdy nie są naprawdę wykonane, a to z pewnością dotyczy architektury informacji. Rosną, kurczą się i zmieniają tak jak nasze produkty. W przeciwieństwie do planu budynku, IA zawsze ewoluuje w oparciu o wszystko, od potrzeb użytkownika po nowe funkcje lub remont produktu. Znaczna część struktury może pozostać taka sama i zapewniać spójność między wersjami, aby użytkownicy nie byli zdezorientowani.

I to dobrze. Wiedza, że ​​IA jest płynnym dokumentem — takim, który prawdopodobnie zmienia się co tydzień, a czasem nawet codziennie — jest potężnym sposobem na utrzymanie ogólnej struktury aplikacji lub witryny internetowej bez dotykania kodu lub tworzenia nowych prototypów. Im lepiej cały zespół ds. 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 z góry określonego punktu wyjścia. Podczas gdy tradycyjny proces projektowania UX dyktuje, że IA jest budowana po wykonaniu wystarczającej liczby przepływów użytkowników; uzbrojony w mnóstwo badań użytkowników i konkurencji, może być również pierwszą rzeczą do zrobienia… lub ostatnią. Proces prototypowania często dostarcza informacji o tym, jak powinny wystąpić pewne zachowania lub działania, które trudno byłoby sobie wyobrazić na podstawie logicznej lub niewyobrażalnej IA.

Jako stale rozwijająca się praktyka, projektowanie IA jest w równym stopniu sztuką, co umiejętnością, co po części jest powodem, dla którego duże korporacje zajmują stanowiska architektów informacji. Projektanci ci są strażnikami ogromnych systemów, a dzięki swojemu zrozumieniu rozwoju produktu w czasie pomagają zespołom produktowym, projektowym i inżynieryjnym 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.

• • •

Polecana lektura o architekturze informacji

IA dla sieci i nie tylko

Jak zrozumieć każdy bałagan: architektura informacji dla wszystkich

Podstawy architektury informacji

Różnica między architekturą informacji a projektowaniem UX

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika