정보 아키텍처에 대한 종합 가이드

이 기사의 오디오 버전을 들어보세요

UX 프로세스의 표준 부분으로 디자이너는 제품을 구축할 때 정보 아키텍처를 만듭니다. 사용자가 앱이나 웹사이트를 통해 취할 수 있는 모든 경로와 경로를 정의하는 정보 아키텍처는 단순히 어떤 페이지가 어디로 연결되는지 보여주는 사이트맵 그 이상입니다.

건축가가 청사진을 사용하여 물리적 구조에서 전기 및 배관과 같은 보다 복잡한 내부 작업에 이르기까지 집의 모든 부분을 구성하는 것과 유사하게 정보 아키텍처는 웹사이트 또는 애플리케이션의 계층 구조, 탐색, 기능 및 상호 작용을 설명합니다. 그리고 청사진이 건축가가 건물 건설에 사용하는 가장 귀중한 문서인 것처럼 정보 아키텍처는 디자이너의 무기고에서 가장 강력한 도구가 될 수 있습니다.

그러나 기능을 개발하는 것은 기능 목록을 모아서 작동 방식을 매핑하는 것만큼 간단하지 않습니다. 프로세스를 살펴보겠습니다.

정보 아키텍처란 무엇이며 왜 중요한가요?

정보 아키텍처(IA)는 청사진과 같이 제품의 인프라, 기능 및 계층 구조를 시각적으로 표현한 것입니다. 세부 수준은 설계자에게 달려 있으므로 IA에는 탐색, 응용 프로그램 기능 및 동작, 콘텐츠 및 흐름도 포함될 수 있습니다. IA의 크기나 모양에는 제한이 없습니다. 그럼에도 불구하고, 그것은 누구나(이론적으로) 그것을 읽고 제품이 어떻게 작동하는지 이해할 수 있도록 제품의 일반화된 구조를 포함해야 합니다.

두 문서의 목적이 거의 동일하기 때문에 청사진 참조를 자주 사용합니다. 청사진과 마찬가지로 IA는 설계자(제품 개발 및 엔지니어링 팀뿐만 아니라)에게 전체 제품에 대한 조감도를 제공합니다. 응용 프로그램이나 웹 사이트가 어떻게 작동하는지 간단하고 이해하기 쉽게 표현하는 단일 문서를 갖는 것은 새로운 기능을 개발하고 기존 기능을 업데이트하며 기존 제품을 고려하여 가능한 것을 확인하는 데 매우 중요합니다.

IA를 사용하면 새로운 기능 및 구현에 대한 주요 결정을 내리고 제품 변경 일정을 이해하고 여러 프로세스를 통해 사용자 행동을 추적하는 것이 훨씬 쉬워집니다.

IA가 어떻게 구축되는지 알아보기 위해 기본 비디오를 살펴보겠습니다.

정보 아키텍처를 설계하는 방법

UX 프로세스의 일부로 IA 디자인은 순서도와 매우 유사한 패턴을 따릅니다. 모양을 추가하고 단일 문서에 조직적인 방식으로 선으로 연결합니다. IA를 구축할 때의 과제는 사용자의 관점에서 앱이나 웹 사이트가 실제로 어떻게 작동하는지 이해하고 해당 정보를 읽기 쉽고 읽기 쉬운 형식으로 구성하는 방법을 이해하는 것입니다.

실제로 IA를 구성하기 위한 두 가지 주요 요구 사항은 시각적 계층(즉, 기능, 기능 및 동작의 계층)을 통해 구성하고 다양한 유형의 기능, 상호 작용 및 흐름을 표시하기 위한 범례를 만드는 것입니다. 표준 순서도에서 모양은 특정 요구 사항을 따릅니다(사각형은 프로세스, 다이아몬드는 결정 지점 등). 그러나 그 명명법을 따르는 것은 요구 사항이 아닙니다.

즉, IA를 구축하는 데 가장 중요한 요소는 아키텍처의 개별 구성 요소가 배치되는 위치(계층적)와 레이블 지정 및 표시 방법입니다.

시각적 계층 구조 이해 및 표시

새로운 정보 아키텍처를 생성할 때 가장 어려운 측면은 거의 항상 계층적으로 구성하는 것입니다. IA가 "위에서 아래로" 구축되어야 한다는 것은 일반적인 오해입니다. 위의 비디오와 같이 기존 제품이 아닌 한 거의 항상 수행하기가 더 어렵습니다.

IA를 처음부터 구축할 때 웹사이트나 애플리케이션이 표준 형식을 따르지 않는 한 최상위 수준 이후에 무엇이든 그리는 것은 매우 어렵습니다. 마치 정비공에게 자동차를 부품이 아닌 위에서 아래로 조립하도록 요청하는 것과 같습니다. 각 조각은 자체 연구, 디자인 및 개발 시간을 통해 미리 구성되어야 합니다. IA도 마찬가지입니다.

