728x90

안녕하세요, 꾸우._. 입니다. 이번에는 UX 설계를 위한 정보구조도 (IA), 화면 흐름도 (User Flow) 작성 방법에 대해 알아보고 정리하는 시간을 가져보겠습니다.

 

 

📌 IA (Information Architecture)  

IA는 서비스의 전체적인 구조를 지탱하는 뼈대입니다. 즉, 우리가 사용자에게 제공하려는 정보와 이용에 관한 구조적인 설계를 의미합니다. 즉, 서비스 제공 전, 정보 설계를 구축해 전체 서비스의 구조를 설계함으로써 사용자가 뭔하는 정보를 쉽고 빠르게 찾도록 하는 데 목적을 두고 있다고 볼 수 있습니다.

 

 

📌 IA 설계 방법

IA는 서비스 전체를 아우르기 때문에 설계 시 고려해야 할 사항을 외부와 내부로 나눌 수 있습니다. 외부 요소에 대해 먼저 파악한 후 내부 요소를 적용시켜 IA를 구체화시키는 과정을 거칩니다.

 

💡 외부 요소 → IA 방향성 찾기

  1. 사용자
    • 사용자의 작업, 니즈, 정보 탐색 행동과 경험에 중심을 두어야 함
      • 서비스 사용 목적 : 서비스에서 어떻게 사용자의 목적을 달성할 건지
      • 테스크 종류 : 목적을 달성하기 위해 필요한 테스크가 무엇인지
      • 제공된 기능 난이도 : 테스크를 구성하는 여러 가지 기능을 타겟 사용자가 쉽게 쓸 수 있는지
    • 대부분 사용자 인터뷰, 데이터 분석 등을 통해 파악 가능
    • 사용자를 만나기 어렵거나 데이터를 구할 수 없는 상황에서는 이미 잘 만들어진 서비스를 바탕으로 사용자 관련 정보 유추 가능
  2. 컨텐츠
    • 사용자가 접하는 컨텐츠의 크기, 형태, 구조, 조직 등을 의미
      • 컨텐츠 개체 : 개별의 컨텐츠가 담고 있는 정보
      • 정보의 크기 : 컨텐츠가 가진 정보에 대한 구성 → 하나의 페이지로 이뤄져야 할 지, 화면 내 일부영역으로 제공 가능한지
      • 기존 구조 : 운영되고 있는 서비스의 경우 컨텐츠가 현재 배치된 위치와 제공하는 역할 및 구성 적합성
    • 형식과 분류, 앱 구조, 컨텐츠 관리, 내비게이션, 레이블 등의 정보 공간 설계
    • 사용자가 컨텐츠에 직관적으로 접근해 쉽게 원하는 작업을 처리할 수 있도록 해야 함
    • 서비스에서 제공할 컨텐츠에 대해 자세한 학습이 요구됨
      • 기존에 운영되고 있는 버시스를 개선하는 과정일 경우 기존 IA에 대한 충분한 학습이 요구됨
      • 컨텐츠의 목적과 구성을 잘 이해하지 못할 경우 서비스 내 컨텐츠의 위치 및 존재 여부를 결정하는 데 위험 요소로 작용할 수 있음
  3.  맥락
    • 사용자 환경에 대한 고려를 의미
    • 사용자의 요구를 반영하는 것뿐만 아니라 비즈니스적 측면에서도 고려할 수 있어야 함
      • 비즈니스 목표 : 회사가 앞으로 나아갈 방향과 서비스를 통해 어떻게 달성할 지 결정
      • 정책 : 서비스를 운영하는 데 필요한 규칙과 꼭 지켜야 할 것, 개선할 수 있는 것 등
      • 기술, 자금 규모, 인력 구조 : 지속적으로 서비스를 운영하기 위해 적합한 방식
    • 서비스 운영자의 입장에서 해당 부분이 정책에 적합한지, 없는 기능인데 새로 만들어도 괜찮을지 등의 고민이 발생하는 과정

 

