UX 원칙 - One thing per page
모바일 UI·UX 디자인 원칙
“One thing per page”는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이 높다는 디자인 패턴 또는 원칙이다.
개요
모바일은 작은 화면으로 인해 콘텐츠를 읽기가 어렵다. 키보드 같은 외부 입력도구가 없어 작은 화면 내의 가상의 키보드에 엄지손가락으로 입력하기 때문에 입력의 정확도가 떨어지고, 오류가 발생하기 쉽다.
모바일 앱에서 한 화면에 많은 입력과 선택을 요청하면 정보의 양이 많고 복잡해 보여 사용자는 입력을 포기하고 이탈해 버리거나 프로세스 진행을 망설일 수밖에 없다. 최악의 경우 입력을 진행하다가 실패할 수 도 있다.
왼쪽처럼 입력이 많아 보이는 화면을 보면 특별한 이유가 아니라면 시용자는 입력을 포기한다. 입력을 진행하더라도 스크롤하면서 입력해야 하고 입력완료도 어렵다.
One thing per page"페이지당 한 항목" 이란
기술의 발전으로 모바일에서 할 수 있는 일이 많아졌다. 쇼핑앱에서 상품을 구매할 수 있고, 토스나 카카오 뱅크 같은 인터넷은행의 모바일 앱을 통해 계좌를 계설 할 수 있고, 증권사 앱에서 주식 계좌를 개설을 할 수 있으며 보험 앱을 통해 보험을 가입할 수 있다. 금융앱으로 보험금을 청구할 수도 있다.
스마트폰을 통한 이러한 작업(task)은 사용자가 많은 정보를 입력하고 선택해야 하는 양식(Form)이 있다. 앱 입장에서는 사용자가 이러한 양식(Form)을 작성하는 프로세스를 실패 없이 완료해야 비즈니스가 성립된다.
인터넷 은행의 은행계좌개설울 위한 정보 입력과정이 어려워 중도에 포기하거나 시도 조차 하지 않고 이탈한다면 비즈니스 존재자체가 위태로울 수 있다.
“One thing per page 원칙은 복잡한 프로세스를 여러 개의 중요 단계로 세분화하고 최적화하여 각 단계의 주작업에 해당하는 인터페이스 요소를 디자인한다.
One thing per page는 사용자가 복잡한 프로세스를 한 페이지에 한 가지의 작업에 집중할 수 있고 사용자의 이탈률을 낮추거나 결제 완료율을 높이는 좋은 해결책이 될 수 있다. 핵심은 '프로세스의 단계를 세분화하여 단순화시키고 한 페이지에 사용자가 저항을 느끼는 않는 수준의 정보를 요청한다'이다.
인터넷 은행의 송금 서비스를 예를 들면 송금하기는 계좌번호 입력 -> 은행선택 -> 송금금액 입력 -> 받는 분에게 표시할 내용 -> 송금 메모 -> 송금 비밀번호 입력까지 총 6가지의 입력과 선택 과정을 거쳐야 한다. 위와 같이 한 페이지로 디자인할 수 있지만 아래 예시같이 각 단계를 세분화하여 한 가지 질문에 집중할 수 있도록 디자인한다.
위의 송금서비스는 송금과정의 사용편의성을 높이기 위해 수많은 테스트와 개선을 통해 디자인되었다고 예상된다.
One thing per page에서 “thing”의 의미
One thing per page에서 “One thing” (하나의 항목)의 의미를 다음과 같이 정의 내릴 수 있다
사용자가 대답해야 하는 한 가지 질문 - One question a user has to answer
사용자가 알아야 하는 정보 중 하나 -One piece of information you’re telling a user
사용자가 내려야 하는 한 가지 결정 - One decision a user has to make
한 가지 질문은 회원가입 시 필요한 정보들 중 이메일 주소나 전화번호일 수 있다. 한 화면에서 하나의 결정이나 질문은 사용자가 양식을 작성할 때 집중할 수 있고 잘못 입력할 가능성도 감소한다.
“One thing per page 한 페이지에 하나의 항목”에서 One thing의 의미는 반드시 각 페이지에 단일 입력 필드나 UI 요소일 필요는 없다. 전화번호 입력을 요청할 때 통신사 선택과 번호 입력 페이지를 분리할 필요는 없다. 한 페이지에 디자인하더라도 ”전화번호가 무엇입니까? “ , “어떤 계좌로 보낼까요?”라는 한 가지 질문이면 된다.
One thing per page 원칙의 사용성 이점
One thing per page 원칙의 강력한 전환 효과에 대해서 논했다. 여기에서는 그 바탕에 있는 이론적 근거에 대해서 이야기한다.
인지 부하 감소
사용자는 한 번에 하나의 작업 즉 입력 또는 선택에만 집중하면 된다. 화면에 표시되는 내용의 양을 줄이고 사용자가 한 번에 하나의 질문에만 작업하도록 하면 입력을 중도에 포기하거나 저항이 줄어들고 사용자가 작업에 계속 집중할 수 있다.
오류 처리가 단순화된다
한 페이지 내에 많은 작업을 수행할 경우 사용자가 오류를 수정하기 위해서는 위아래로 스크롤해야 했기 때문에 오류를 수정하기가 어려웠다. One thing per page원칙에 따라 디자인되면 사용자는 텍스트 필드에 정보를 입력하면 오류가 곧바로 인식되어 인라인으로 표시된다. 사용자가 다른 항목으로 이동한 지 얼마 되지 않아 오류와 관련된 정보를 계속 입력하는 동안 오류가 포착되어 표시될 수 있다. 사용자는 콘텍스트 전환을 많이 하지 않기 때문에 오류 해결이 더 빨라진다.
사람들은 입력을 완료하기 전에 잘못된 정보를 입력하거나 세부 정보를 누락하여 오류가 발생하는 경우가 많다. 사용자에게 5가지 다른 항목에 오류가 있다고 말하는 것보다 페이지당 1가지 항목을 수정하고 작업을 완료하는 것이 더 쉽다. 왼쪽 예시같이 많은 오류가 있다면 양식을 작성하려는 사용자의 의지에 영향을 미친다.
페이지 로드 속도가 빨라짐
페이지의 입력과 선택할 항목이 적을수록 로드 시간이 빨라진다. 로드 시간이 빨라지면 전환율이 증가하고 인지된 서비스 품질도 높아진다.
두 번째 경험이 더 빠르다
사용자가 처음 결제를 완료하고 다음에 결제할 때 배송 정보와 결제 정보가 이미 있는 경우 이 단계를 완전히 건너뛰고 리뷰 단계로 바로 이동할 수 있다.
위예시 같이 첫 번째 송금할 때는 계좌번호와 은행을 선택하는 계좌정보 입력 단계를 거친 후에 송금금액 입력단계로 가지만 다음에 송금할 때는 이전에 보낸 계좌를 선택한 후 곧바로 송금금액 입력 단계로 이동할 수 있다.
진행의 느낌 만들기
사용자는 페이지 당 하나의 질문에 답변하면서 이동하기 때문에 환영받는 진행 상황을 느낄 수 있다. 몇 분 동안 한 페이지에 머무르면서 입력을 진행하면 완료하기가 더 어렵다.
프로세스의 단계를 나누고 사용자가 여러 페이지를 이동할 수 있도록 함으로써 양식에 진행 상황이 추가된다. 사용자는 한 페이지에 오랫동안 머물지 않고 페이지당 하나의 작업을 수행할 수 있으며 각 작업을 빠르게 완료하는 것처럼 느낄 수 있다.
디자인이 더 쉬워진다
본인 인증, 회원가입, 계좌개설 같은 많은 입력이 필요한 복잡한 프로세스를 디자인할 때 그 많은 입력필드와 선택 컨트롤을 한 페이지에 넣고 디자인하는 게 얼마나 어려운지 디자인해 본 사람은 안다. 이를 단계별로 나누면 구조를 이해하기가 더 쉬워지고 디자인하기도 더 쉬워진다.
행동 추적이 더 쉬워진다.
프로세스가 단계별로 세분화되면 분석 및 이벤트 추적이 더욱 세분화될 수 있다. 사용자가 어려움을 겪고 있는 단계와 프로세스를 중단하는 단계를 더 쉽게 파악하여 개선할 수 있다.
프로세스를 재개하는 것이 더 쉽다
여러 단계로 세분화된 양식을 사용하면 사용자가 입력한 정보를 그대로 저장할 수 있다. 사용자의 답변이 단계별로 진행되는 동안 자동으로 저장되고 중도에 종료하고 나중에 다시 시작하려고 할 때 이전에 입력한 저장된 내용을 불러와 처음부터 다시 할 필요가 없다.
여러 페이지에 걸쳐 양식을 분할함으로써 "저장하고 계속하기"와 같은 다른 유용한 기능을 사용할 수도 있다. 사용자가 양식 작성을 잊어버린 경우 앱 알림을 보내 작업을 완료하도록 유도할 수 있다.
스크롤 감소
스크롤은 큰 문제가 아니지만, 모든 정보를 한 번에 볼 수 있다면 사용자가 입력한 정보를 검토하는 것이 훨씬 쉽다.
요약
복잡한 프로세스를 한 페이지에 모두 디자인하지 않고 여러 개의 작은 조각으로 나누어 단계별로 배치해서 디자인해야 사용자의 인지부하를 감소시키고, 페이지 속도가 빨라지고, 오류 처리가 쉬워진다. 한 페이지에 입력해야 할 내용이 모두 있으면 사용자가 단순하게 느낄 것이라고 생각할 수 있지만, 사용자가 작업을 포기하지 않고 완료하기를 원한다면 여러 단계로 나누어 디자인하면 사용자의 이탈률을 낮출 수 있고, 회원가입 완료나 결제 완료 같은 전환율을 높이는 좋은 수단이 될 수 있다.
참고자료
아래 두 글을 요약하고 첨언한 글입니다. One thing per page에 대한 글은 아직 많지가 않습니다.
https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
https://querkmachine.github.io/FSForms/docs/one-thing-per-page
https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/
https://mgearon.com/ux/one-thing-per-page-principle/
https://www.uxdatabase.io/newsletter-issue/04-staged-vs-progressive-disclosure
