[UIUX] UIUX디자인입문 W1-6

레퍼런스 분석하기 : 카카오톡

1. 화면 구조 분석

1) 친구 탭 화면

- 상단 GNB : 현재 화면, 상단 아이콘(친구 검색, 친구 추가, 음악 검색, 환경 설정)

- 내 프로필 : 프로필 사진, 이름, 멀티 프로필, 상태메시지

- 업데이트 알림 섹션 : 프로필 업데이트 소식 전달

- 펑 : 카카오톡 스토리 기능

- 광고 배너

- 즐겨찾기 : 즐겨 찾는 친구 목록

- 채널 : 상업 목적 카카오톡플러스 친구 목록 접힌 상태로 노출, 추천 플친 카드형식 노출(광고)

- 친구 : 추가 된 친구 목록 나열식 노출

- 하단 네비게이션 바 : 친구 / 채팅 / 오픈채팅 / 쇼핑 / 더보기 총 5개 탭, 확인하지 않은 채팅창 알림은 숫자뱃지로, 업데이트 알림은 우측 상단 빨간점으로 노출

 

2) 채팅 탭 화면

- 상단 GNB : 현재 화면, 상단 아이콘(검색, 새 채팅방 만들기, 환경 설정 - 채팅방 정렬)

- 광고 배너

- 대화 목록 : 내가 주고 받은 메시지 목록 프로필별 정렬

- 하단 네비게이션 바 : 친구 / 채팅 / 오픈채팅 / 쇼핑 / 더보기 총 5개 탭

 

 

 

 

 

 

 

3) 오픈채팅 탭 화면

- 상단 GNB : 현재 화면, 상단 아이콘(새 채팅방 만들기, 마이페이지, 환경 설정)

- 광고 배너

- 대화 목록 : 내가 주고 받은 메시지 목록 프로필별 정렬

- 광고 배너

- 하단 네비게이션 바 : 친구 / 채팅 / 오픈채팅 / 쇼핑 / 더보기 총 5개 탭

 

 

 

 

 

 

4) 쇼핑 탭 화면

- 상단 GNB : 현재 화면, 마이페이지, 환경 설정)

- 탭

- 라이브 콘텐츠 카드 세션

- 카테고리 메뉴

- 검색바

- 프로모션 카드 세션

- 추천 목록 세션 반복

- 하단 네비게이션 바 : 친구 / 채팅 / 오픈채팅 / 쇼핑 / 더보기 총 5개 탭

 

 

 

4) 더보기 탭 화면

- 상단 GNB : 현재 화면, 검색, QR스캔, 환경설정)

- 카카오페이 자산 세션(신분 확인, 결제, 송금, 쇼핑내역)

- 카테고리 메뉴

- 광고 배너

- 카카오 공지 캐러셀

- 현재 지역 날씨 

- 하단 네비게이션 바 : 친구 / 채팅 / 오픈채팅 / 쇼핑 / 더보기 총 5개 탭

 

 

 

 

 

2. 디자인 원칙 기반 분석

✅좋은 점

1) 하단 탭
- [게슈탈트 심리학-유사성의 원리] 간결 구성 : 따로 분리선이 없어도 각 탭별로 일정 간격을 두어 각기 다른 메뉴라는 인지 가능
- [제이콥의 법칙] 아이콘 : 각 탭의 기능별로 알맞은 아이콘 선택, 우측 상단 빨간 알림 표시 또한 기존 보편적 방식과 동일하게 가져감

2) 상단 gnb
- [힉의 법칙] 채팅창 환경 설정 : 상단 아이콘 개수가 최대 4개를 넘지 않으며, 환경설정 페이지에 들어가지 않고 아이콘 > 드롭다운 리스트로 바로 설정할 수 있게 해줌.

3) 쇼핑 탭 라이브 캐러셀
-  [게슈탈트 심리학-폐쇄성의 원리] : 한정된 디스플레이 화면 속 많은 정보를 담기 위해 옆에 잘린 카드 의도적 배치. 유저가 옆으로 스크롤하면 완전한 콘텐츠가 나올거라는 예상을 하게 만들어 더 많은 콘텐츠 배열이 가능함

4) 채팅 목록
- [스케일], [시각적 위계] : 프로필 사진을 가장 크게 배치하여 어떤 사람의 메시지인지 먼저 보이도록 배치. 폰트 굵기와 색상에 차이를 두어 굵고 검은 글씨로 메시지 발/수신자의 이름을 확인시키고, 그 다음 내용을 미리보기로 보여줌

⚠️아쉬운 점

1)상단 GNB
- [제이콥의 원칙] 검색 아이콘과 친구 추가 아이콘이 중복 된 느낌. 검색 아이콘을 눌러 새로운 사람을 검색하면 나오나? 내 연락처 DB엔 없지만 카카오톡서버 DB엔 있으니까 나올 것 같은 생각이 듦.

2) 광고 배너
- [피츠의 법칙] 채팅창 상단 배너를 제외한 모든 탭의 광고 배너가 터치하기 좋은 위치에 배치되어 있음. 광고 효과에는 좋지만 채팅을 한다는 본질적 유저 목적과는 맞지 않아 몰입감을 방해
- [스케일], [대비] 카톡 내 다른 컴포넌트들은 단순하고 희미한 색상을 사용하지만 광고 배너의 경우 좀 더 넓은 스케일의 크기, 다양한 이미지(색상) 사용으로 시각적으로 우선 순위에 놓여진다. 쇼핑 목적이 아닌 지인들과의 대화가 우선순위인 플랫폼에서 겪고 싶지 않은 경험. 유저가 가지고 있는 채팅창/친구 목록과 조화롭지 못해 눈에 거슬린다는 느낌을 강하게 줌

3) 더보기 카테고리 세션
- [힉의 법칙], [밀러의 법칙] : 펼쳐져 있는 카테고리 수(16개) 너무 많아 복잡하다는 인상. 한 눈에 인지하기 하기 힘들고 원하는 메뉴를 찾는데 수고롭다는 생각을 들게 함