도서 | 하루 5분 UX (6)
제6장: 인포메이션 아키텍처
Lesson 38: 인포메이션 아키텍처의 개념
인포메이션 아키텍처란,
특정한 구조에 여러 정보를 입력하는 개념(쉽게 말하면, 정보들을 조직화하는 것).
IA는 작은 규모의 프로젝트에서는 비교적 단순하지만, 큰 규모의 프로젝트에서는 굉장히 복잡해진다.
IA는 눈에 보이지 않으므로 이 작업을 시작하기 위해서는 사이트 맵을 그려야 한다.
이들을 잇는 선은 각 페이지가 메뉴와 버튼을 통해 연결되어 있다는 것을 나타낸다.페이지를 가계도처럼 조직화한 것을 '계층' 혹은 '트리'라고 한다.
대부분의 웹 사이트와 애플리케이션은 이처럼 구성되어 있다.
주의⚠️ 100만 명의 사용자가 있다고 해서 100만 개의 프로필 페이지를 만들 필요는 없다. 하나의 프로필 페이지를 만들어 모든 사용자의 프로필을 보여줄 수 있다.
사이트 맵을 도식화하는 데 '규칙'은 없지만, 몇 가지 일반적인 가이드라인을 소개하겠다.
단순하게 만들었다고 해서 이해하기 쉬운 것은 아니다.
깔끔하고 읽기 쉽게 구성해야 한다.
보통 상위에서 하위 방향으로 작성하며, 왼쪽에서 오른쪽으로 작성하지 않는다.
사이트 맵을 화려하게 꾸밀 필요는 없다. 이것은 기술적인 문서이지 패션쇼가 아니다.
플랫 혹은 딥, 둘 다 할 수는 없다
플랫: 메뉴에 많은 항목을 포함하지만 세부로 들어가는 데 많은 클릭이 필요하지 않다.
딥: 메뉴는 단순하나 원하는 것을 찾기 위해 클릭을 여러 번 해야 한다.
→ 두 가지 구조 모두 동일한 수의 페이지가 필요하다는 사실을 알 수 있다.
ex
월마트처럼 제품이 많은 기업의 웹사이트는 딥 아키텍처가 필요하다.
유튜브 같은 웹 사이트는 다루어야 할 대상이 사용자와 영상뿐이므로 보통 플랫 아키텍처를 택한다.
목표를 단순화하거나 검색을 쉽게 할 수 있는 핵심 기능을 디자인해야 할 것이다.
잘못된 통념
모든 것은 '3번의 클릭 안에' 해결되어야 한다는 이야기를 자주 들었을 것이다.
그들의 말에 귀 기울이는 대신 사용자에게 주목하라.
내비게이션이 쉽고 명료하다면 클릭 수는 문제가 되지 않는다.
Lesson 39: 사용자 스토리
사용자 스토리는,
한 사용자가 당신의 웹 사이트나 애플리케이션에서 선택할 수 있는 한 가지 경로를 묘사한다.
짧지만 완벽해야 한다. 전체 디자인을 완성하기 위해서 사용자 스토리가 매우 많이 필요하다.
이 스토리의 어떤 부분도 특별히 문제를 해결하거나 관련 행동을 디자인하는 방법을
설명해주지 않는다는 사실을 주목하라. 그저 이런 일이 일어날 수 있다는 사실을 보여주는 것이다.
스토리의 목적: 플로우를 보여주는 데 있다. 최종 UI가 아니라 연속적으로 일어나는 사용자 선택을 보여준다.
사용자 스토리는 기본적으로 기능이 담긴 목록이며 최종 솔루션에 큰 영향을 미친다.
Lesson 40: 인포메이션 아키텍처의 유형
페이지 구성은 사용자 스토리의 단계를 결정한다.
IA는 다음을 포함한다.
카테고리 / 시간 / 태스크 / 사람들 / 검색
카테고리
특정 카테고리를 클릭할 때 그에 어울리는 내용을 기대하게 된다. 이것이 일반적인 IA 유형이다.
태스크
웹 사이트나 애플리케이션을 구조화하는 또 다른 방법은 사용자들의 목표에 따라 구성하는 것이다.
사용자들이 원하는 것이 확실하다면 가장 적합한 유형이다.
그러나 조심해야 할 점은 사용자들이 언제나 스스로 앞날을 선택할 수 있을 만큼 충분히 알지 못한다는 사실이다.
검색
웹 사이트가 너무 복잡하거나 사용자 생성 콘텐츠가 주를 이룬다면, 유튜브와 같은 검색 중심의 아키텍처가 적합하다.
시간
IA는 시간에 따라 변하도록 디자인할 수도 있다.
가장 간단한 버전은 받은 편지함인데, 메시지들이 도착한 순서대로 나열된다.
사람들
페이스북을 포함한 소셜 네트워크는 사람에 기반한 IA다.
모든 페이지가 누군가의 정보에 관한 것이며, 사람들 사이의 관계를 나타내는 방식으로 디자인되어 있다.
Lesson 41: 정적 페이지와 동적 페이지
정적 페이지란
디지털 레이아웃의 가장 기본적인 형태.
이 페이지는 언제든, 누구에게든 동일하게 보인다. 하드코딩되어 있기 때문이다.
애플 웹 사이트의 수많은 제품 페이지는 사진과 문장으로만 이루어진 정적 페이지다.
굳이 복잡하게 만들 필요는 없다.
동적 페이지란
항상 같은 모습을 하고 있지 않고 늘 변한다.
특징
당신의 선택에 따라 반응한다.
ex) 결제 과정 중에 당신이 좀 더 빘나 배송 방법을 선택하면 그 페이지를 나가지 않고도 전체 결제 금액이 자동으로 변한다.
사용자에 따라 다르게 보일 수 있다.
ex) 페이스북 프로필은 같은 페이지 내에서도 다른 콘텐츠를 보여주는데, 그건 그 페이지가 동적으로 디자인되어 있기 때문이다.
다양한 콘텐츠를 담는 템플릿 역할을 할 수도 있다.
ex) <뉴욕타임스> 웹 사이트의 모든 기사는 템플릿으로서 동일한 페이지를 사용하면서도 그 페이지는 당신이 매번 선택하는 기사 내용으로 채워진다.
내용 VS 컨테이너
정적 디자인은 정밀한 레이아웃에 가깝다.
동적 페이지를 만들기 위해서는 내용이 아니라 내용을 담는 컨테이너를 디자인해야 한다.
절대 정밀할 수 없다. 모든 형태의 헤드라인을 위한 여백, 모든 형태의 제품 이미지를 위한 여백,
15,000개의 게시물을 위한 여백을 담아야 하기 때문이다
컨테이너는 길이(단문 기사, 장문 기사)와 넓이(단문 헤드라인, 장문 헤드라인)가
모두 제각각일 수 있으며 아예 여백으로만 되어 있을 수도 있다.
실패하지 않는 시나리오를 만들어라
헤드라인이 너무 길어 레이아웃이 틀어진다면 레이아웃을 아예 변경하거나 헤드라인을 길게 작성하지 못하도록 디자인하라.
일반적으로는 당신이 레이아웃을 변경하는 것이 좋다. 그러나 유용한 제한을 두는 것도 두려워할 필요는 없는데, 이를 통해 사용자들이 좀 더 효과적인 선택을 할 수 있기 때문이다.
Lesson 42: 플로우
사용자를 A에서 B로 이동하도록 하려면 사용자가 목적지에 도달하는 방법을 디자인해야 한다.
당신이 만든 인포메이션 아키텍처를 통해 수많은 사람이 길을 잃거나 막히지 않고 움직일 수 있어야 한다.
그들이 원하는 곳으로 더 쉽게 플로우 할수록 디자인이 역할을 잘하고 있다는 증거이며, 사용자는 더 만족하게 될 것이다.
클릭 수나 페이지 수를 세지 마라
그랜드센트럴역의 설계자는 사람들이 몇 걸음을 걸어야 하는지, 얼마나 많은 출입구를 지나야 하는지 세지 않았다.
왜일까?
그러한 정보는 중요하지 않기 때문이다.
그보다는 사람들에게 필요한 정보를 필요한 때에 제공해 그들이 언제 어느 쪽으로 돌아가 기차에 올라탈 수 있는지를 알려주는 것이 더 중요하다.
페이지가 많은 플로우처럼 긴 복도는 길어도 사람들이 매우 쉽게 이용할 수 있다.
'막다른 길'을 만들지 마라
언제나 다른 곳으로 이동할 수 있는지 확인하고 사용자가 그곳에 가는 방법을 분명히 알 수 있게 해야 한다.
Lesson 43: 사용자는 뒤로 가지 않는다
사용자는 인내심이 강하지 않다
사용자는 자신이 원하는 것을 찾지 못하면 버튼을 몇 번 더 눌러보다 그대로 떠나버릴 가능성이 크다.
'뒤로 가기' 버튼을 자주 누르는 건 좋지 않은 신호다
만약 사용자가 뒤로 가기 버튼을 눌렀다면 그건 마지막에 했던 행동을 되돌리고 다음 단계를 시도해 보려는 것이 아닌, 이제 더는 뭘 해야 할지 완전히 모르겠다는 의미다.
사용자에게 뒤로 가기 버튼이란 '중지' 버튼이나 '아니요' 버튼과 같다.
루프를 만들어라
이 루프가 당신의 포트폴리오 사이트라고 가정해 보자.
A페이지: 현재까지 해온 작업 카테고리
B페이지: 한 카테고리 안에 있는 프로젝트 리스트
C페이지: 한 프로젝트에 관한 세부 내용
이때 뒤로 가기 버튼은 전혀 사용하지 않는다.
사용자가 언제나 앞으로 이동하며 클릭할 수 있다면 그들은 멈추거나 어디로 가야 할지 결정하지 않아도 된다. 결정은 힘든 일이다. 반면 같은 일을 반복하는 것은 쉽다.
