11번가 왜 이렇게 복잡해? UI/UX를 뜯어보며 이유를 살펴보자

https://www.figma.com/file/SwrqpuwZgKHNlfON1z1Q4X/%5BA1%EC%A1%B0%5D-%EC%B1%84%ED%95%9C%EC%83%98-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9E%85%EB%AC%B8-%EA%B0%9C%EC%9D%B8_%EC%B1%84%ED%95%9C%EC%83%98?type=design&node-id=0%3A1&mode=design&t=yXSYtTx0YCpw9RaJ-1

🔼나의 결과물 링크 (부끄러우니 웬만해서는 보지말도록)

스파르타 코딩 클럽 본캠프 1주차 개인숙제를 드디어 마치게 되었다. 많은 UX/UI 심리학을 배우고 사용자를 공감하는 방법, 문제 정의하는 법 등을 배웠다. 이런 이론들을 6개의 강의와 숙제로 체득하고 마지막으로 개인 숙제를 통해 모든 방법을 동원해 실습하게 되었다. 

그리고 여태 어떤 생각을 하고 어떤 자료를 찾아보았는지 설명해보겠다.

11번가 플레이스토 리뷰

처음에는 내가 멋대로 불편해보이는 디자인과 시인성이 안 좋은 것들을 찾아서 개선하려고 하였다. 그런데 한비님의 조언에 따라 데스크리서치를 진행하여 자료를 근거로 논리적인 접근을 할 필요가 있다는 피드백을 받았고 다음날 바로 플레이스토어에 11번가 리뷰를 뒤져보았다. 많은 리뷰가 있었고 그 중에서 별점이 낮은 리뷰를 중점으로 살펴보았다. 그 중에서 로그아웃 버튼의 위치를 못찼겠다는 리뷰를 개선해보기로 하였다.

처음에는 "왜 로그아웃 버튼을 찾기 힘들까?" 질문으로 접근했다. 쓰레기를 심고 콩나물이 자라길 기다리고 있었던 것이다. 5WHYS 끝에 도달한 결론은 항상 시스템의 문제로 도달했다. 사용자 관점에서 이유를 찾아내고 싶었던 나는 어떻게 접근하는 지에 대해서 튜터님에게 질문하기로 하였다. 오늘도 등장하신 강진우 튜터님... 감사합니다. 😊 
튜터님은 5WHYS에 질문 키워드 자체가 문제가 되는지부터 알 필요가 있다고 하셨다. 그래서 "왜 로그아웃 버튼을 찾기 힘들까?" 에서 "로그아웃을 왜 해야할까?" 부터 접긴해보기로 하였다.

그렇게 나온 두 가지 WHY와 결과이다. 이 WHY들의 결과를 도출하기 위해 많은 데스크리서치를 진행하였다. 네이버 지식인과 리뷰를 적극 활용하였다. 로그아웃을 하는 이유는 앱의 오류가 발생했을 때와 티켓팅을 할 때 동시접속을 해야하기 때문이라는 자료들을 접수했다. 추가적으로 다른 사람의 계정으로 쇼핑을 할 수 있다. 이와 같이 로그아웃이 왜 필요한 지에 대해서 생각했고 

위에 두 사진처럼 두 세트의 질문으로 갈래가 나뉘었다. 오류가 뜨는 이유와 로그아웃이 어려운 본질적인 이유에 대해서 생각해보았다. 

그렇게 나온 솔루션이다. 사용자 공감 지도를 그리진 않았지만 최대한 사용자 입장에서 계속 앱을 사용해보면서 공감하려고 노력했고 로그아웃이 필요한 상황(오류나 동시접속이 안 되서 스트레스를 받는 상황)에서 로그아웃이 안 되면 스트레스가 배가 될 것이라고 생각하였고 잘 보이진 않지만 잘 찾을 수 있는 위치에 로그아웃 배치가 이루어져야 한다고 생각했다.
이런 과정을 거치면서 한 번 더 제대로 5WHYS를 진행해보고 싶어 네비게이션 바의 문제를 5WHYS를 통해서 정의해보고자 했다.

네비게이션이 불편한 이유에 대해서 세 갈래로 나뉘었고

각 질문의 답이 이렇게 나왔다. 그리고 꼬리에 꼬리를 무는 질문들은 결국

하나의 솔루션으로 도달할 수 있었고 그 내용은 이러하다.

이 솔루션을 내 눈으로 직접보지 않으면 구체적으로 생각할 수 없을 것 같아서 개선안을 바탕으로 와이어프레임처럼 간단하게만 디자인을 해보려 했다.

