GoodUI: 전환율과 사용성을 높이는 UI 디자인 원칙

Source

  • Evernote/Technote scraps/GoodUI.md

Summary

이 문서는 GoodUI.org 에서 제시하는 사용자 인터페이스(UI) 디자인 및 전환율 최적화(CRO) 관련 팁들을 나열한 것입니다. 핵심은 비즈니스 목표(전환)와 사용자 편의성을 모두 만족시키는 ‘좋은 UI’를 만드는 것입니다. 주요 원칙으로는 단일 열 레이아웃 사용, 선물(상호성)을 통한 설득, 유사 기능 통합, 사회적 증거(Social Proof) 활용, 주요 액션(CTA)의 반복 노출, 클릭/선택/일반 텍스트의 시각적 구분, 추천을 통한 선택 과부하 해소, 확인 대화상자 대신 ‘실행 취소(Undo)’ 기능 제공 등이 포함됩니다.

Key Points

  • 단일 열 레이아웃: 독자의 시선을 위에서 아래로 자연스럽게 유도하고 핵심 메시지에 집중하게 함.
  • 상호성의 원칙: 즉각적인 판매 대신 작은 선물이나 가치를 제공하여 장기적인 신뢰와 전환을 유도.
  • UI 단편화 방지: 시간이 지나며 중복된 기능이 생기면 이를 통합하여 학습 곡선을 낮춤.
  • 사회적 증거: 제품 자체를 설명하기보다 타인의 추천이나 데이터를 보여줌으로써 신뢰도 향상.
  • CTA 반복: 긴 페이지에서는 상단과 하단에 주요 액션(Call to Action)을 배치하여 이탈 방지.
  • 시각적 명확성: 클릭 가능한 요소, 선택된 상태, 일반 텍스트의 스타일(색상, 대비 등)을 명확히 구분.
  • 선택 과부하 해소: 모든 옵션을 동등하게 보여주지 말고, 특정 옵션을 강조하여 결정을 돕음.
  • 실행 취소(Undo) 활용: 위험한 작업 시 확인 대화상자 대신 실행 취소 기능을 제공하여 흐름을 끊지 않음.