사용자 경험 개선을 위한 리디자인 과정
사용자가 버튼을 찾지 못한다! 버튼을 찾을 수 있도록 디자인을 변경
한윤석 (두블링 DOBLING, UI/UX 디자이너)
2년차 주니어 디자이너에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 제가 경험한 디자인 인사이트를 업로드 합니다.
오늘은 제가 회사에서 일을 하며 경험한 리디자인 과정에 대해 공유하려고 합니다. 아직 정식 출신된 서비스가 아니다 보니 와이어프레임으로 대체하거나 블러 처리가 있을 예정이니 감안하여 봐주시면 감사하겠습니다!
HR 서비스 휴가사용 페이지 리디자인
문제점
사용자가 버튼을 못찾음
HR 서비스에서 근무관리는 필수적인 기능입니다. 그 중에서도 휴가를 맡아서 일을 하고 있는데요! 사용자들이 휴가 페이지에 들어와서 내가 가지고 있는 휴가를 신청할때 버튼을 찾기 어려워 해맨다는 것이 문제였고 이것을 해결하기 위해 리디자인을 진행했습니다.
기획자의 기획의도
이 기획의도는 휴가를 사용하는 사람들이 그저 휴가를 눌러서 사용하는것을 유도하는게 아니라 첫 페이지에서 부터 내가 가진 잔여 휴가의 내용(시간, 사용 기한, 휴가 이름)을 확인하고 사용하고자하는 해당 휴가를 눌러서 사용하는 플로우가 가장 중요하다는 기획목적이 있었습니다.
그래서 '휴가 사용'이라는 버튼을 누르는 대신 각 잔여 휴가 리스트(버튼)를 누르는 것을 디자인하였었습니다.
그러나 이것은 사용자들이 휴가를 사용하는 것이라는 걸 눈치채지 못했고 사용성 개선을 위해 리디자인 해야했습니다.
해결 과정
1. 버튼으로 인식할 수 있도록
먼저 내 잔여 휴가 리스트(버튼형 리스트)를 버튼으로 인식하고 누를 수 있게 하는게 먼저였습니다. 다양한 시안을 만들고 서비스 실제 사용자인 동료 직원들에게 테스트하고 피드백을 받았고 기획자와 의견을 주고받으며 사용자가 어떻게 더 버튼으로 인식할지에 대하여 더 나은 시안을 찾아갔습니다.
그래서 아래 이미지와 같이 디자인을 완료하였지만 여전히 부족했습니다.
2. 진짜 메인플로우를 찾아라
사용자는 페이지에 들어와서 시선이 F형태로 움직입니다. 가장 왼쪽에 메인 플로우를 넣어야 먼저 확인할 수 있는데요. 기존에는 내가 사용한 휴가와 요청한 예정휴가를 메인 컴포넌트에서 확인할 수 있었습니다. 그러나 이것은 사용자가 실제로 많이 확인하고 사용하는 기능이 아니였습니다!
내 휴가 페이지에 들어와서 실제로 많이 사용하는 플로우는 내 휴가를 신청하는 것이고 기존에 오른쪽에 작게 들어갔던 잔여휴가를 확인하고 휴가 신청을 하는 컴포넌트를 왼쪽에 메인 컴포넌트로 이동시켰습니다.
그리고 예정휴가, 사용휴가를 확인하는 컴포넌트는 그 밑에 배치하여 중요도와 사용자들이 실제로 많이 사용하는 기능에 따라 화면 레이아웃을 재설계하였습니다.
이렇게 했을때 여기서 가장 많이 사용자들이 휴가 사용을 할 수 있었습니다. 충분히 사용성이 올라가는 것을 확인했습니다.
3. 여러 통로를 제시하고 데이터를 확인해보자
사실 이렇게 까지 리디자인을 진행했지만 진짜 필요한 것은 오른쪽 상단 해더 부분에 '휴가 요청'버튼을 넣는것 이였습니다.
첫 페이지에서 부터 내가 가진 잔여 휴가의 내용(시간, 사용 기한, 휴가 이름)을 확인하고 사용하고자하는 해당 휴가를 눌러서 사용하는 플로우가 가장 중요하다는 기획목적과는 부합하지 않고 '휴가 요청'을 눌러서 해당 휴가 요청 드로워에 들어가는 플로우지만 '휴가 요청'버튼이 있는 것이 가장 좋은 설계였습니다.
왜냐하면 기존에 다른 페이지들도 오른쪽 상단에 핵심 기능을 포함한 메인컬러를 사용한 버튼이 존재하였기 때문입니다.
디자인 이유와 근거
디자인 이유 및 배경
사용자가 휴가 리스트를 눌러서 요청서에 들어가는게 해야했습니다. 현재는 휴가 요청을 찾지 못하고 어떻게 휴가를 써야할지 몰라하였습니다. 그래서 휴가 리스트가 가장 눈에 보이고 사용자들이 리스트에 남은 휴가를 확인하고 눌러서 들어가는 플로우가 메인이 되게 구성하였습니다. ‘휴가 요청’버튼은 다음 우선순위입니다.
디자인 근거
기획자와 함께 ‘휴가 요청'버튼과 휴가 리스트에 버튼 색상 동일하게 가는 것으로 결정하였습니다. 이유는 오히려 리스트 버튼이랑 휴가요청 버튼이 같은 플로우로 연결된다는 느낌이 필요하였기 때문입니다. 메인컬러는 둘다 넣는것으로 하였고 대신에 휴가 리스트에 화살표 크기는 줄였습니다.
위 내용에 기반하여 모바일에서는 화면이 작아 메인컬러 색상이 겹치는 이슈가 있지만 그대로 가는 것으로 결정하였고 모바일의 오른쪽 하단에 '휴가 신청' 플로팅 버튼의 그림자를 더 짙게 하여 해결하였습니다.
유저 테스트 결과
정성적 유저 테스트 결과
테스트 유저 : 서비스 사용 유저 2명, 비사용 유저 1명(총 3명)
사용하는 것을 확인하면서 반응과 휴가 신청까지 플로우를 관찰하였습니다.
확인할 내용
1. 기존 서비스 화면을 먼저 보여주고 리디자인 된 화면을 보여주어 A/B test로 휴가 사용 테스크를 제안합니다.
2. 리디자인된 화면에서 휴가 사용을 어떤 플로우로 진입하여 완료하는지 확인합니다.
3. 왜 그렇게 진입했는지 불편한 점은 없었는지 반응을 확인합니다.
확인한 내용
1. 기존 서비스 화면에서는 휴가 신청을 어떻게 하는지 찾지 못하였고 찾았다고 하더라도 시간과 노력이 들었습니다. 기존 서비스 화면에서 서비스를 사용해본적 없는 비유저는 휴가신청 버튼을 아예찾지 못하였고 휴가 신청을 할 수 없었습니다. 서비스를 사용해 본적 있는 유저도 학습되어 찾을 수 있었지만 처음에는 신청 할 수 있는 버튼을 찾기 어려웠다고 말하였습니다.
2. 테스트 유저 3명 모두 리다자인된 화면에서 오른쪽 상단 '휴가 신청'버튼이 아니라 메인 컴포넌트의 잔여 휴가 리스트에서 해당 휴가이름을 확인하고 리스트 버튼을 눌러 신청하였습니다.
3. 잔여 휴가 리스트가 가장 먼저 눈에 들어왔고 오른쪽 상단 '휴가 신청'버튼은 존재하는지도 몰랐습니다. 리스트에 휴가 이름을 확인하고 남은 시간을 확인 후 신청하였습니다. 크게 불편함을 느끼진 못했고 현재 화면에서 편하게 휴가신청을 할 수 있었습니다.
결론
결국 두가지 플로우를 모두 가져가고 사용자가 잔여 휴가 리스트의 휴가 내용을 먼저 확인하고 해당 휴가를 타고 들어가서 신청하는 플로우로 유도하는 것으로 디자인하였고 테스트 결과 불편함 없이 휴가 신청을 더 쉽게 하는 것을 확인하였습니다.
오른쪽 상단 해더에 '휴가 요청'버튼을 눌러 사용한다고 하더라도 메인 컴포넌트에 잔여 휴가를 확인할 수 있으니 기획의도를 반영한 디자인이라고 생각합니다!
