본문 바로가기
UX UI GUI

UX디자이너 인사이트 도출 후 정보구조 설계 information architecture란?

by 잡다한 IT 블로그 2020. 3. 3.



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

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

그러나 하나의 기능을 개발하고 기능 목록을 작성하고 작동 방식을 매핑하는 것만 큼 간단하지는 않습니다. 프로세스를 조사하십시오.

정보 아키텍처란 무엇이며 왜 중요합니까?

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

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

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

정보 아키텍처를 디자인하는 방법

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

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

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

시각적 계층 이해 및 표시

새로운 정보 아키텍처를 만드는 데있어 가장 어려운 부분은 거의 항상 계층 적으로 구성하는 것입니다. IA를 "위에서 아래로"구축해야한다는 것은 일반적인 오해입니다. 위의 비디오와 같이 기존 제품이 아니라면 거의 항상 수행하기가 더 어렵습니다. 처음부터 IA를 구축 할 때 웹 사이트 또는 응용 프로그램이 표준 형식을 따르지 않는 한 최상위 수준 이후의 것을 그리는 것은 매우 어렵습니다. 정비사에게 부품 대신에 위에서 아래로 자동차를 만들도록 요청하는 것과 같습니다. 각 작품은 자체 연구, 디자인 시간 및 개발을 통해 미리 구성해야합니다. IA에서도 마찬가지입니다.

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

사이트 맵은 페이지를 숫자로 구성하기 때문에 계층 구조를 이해하는 데 유용합니다 

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

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

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

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

정보구조(I.A)를 잘 구성 하는법

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

계층은 조정이 합니다. 홈페이지는 항상 홈페이지이지만, 그 위치, 사용자가 해당 장소에 도달하는 방법 및 그 사이의 모든 내용은 나중에 결정됩니다.

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

UX 프로세스의 IA는 사용자 상호 작용을위한 것이지만 모든 단계는 의미가 있습니다. 등록 화면이 설정으로 이어지지 않아야하며, 카메라 기능이지도보기로 이동해서는 안됩니다. 목록이 계속 표시됩니다.

이렇듯 서비스를 기획하기 위해서는, 서비스 사용을 하고싶어하는 또는 사용하고 있는? 사용자들을 대상으로 인터뷰를 실시 한 후에 이 인터뷰를 토대로 스크립트를 진행합니다. 또 그 다음에는 그 인터뷰를 토대로 어피니티 다이어그램을 구성한 후 퍼소나를 진행합니다. 서비스를 사용할 만한 가상인물을 통해 이 서비스의 구체적인 타겟을 정하고 이 프로덕트를 기획하는 것이죠, 그 다음에는 IA 구성을 하면서 서비스의 정보구조를 정의하게 됩니다.


댓글