1. 정보구조 (I.A: Information Architecture)
사진출처 : Jlight
정의)
정보구조는 사용자 경험을 최적화하기 위해 정보와 콘텐츠를 체계적으로 구성하는 과정으로, 사용자가 원하는 정보를 쉽고 빠르게 찾을수 있도록 서비스 목차 역할을 수행하고자 하는 목표를 가지고 있습니다.
주요 구성 요소:
- 내비게이션 구조: 사용자가 어떻게 앱이나 웹사이트를 탐색할 수 있는지 정의합니다.
- 카테고리화: 콘텐츠와 기능을 논리적으로 그룹화하여 사용자 흐름을 개선합니다.
- 레이블링: 각 요소에 적절한 이름을 부여해 사용자에게 명확한 의미를 전달합니다.
정보구조도 - 장단점)
장점:
- 사용자 경험 개선: 정보와 콘텐츠를 체계적으로 구성해 사용자가 필요한 정보를 빠르게 찾을 수 있도록 돕습니다.
- 복잡성 감소: 콘텐츠의 계층 구조를 정의해 사용자 혼란을 줄이고 사용성 개선에 기여합니다.
- 효율적인 내비게이션: 잘 설계된 내비게이션 구조를 통해 사용자 여정이 매끄러워집니다.
단점:
- 시간 소모: 정보 구조를 효과적으로 설계하는 데는 많은 시간과 리서치가 필요합니다.
- 변경의 어려움: 초기 설계 후 구조 변경이 필요할 때 복잡하고 시간이 많이 걸릴 수 있습니다.
- 사용자 테스트 필요성: 잘못 설계된 구조는 오히려 혼란을 야기할 수 있어 사용자 테스트를 필수로 요구합니다.
정보구조는 웹사이트나 앱을 디자인할 때 사용자 여정을 매끄럽게 만들고 혼란을 최소화하는 데 중요한 역할을 합니다.
Tip) User Flow Chart (플로우 차트)
해당 유저 플로우 차트는 프론트엔드 팀 프로젝트 수행시 팀원분이 직접 만든 플로우를 활용하여 이해를 돕고자 하였습니다. (OneBook 프로젝트 : User Flow)
User Flow Chart
- 사용자가 웹사이트나 앱에서 특정 목표를 달성하기 위해 거치는 경로를 시각적으로 표현한 다이어그램을 말하며, 이 차트는 사용자가 각 화면을 어떻게 탐색하고 어떤 행동을 취할지 보여줍니다.
다이어그램
- 2차원 기하학 심벌을 이용하여 정보를 시각화해서 만든 기술을 말합니다. 다이어그램은 주로 User Flow Chart에서 많이 사용되며 데이터의 성질을 표현하기 위해서 선, 화살표등의 시각적인 고리들로 연결된 형태의 유형으로 구성되어 있습니다.
UX Design Flow(UX 디자인 흐름도 : 다이어그램)
사진출처 : 링크텍스트
정보구조도(I.A) & User Flow 유사점과 차이점:
유사점:
- I.A와 유저 플로우 차트 모두 사용자 경험을 최적화하기 위해 콘텐츠와 기능을 구조화하는 데 초점을 맞추며, 사용자가 원하는 정보를 쉽게 찾을 수 있도록 돕습니다.
- 사용자 중심의 설계 도구라는 점에서 비슷합니다. 두 가지 모두 사용자가 목표를 달성하는 데 필요한 여정을 시각화하여 UX 향상에 기여합니다.
차이점:
- I.A는 정보의 조직 구조와 콘텐츠의 계층적 관계에 초점을 맞추는 반면, 유저 플로우 차트는 사용자가 목표를 달성하기 위해 앱이나 웹사이트 내에서 거치는 일련의 행동 흐름을 시각적으로 표현합니다.
- I.A는 전체 시스템의 구조적인 틀을 제공하는 반면, 유저 플로우 차트는 사용자가 화면 간 이동하는 경로와 각 단계에서 발생하는 상호작용을 보여줍니다.
2. 기능정의서 (Functional Specification Document)
사진출처 : 주연쓰
정의)
기능정의서는 제품의 기능과 요구 사항을 명확하게 설명한 문서입니다. 디자이너, 개발자, 프로젝트 관리자 등 다양한 이해관계자가 이 문서(엑셀 또는 스프레드시트)를 사용해 프로젝트의 목표와 범위를 이해할수 있도록 작성한것을 말합니다.
(즉, 쉽게 말해서 개발자나 디자이너에게 서비스의 '어떤 기능'을 구현해달라고 작성하는 기능적인 요구 정의 문서라고 이해하면 편리합니다.)
주요 구성 요소:
- 기능 요약: 시스템에서 제공해야 할 주요 기능을 간략히 설명합니다.
- 사용자 요구 사항: 타겟 사용자가 어떤 기능을 필요로 하는지 설명합니다.
- UI 요소 설명: 화면에 나타나는 UI 요소들이 어떻게 작동할 것인지 정의합니다.
- Use Case: 사용자가 특정 기능을 어떻게 사용하는지에 대한 시나리오를 포함해 사용자와 시스템 간의 상호작용을 명확히 설명합니다.
기능정의서는 프로젝트가 진행되면서 방향을 잃지 않도록 돕고, 설계와 구현 간의 간극을 최소화하는 역할을 합니다.
기능정의서 - 장단점)
장점:
- 명확한 목표 제공: 프로젝트 팀 전원이 같은 목표를 공유할 수 있도록 기능과 요구 사항을 명확하게 정의합니다.
- 개발과 디자인 사이의 간극 감소: 디자이너와 개발자 간의 원활한 소통을 돕고, 기대하는 기능과 실제 구현 사이의 차이를 줄입니다.
- Use Case 기반 설계: 사용자 요구를 시나리오로 표현해 사용자 중심의 제품 설계가 가능하게 합니다.
단점:
- 복잡성 증가: 프로젝트 규모가 커질수록 기능정의서가 복잡해지고, 이해하기 어려워질 수 있습니다.
- 유연성 부족: 정의된 요구 사항을 바꾸기 어렵기 때문에 변경 사항이 생기면 조정하는 데 시간이 걸릴 수 있습니다.
- 긴 작성 시간: 초기 작성에 많은 시간과 노력이 필요하며, 유지보수도 필요합니다.
예시) 로드맵 서비스 UIUX 개선 프로젝트 - 기능요구 정의서
As-Is(개선 전)
To-Be(개선 후)
3. 와이어프레임 (Wireframe)
사진출처 : 강남언니 공식블로그
정의
와이어프레임은 UI 디자인의 초기 스케치로, 페이지의 레이아웃과 주요 요소들의 배치를 시각적으로 표현합니다. 일반적으로 색상, 이미지, 그래픽 등의 시각적 요소는 최소화하고 구조와 기능에 초점을 맞춥니다.
주요 목적:
- 레이아웃 정의: 각 페이지에 어떤 요소들이 어떤 위치에 배치될지 정합니다.
- 사용자 흐름 표현: 사용자가 앱이나 웹사이트를 통해 이동하는 경로를 정의합니다.
- 기능 요소 테스트: 버튼, 폼, 링크 등 인터페이스가 사용자 요구를 충족하는지 확인합니다.
와이어프레임 - 장단점)
장점:
- 효율적인 커뮤니케이션: 페이지 레이아웃을 시각적으로 표현해 이해관계자들과의 소통을 원활하게 합니다.
- 빠른 수정 가능: 상세한 그래픽 요소 없이 구조에 집중하기 때문에 수정이 빠르고 용이합니다.
- 기능 중심 설계: 디자인 과정에서 기능 중심으로 레이아웃을 검토할 수 있어 사용자 경험을 개선할 수 있습니다.
단점:
- 시각적 한계: 색상, 그래픽, 스타일 등이 없어서 최종 디자인을 이해하는 데 어려움이 있을 수 있습니다.
- 사용자 테스트 제한: 와이어프레임만으로는 사용자가 실제로 어떻게 반응할지 충분히 예측하기 어렵습니다.
- 오해 발생 가능성: 상세한 그래픽 디자인을 포함하지 않기 때문에 이해관계자들이 최종 결과물에 대한 오해를 가질 수 있습니다.
와이어프레임은 디자이너와 개발자 간의 소통 도구로 사용되며, 이해관계자들에게 초기에 디자인 의도를 시각적으로 설명할 수 있는 자료로 유용합니다.
