사용자 경험은 개발자가 1순위로 고려해야하는 사항이지만 그만큼 가장 어려워하는 것 중 하나이다.
보통의 개발자는 개발자의 관점에서 생각하고 본인의 방식대로 표현한다.
개발자의 관점에서 개발된 프로그램이라…
우리는 누구를 위한 프로그램을 만들고 있는걸까?
우리는 사용자를 최우선으로 생각해야한다.
물론 보안, 깔끔한 코드, 최적의 쿼리 등등 고려해야할 것은 많지만 사용자가 사용하기 어렵게 만들면 결코 그 프로그램은 성공할 수 없다.
목으로도 날 수 없는 프로그램이라는 것이다!!
오늘은 어떤 화면을 개발하면서 직관적인 플로우에 대해 많은 고민을 해보게 되었다.
예를 들어 어떤 상품에 가입하기 위해서는 설문을 반드시 진행해야한다고 하자.
이전 설문 결과가 있으면 그 결과를 그대로 가져다 쓸 수도 있고, 없으면 새로 설문을 진행할 수도 있다.
사용자 A는 오늘 어떤 상품에 가입하기 위해 설문을 진행하려고 하는데 이때 기존 설문 결과를 활용하려고 한다.
화면 좌측 상단에는 활용하고자 하는 설문의 직전 설문 결과가 출력되고, 화면 우측 상단에는 활용하고자 하는 설문의 결과를 출력하고 있다.
그 화면은 아래와 같다.
이 화면에서는 이해할 수 없는 부분이 몇 가지 있었다.
1. 좌측 상단은 ‘직전 설문결과’ 인 것 알겠어. 근데 우측 상단에 저건 그럼 뭐야? 현재 설문결과라는 건가?
위와 같은 의문이 들었는데 코드를 뜯어보고나서야 아~ 현재 설문결과구나. 라는 걸 알았다.
사용자는 나처럼 코드를 뜯어볼 수도 없다.
개발자인 나조차도 한번에 납득가지 않는 화면이라면 사용자에게는 굉장히 모호한 정보인 셈이다.
2. 기존 설문 결과를 활용하지 않고, 새로운 설문을 진행하는 경우에도 기존 설문 결과와 동일하게 문구가 출력된다.
새로운 설문 화면에서의 ‘직전 설문결과’에는 ‘기존 설문의 직전 설문결과’가 아니라 ‘기존 설문결과’가 출력되어야하는 것이 마땅하다.
이해하기 쉽도록 설문의 시간 순서를 아래와 같이 설정하겠다.
(과거) past 1 ————> past 2 ————> new (현재)
past 1은 past 2보다 이전에 진행한 설문이다. past 2는 가장 최근에 진행한 설문이다. new는 새로 진행하고자 하는 설문이다.
즉, past 2의 결과를 활용하고자 할 때는 ‘직전 설문결과’에 past 2의 직전 설문인 past 1의 결과를 가져다 쓰는 게 맞지만, new를 진행하려고 할 때는 ‘직전 설문결과’에 past 1이 아니라 가장 최근에 진행한 설문인 past 2의 결과를 쓰는 게 맞다는 것이다.
위 2가지 문제점을 어떻게 해결하면 좋을까?
우선 첫 번째 의문점부터 해결해보려고 한다.
UI의 통일성과 직관성을 위해 우측 상단에도 "현재 설문결과 : " 라는 문구를 추가하자.
위처럼 문구를 추가하면 보다 직관적으로 정보를 이해할 수 있을 것이다.
(제미나이가 이미지를 완벽하게 만들어주지 못해서 3/5를 3/ 라고 표기했다... 이정도 오류는 이해해주길...)
다음은 두 번째 의문점을 해결해보자.
기존 설문 정보를 활용하는 경우에는 현행대로 직전 설문결과와 현재 설문결과를 모두 보여준다.
그런데 새로운 설문을 진행하는 경우에는 아직 현재 설문결과를 알 수 없으므로 현재 설문결과는 출력되지 않고, 직전 설문결과만 출력된다.
또한, 이때 직전 설문결과는 가장 최근에 진행한 설문 결과를 출력하는 것으로 한다.
여기서 더 나아가면 새로운 설문을 모두 진행하고 Submit(제출) 버튼을 눌렀을 때 '현재 진단결과'에 방금 제출한 결과를 보여주고 화면을 종료할지 여부를 물어보는 것도 괜찮을 듯 하다.
나는 UI/UX 디자이너가 아니다.
그래서 화면 디자인에 대해 잘 알지는 못하지만 사용자의 입장에서 매끄럽지 않은 화면 구성이라면 좋은 프로그램이 아니라는 것만은 확실하다.
우리 팀에는 UI/UX를 담당하는 직원이 따로 없고 개발자들이 디자인, 백엔드 개발, 프론트엔드 개발을 모두 해야하기 때문에 더 많은 고민이 필요한 것 같다. 하나를 개발하는 데에 시간이 좀 걸리지만 다음 수정 때는 5분안에 끝낼 수 있을 정도로 깔끔하고 완벽한 프로그램을 만들기 위해 노력하고 있다!
혹시 UI/UX 디자이너들이 이 글을 본다면 어떤 식으로 화면을 구성하면 좋을지 같이 이야기해봐도 좋을 것 같다!