(아티클 분석) UX 원칙 One thing per page

2025.01.16.

UX 원칙 One thing per page 원본글

https://brunch.co.kr/@chulhochoiucj0/31

UX 원칙 One thing per page

모바일은 작은 화면으로 인해 콘텐츠를 읽기가 어려움.

키보드 같은 외부 입력도구가 없어 작은 화면 내의 가상의 키보드에 엄지손가락으로 입력하기 때문에 정확도가 떨어지고 오류가 발생한다.

한 화면에 많은 입력과 선택을 요청하면 정보의 양이 많고 복잡해 보여 사용자는 입력을 포기하고 이탈해 버리거나 프로세스 진행을 망설일 수 있다.

 

“One thing per page”(페이지당 한 항목)는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이 높다는 디자인 패턴 또는 원칙이다. 

 

“One thing per page”원칙은 복잡한 프로세스를 여러 개의 중요 단계로 세분화하고 최적화하여 각 단계의 주작업에 해당하는 인터페이스 요소를 디자인한다. ‘프로세스의 단계를 세분화하여 단순화시키고 한 페이지에 사용자가 저항을 느끼지 않은 수준의 정보를 요청한다.’

 

Ex)인터넷 송금

계좌번호 입력 – 은행 선택 –송금금액 입력 - 받는 분에게 표시할 내용 –송금 메모- 송금 비밀번호 입력까지 총 6가지의 입력과 선택과정을 거쳐야 한다.

 

“One thing per page”에서 “thing”의 의미

사용자가 대답해야 하는 한 가지 질문

사용자가 알아야 하는 정보 중 하나

사용자가 내려야 하는 한 가지 결정

 

One thing per page 원칙의 이점

-인지 부하 감소 : 한 번에 하나의 작업에만 집중하면 되기에 중간에 포기하거나 저항이 줄어들어 사용자가 작업에 집중할 수 있다.

 

-오류 처리 단순화

 

-페이지 로드 속도가 빨라짐

 

-두 번째 경험이 빠름 : 사용자가 처음 결제를 완료하고 다음에 배송 정보와 결제 정보가 이미 있는 경우 이 단계를 생략한다.

 

-진행의 느낌

 

-디자인이 더 쉬워짐 : 복잡한 프로세스를 디자인할 때 많은 입력필드와 선택 컨트롤을 한 페이지에 넣고 디자인하는 건 어렵다. 이를 단계별로 나누면 구조를 이해하기가 더 쉬워지고 디자인하기도 더 쉬워진다.

 

-행동 추적이 더 쉬움 : 사용자가 어려움을 겪고 있는 단계와 프로세스를 중단하는 단계를 더 쉽게 파악하여 개선할 수 있다.

 

-프로세스를 재개하는 것이 더 쉬움 : 여러 단계로 세분화된 양식을 사용하면 사용자가 입력한 정보 그대로 저장할 수 있다. 중도에 종료하고 나중에 다시 시작하려고 할 때 이전에 입력한 저장된 내용을 불러와 처음부터 다시 할 필요가 없다.

 

-스크롤 감소

 

인사이트

좋았던 점

평소에 은행 앱을 자주 사용하는데 제가 편리함을 경험 했던 사례가 나와서 내용에 공감이 되었고 원리를 이해하기 쉬웠다.

 

아쉬웠던 점

중간에 회원가입 하는 단계를 예시로 들었는데 제가 실제로 여러 앱에 회원가입을 했을 때는 One thing per page 원리를 사용한 것보다 한 번에 다 담겨있는 화면을 많이 봤던 것 같아서 왜 그런 방식을 더 사용할까? 정말로 이 원리를 적용한게 더 편할까? 라는 생각도 들었다. 그래서 이와 관련된 내용이나, 더 명확한 사례가 있으면 좋았을 것 같다. 

 

알게 된 개념

“One thing per page”(페이지당 한 항목)는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이 높다는 디자인 패턴 또는 원칙이다.