#1 웹 디자인을 위한 IA 작성하기
Do not build a maze, build a website!
본 아티클은 altexsoft 블로그 원문을 번역하여 재구성했습니다.
당신이 웹사이트를 방문했다고 칩시다. 그런데 웹사이트 이곳저곳을 눌러봐도 원하는 정보를 얻을 수 없다면 어떨까요? 당신이 PO나 디자이너라면 이런 상황이 발생하는 걸 원치 않겠죠? 미로 같은 웹사이트를 만들지 말자고요. 여기서 필요한 것이 Information Architecture(정보구조도)입니다. 잘 만들어진 웹사이트는 사용자가 쉽게 파악하고 탐색할 수 있습니다. 그럼 IA를 알아보고, 명쾌한 웹사이트를 만들어봅시다.
Information Architecture
IA는 웹사이트를 구성하는 각 콘텐츠들 간의 관계를 고려해 정렬하고 사용자가 콘텐츠를 이해할 수 있도록 함으로써 적은 노력으로 원하는 것을 찾을 수 있게 해주는 데 필요합니다. IA는 서비스를 처음 기획할 때만 활용되는 것이 아니라 다시 설계할 때도 활용됩니다.
IA vs UX vs UI
IA, UX, UI 이 세 가지는 프로덕트 디자인에서 비슷한 범주에 해당하지만 서로 같은 건 아닙니다. 정의를 살펴볼까요?
UX or User Experience
UX는 유저가 프로덕트와 상호작용할 때 갖게 되는 느낌을 말합니다. 따라서 UX의 목적은 프로덕트를 실용적이고, 유용하며, 매력적이게 만드는 것이죠. 즉 사용자에게 긍정적인 경험을 안겨주는 것이 중요합니다.
UI or User Interface
UX의 중요한 부분 중 하나로 프로덕트의 비주얼적인 면과 그 안에 실제 상호작용성을 담당합니다. 마음에 드는 그래픽 요소와 쉽고 직관적인 상호작용은 고객 경험의 직접적인 영향을 미치기 때문에 UI 디자인은 UX에게 매우 중요합니다.
IA or Information Architecture
IA는 사이트를 구성하는 콘텐츠를 사용하고 이해하기 쉽도록 정렬 및 조직화하고 라벨링 하는 것을 말합니다. 잘 구성된 콘텐츠는 고객 경험을 향상하므로, IA는 UX의 근간이 된다고 할 수 있습니다. 다시 말해, IA는 프로덕트의 뼈대입니다.
IA의 역할은 뭐야?
Information Architecture for the World Wide Web의 공동저자 Peter Morville가 설명하기를, IA는 검색과 내비게이션을 디자인하고 추상적인 아이디어를 프로토타입, 유닛, 분야로 실체화하여 개념적인 것을 이해할 수 있도록 함으로써 사용자와 콘텐츠를 이어주는 사람이라고 빗대어 설명합니다.
철저한 리서치의 힘!
따라서 강력한 IA를 만들기 위해서는 유저의 니즈와 행동을 철저하게 이해하고 분석하는 것으로 시작합니다.
IA 디자인 Step-by-Step
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/ 재편집1. 고객 리서치를 수행하라
이 단계의 목표는 우리 고객의 니즈를 파악하는 것입니다. 현재 고객(타깃)의 정보와, 고객 및 이해관계자 인터뷰를 분석합니다. 이를 통해 고객 페르소나를 정의하고 고객이 원하는 것을 알아내는 것이 중요합니다. 이 단계가 끝날 때 즈음엔 우리에겐 고객이 프로덕트와 상호작용하고 생각하는 방식을 보여주는 User Flow와 고객 프로필을 가지고 있어야 합니다.
2. 콘텐츠를 리뷰하고 업데이트하라
고객이 무엇을 원하는지 알게 되었으니 이제 가지고 있는 웹사이트의 콘텐츠를 업데이트하고 나열해 봅시다. 이 단계에서 수행하는 두 가지는 Content Inventory와 Content Audit입니다.
Content Inventory
여기서의 목표는 웹사이트 내 존재하는 모든 페이지들의 구성요소들과 정보를 토픽과 서브토픽에 맞게 리스트화하는 것입니다. 그 요소들은 다음과 같습니다 (더 많을 수도 있고요):
Headings and subheadings
Texts
Media files (images, video, audio)
Documents (doc, pdf, ppt)
URL-links of the pages
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/템플릿 링크 https://www.linkedin.com/company/eckford-solutions-inc./about/
Content Audit
Content List를 정리했으니 이제 그들의 정확도, 심미적 요소, 구성, 유용성 등을 평가해 비교적 덜 중요한 것들을 걸러내고 오래된 자료들을 업데이트한 다음 다시 재정렬을 수행합니다. 이 작업은 새로운 웹사이트나 재디자인하는 서비스나 상관없이 가능합니다. 재정렬을 잘해놓아야 카테고리별로 그룹화하는 다음 단계가 기대되겠죠!
3. 콘텐츠 분류를 위해 Card Sorting하라
모든 종류의 콘텐츠는 분류되어 있고 유저가 혼동하지 않을 수 있는 적절한 네이밍을 가지고 있어야 합니다. 여기서 필요한 것이 Taxonomy입니다. 자세한 건 단어를 눌러 링크를 읽어보고, 지금은 분류화의 또 다른 이름이라고 생각합시다. IA라는 건 결국 서로 다른 구조화되지 않은 정보의 조각조각을 그룹화하고 설명하려는 시도라고 볼 수 있습니다. 그리고 분류화를 돕는 가장 유용하고 중요한 기술이 바로 Card Sorting입니다.
Card Sorting
이 작업의 목적은 유저가 프로덕트의 콘텐츠 조각들을 어떻게 인식하느냐를 알아내는 것입니다. 보통 Card Sorting은 15-20명의 참가자가 30-60개의 작은 정보가 담긴 카드들을 서로 다른 ‘클래스’들로 정리하고 설명하는 식으로 진행합니다.
Content Inventory를 이용해 카드를 만드세요(Physical or Digital). 서로 다른 주제들은 각기 다른 인덱스카드에 작성합니다. Card Sorting을 수행하면 결과적으로 프로덕트의 대략적인 구성을 볼 수 있습니다.
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/Card Sorting에도 종류가 있는데 자세한 건 원문을 참조합시다.
4. 유저 친화적 내비게이션을 위한 웹사이트 체계를 구성하라
모든 웹사이트나 앱은 유저들이 원하는 것을 찾을 수 있도록 탄탄한 내비게이션을 제공해야 합니다. Card Sorting이 잘 되었다면 콘텐츠를 실제로 어떻게 분류하고 조직할지 알 수 있습니다. 이번 단계에서는 내비게이션 디자인, 라벨링, 사이트매핑을 알아봅시다.
Navigation
내비게이션을 구성할 때 기억해야 할 것은 유저가 어떤 경로로 어떤 페이지에 들어오건 상관없이 원하는 것을 쉽게 찾을 수 있어야 한다는 것입니다. 내비게이션에는 크게 4가지 종류가 있습니다 :
Hierarchical(계층적)
계층적 내비게이션은 메인-서브 카테고리 형태로 구성합니다. 거대한 웹사이트의 Drop-down 메뉴들이 대표적인 예입니다.
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/Global or site-wide
글로벌 내비게이션은 웹페이지 전체에 걸쳐 존재하고, 유저가 모든 곳에서 메인 페이지로 이동할 수 있습니다. 왼쪽 혹은 오른쪽에 구성하거나, 최상단에 위치한 메뉴, Sticky 메뉴, Footer, Hamburger 메뉴 등이 있습니다.
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/Local
로컬 내비게이션은 특정 범위 내의 내비게이션을 보여줍니다. 사이트의 한 파트에서 그 파트에 해당하는 콘텐츠들을 내비게이션으로 보여주는 것을 말합니다.
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/Contextual
이 내비게이션은 문서, 페이지, 비디오 등 특정 콘텐츠에 따라 구성합니다. 아! 이미 이 아티클에 존재하는군요. 바로 이렇게 필요할 때만 유저가 들어가 볼 수 있도록 특정 콘텐츠를 연결시켜 놓은 것을 말합니다. ‘콘텐츠’를 클릭해 보세요.
내비게이션은 이 외에도 가이드, 튜토리얼, 투어 등으로 만들어질 수 있습니다. 복잡한 웹사이트나 여러 단계의 과정을 안내하는데 보통 활용됩니다. 전환율 최적화를 위한 A/B 테스트를 통해 어떤 내비게이션이 가장 적합한지 결정할 수도 있습니다.
만약 아주 거대하고 복잡한 웹사이트나 앱을 제작한다면, 검색 시스템을 통해 내비게이션을 보완할 수 있습니다. 정보집약적 웹사이트나 이커머스, 온라인 데이터베이스, 사전 등에 활용되죠.
Labeling
올바른 라벨은 유저가 상호작용하고자 하는 카테고리를 적절히 개념화할 수 있도록 돕습니다. 이 단계에서는 IA를 구성하는 모든 파트들의 Heading과 Subheading을 작성하세요. 라벨링을 하는 목적은 유저의 주의를 끌고 어떤 링크를 누를 때 무엇을 기대할 수 있을지 이해시키는 것입니다.
출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/내비게이션과 라벨링이 되었다면, 이제 Hierarchy Design Pattern의 차례입니다.
→ 다음 편도 읽을래요
