[코드스테이츠 PMB 9기] UX, UI / w. 차이카드(CHAI)

UX 심리학

---

 

서비스 디자인 트렌드

Ever wonder why the most popular apps are starting to look the same?
It might be a good thing

→ 표(평)준화되는 UI
→ 사용자가 여러 앱들을 사용하며 겪어야 하는 온보딩 과정을 더욱 쉽게 함

UI 방법론

📌 발전 과정
: 스큐어모피즘 → 플랫 디자인 → 머터리얼 디자인 → 뉴 모피즘

• Morphism(형태론)
  → 실제 사물과 유사한 형태 추구
  • Skeuomorphism
    • 실제 사물과 최대한 유사하게 디자인
      • 기능이 아닌 형태에 집착하는 순간 비효율 발생
      • 공수 증가
    • 관련 법칙 : 제이콥의 법칙
    • e.g. 플로피디스크
  • Neumorphism
    • 스큐어모피즘 + 플랫 디자인
    • 현재 대중화되지는 않았으나, 머트리얼 디자인 대체할 차세대 디자인으로 대두되고 있음
    • 일반된 색상 사용하고, 내부 구조는 플랫하게 구성
• Flat
  → 사물의 형태를 활용해 단순하고 명료한 형태 추구(2D)
  • Flat Design
    • 단순하며 명료한 2D 디자인
      • 간결하고 용량 역시 적게 차지함
      • 입체감에 대한 배제로 인하여 정보 우선순위 표현에 한계 존재함
        • CTA 버튼 표현에 한계가 존재했음
    • e.g. MS社 Window OS
  • Material Design
    • 플랫 디자인 + 스큐어 모피즘
    • 사물을 특정 규칙에 따라 최대한 간결하게 표현(일관성 필수)
      • 사용자 이해 부족할 경우, 추상적으로 구현되어 유저 혼란 가능 야기함
    • e.g. 구글 머트리얼 디자인 시스템, 애플 ios 디자인 시스템

---

차이카드(차이 코퍼레이션)

사용된 심리학 법칙(UX)

1-1

제이콥의 법칙(1-1)

• 유저에게 익숙한 UX/UI 적용하여 온보딩 과정 최소화
• 익숙한 시계(타이머) 아이콘으로 제작된 CTA 버튼 우하단 삽입
• 시계 아이콘 클릭 시, 별도 번개 사용 히스토리 페이지 랜딩
• (클릭 전) 특정 History 를 파악할 수 있을 것 기대하게 됨
• (클릭 후) 차이카드의 핵심인 번개 획득/사용 이력 조회 가능

 

1-2

제이콥의 법칙(1-2)

• 바코드, 공구 아이콘으로  제작된 CTA 버튼 우상단 삽입
• 바코드 아이콘 클릭 시, 바코드 결제 혹은 마이페이지 페이지 랜딩
• 바코드 아이콘
  • (클릭 전) 바코드 창 활성화 기대
  • (클릭 후) 바코드 결제 전면 팝업 활성화
• 공구(⚙️) 아이콘 (아쉬운 부분)
  • (클릭 전) 일반적인 공구 모양으로 되어 있지 않아, 클릭 시 액션 정확한 예측 불가하나 맥락상 마이페이지로 유추 할 수 있음
  • (클릭 후) 마이페이지 랜딩

 

1-3

1-4

제이콥의 법칙(1-3,1-4)

• 조회 시점 기준, 비활성 상태 기능들은 별도 음영처리 하였음
• (1-3) 홈 화면 부스트 영역, 카드 자체 음영처리로 비활성 상태 정보 전달
• (1-4) 부스트 카드별 상세 영역, 하단 CTA 버튼 음영처리 통하여 비활성 상태 정보 전달 + 추후 활성화 시점 정보 전달

 

---

 

2-1

2-2

포스텔의 법칙(2-1, 2-2)

• 기획자의 의도대로 유저가 사용하지 않을 가능성 제거하기 위해 초기 사용 시 기본 가이드 제공
  • 효과적인 온보딩 위한 디자인(테슬러의 법칙 방지)
• 차이 앱의 핵심 기능인 부스트에 대한 설명과 적용 방법에 대하여 소개
• 2-1과 2-2 모두 모달 팝업 형식으로 되어 있고, 레이어 외 기존 창 클릭 할 수 없도록 dim 처리 되어 있음
  • 2-1의 경우, 팝업 움직여서 비활성화된 기존 페이지 볼 수 있음(통일성 아쉬움)
  • 2-2의 경우, 팝업 움직일 수 없어 기존 페이지 볼 수 음(통일성 아쉬움)

---

 

3-1

피츠의 법칙(3-1)