시각적 계층 구조를 표시하는 것은 독자에게 더 나은 컨텍스트를 제공할 뿐만 아니라 제품의 주요 영역을 일반화하기 때문에 IA에 귀중한 자산입니다. 앱의 가장 중요한 기능이 홈페이지에서 할 수 있는 차량 서비스(Uber 또는 Lyft)를 주문하는 것이라면 해당 페이지는 제품에 대한 가장 많은 터치포인트와 가치를 갖게 됩니다. 시각적 계층 구조도 마찬가지입니다.

사이트맵은 페이지를 숫자로 구성하기 때문에 계층 구조를 이해하는 데 유용합니다(예: 1.0 홈, 2.0 결제, 2.1 결제 방법 추가 등). 또는 맨 위 탐색이 맨 위에 있을 뿐만 아니라 전체 응용 프로그램에서 볼 수 있도록 강조 표시되는 Duke University의 도서관 웹 사이트에 대한 아래 이미지의 예를 고려하십시오.

모양, 색상 및 기타 시각적 요소의 계층 구조

위의 아키텍처는 계층 구조 외에도 다른 기능을 잘 수행합니다. 간단한 범례와 몇 가지 핵심 문구를 통해 필요에 따라 모든 참여 지점을 고유하게 표시합니다. 범례는 페이지 및 콘텐츠 유형을 나타내며 모양의 색상 차이를 나타냅니다. 이것은 Duke의 사이트가 상당히 단순해 보이지만 IA는 세 가지 수준으로만 진행되기 때문에 중요합니다. 각 노란색 직사각형은 애플리케이션을 나타내므로 각 상자 내의 프로세스는 이 문서에 포함되지 않습니다!

이러한 부품이 없어도 IA만으로도 웹사이트를 탐색하는 방법을 이해할 수 있는 구조입니다. 웹 사이트 내에서 애플리케이션에 도달하면 중지됩니다. 그럴 필요는 없습니다.

아래의 IA는 게임용입니다. 4가지 모양, 색상 없음 및 스마트하게 배치된 텍스트 조각을 사용하여 모든 주요 상호 작용은 프로토타입 없이도 이해할 수 있으며 더 중요한 것은 작업하는 모든 사람이 이해할 수 있다는 것입니다.

이 모델은 완벽하지는 않지만 앱 계층 구조를 명확하게 구성하고 사용자가 특정 시점에서 무엇을 보거나 수행하는지 설명합니다.

최고의 정보 아키텍처 도구

IA를 구축할 수 있는 소프트웨어 응용 프로그램은 많이 있지만 경험을 즐겁게 만들 만큼 간단하고 빠른 응용 프로그램은 거의 없습니다. 또는 최소한 관리하기 쉽습니다.

위의 비디오에서 사용된 Draw.io는 개인 및 전문가용으로 완전 무료이며 Google 드라이브에 자동으로 연결됩니다. 또한 유료인 Confluence 및 JIRA와의 통합도 있습니다. Draw.io는 흐름도, 사용자 흐름 및 정보 아키텍처 생성에 탁월하며 드라이브 기능을 사용하면 여러 사람이 동일한 문서에서 작업하고 변경 사항을 실시간으로 확인할 수 있습니다. 무료 오프라인 버전도 있습니다.

Lucidchart는 Draw.io보다 약간 더 나은 경험을 제공하고 사전 제작된 템플릿, 더 많은 통합, 모바일 앱(App Store에서 별 2.5개 평가) 및 엔터프라이즈 지원과 같은 추가 이점을 제공하는 또 다른 훌륭한 도구입니다.

Omnigraffle과 Visio는 오랫동안 업계의 주류였으며 Visio는 온라인 전용(이전 오프라인 버전은 Windows 전용)인 반면 Omnigraffle은 Mac 전용이며 MacOS 및 iOS용으로 별도로 구매해야 하지만 IA 디자인을 구축하고 유지 관리하는 데 탁월하게 작동합니다. 버전. OmniGraffle은 JavaScript 및 AppleScript 자동화를 제공한다는 점에서 주요 경쟁자보다 한 가지 이점이 있습니다. 대부분의 설계자에게는 필요하지 않을 수 있지만 일반적으로 정규직 정보 설계자는 이를 높이 평가합니다.

위에 나열된 모든 도구는 특히 정보 아키텍처와 거의 동일한 원칙을 따르는 순서도와 관련하여 속도와 사용 편의성을 위해 만들어졌습니다. Balsamiq, MindMeister, MindManager 또는 XMind와 같은 다른 응용 프로그램은 모두 유사한 스타일의 동작을 제공하지만 프로토타이핑 또는 마인드 매핑과 같은 다른 주요 목적을 위해 구축되었습니다.

정보 아키텍처 모범 사례

정보 아키텍처를 구성하는 요소에 대해 정의된 규칙은 거의 없지만 프로세스를 진행할 때 다음을 고려하십시오.

계층에 집중하지 말고 구조에 집중하라

