길 잃은 유저를 위한 내비게이션 UX
로지스팟 화주웹 GNB 개선
어느 정도 감각에 의존해 길을 찾을 수 있는 물리적 공간과는 달리, 처음 방문한 유저에게 웹사이트라는 디지털 공간은 길 잃은 아이 같은 기분을 느끼게 할 수 있습니다. 이 가상의 공간에 어떤 콘텐츠가, 얼마나 많이, 어디에 있는지 감을 잡을 수 없기 때문이죠. 그래서 웹사이트에는 표지판, 지도와 비슷한 역할을 하는 '내비게이션'이라는 요소가 있습니다.
업무용 플랫폼인 로지스팟의 화주*웹에도 몇 가지 유형의 내비게이션이 있는데요, 최근 GNB(Global Navigation Bar)와 사이드바를 개선했습니다. 이번 글을 통해 어떤 부분들을, 어떻게, 왜 개선했는지 자세히 공유해보겠습니다.
*화주: 화물의 임자. 화물을 소유한 기업으로 사용
[OVERVIEW]
1. 현재 위치(상태)에 대한 안내
2. 정보 체계화
3. 중요도에 따른 레이아웃
4. 간편 기능 추가
[AS-IS]
먼저 GNB에서는 크게 3개의 메뉴(거래 내역서 알림, 알림, 계정)를 확인할 수 있습니다. 각 메뉴를 클릭하면 팝업이 열려 알림의 세부내용을 확인하거나 계정과 관련된 행동을 할 수 있습니다.
그림 01. GNB1. 현재 위치와 상태에 대한 안내가 없거나 명확하지 않다
- 메뉴에 마우스를 대거나 클릭해도 아무 반응이 없습니다. 이는 유저에게 본인이 한 행동과 현재 상태에 대해서 확신 대신 혼란을 줄 수 있습니다. 가령 이 텍스트가 클릭 가능한 건지, 어떤 메뉴의 팝업창이 뜬 건지 등과 같은 혼란 말이죠. 팝업창에선 옅은 회색으로 마우스 오버를 표현했지만, 배경색과 잘 구분되지 않습니다.
그림 02. 거래 내역서 알림
그림 03. 알림2. 알림 확인 여부가 표시되지 않고 전체 읽기 기능을 제공하지 않는다
- 이미 확인한 알림과 새 알림에 대한 구분이 없어, 유저에게 혼란을 줍니다. 또한 전체 읽기 기능이 없어서 알림을 제거하려면 일일이 눌러야 하는데, 알림의 개수가 많아질수록 유저가 너무 불편하겠죠?
3. 충분한 정보를 제공하지 않는다
- 거래 내역서 외에도 정산과 관련된 중요 알림은 몇 가지 더 있습니다. 하지만 거래 내역서 알림이라는 너무 구체적이 워딩을 사용하는 바람에 다른 알림은 제공하지 못합니다. 마찬가지로 알림에서도 배차완료 외에도 유저에게 필요한 중요 알림이 더 있지만 이를 제공하지 않습니다.
그림 04. 계정 팝업창4. 레이아웃에 우선순위가 고려되지 않았다
- 계정 팝업창의 구성요소를 중요도에 따라 나열하면, 유저명과 회사명 > 선택할 수 있는 회사 목록(여러 회사 관리 권한을 가진 경우) > 계정설정 > 로그아웃 입니다. 유저명과 회사명은 현재 계정의 상태(특히 여러 회사 관리 유저의 경우)를 알려주기 때문에 제일 중요합니다. 그리고 여러 회사를 관리하는 유저일 경우, 빠르게 계정을 전환할 수 있는 회사 목록이 필요합니다. 그 다음 계정을 관리할 수 있는 계정설정 페이지로 이동하는 메뉴가 필요하겠죠. 마지막으로 로그아웃은 꼭 필요한 기능이지만, 보통 자동 로그인으로 설정해두는 업무용 플랫폼으로서 우선순위는 가장 낮습니다. 하지만 현재 팝업창은 이 우선순위와 오히려 반대로 정렬되어 있습니다.
[TO-BE]
1. 현재 상태 안내
- 먼저 각 메뉴 사이에 라인을 넣어 메뉴별 클릭 가능한 영역을 명확히 구분했습니다. 그리고 마우스 오버를 하거나 클릭했을 때, 밑줄을 추가하거나 배경색을 진하게 바꾸거나 툴팁이 뜨도록 수정했습니다. 또한 계정 팝업창에서 프로필 사진과 유저명, 회사명을 상단에 배치해 현재 접속한 회사를 바로 알 수 있도록 했습니다.
그림 05. 마우스 오버
그림 06. 툴팁2. 용어 수정 & 정보 체계화
: 거래 내역서 알림은 정산으로 이름을 바꿔 정산과 관련된 중요한 3가지 알림(세금계산서 발급, 입금지연, 기능제한)을, 알림에서는 배차 및 운행과 관련된 3가지 알림(배차완료, 수정완료, 운행완료)을 제공하도록 정리했습니다. 그리고 지난 알림과 새 알림의 영역을 구분했습니다.
그림 07. 알림 용어 수정 및 정보 체계화
그림 08. 알림 영역 구분 및 모두 읽음 표시3. 중요도에 따른 레이아웃
: 계정 팝업창에서 크게 4가지의 구성요소(프로필, 회사선택, 계정설정, 로그아웃)를 유저가 중요도에 따라 순서대로 인지할 수 있도록 레이아웃을 수정했습니다.
그림 09. 계정 팝업창4. 간편 기능 추가
: 새 알림이 무한정 누적되지 않도록 모두 읽음 표시 기능을 추가했습니다.
GNB는 웹사이트에서 작은 영역만을 차지하는 것처럼 보이지만 앞서 말했듯 유저에게 길잡이 역할을 하는 아주 중요한 요소입니다. 단 3개의 메뉴 밖에 없는 GNB여도 명확한 목적과 이유를 갖고 디자인 해야 하는 이유죠.
참고
제시 제임스 게러트, 성공하는 웹사이트를 위한 경험디자인의 요소, 한솜미디어(2003)
