6주차 강의 숙제: 레퍼런스 분석하기 (카카오톡)

1. 화면 구조 분석

카카오톡에서 5개의 메인 탭 화면이 각각 어떠한 구조로 되어있는지 나눠보세요

 

2. 디자인 원칙 기반 분석

좋은 사례 2개와 나쁜 사례 2개, 총 4개의 사례를 찾아서 디자인 원칙에 근거하여 작성해 보세요.

 

좋은 사례

1. 네비게이션 바에 미확인 메시지 수를 대비가 강한 색으로 표시한 점. + 채팅방 우측에도 표시 

 

- 안 본 메시지는 색상의 대비를 통해 확연하게 표시하여 사용자가 쉽게 인식할 수 있도록 돕는다. 

- UX 비주얼 디자인 원칙 중 '색상을 통해 대비를 줌'으로써 사용자가 쉽게 인식할 수 있도록 도움 

 

2. 채팅방의 방 제목과 최신 텍스트 간의 글자 크기를 차이를 둠으로써 사용자가 용이하게 제목과 텍스트를 구별지을 수 있도록 시각적으로 위계를 둠 

 

나쁜 사례 

1. 무분별한 색상 배치 

 

게슈탈트 심리학에서는 색상의 유사성이 유사성의 원리 중에서 가장 강력하다고 설명하고 있다.

오픈채팅방의 해당 아이콘들을 보면 아이콘의 색상이 저마다 다르며, 몇 몇 아이콘은 같은 색으로 묶여 있는 것을 확인할 수 있으나, 카테고리 이름을 보면 알 수 있듯이 같은 색상 간의 주제는 사실 크게 연관성이 없다. 

처음 보는 사용자는 색상의 유사성과 실제 유사도가 차이나는 지점에서 혼란을 느낄 수 있기 때문에, 아이콘의 색상을 적절한 색으로 통일하고 색깔을 배제하는 것도 나쁘지 않을 것 같다. (더보기 페이지의 아이콘들은 실제로 다 무채색이다.) 

 

2. 쇼핑 페이지, 더보기 페이지의 시각적 위계가 부족함 

 

 

쇼핑 페이지를 볼 때마다 정신사납고 들어가기 싫다는 생각을 많이 했는데, 왜 그럴까 계속 생각을 해보니 전반적인 화면 페이지의 채도가 높고 width도 고정되어 있지 않아 깔끔하지 않다는 인상을 받기 때문이라 생각했다. 

 

우선 첫 번째로, 제목을 강조할거면 제목을 진하게 넣고, 가격을 강조할거면 가격도 진하게 넣어야 하는데, 가격에 볼드처리를 더 넣기는 했지만 제목도 진하지 않은 것은 아니여서 둘 다 똑같이 강조가 되니 눈이 피로하다는 생각이 들었다. 

 

그리고 섹션 별로 통일이 되어 있지 않다. 라이브는 라이브 섹션, 커머스는 커머스 섹션으로 분류해야하는데 스크롤을 하다보면 라이브 섹션이 나왔다가, 커머스 섹션이 나왔다가가 번갈아가면서 등장한다. 라이브 이미지와 커머스 이미지는 규격이 각각 다르고, 라이브 이미지는 좌우 스크롤을 염두하여 가로가 짧고 세로가 긴 형식이기 때문에 연속성이 떨어져 사용자의 몰입을 방해할 수 있다. 

 

- 연속성의 원리

- 시각적 위계 

 

그리고 그 아래에는 상품을 또 추천해주는 칸이 뜬금없이 뜨는데, 해당 섹션은 또 가로가 매우 길고 이미지와 텍스트의 배치가 타 섹션이랑 상반된다. 이러한 연속적이지 못한 플로우는 사용자의 몰입을 방해하고, 사용자가 쉽게 피로하도록 유발시킨다고 생각한다. 

 

 

3. 개선점 1개 이상 찾기

찾은 사례에 대해 개선 방향을 1개 이상 생각하여 적어보세요

 

1. 오픈채팅의 이모티콘 색을 통일한다

- 색상의 유의성 

 

2. 가로길이를 통일하게 이미지를 편집하고, 라이브 섹션은 배경색을 회색으로든 바꿔줌으로써 해당 섹션만 구별됨을 사용자에게 시각적으로 드러내줒는 것도 좋을 것 같다. 글자는 가격을 강조하든 제목을 강조하든 둘 중 하나는 채도를 낮추는 것이 좋을 것 같고 만일 해당 레이아웃을 변경하기 까다롭다면 홈 화면의 기본을 커머스로 설정해놓고 작은 탭을 넣어 전환을 시키든 정리를 하거나, 규격이 다른 이미지는 각각 구분이 되게 디자인을 변경하는 것이 좋을 것 같다.