물리적 거리를 줄여 UX 사용성 높이기

 

 

문제 원인 파악하기

버튼 간의 물리적 거리가 매우 길다.

어느날 내부 백오피스 제품의 사용자 한분께서 변이 상세페이지의 뒤로가기 버튼을 클릭하는데 피로함을 느낀다고 말씀주셨다.

"하루에도 수십번 챗을 쓰고 뒤로가야 하는데 거리가 멀어서 너무 귀찮아요." 

문제를 전달받았으니 hotjar 히트맵/녹화본으로 발생 빈도부터 체크해 보았다. 해당 구간에 특히 히트맵이 집중된 것을 아래와 같이 확인할 수 있었으며, 대부분의 녹화본에서도 필수적으로 등장하는 동작이었다.

문제가 발생하는 행동 경로, 매우 길다.

 

챗은 사이드바에 위치하여 우측 하단에 입력 창이 있고, 뒤로가기 버튼은 좌측 상단에 있다. 

상세페이지는 추가 정보를 확인하는 용도라 다음 업무를 하기 위해서는 반드시 뒤로 가야 하는데, 일반적으로 뒤로가기가 좌측 상단에 위치한다는 점만 고려하고, 물리적 거리에 따른 사용자의 피로함을 고려하지 못한 UX 설계인 것이다.

(사실 나는 매직마우스를 써서 좌로 쓸어내리면 바로 뒤로가기 액션이 가능한데, 사용자들은 해당 기능이 없는 마우스를 써서 불편함을 호소하는 경우가 많았다. 이후에는 내 작업 환경이 아니라 사용자의 환경을 고려하면서 설계하려 노력하고 있다.)

 

이렇게 대부분의 사용자가 겪는 문제임을 알았으니, 해결 방법을 찾아보기로 했다.

 

 

 

가설 수립 

연속적인 행동을 하는 UI간의 물리적 거리를 줄이면 사용성이 향상된다.

 

물리적 거리가 긴게 문제라면? 줄여주면 되는 간단한 해결 아닌가?

그런데 일반적으로 뒤로가기는 너무나도 당연하게 좌측 상단에 있다... 고민을 해보다가, UI를 어떻게 개선해야할지에 앞서 내가 자주 쓰는 제품들이 이 문제를 어떻게 다루는지 찾아보았다.

 

99%의 뒤로가기 UI는 좌측 상단에 있다. (브라우저부터 넷플릭스까지 모두...)

레퍼런스를 찾아보았지만 사이드바와 뒤로가기간의 거리를 줄일 수 있는 방법이 뾰족하게 떠오르진 않았다...

그나마 구글 드라이브의 모달 방식이 마우스와 가까운 여백을 클릭할 수 있어 물리적 거리가 가장 짧았다.

 

 

UI 그릴 때 나만의 버릇이 하나 있는데, 일단 시안들을 쭉 그려본 후 각 시안별로 장점/단점을 글로 써본다. 이때 장단점은 문제가 해결되는지, 사용하기 쉬운지, 기존 UI와 일관성이 고려되어 있는지를 바탕으로 적는다.

그렇게 시안과 시안에 대한 의견을 나열하면, 그 중 가장 효과적인 시안을 고르기가 쉽다. (또한 다양한 경우의 수를 고려하고 최종 시안을 보여주는 것이 팀원들을 납득시키기도 쉽다)

 

이번에도 여러개의 시안을 그리고 장단점을 적어보았다.

 

이렇게 시안과 장단점을 나열한 후, 주간 미팅에서 전 팀원에게 공유하는 자리를 가진다. 모두가 비슷한 마음으로 3번 시안을 골랐는데, 3번시안을 어떻게 작업했는지에 대해서는 아래에서 좀 더 이야기해보고자 한다.

 

 

 

사용자 인터뷰를 통한 해결 도출

사용자와 이 문제 해결을 주제로 대화하다가 공통적으로 나온 항목이 '키보드'를 더 많이 쓴다 였다.

변이 정보를 입력하고, '키보드 단축키'를 활용하여 업무를 진행하는 비율이 매우 높다는 의견을 들으며 아이디어가 하나 떠올랐다.

 

바로 esc 버튼이다.

 

분석 페이지에서 상세 페이지로 이동하는 인터렉션을 '들어가기 - 뒤로가기'로 설계하여, 일반적으로 뒤로가기 기능이 위치하는 좌측 상단에 해당 버튼을 두었다. 만약 이 이동 방식이 '들어가기 - 뒤로가기' 가 아니라, '레이어 켜기 - 레이어 끄기' 라면? See details이라는 버튼으로 레이어를 '켜고' ESC(또는 Close 버튼)으로 마우스 위치에 관계 없이 레이어를 '끄는' 동작에 개연성이 생기는 것이다.

또한 이 방법으로는 마우스 이동 경로가 100% 단축되는 효과를 만들 수 있었다.

 

 

 

결론

UI 수정 배포 후 아래와 같이 즉각적인 지표 개선을 확인할 수 있었다. 

 

Hotjar에 해당 행동에 대한 트래킹을 심어놨는데, 업데이트 이후 해당 행동이 전혀 발견되지 않은 것을 볼 수 있었다. (사실 내부 서비스라 개선 업데이트에 대한 안내 공지가 모든 사용자에게 잘 전달된 덕택도 크다)

 

모바일은 한 손 조작으로 인터렉션이 가능한지 파악하는 경우가 많은데, 큰 화면을 쓰는 웹앱도 물리적 거리를 고려하여 디자인해야 한다는 것을 배울 수 있었다. 연관 행동에서 물리적 거리가 짧을수록 사용자는 더 편안함을 느낀다. 손목 이동뿐만 아니라 시선의 이동에도 부하가 덜하기 때문에 피로함이 감소할 수 있다. 

 

 

회고

UI를 그리면서 아래 두가지를 체크해보자. 불편한 사용 경로를 미리 방지할 수 있다.

• 시안 작업 후에는 사용자의 행동 경로대로 시선과 마우스를 옮겨 거리 측정해보기
• 자주 나타나는 행동 경로의 측정 거리가 길다면? 줄일 수 있는 방법이 없는지 검토해보기