💡 내부 요소 → IA 구체화하기

  1. Organization : 정보 구조화 방법
    • 외부요소에서 얻은 정보를 토대로 구체화하는 단계
    • 일관성 있게 분류된 정보는 사용자가 원하는 정보를 편리하게 찾고, 쉽게 이해할 수 있도록 제공함
    • 서비스가 사용자에게 전달해야 할 비즈니스 목표를 명확히 할 수 있음
    • 따라서 서비스에 적합한 정보 분류 기준을 찾고, 공통 규칙을 수립하는 과정이 필요함
      • 분류 기준
        • 서비스의 특징에 따라 사용자 여정, 서비스 방문 목적, 상품 카테고리 등 다양한 기준을 시도할 수 있음
      • 공통 규칙 수립
        • 정해진 기준에 맞춰 각 정보를 분류에 맞게 배열하는 과정
        • 무조건 동일한 규칙을 적용해 정보 구성을 할 필요는 없으나, IA 전체를 아우르는 공통 규칙을 적용하면 사용자가 정보를 빠르게 학습 가능하고, 찾고자 하는 정보의 위치를 예측 후 쉽게 찾아갈 수 있음
        • 서비스 컨텐츠가 확장되는 경우에도 전체 구조를 일관되게 유지 가능
      • 정보 연결
        • 정보를 분류 기준과 공통 규칙을 통해 그룹화가 이뤄졌다면 이 그룹들을 연결해 전체 구조를 세움
          → 플랫폼의 종류, 제공 기능, 전략 등에 적합한 정보 구조를 선택할 수 있어야 함
  2. Navigation : 정보를 이동하는 방법
    • 정보와 정보 사이를 이동하는 방법을 의미
    • 현재 위치와 가야 할 방향이 어딘지 사용자가 쉽게 알 수 있도록 만드는 것이 중요
    • 중심이 되는 이동 방식 결정 후, 이를 나타내는 내비게이션 컴포넌트 선택해 화면에 시각화
      • 검색 기능
        • 주제별 검색은 물론 세부 검색을 위한 복합 단어 검색, 연산자 검색 등도 지원하면 좋음
      • 사용자 위치 정보
        • 현재 사용자가 보고 있거나 위치한 페이지가 어디에 속한 건지 알림
        • 계층 구조상 현재 위치를 알려주는 게 바람직함
      • 방문 정보 표시
        • 방문 정보 : 사용자가 이전에 한 번 검색했거나 방문한 정보를 구별
        • 보통 색으로 구분
      • 내비게이션 막대
        • 일반적으로 모든 링크를 의미
        • 하위 메뉴에서도 언제든 다른 링크로 이동할 수 있도록 도움
        • 내비게이션은 사용자가 어떤 작업을 처리하도록 돕는 역할
        • 사용자와 컨텐츠 특성을 바탕으로 사용의 편의성 제공
    • 내비게이션 종류
      • Lateral Navigation : 동일한 위계 이동
      • Forward Navigation : 플로우에 따라 뎁스 진입 발생
      • Reverse Navigation : 이전으로 돌아감
    • 각 이동 방식에 따른 내비게이션 컴포넌트 설정 가능
  3. Searching : 정보를 찾는 방법
    • Forward Navigation 에서 제공하는 이동 방법 중 하나로, 하위 뎁스에 있는 정보까지 쉽게 도달 가능
    • 장점 : 사용자가 일일이 탐색할 필요가 없음, 전달해야 할 정보의 양이 많거나 또는 다양할 경우 효과적으로 사용됨
    • 다만, 모든 서비스에 대해 필수적인 요소는 아님
  4. Labeling : 정보에 이름 붙이는 방법
    • 분류한 정보 또는 서비스에 이름, 즉 레이블을 붙이는 것
    • 정보가 사용자에게 전달되기 위해서는 이해하기 쉬운 이름이 필요함
      → 서비스가 가진 메시지를 단어 또는 톤으로 전달 가능하기 때문
    • 메뉴마다 이름을 붙이는 네이밍 또한 레이블링에 속함
    • 주요 메뉴, 하위 또는 종속 메뉴, 페이지에는 모두 이름이 필요하며, 그에 따라 레이블의 종류가 많음
      • 메뉴 레이블 : 서비스 메뉴 이름
      • 링크 레이블 : 텍스트 링크 레이블
      • 메타데이터 레이블 : 데이터를 위한 데이터의 레이블
    • 이름을 붙일 때 어려운 단어를 사용자 중심으로 전환하는 것도 중요하지만, 정보가 가진 의미를 잘 전달할 수 있는지 확인해야 함
      → 비슷한 서비스에서 통상적으로 사용하는 고유명칭을 무작정 쉬운 단어로 바꾸는 경우 오히려 혼란을 빚을 수 있음
    • 결론적으로 사용자들이 이용하려는 목적을 기준으로 레이블링을 진행해야 한다고 볼 수 있음

 

 

