IA (Information Architecture) 란?

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

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

그러나 하나를 개발하는 것은 기능 목록을 통합하고 작동 방식을 매핑하는 것만 큼 간단하지 않습니다. 프로세스를 조사해 보겠습니다.

​

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

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

두 문서의 목적이 거의 동일하기 때문에 청사진 참조를 자주 사용합니다. 청사진과 마찬가지로 IA는 디자이너 (제품 개발 및 엔지니어링 팀 포함)에게 전체 제품에 대한 조감도를 제공합니다. 새로운 기능을 개발하고, 기존 기능을 업데이트하고, 기존 제품을 고려하여 무엇이 가능한지 확인하려면 응용 프로그램이나 웹 사이트의 작동 방식을 간단하고 이해하기 쉽게 표현하는 단일 문서가 있어야합니다.

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

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

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

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

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

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

​

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

새로운 정보 아키텍처를 만드는 데있어 가장 어려운 부분은 거의 항상 계층 적으로 구성하는 것입니다. IA를 "하향식"으로 구축해야한다는 것은 일반적인 오해입니다. 위의 비디오와 같이 기존 제품이 아니면 거의 항상 수행하기가 더 어렵습니다.

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

​

​

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

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

​

​

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

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

사용 가능한 부품이 없더라도 IA를 통해서만 웹 사이트를 탐색하는 방법을 이해할 수있는 구조입니다. 웹 사이트 내에서 응용 프로그램에 도달하면 중지됩니다. 반드시 그럴 필요는 없습니다.

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

​

​

​

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

최고의 정보 아키텍처 도구

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 디자인은 기술만큼이나 예술이며, 이것이 부분적으로 대기업이 정보 설계자 위치를 차지하는 이유입니다. 이러한 설계자 는 대규모 시스템의 문지기이며 시간이 지남에 따라 제품 성장에 대한 이해를 바탕으로 제품, 설계 및 엔지니어링 팀이 수년 동안 올바른 결정을 내 리도록 지원합니다 . 이러한 규모의 조직이 모든 디자이너를위한 것은 아니지만 모든 디자이너 는 간단하고 이해하기 쉬운 정보 아키텍처를 구축 할 수 있습니다.