• 앱 핵심 활동 가능하게 하는 CTA 버튼은 클릭하기 쉬운 위치에 배치함
• 부스트(혜택) 적용 과정을 최하단에서 상단으로 스크롤하게 해두어 한손으로 간편히 적용 가능함
  • 이후, 부스트를 취소 버튼 역시 최하단 배치하여 적용-취소 과정에서 동작 최소화 하였음

---

 

4-1

본 레스토프 효과(4-1)

• 핵심 정보와 동작을 가독성 좋게 별도 강조해두었음
• '부스트 취소하기' 취소 문구 클릭 시 별도 하단 모달 팝업 노출
  • 1)취소, 2)기존 유지 2가지 동작 중 '취소' 버튼 별도 강조함
    • 취소 하면 얻게 되는 번개 수량을 명시해주어 취소 Benefit 직관적 이해 가능

 

4-2

본 레스토프 효과(4-2)

• 핵심 정보 별도 강조해두었음
• 할인율, 신청 인원 실시간 변동 상황 반영통하여 선착순 형태로 진행되는 혜택임을 강조
• 부스트 카드 우상단 애니메이션 통해 선착순임 추가 강조

---

 

5-1

도허티 임계(5-1)

• 고객 경험의 최종 순간 
• '부스트 취소하기' 취소 문구 클릭 시 별도 하단 모달 팝업 노출
  • 1)취소, 2)기존 유지 2가지 동작 중 '취소' 버튼 별도 강조함
    • 취소 하면 얻게 되는 번개 수량을 명시해주어 취소 Benefit 직관적 이해 가능

 

5-2

도허티 임계(5-2)

• 일정 반응 속도 초과할 경우, 이탈 발생하는 것 막기 위함
• (카드 이미지) 스켈레톤 UI
  • 카드 발급 상세 이미지 활성화 전 스켈레톤 UI로 사전 형태 전달
• (부스트 페이지) 상단 프로그레스 바
  • 부스트 클릭 시, 진행되는 광고 진행 및 예상 종료 시점 확인 가능하도록 진행 상태 표시

---

 

6-1

피크엔드의 법칙(6-1)

• 고객경험애는 서비스 전체 경험보다 최종 단계의 경험이 더 크게 작용함
• 페이지 내에서 정보 과다로 유저 혼락 겪지 않도록 제공 정보 수량 제한하였음(밀러의 법칙)
• (부스트 상세 페이지) 동일 부스트 재활성화 시 알림 기능 제공
  • 부스트 적용 위한 CTA 버튼 외, 동일 기능이 추가 활성화 혹은 현재 비활성화이나 추후 재활성화 될 경우 유저가 이를 놓치지 않도록 알림 기능 제공함
  • 좌상단 알림 버튼 클릭 시, 아이콘 색상 변동 + 하단 토스트 팝업 통하여 적용 여부 직관적으로 인지시켜 줌

---

 

어떻게 문제를 해결하고 있는가?

• 하나의 페이지에는 UX 개선을 위한 하나의 심리학 법칙만 사용되지 않음
  • 예) 6-1; 피크엔드의 법칙 + 밀러의 법칙 + 피츠의 법칙
    
    • 부스트 적용 불가하거나, 추후에도 적용 희망할 경우, 이를 사전 공지 받을 수 있는 알림 기능을 제공하고 있음(피크엔드)
    • 부스트(혜택)에 대한 기본 정보 중 유저가 가장 큰 효용으로 느낄법한 할인율, 금액으로 요약하여 직관적으로 1차 전달(밀러)
    • 부스터 적용의 경우, 한 손으로 간편하게 적용/취소 할 수 있도록 엄지 손가락과 가장 가까운 최하단에 배치하였음(피츠)
• 페이지 별 유저에게 기대하는 액션 혹은 Flow에 따라 특별히 강조되는 UX 기법들이 존재함
  • 예) 5-1, 5-2; 도허티 임계 + 밀러의 법칙 + 본레스토프 효과 + 힉의 법칙 + 제이콥의 법칙
    • 별도 페이지 랜딩과정에서 프로세스 바 혹은 스켈레톤 UI 활용하여 대기 시간을 지루하지 않게 만들었음(도허티)
    • 페이지 내에서 1차적으로 필수 정보만 최소화하여 제공하고 이후 추가 상세 페이지 통하여 상세 정보 확인 가능하게 구성(밀러)
    • 핵심 정보 혹은 핵심 활동 가능한 버튼들은 앱 내 그라데이션 혹은 애니메이션 효과 통하여 강조하고 있음(본레스토프)
    • 차이 카드 앱은 기본적으로 한 화면에서 유저가 취할 수 있는 액션이 2개 정도로 단순화 되어있음(힉)
    • 온보딩 최소화 위하여 익숙한 음영 처리 혹은 아이콘 사용하였음(제이콥)