문제 정의
우리는 보통 WHAT만 하는데 WHY, HOW를 거쳐 WHAT이 되는 것이 중요함.
문제 정의는 무엇을 어떻게 해결할지 결정하는 기준이자, 서비스가 존재하는 이유 그 자체다.
문제 접근 과정
문제 자체와 문제가 가져온 결과를 혼동하지 말기
장바구니 UI가 보기 불편해요. -> 이건 문제가 가져온 결과이기 때문에 왜 장바구니 UI가 보기 불편한지 알아야 한다.
진짜 문제를 정의해보면?
-> "정보가 많은데, 왜 선택을 하지 않았을까?" 등의 반드시 사용자의 행동을 중심으로 문제를 다시 보는 습관이 필요.
문제 정의는 '결과'가 아니라 '구조'를 보는 시야다. 겉으로 드러나는 현상만 보지 않아야 한다. 그 현상을 만든 구조와 행동의 원인을 찾아서 어디서 그 구조가 어긋났는지를 파악해야 한다.
자주 실수하는 문제 접근 방식
- 이탈률이 높다 -> 사용자의 의도와 동선이 맞지 않는다. 따라서 사용자의 입장에서 '여기까지 들어왔으면 뭘 하고 싶었을까"' 먼저 상상해보기.
- 전환율이 낮다 -> 선택 순간에 망설이게 하는 요소가 있다. UI보다 정보의 확신을 먼저 줘야 전환이 일어난다. 신뢰, 맥락, 불확실성 제거가 먼저다.
- 탭 전환율이 적다 -> 구조가 아닌 맥락에 문제가 있다. 탭은 구조가 아니라 흐름 속 컨텍스트에 따라 쓰인다. 다음 행동의 기대를 잘 연결해야 눌린다.
- 리뷰가 부정적이다 -> 사용자의 기대와 실제 경험이 다르다. 부정 리뷰는 ‘비판’이 아니라 ‘기대의 충돌’이다. 사용자들이 어떤 기대를 하고 서비스를 마주했는지 파악하지 않으면 경험 설계는 헛발질이 된다.
- 기능을 안 쓴다 -> 기능을 위한 기능이 되어 버렸다 기능이 쓰이지 않는 건 종종 의미 없는 시나리오가 존재하기 때문이다. 즉, 사용자의 문제가 아닌 것을 억지로 해결하려고 할 때 자주 발생한다.
정보 구조화
사용자에게 화면안에 담긴 정보들의 순서를 만들어 주는 것.
정보 구조와 UI의 관계
사용자가 원하는 정보가 분류 없이 마구잡이로 높여 있다면 어디를 봐야 할지 알 수 없다. 그래서 정보를 목적에 따라 정리하는 '정보 구조화'가 필요하다.
사용자의 행동 흐름에 따라, 정보를 어떤 순서로 보여줄지 정하는 것이 중요.
구매, 문의, 찜하기 같은 주요 행동을 유도하기 위해 가장 먼저 상품명과 가격을 눈에 들어오게 한다. 즉, 사용자의 목적과 행동이 정보 우선순위를 결정한다는 뜻이다.
클러스터링(Clustering)
정보에도 친한 정도가 있다.
게슈탈트 원리 중 근접성의 원리와 유사한데,
정보를 구조화한다는 건 가까운 관계끼리 묶어서 덩어리를 만들고, 또 더 큰 덩어리를 만드는 것이다. 이러한 덩어리 짓기를 정보 클러스터링, 또는 콘텐츠 블록화라고 부른다.
아래도 클러스터링이다.
시각적 흐름
사람은 화면 전체를 한 번에 보지 못하고, 중요한 정보만 먼저 보려고 함.
시선 흐름을 만드는 3가지 요소
- 타이포그래피
글자는 클 수록, 굵을 수록 더 시선을 이끈다. 확연히 구분되는 텍스트 스타일 3 ~ 4가지를 만들어 사용하며, 일반적으로 글자 크기의 1.4 ~ 1.6배 정도가 적절하다. 보통 글자 크기는 서로 4px 이상 차이나게 해주면 좋다.
※ 네이밍 컨벤션 : 이름을 짓는 규칙 (타이포 스타일 이름 짓는 법)
이는 협업과 유지보수의 효율성을 좌우한다.
2. 색상, 채도 및 명도
3. 정렬과 여백
여백은 어디서 어디까지가 한 덩어리인지 인지하는 기준이 됨.
