🖥️ 디자인/디자인 스터디

[📓아티클] One Thing One Page

NANN 난 2024. 3. 14. 16:35

 

오늘의 아티클 :

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

 

UX 원칙 - One thing per page

모바일 UI·UX 디자인 원칙 | “One thing per page”는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이

brunch.co.kr

 

 


1. 아티클 첫 인상과 후기

 

- 한 페이지에 하나의 정보만 넣자는 뜻일 것이다.

→ One thing은 정보만을 말하는 것은 아니다. 사용자가 대답해야하는 한 가지 질문, 사용자가 알아야 하는 정보 중 하나, 사용자가 내려야 하는 한 가지 결정이라고 정의내릴 수 있다.

→ 복잡한 프로세스를 여러 개의 중요 단계로 세분화하고 최적화하여 각 단계의 주작업에 해당하는 인터페이스 요소를 디자인한다. 프로세스의 단계를 세분화하여 단순화 시키고 한 페이지에 사용자가 느끼지 않는 수준을 요청할 수 있다.

 

- 한 페이지에 한 정보만 담아야하는 이유는 뭘까?

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

→ 특히 노년층을 대상으로 한다면 더욱더 이 원칙을 세우는 것이 좋다.

 

- 한 페이지에 모든 정보를 담았을 때와 비교하면 얼마나 차이가 날까?

→ 인지 부하가 감소되고 오류 처리가 단순화될 수 있으며 페이지 로드 속도가 빨라진다. 또 그 전의 정보값을 기억하기 때문에 처음 결제 후 두 번째 경험을 할 때엔 이 단계를 완전히 건너뛰고 다음 단계로 넘어갈 수 있다. 행동 추적이 쉬워지고, 프로세스를 재개하는 것이 더 쉽다.

 

 

 

2. 강의 내용 복습

 

- 힉의 법칙

: 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙. 토스에서는 하나하나의 단계가 쉽게 넘어가기 때문에 사용자는 실제보다 거치는 단계가 짧다고 느껴진다.

 

- 인지부하

: 정보를 학습하거나 문제를 해결하는 과정에서 필요한 인지적 요구량. 인지 부하의 한계점을 넘어가는 순간 사용자가 이탈한다.

 

 

 

3. 새로 알게 된 내용

 

- 역순으로 쌓이는 텍스트필드

: 토스에서 텍스트 필드가 밑으로 쌓이면 스크롤을 해야하니 역순으로 쌓이게 만든 솔루션이다. 처음엔 역순으로 쌓인다는 것이 너무 어색하지 않을까 라는 우려를 했으나, 놀랍게도 역순으로 쌓인다는 사실을 말해주기 전까지는 아무도 눈치채지 못했다고 한다. (보이지 않는 고릴라 실험) 사람들은 내가 집중하는 “상단의 영역”, “파란색 커서가 있는 텍스트필드”에 집중했기 때문에 텍스트필드가 쌓이는 방향에는 크게 개의치 않아했다는 것.

https://toss.tech/article/toss-signup-process

 

거꾸로 입력하는 가입 화면, 처음에 어떻게 떠올렸을까?

토스의 회원 가입 화면에선 스크롤을 내릴 필요가 없어요. 필요한 정보들을 거꾸로 입력하기 때문이죠. 어색하지 않을까 걱정했지만, 이제는 업계의 표준이 되었죠. 많은 앱에서 이 형태를 적용

toss.tech

 

 

 

4. 아티클 내용과 유사한 실제 사례

 

- 에이닷 로그인/회원가입 페이지

 

: 입력해야하는 정보를 여러 페이지에 걸쳐 입력하게 하여 사용자로 하여금 눈의 피로를 덜고 이탈율을 줄였다.

 

 

 

+ 추가 정보 (포스텔의 법칙, 테슬러의 법칙)

https://brunch.co.kr/@f7413a9d5cff457/29

 

알아두면 좋은 21 Laws of UX (1)

Jon Yablonski가 말하는 21가지 UX/UI 심리학 법칙 | 들어가며 'UX/UI의 10가지 심리학 법칙' 으로 유명한 디자이너 겸 작가 존 야블론스키의 웹사이트에 들어가면 총 21가지의 UX/UI 법칙을 접할 수 있다.

brunch.co.kr