배운내용을토대로 카카오톡 앱 화면을 분석하고 개선점을 찾아보자
카카오톡 5가지 메인화면을 화면 구조 분석 → 디자인 원칙 기반 분석 → 개선점 찾기 순서로 정리해보자.
1. 화면 구조 분석
수업 중 튜터님께서 분류하신 바를 참고하여, 나도 화면구조를 분류해보았다. 아직 각 요소들의 이름이 무엇인지 잘 모르겠지만, 보편적으로 쓰이는 네이밍에 익숙해지려 노력하려한다.
2. 디자인 원칙 기반 분석
좋은 사례
① 상품 소개 섹션의 가독성이 높은 것 [시각적 위계 충족]
: UX 비주얼 디자인 원칙에서 말하는 시각적 위계를 충족하는 모습을 보여준다. 컨텐츠의 중요도에 따라 텍스트의 크기가 달라지고, 이로 인해 사용자는 해당 컨텐츠가 무얼 담고 있는지 쉽게 파악이 가능하다. 아래의 왼쪽이미지는 '요즘대세! 라이브 인기상품'이라는 타이틀 텍스트를 통해 해당 섹션의 내용물들이 유추 가능하고, 그것에 기반해 상품이름과 가격을 인식하는데에 어려움이 없다. 텍스트의 위계를 보통 3개로 나눈다는데, 굳이 나누자면, 타이틀, 가격 (굵은글씨), 상품명 순으로 적절히 시각적 위계가 설정된 것 같다.
② 섹션 간 구분이 가능한 것 [게슈탈트 심리학 근접성의 원리]
: 아래의 오른쪽 이미지는 두 섹션간 분리감을 잘 보여준다. 상단의 신상 톡딜과 하단의 자주찾는 쇼핑키워드 사이엔 페이지 버튼이 있고 해당 버튼 위아래로도 충분한 여백이 존재한다. 게슈탈트 심리학에서 말하는 근접성의 원리에 의하면, 사용자는 가까이있는 개체끼리 같은 그룹으로 더 쉽게 이해한다고 한다. 아래와 같이 섹션간 구분이 쉬워지면, 사용자는 자신이 원하는 정보를 탐색함에 있어 시간을 더 줄일 수 있고, 컨텐츠의 내용을 이해하는데에도 더 용이할 것이다.
나쁜 사례
두개를 찾아야한다고 안내되었는데 솔직히 못찾겠다. 워낙 카카오톡을 오래사용하고 익숙해져서인지, 실제 사용자로서도 무엇이 불편한지 특별히 체감하지 못하겠다. 그나마 굳이 지적하자면 할 수 있겠다고 생각된 부분 한가지를 적어보자.
① 텍스트버튼의 가독성이 배경색깔에 따라 달라지는 것 [대비]
: UX비주얼 디자인 원칙에서 말하는 대비가 잘 지켜지지 않았다고 생각된다. 해당 섹션은 오픈채팅 섹션이고, 결국 해당 섹션에서의 가장 중요한 기능은 채팅에 참여하는 것이다. 그렇다면 해당 기능을 가진 '채팅하기' 버튼은 배경이 어떠하든 상관없이 사용자가 쉽게 찾을 수 있어야 할 것이다. 그런데 버튼내 모든 stroke의 굵기가 얇아 배경에 따라 인식이 어려운 경우가 있는 듯 하다. 중요한 기능인 만큼 버튼의 색을 달리하거나 버튼 테두리의 굵기 혹은 텍스트의 굵기를 키워 배경과 확실한 대비가 가능하도록 해줘야 할 것 같다.
