프론트엔드 개발자가 시니어 사용자를 위한 웹 관제 대시보드를 개발하면서 느낀 경험을 공유하고자 합니다.
디자이너 분들이 물론 고려해서 디자인을 해 주시겠지만 추가로 고려해 보면 좋은 것들을 가져와 봤어요
제가 항상 정답은 아니니 참고만 해주시면 좋을 것 같습니다.
키보드 입력이 항상 정답은 아니다
검색을 하기 위한 값을 받으려면 <input/>과 같은 입력 태그가 필수가 아닌가? 라는 생각과 숫자를 입력하는 경우 시니어 사용자분들은 어차피 텐키리스를 사용하지 않으니까 <input type="number"/> 로 받고 입력창의 디자인을 보기 편하게 하면 되지 않을까? 라고 생각했었는데요.
검색과 같은 경우엔 검색어를 입력하고 엔터를 치면 되지만 처리를 위한 입력(신규 데이터 등록)과 같은 경우엔 얘기가 달랐습니다.
처리를 위한 입력은 값들을 키보드로 입력한 뒤에 확인 버튼을 누르기 위해 마우스로 다시 손을 옮겨야 하는 경우가 많았습니다.
특히 여러 입력을 받는 경우 Tab으로 다음 입력창을 선택할 수 있었지만, 대부분 마우스로 다른 입력창을 클릭하고, 키보드로 입력하고, 다시 클릭하고 입력하는 게 반복이었어요.
(당연히 여러 입력을 받는 경우가 많으니 엔터로는 처리가 불가능했습니다)
위와 같은 생각을 함과 동시에 또 시니어 사용자들의 요청을 받아들여서 해결한 방법은 당연하겠지만 숫자 입력의 경우 키패드 UI를 화면에 띄워 클릭만으로 처리를 할 수 있도록 하는 것이었습니다.
개선 전
위와 같은 입력만으로 처리를 하는 것보다는
개선 후
와 같이 키패드를 보여주고,
숫자가 아닌 한글 입력 또한 입력이 아닌 select box로 처리를 해 주어 시니어 사용자들이 좀 더 편리하게 사용할 수 있도록 하였습니다.
추가로 키패드를 적용하면서 위에 방문 동호수를 하이픈으로 입력받는 게 아닌 동, 호수를 따로 키패드로 받고 하이픈 처리를 해주는 자잘한 UX 개선도 해 두었습니다.
추가로 위의 방문 목적과 같은 맥락이지만, 키워드를 나열해 놓아 사용자의 입력 단계를 줄이는 것도 중요했습니다.
민원 접수 옆의 키워드들을 선택하면 자동으로 민원 내용이 채워지도록 사용자의 경험을 개선하기도 했습니다.
Depth 줄이기(한번 더 확인하지 않기)
당연한 거 아닌가?라고 생각하실 수 있는데요. 그 당연한 depth에서도 더 줄여야 했습니다. 특히 관제 대시보드를 개발해서 그런지 모르겠지만 이용에 크게 중요하지 않은 모달은 굳이 보여주지 않는 것이 좋았습니다.
모달을 아예 띄우지 말라는 얘기가 아니라, 사용자에게 한번 더 확인을 받는 모달은 굳이 필요하지 않다는 얘기입니다. 한번 더 사용자로부터 확인을 받는 건 중요하지만, 빠르게 처리를 해야 하는 웹 관제에서는 오히려 더 불편한 기능이었습니다. 물론 처리가 되지 않았을 때에 대한 에러는 보여줘야 합니다.
개선 전
그 예로 번호 수정 버튼을 눌렀을 때 번호를 수정하시겠습니까? 와 할인 적용 버튼을 눌렀을 때 할인을 적용하시겠습니까? 같은 한번 더 확인을 묻는 모달창은 굳이 필요하지 않았습니다. 한번 더 클릭을 해야 하는 것에 부담을 느끼시는 분들이 많았습니다.
개선 후
개선 후는 사실 저런 확인창을 없애는 것이 개선 사항이었습니다. 물론 아래와 같은 특정 처리에 대한 오류가 발생한 경우 보여줘야 하겠지만요.
에러 처리가 무조건적이지 않아도 된다
방금 위에서 오류를 보여줘야 한다고 했는데 이게 무슨 말이냐 싶을 수 있습니다. 위에서 말한 오류는 사용자가 특정 처리를 하려고 했을 때에 대한 오류이고, 무조건적이지 않는 오류는 사용자의 의도로 인하지 않은 오류입니다.
예를 들어 새로운 데이터가 인식이 되고, 해당 데이터로 db를 조회하려고 했을 때 db에 업데이트가 되기 전 조회를 하는 경우가 발생했습니다.
간단한 흐름을 보면
1 : 인식 장치에서 프론트엔드로 새로운 데이터 인식 알림
2: 프론트엔드에서 새로운 데이터로 조회하기 위해 백엔드 요청
3. 백엔드에서 DB 조회
4. 인식장치에서 새로운 데이터 DB 업데이트
와 같은 흐름에서
이상적인 흐름은 3이 이루어지기 전에 4가 실행돼서 정상적으로 조회가 되는 흐름이다.
하지만 간혹 4번 처리가 3번 처리 이후에 이루어질 경우 조회가 되지 않으므로 3번에서 에러가 발생하여 프론트엔드가 백엔드로 요청한 2번 처리에서 에러가 발생한다.
2번 처리에 대한 결과를 무조건 받아야 하는 상황이라면 에러를 발생해야 하지만, 해당 요청의 응답이 필수적이지 않다면 에러가 발생하더라도 사용자에게 굳이 에러 화면을 보여줄 필요는 없다. 오히려 에러 모달을 닫는 데에 대한 수고만 있을 뿐이다. 당연하게 n초뒤에 에러 모달이 자동으로 닫히도록 구현해야 한다
Input 자동화
위에서 말한 케이스와 달리 input으로 꼭 받아야 하는 경우 아예 빈 값에서 값을 채우는 것이 아닌, 미리 채워져 있는 상태에서 사용자에게 제공되어야 한다. 대게 기능명세서에 작성이 되어 있겠지만 한번 더 사용자의 입장에서 고려를 했으면 하는 사항이다.
시간 값을 받아야 하는 상태에서 default 시간을 세팅하거나 default 입력값을 세팅하는 건 중요하다고 생각한다. 추가로 아래의 예시에서는 시간/분을 입력받을 때 input 태그와 키패드 대신 select box로 구현한 모습이다.
개선 전
와 같이 입력을 받는 것보다는
개선 후
와 같이 select box로 선택하게 할 수 있음과 동시에 default 시간을 정해두어, 사용자에게 불필요한 수고를 덜어줄 수 있도록 하였다.
이 외에도
위에 말한 내용은 디자인으로 받은 요청사항 외에 따로 고려를 하면 좋을 것을 작성해 놨다. 시니어 사용자들을 위해 직관적이고 투박한(?) UI, 버튼의 배치 등으로 UX를 개선한 사항은 따로 작성하지 않았다.
마무리
직접 발로 뛴 UX 개선 사항들을 적어보았다. 무조건적인 정답은 아니고 시니어 사용자를 위한 서비스를 만들고 있다면 고려해 보면 좋을 것 같다.
이 외에도 시니어 개발자를 위해 신경 쓴 부분이 있다면 댓글로 남겨주세요.
