[0. 도입 이유: 결정 장애를 유발하는 UI]
우테코에서 코딩해듀오 유저 테스트를 진행할 때 많은 사용자들이 페어룸 생성까지의 과정에서 예상보다 훨씬 많은 시간을 사용한다는 문제점을 발견했다.
대부분은 어떤 것을 누르고 입력해야 할 지 모르겠어서 헤메는 시간이었다.
이를 해결하기 위해 토스의 디자인 원칙에서 영감을 받아 UI를 다시 설계했다.
[1. 구현: 경험 설계를 위한 두 가지 원칙]
해결책의 핵심 아이디어는 사용자의 선택을 단순하게 만드는 것이었다. 이를 위해 두 가지 원칙을 세웠다.
- 간단한 결정은 즉시 내리게 한다.
- 복잡한 입력은 단계를 나눈다.
이 원칙들은 토스의 'Easy to answer', '1 thing for 1 page' 철학에서 영감을 얻었으며, 우리 서비스의 구체적인 문제 해결에 맞게 변형하여 적용했다.
[1-1. 간단한 결정은 즉시 내리게 한다.]
첫 번째 원칙은 사용자가 마주하는 선택지를 극단적으로 제한하는 것이다.
사용자는 한 화면에서 한 가지 선택만 가능하다면 그것에 온전히 집중할 수 있게 된다.
모든 선택지는 직관적인 어휘를 사용해 코딩해듀오를 처음 사용하는 사람들도 쉽게 이해할 수 있도록 설계했다.
또한 주 색과 보조 색을 통해 사용자가 고민 없이 자신의 의도에 맞는 버튼을 누르도록 유도했다.
이 방식은 사용자가 UI를 해석하는 시간을 없애고 즉시 반응하게 만들었다.
[1-2. 복잡한 입력은 단계를 나눈다.]
웹 서비스 특성상 방을 생성할 때 필요한 정보를 모두 별도의 페이지에서 입력받기는 힘들었다.
또한 사용자가 잘못 입력한 부분을 쉽게 수정할 수 있어야 하므로, 모든 Input을 한 페이지에 보여주되 사용자가 부담 없이 직관적으로 입력할 수 있어야 했다.
그래서 우리는 사용자가 이전 단계의 Input을 입력하면 자동으로 다음 Input이 등장하고 스크롤되게 구현했다.
이를 구현하기 위해 각 Input의 상태 값을 리스트로 관리해 각각 is~Valid로 값을 판단했고, 이를 하나의 훅으로 묶어 관리했다.
이러한 순차적 흐름은 사용자가 직관적으로 각 Input을 입력할 수 있도록 했다.
[2. 데모데이 피드백: 👍]
테스터들의 피드백을 개선해 최종 데모데이에서 '흐름이 직관적이고 디자인이 깔끔하다'라는 긍정적인 평가를 받을 수 있었다.
피드백을 반영해 값진 결과를 얻어낼 수 있었던 좋은 경험이었다.
