[UXUI입문과정 챕터 1] 내가 선정한 앱 화면 분석
UXUI입문 1주차를 듣게 되었다. 1주차의 과제인 앱 화면 분석을 해보기로 한다.
어떤 앱을 분석해 볼까 하다 우연찮게 신발이 필요한 나는 ABC-ㅡMART 앱을 선정하게 되었다.
화면을 봤을때 큰 베너 아래로 10개 카테고리 아이콘 버튼으로 구성 되었다. 전반적으로 각진 디자인의 화면에 카테고리 버튼을 원으로 설정하여 다체로운 느낌을 받았다.
하단에 있는 앱바는 5개로 구성되어 있으며 왼쪽으로 부터 홈, 최근 본 상품, 마이페이지, 검색, 메뉴 로 구성되어 있다.
앱을 스크롤도 해봤는데 이런 변화를 발견했다.
가만히 있을 때는 위에 사진처럼 보이지만 화면을 스크롤 하게 되면 아래 사진 처럼 하단 앱바가 사라지고 3개의 컨테이너 아이콘 버튼이 Fade in 애니메이션으로 나타난다. 각 아이콘 버튼은 위에서 부터 카카오톡으로 문의하기, 장바구니, 마지막은 맨 위로 돌아가기 이다.
이렇게 앱 화면을 관찰하면서 느낀 장점과 아쉬운 점을 서술 하겠다.
장점
- 디자인 간소화
세개의 아이콘 버튼을 고정된 형식으로 배치했다면 하단 앱바와 나란히 존재하여 시각적으로 불편함을 주었을 텐데
스크롤을 할때 만 나타나게 설정하며 화면이 복잡해지지 않게 만든점이 이 디자인의 장점인 것 같다.
- 직관적인 버튼 디자인
아이콘 버튼의 디자인을 통해 각각 어떤 역할을 가진 버튼인지 알기 쉬웠다. 카카오톡 버튼 같은 경우 카카오톡 아이콘을 사용하여 사용자가 카카오톡으로 넘어갈 수 있다는 것을 유추 할 수 있고 장바구니 버튼 같은 경우 흔히 장바구니로 알고 있는 아이콘을 사용하여 장바구니인것을 알 수 있었으며 마지막으로 위로 올라가기 버튼은 윗방향을 제시하는 화살표를 사용하여 버튼을 누르면 위로 올라간다는 것을 유추할 수 있도록 디자인 되었다.
아쉬운 점
- 하단앱바의 항목배치
위에서 서술 했듯이 하단앱바는 홈, 최근 본 상품, 마이페이지, 검색, 메뉴로 총 5가지가 배치되어 있다. 하지만 항목들이 개별화가 필요한지 의구심이 드는 조합이었다. 특히 최근본 상품 같은 경우 하단앱바가 아닌 다른 화면에 배치해도 괜찮지 않을까 한 생각이 들었다.
- 투명한 위로가기 버튼
위로 올리가기 아이콘 버튼은 지침사항인 명압비가 3:1로 설정되지 않은것 같다 버튼이 투명하게 설정되어 있어 사용자가 인식하지 못하고 사용하는 경우가 있을 것 같다. 사진상으로 보았을 때도 투명하게 되어 있는데 실제로 보게 되면 버튼의 존재를 인지하기 어려울정도로 투명했다. 조금더 명암비를 재설정하면 사용자에게 좀 더 유용할 버튼이 될 수 있을 것 같은 생각을 가지게 되었다.