Stepper, 단계별 진행 표시

한 줄로

여러 단계의 작업에서 현재 위치를 시각적으로 표시합니다. 1-2-3-4 점이나 막대로 나타냅니다.

어디서 왔나

Wizard 패턴의 시각적 보조 요소입니다. 1990년대 Microsoft Office의 wizard UI에서 진화했습니다. 사용자가 "지금 어느 단계인지, 몇 단계 남았는지"를 한눈에 알 수 있게 합니다.

종류

Horizontal stepper: 가로 배치. 데스크탑 폼.
Vertical stepper: 세로 배치. 모바일.
Numeric: 1-2-3-4 숫자.
Dot: 점들의 색 변화.
Progress bar: 가로 막대로 비율.

효과

Zeigarnik Effect의 활용입니다. 사용자가 "2/4 단계"를 보면 나머지를 끝내고 싶어 합니다.

함정

너무 많은 단계(7개 이상)는 오히려 부담입니다. 5단계 이하가 안전합니다.

바이브 메이커가 챙길 한 가지

회원가입을 3단계 stepper로 만들면, 동일 정보의 1페이지 폼보다 완료율이 더 높을 수 있습니다. 인지 부하를 작게 쪼개는 효과입니다.

관련

Wizard · Progress bar · Onboarding