솔루션을 바탕으로 구체적인 사항들을 디자인 원칙에 근거하여 작성하였고 그 근거는 이러하다.

자세한 건 화면을 보면서 설명하겠다.

원본/개선화면

네비게이션의 용도가 메뉴처럼 쓰인 이유가 11번가 앱 내의 컨텐츠 우선순위가 명확하지 않아서였다.
그 우선순위를 결정하기 위해서 여러 아티클을 찾아보았고 

https://brunch.co.kr/@trendlite/309

https://www.wiseapp.co.kr/insight/detail/437?

이  두 아티클을 통해 11번가의 컨텐츠가 왜 이렇게 형성되었는지에 대한 배경을 알 수 있었다. 간략하게만 설명하자면

11번가가 쿠팡과 네이버에게 시장 점유율을 빼앗긴 뒤로 1.0패치에서 아마존 글로벌 스토어에 힘을 쏟았고 라이브 커머스 고도화와 우주패스 멤버십 론칭도 진행하였다. 2.0패치에서 방향 자체는 같았지만 기존 차별화 요소인 아마존과의 협업을 강화하고 슈팅배송이라 부르는 직매입 서비스를 확대하여 멤버십 중심으로 펀더멘탈을 강화하고(안정성 있는 성장을 추구) 슈팅배송이라 부르는 직매입 서비스를 확대하며 멤버십 중심으로 펀더멘탈을 강화하는 동시에 데이터 기반의 신사업 로드맵을 제시했다고 한다.

또한 패치 이후에 신규 설치자가 늘어났다. 패치가 유의미한 영향력을 끼친 것이라 판단했다. 기존 11번가 유저가 아니었다면 수 많은 기능을 한 번에 알기 어려울 것이기에 더욱더 UI를 간편화 시킬 필요가 있다.

어쨌든 이러한아티클을 통해 아마존과 11번가는 서로 긴밀한 협약관계임을 알았고 두 가지 카테고리로 먼저 크게 나누면 사용자의 인지부하를 낮추면서 아마존의 존재감을 더 잘 느낄 수 있을 것이라 생각하였다.

그렇게 마켓컬리 UI를 벤치마킹하여 아마존과 11번가로 나누는 솔루션을 제시해봤다.

기존 네비게이션 바

11번가 개선된 네비게이션바/ 쿠팡네비게이션바

위의 지저분했던 11번가의 기본 바에서 뒤로가기와 슈팅배송, 최근본상품 아이콘을 빼고 검색을 추가하여 접근성과 시인성을 동시에 높였다. 위 디자인 근거에 대한 이미지에는 없는데 검색 아이콘을 네비게이션 바로 옮긴 근거는 엄지와 가까운 거리에 있어 많이 사용하는 검색 기능을 더 효율적으로 활용할 수 있게 함에 있다. 디자인 원칙이라고 하면 아이콘끼리의 디자인 유사성을 맞출 때 유사성의 원칙을 따랐고 대비원칙을 사용하여 사용자가 어디에 위치한 지 알 수 있게 하였다. 

또한 메뉴 탭과 나의11번가 탭을 클릭하면 네비게이션이 사라져 불편했었는데 메뉴와 나의 11번가 탭에서도 사라지지 않게 개선하였다. 적어도 네비게이션에 존재하는 탭 안에서는 자유롭게 이동이 가능해야 한다. 

기존 탭메뉴/개선된 탭메뉴

아마존 관련 탭이 3개가 빠지고 가장 중요한 5개의 탭을 제외한 나머지 탭도 과감하게 빼어 중요기능이 퍼널로서 잘 사용되도록 개선하였다. 나머지 탭은 어디로 갔느냐고 궁금할 수 있다. 

장보기와 같은 탭은 아예 쇼핑 컨텐츠 영으로 집어 넣었다. 더보기를 클릭할 경우 넘어가는 것이다. 예를 들어서 신선택배 탭이 들어가면 신선택배의 인기상품들이 스크롤 되고 더보기를 클릭하면 신선택배의 모든 상품을 볼 수 있게 한 것이다. 그렇지만 이곳이 유일한 퍼널이 되면 안 되기 때문에 메뉴탭에 추가적으로 들어가야 할 것 같다. 이런 부분은 아직 수정중이기에 더 생각해 볼 필요가 있다.

이렇게 나의 1주차 개인숙제가 마무리 되었다. 나의 결과물을 깔끔하게 보여주는 것도 UI/UX인데 왜 이리 어려울까
개선 디자인을 조금 더 진행하면서 결과물도 다듬어 보도록 하겠다. 이상.

 

maby to be continue...?