뀨나의 온라인 서랍장

디자인 컨셉과 정보구조 본문

UIUX/학습일지

디자인 컨셉과 정보구조

kkyuna 2024. 1. 4. 17:29

1. 디자인 컨셉

서로가 생각하는 디자인의 컨셉에 괴리가 있을 수 있다. -> 그래서 정확한 시각적 자료 문구 표현이 필요함

 

컨셉디자인을 하면?

1. 스토리를 기반으로 제품의 방향성을 시각화

2. 만들고자 하는 제품의 예상도

3. 시장의 반응을 미리 확인 또는 이해관계자

4. 만들고자하는 제품의 예상도

5. 커뮤니케이션을 위한 아이디어의 시각화

등등..

 

1. 표준 등에 대한 위반의 여지는 없는가?

2. 디자인 컨셉과 부합하는가?

3. 구현이 가능한가?

4. 요구사항은 잘 반영될 수 있나?

5. 스타일 리뷰

등등..

 

UX 디자인 컨셉

1. 목표 (Goal)

2. 범위 (Scope)

3. 정황 (Context)

4. 전략 (Key feature)

[목표] 자주 주문하는 메뉴의 식당 중 가능한 빨리 배달 가능한 가게의 정보를 제공하여, 사용자의 탐색 시간을 줄이고 의사결정에 도움을 준다.

상단의 4가지의 현실 가능성을 고려해야한다.

 

아래의 3가지를 담아 문서를 제작해야한다.

- 무엇을 만들 것인가?

- 어떻게 만들 것인가?

- 왜 만들어야 하는가?

정보구조 형태, 컨셉디자인 형태 이용

 

UX Design Concept Map

컨셉을 중심으로 사고를 확장하고 무엇이 (우리에게) 중요한지 파악하기

 

셋의 상호작용이 되어야 한다.

User(목적달성, 이익) / Provider(서비스 제공, 사용자 경험) / Operator(서비스 제작, 지속가능한 서비스)

 

컨셉 아이디어 (a. 컨셉 아이디어 b. 키워드 c. 키 벨류) -> 개발 (a. 디테일 만들기 b. 개발리뷰 c. 비즈니스 리뷰) -> 디자인 컨셉 (a. 서비스 건설 b. 디자인 범위 c. 키 행동자 / 특징 (UJM or Story mapping)

 

 

2. 정보 구조

애플리케이션 또는 웹사이트에서 제공하는 정보와 기능의 관계와 순서를 정의

곰인형 : 머리/몸통 눈코입귀/팔다리 등등으로 나뉘어진 구조

 

정보 구조를 디자인할 때 생각해야 하는 것

Context - 비즈니스 전략, 목표, 운영환경

Content - 정보의 종류, 형태, 양

User - 사용자 특성, 니즈, 과업의 성격, 난이도 등

 

+ Discoveribility(얼마나 잘 찾을 수 있느냐) & Flexibility(유연한 형태로 안의 콘텐츠가 바뀌어도 유지되어야 한다)

 

정보 구조의 종류

- Broad Structure : 사용의도가 명확한 경우, 전문가용(B2B), 제공하는 정보의 연관성이 낮고, 정보량이 많을 경우 ex. 연말정산 홈페이지, 핀터레스트

- Deep / Narrow Structure : 모바일에서 주로 사용. 점점 메뉴를 파고 들어가서 원하는 메뉴를 들어가게 되는 방식

ex. 인스타그램 - 릴스를 강조합시다, 더 단순하게 합시다, 쇼핑 메뉴에 대한 사용자의 부정적 의견이 있어요.

-> (개선) 메뉴 하나 제거, 쇼핑 메뉴 힘을 빼서 브라우즈 안으로 넣기, 릴스 메뉴를 홈에 하위 메뉴에도 추가 

 

사용자 검증 : Card sorting

1. 개방형 카드 소팅

Step1 사용자를 섭외하여 테이블에 미리 준비한 메뉴 카드를 사용자에게 보여줌

Step2 서로 어울린다고 생각되는 카드끼리 그룹핑해주세요

Step3 그룹핑이 끝나면 사용자와 함께 각 그룹에 해당하는 이름을 정의

 

2. 폐쇄형 카드 소팅 (조금 더 의도가 들어가 있는)

Step1 사용자를 섭외하여 테이블에 미리 준비한 메뉴 카드와 그룹 이름을 사용자에게 보여줌

Step2 각 카드를 정해진 그룹에 따라 분류해주세요

Step3 이렇게 분류한 이유와 그룹 이름을 변경할 수 있다면 어떻게 하고 싶은지 물어봄

 

장점

1. 사용자의 멘탈 모델을 엿볼 수 있음

각 정보를 어떤 속성으로 이해하고 있는지 알 수 있음

메뉴의 이름이 이해하기 쉽게 정의되어 있는지 확인 가능

 

2. 정보 구조를 User friendly하게 개선

해당 정보를 바라보는 사용자의 언어를 파악 가능

메뉴간의 계층관계 정보도 파악 가능

 

3. 다양한 가능성 확인 가능

테스트를 5번하면, 각자 다른 5개의 정보구조를 얻을 수 있음

-> 가장 일반적이고 이해가 쉬운 형태를 찾을 수 있음