📌 유저 플로우

유저 플로우는 말 그래도 '사용자의 흐름', 즉 사용자가 서비스를 통해 어떤 작업을 완료하기까지 거치는 모든 흐름 또는 단계를 의미합니다. 다시 말해 사용자가 서비스를 사용할 때 타야 할 흐름, 또는 경험할 동선을 설계하는 일이라고 볼 수 있습니다.

사용자의 요구사항을 바탕으로 앱과 상호작용하는 가장 효과적이고 적합한 방법을 파악하는 데 쓰이는 도구이며, 한 눈에 들어오게 만든 유저 플로우는 사용자 경험을 이해하는 데 도움됩니다.

출처 : 구글링 (유저 플로우)

이러한 의미 때문에 유저 저니 (사용자 여정)과 의미가 혼동될 수 있는데요. 이 둘의 차이점은 아래와 같습니다.

 

  1. 유저 저니 (사용자 여정)
    • 개인이 목표를 달성하기 위해 취하는 단계를 시각적으로 표현한 것
    • 사용자 여정이 다루는 상황이나 여정 단계뿐만 아니라 사용자의 필요와 목표와 관련된 행동, 생각, 감정 및 여정에 대한 그의 기대를 설명하는 시나리오로 구성되는 것이 일반적임. 즉, 브랜드와 고객의 관계 전체를 보여준다고 볼 수 있음
    • 유저 저니의 특성
      • 문제점 발견 : 고객의 입장이 되어 미처 발견하지 못한 문제를 발견할 수 있음
      • 기회 발견 : 고객을 만족시킬 수 있는 방법을 찾을 수 있음
      • 사용자 중심적 사고 방식 장려 : 사용자의 감정과 동기를 중점적으로 보고, 그에 따른고객 중심의 경험을 구축할 수 있도록 함
      • 하나의 비전 수립
  2. 유저 플로우 (사용자 흐름)
    • 사용자가 특정 목표를 달성하기 위해 앱이나 웹 사이트를 통해 이동하는 경로를 보여주는 일련의 상호작용
    • 사용자가 진입점에서 전환 유입경로를 통해 최종 작업으로 이동하기까지의 단계로 나뉨

즉, 유저 플로우는 목표를 달성하기 위해 행하는 방법과 작업의 완료를 의미하는 반면, 유저 저니는 거기서 그치는 것이 아니라 시나리오의 사용성과 전체적인 맥락까지 확대되는 것이라 볼 수 있습니다.

 

 

📌 인터랙션 설계

인터랙션 디자인이란 웹 사이트, 모바일 앱, 소프트웨어의 특정 요소가 사용자의 참여로 동작하는 방식을 말합니다. 즉, 인터랙션 디자인은 디지털 플랫폼의 상호작용 가능한 시스템의 구조와 작동에 중점을 둡니다. 

 

💡인터랙션 디자인 원칙

  • 매치, 일관성, 기능성, 인지, 참여, 사용자 제어, 인지 가능성, 학습 용이성, 오류 처리, 경제성 등

 

 

📌 정리

이번에는 UX 설계를 위해 필요한 정보 구조도와 유저 플로우에 대해 알아보고 정리해봤는데요. 작년에 웹 개발 프로젝트 당시에는 생소했고, 의미를 파악하는 것조차 잘 되지 않던 개념이었는데 이번에 학습 후 여러 자료를 찾아보면서 당시 제가 작성해야 할 산출물이 어떤 형태로 만들어져야 했는지 알 수 있었고, 그 때의 나는 어떻게 했었나에 대해 되돌아볼 수 있던 시간이었습니다. 

 

다음 포스팅에서는 와이어프레임과 프로토타입을 비롯해 서비스 기획 시 필요한 산출물에 대해서 복습하고 정리해보겠습니다.

 

 

적극적인 피드백은 언제나 환영입니다:)

 

티스토리툴바