사용하기 편한 정보구조 설계하기
정보 구조의 8원칙은 정보 설계사, UX 디자이너이자 컨설턴트인 댄 브라운에 의해 제안되었습니다. 이러한 원칙들은 우리의 사이트 구조를 만들거나 평가하기 위한 훌륭한 출발점이 됩니다.
정보 구조(IA)는 우리가 더 이해하기 쉽게 콘텐츠를 조직하도록 돕습니다. 잘 구성된 정보구조는 탐색을 더 간단하고 쉽게 만들어, 방문객들이 이를 사용해 필요한 것을 찾고 목표를 달성하도록 합니다. 정보 구조는 웹사이트, 앱, 디지털 제품, 인트라넷, 온라인 커뮤니티 그리고 모든 종류의 디지털 공간에 존재하며, 도서관, 박물관, 상점 등의 물리적 세계에도 적용됩니다.
IA의 네 가지 요소인 조직화(Organization), 내비게이션(Navigation), 라벨링(Labeling), 검색(Search)으로부터 최선의 결과를 얻으려면, 먼저 비즈니스와 사용자의 니즈를 간단하고 명확한 스텝을 통해 정의해야 합니다.
이 분야에서 20년 동안 일한 전문가인 브라운은, 디자이너들이 그들의 구조를 구성할 때 올바른 의사결정을 하도록 돕는 8가지 원칙을 개발했습니다. 다음의 내용은 댄 브라운의 정보 구조 8원칙에 대해 제가 서비스 분석을 해보면서 알게 된 내용을 함께 적은 것입니다.
콘텐츠를 고유의 라이프사이클, 행동, 태도를 가진 살아있는 대상으로 바라보아야 한다. 디자이너는 IA 구조를 설계할 때 이러한 콘텐츠들의 본성을 정의하고 이해할 필요가 있다.
- 서비스가 지향하는 목표가 명확하고 플랫폼이 원활히 돌아가는 한 콘텐츠는 끊임없이 변화한다. 서비스는 목표를 달성하기 위해 콘텐츠를 추가, 재구성해 나갈 것이며 사용자들은 그 안에서 계속해서 정보와 자원을 공유할 것이다. 또 추천 시스템과 같은 새로운 기술이 나타나면 같은 콘텐츠라도 IA 설계 방식이 달라질 수 있으며 이는 사용자 경험의 재구성으로 이어진다. 마지막으로 산업과 도메인에 따라 콘텐츠의 유연한 정도는 달라질 수 있다.
사용자에게 의미 있는 선택을 제공하는 페이지를 만들어 특정 작업에 초점을 맞추고, 사용자에게 적합한 선택 범위를 유지한다. 너무 많은 선택지는 너무 적은 선택지보다 나쁠 수 있다. 사용자가 수렁에 빠질 수 있고, 너무 많은 선택지로 인해 우유부단한 상태로 마비 상태에 빠질 수 있기 때문이다.
- 이 원칙은 UX/UI 심리학 법칙 중 밀러의 법칙, 그리고 힉의 법칙과 연관되는 것으로 보인다. 힉의 법칙은 선택지의 수가 늘고 복잡해질수록 의사결정에 걸리는 시간이 늘어난다는 원칙이다. 또한, 밀러의 법칙은 사람은 덩어리로 의미화된 요소를 더 잘 기억한다는 심리학 법칙이다. 화면을 설계할 때에는 명확한 목표를 바탕으로, 잘 구조화된 요소들을 제공하여 사용자가 의미 있는 선택을 할 수 있도록 도와야 한다.
만약 사용자가 더 자세히 알아보고 싶어 한다면 사용자가 결정해야 할 내용들만 보여주자. 일단 사용자가 선택지의 의미를 예상하게 되면, 그들은 그것을 추구할지 말지를 결정할 수 있다.
- 이 원칙 또한 UX/UI에 관련된 심리학 법칙 중 힉의 법칙과 연결되어 있다. 지나친 개수의 선택지나 요소는 사용자에게 인지부하를 줄 수 있다. 따라서 가장 필요한 정보나 개요를 먼저 공개하고, 사용자가 의미를 파악한 후 필요한 정보를 더 자세히 탐색하게 함으로써 사용자의 인지부하를 막을 수 있다. 회원가입 시 사용자가 너무 많은 콘텐츠에 압도되지 않도록 약관의 제목만 보여주고 필요할 때 내용을 확인할 수 있도록 한 것이 하나의 예시가 될 수 있을 것이다. 여기에 해당하는 대표적인 UI 패턴에는 드롭다운, 단계적 정보 공개 (progressive disclosure)가 있다.
카테고리의 선택지들 중 일부가 스스로를 충분히 설명하지 않는 경우 콘텐츠의 일부를 예제로 사용해 사용자에게 그들이 어떤 정보에 접근하게 될 것인지를 보여준다. 이때 이미지가 특히 내용을 잘 나타낼 수 있어 유용하다.
- 카드 UI, 리스트, 온보딩(튜토리얼) 등이 포함된다. 카드 UI나 리스트는 사용자가 '더보기'를 누르거나 상세 페이지로 들어가기 전 콘텐츠의 대표적인 내용을 모은 개요를 제공해준다. 또, 처음 서비스를 사용하는 사람들은 선택지의 의미를 알기 어려울 수 있다. 온보딩은 이들을 대상으로 서비스를 사용할 때 꼭 필요한 콘텐츠만 모아 개요를 제공한다 (예: 슬랙). 그러므로 단계적 정보 공개의 개념도 포함된다고 볼 수 있을 것 같다.
모든 사용자가 당신의 사이트의 홈페이지부터 들어가는 것이 아니므로, 그런 사람들만을 위해 사이트를 구축하지는 말자. 다른 페이지에 도착한 사람들에게도 탑승한 곳 어디에서나 유용한 정보와 탐색 도구를 볼 수 있는 기회를 제공하고 어디에서나 사이트(의 원하는 곳)로 접근할 수 있도록 한다.
- IA는 익숙한 곳에 익숙한 형태로 있어야 한다. 제이콥의 원칙과도 일부 연관되어 있다고 생각할 수 있다. 나는 이 원칙에서 가장 먼저 포털의 검색 엔진과 SEO 마케팅이 떠올랐다. 포털 검색을 통해 필요한 내용을 찾는 사람들은 홈페이지보다 그러한 콘텐츠를 담고 있는 상세 페이지에 먼저 방문할 확률이 높다. 예를 들어 이커머스 위주의 사이트는 검색에서 상세 페이지의 노출이 중요할 것이고, 미디어의 경우 주제에 맞는 콘텐츠 노출이 중요할 것이다. 그렇다면 사용자에게 익숙한 모양일수록 사용자가 사이트의 구성을 파악하고 인터렉션을 예측하기 쉬워질 것이다. 따라서 보편적인 형태의 IA는 사용자가 목적을 달성하는 데 도움을 준다.
사용자가 사이트에서 콘텐츠를 검색할 수 있는 다양한 방법을 제공하자. 이를 위한 두 가지 방법에는 검색과 최상위 메뉴바가 있지만, 사용자 중 일부는 단지 둘러보기를 원하거나 계층을 통해 탐색을 진행할 수 있다. 그러므로 IA가 그들의 요구를 충족하는지 확인하자.
- 굳이 어떠한 심리학 원칙을 가지고 오지 않아도, 이 원칙을 이해하는 데는 계단과 엘리베이터의 비유로 충분할 것 같다. 우리가 어떤 건물의 1층에서 꼭대기로 이동한다고 할 때 그 사이에는 항상 한 대(또는 여러 대)의 엘리베이터가 있다. 또 중앙 계단뿐 아니라 여러 비상구를 이용해 옥상까지 올라갈 수도 있다. 어쩌면 엘리베이터가 없이 중앙 계단만 있더라도, 아니면 계단 없이 단 한 대의 엘리베이터만으로도 원하는 곳으로 이동할 수 있을 것이다. 하지만 나뿐만 아니라 많은 사람들이 답답함과 불편함을 느낄 것 같다.
내비게이션의 일관성을 유지하자. 메뉴가 (그 메뉴가 뜻하는) 같은 영역과 연관되어 있는지 확인하고 주제를 섞어서 사용자를 혼란스럽게 하지 말자. 만약 당신이 제품 유형 메뉴를 제작하고 있다면 거기에 다른 서비스를 넣으면 안 되고, 메뉴가 탐색 목적을 가지고 있으면 기능이나 마케팅 항목을 포함하면 안 된다.
- IA의 네 가지 요소 중 하나인 '라벨링'과 연결된다. 라벨링이란 공통 범주의 콘텐츠에 이름을 붙이는 과정이다. 이름을 붙일 때는 그 콘텐츠를 대표할 수 있는 이름을 붙여야 하며, 상위 구조와 잘 어울릴 수 있도록 일관성을 지켜야 한다. 그래야 사용자가 원하는 콘텐츠가 있는 위치를 쉽게 찾을 수 있다.
내비게이션의 목적과 다른 주제가 섞여있는지, 하나의 이름 안에 서로 다른 주제의 콘텐츠가 서로 섞여있는지 확인할 수 있는 하나의 방법은 카드 소팅을 활용하는 것이다. 카드 소팅은 사용자가 생각하는 방식으로 콘텐츠를 묶고 이름을 붙이는 과정을 관찰하는 UX 방법론이다. 카드 소팅을 활용하면 내비게이션 설계 과정에서 유저의 멘탈모델을 반영했기 때문에 일관성과 통일성을 유지하는 데 도움이 된다.
처음 시작하는 콘텐츠는 앞으로 획득할 콘텐츠의 극히 일부에 불과하므로 사이트를 확장할 것을 염두해야 한다. 사이트에게 (콘텐츠를) 덧붙이고 유기적으로 성장, 발전할 수 있는 여지를 주어야 한다.
- 사용자들이 플랫폼 위에서 상호작용하면서 콘텐츠 양이 늘어나든, 사이트 자체의 기능이나 서비스 범위가 늘어나든 기업이 발전하는 한 사이트는 지속해서 확장된다. 따라서 좋은 IA는 방향성이 명확한 콘텐츠를 담고 있으며 나아가 서비스의 방향과 사용자의 니즈를 잘 풀어내야 한다.
이제까지 IA와 UI를 구분해 생각하고 있었습니다. IA와 UI는 다릅니다. 하지만 이번 아티클을 통해 UI는 IA의 구현이며, IA는 UI의 뼈대이기 때문에 두 가지는 편리한 사용자 경험을 설계할 때 서로 밀접한 연관을 갖고 있음을 알 수 있었습니다.
참고 | The Eight Principles of Information Architecture
https://ux247.com/the-8-principles-of-information-architecture/