계층은 조정 가능합니다. 홈페이지는 항상 홈페이지가 되지만 어디로 연결되는지, 사용자가 해당 위치로 이동하는 방법, 그 사이의 모든 것이 나중에 결정됩니다.

모든 프로세스는 논리적이어야 합니다.

UX 프로세스의 IA는 사용자 상호 작용을 위한 것이지만 모든 단계가 의미가 있어야 합니다. 등록 화면이 설정으로 연결되어서는 안 되며, 카메라 기능이 지도 보기로 건너뛰어서는 안 됩니다. 목록은 계속됩니다.

UX 프로세스를 기억하십시오

일반적인 실수는 리소스, 연구 또는 기타 자산이나 작업 없이 IA를 만드는 것입니다. 그것은 저자에게 개요 없이 책을 쓰라고 하거나 프로그래머에게 프로토타입 없이 앱을 코딩하라고 말하는 것과 같습니다.

당신은 지도 제작자입니다

지도 제작자는 산맥에서 주 경계에 이르기까지 지도에 대한 모든 것을 고려합니다. 지도 제작자와 마찬가지로 디자이너는 IA 디자인에 들어갈 항목을 결정합니다. 개별 페이지, 특정 사용자 행동, 결정 지점에 대한 컨텍스트 등.

궁극적으로 지도 제작자는 사용자의 요구에 따라 지도에 표시할 항목을 결정합니다. 디자이너도 마찬가지이므로 최종 사용자, 즉 제품 개발 및 디자인 팀을 위해 IA를 구성하십시오.

정보 아키텍처는 끊임없이 변화하고 진화합니다.

포인트 홈을 다시 한 번 드릴하기 위해 모든 IA는 변경을 위해 구축되었습니다. 제품이 진화하고, 디자인이 바뀌고, 사용자가 적응하고, 주기가 계속해서 계속됩니다. 너무 심각하게 받아들이지 말고 항상 개선의 여지가 있음을 알고 있습니다. 완벽을 목표로 하지 마십시오. 간단하고 적응 가능한 IA를 구축하십시오.

내 정보 아키텍처가 완료되었습니다... 이제 무엇을 하시겠습니까?

모든 디자인 작업은 결코 진정으로 완료되지 않는다는 것이 일반적인 개념이며, 정보 아키텍처의 경우 확실히 그렇습니다. 그것들은 우리 제품이 하는 것처럼 늘어나고 줄어들고 변화합니다. 건물에 대한 청사진과 달리 IA는 사용자 요구에서 새로운 기능 또는 제품 정밀 검사에 이르기까지 무엇이든 기반으로 항상 발전할 것입니다. 대부분의 구조가 동일하게 유지되고 버전 간에 일관성을 제공하여 사용자가 혼동하지 않도록 할 수 있습니다.

그리고 그것은 좋은 일입니다. IA가 매주, 때로는 매일 변경되는 유동적인 문서라는 사실을 아는 것은 코드를 건드리지 않고 새로운 프로토타입을 만들지 않고도 앱이나 웹사이트의 전체 구조를 유지 관리할 수 있는 강력한 방법입니다. 전체 제품 개발 팀이 IA를 더 잘 알 수록 모든 사람이 무엇이 가능하고 불가능한지, 그리고 가정된 "쉬운 작업"이 실제로 얼마나 심각한지 더 빨리 알게 될 것입니다.

이는 정보 아키텍처의 진정한 아름다움을 보여줍니다. 미리 정의된 시작점이 없습니다. 기존의 UX 디자인 프로세스에서는 충분한 사용자 흐름을 완료한 후 IA를 구축해야 합니다. 많은 사용자와 경쟁력 있는 연구로 무장한 이 작업은 가장 먼저 수행될 수도 있고 마지막으로 수행될 수도 있습니다. 프로토타이핑 프로세스는 종종 논리적이거나 상상할 수 없는 IA에서는 상상하기 어려운 특정 행동이나 행동이 어떻게 발생해야 하는지에 대한 정보를 제공합니다.

끊임없이 진화하는 관행으로서 IA 디자인은 기술만큼이나 예술입니다. 이것이 부분적으로 대기업이 정보 설계자 직위를 갖는 이유입니다. 이러한 설계자는 대규모 시스템의 문지기이며 시간 경과에 따른 제품 성장에 대한 이해를 바탕으로 제품, 설계 및 엔지니어링 팀이 수년 에 걸쳐 올바른 결정을 내리도록 돕습니다. 이러한 규모의 조직이 모든 디자이너를 위한 것은 아니지만 모든 디자이너는 간단하고 이해하기 쉬운 정보 아키텍처를 구축할 수 있습니다.

• • •

정보 아키텍처에 대한 권장 읽을거리

웹과 그 너머를 위한 IA

모든 혼란을 이해하는 방법: 모두를 위한 정보 아키텍처

정보 아키텍처 기초

정보 아키텍처와 UX 디자인의 차이점

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법