섹션화를 통해 사용자 경험(UX) 향상: 힉의 법칙을 중심으로

배경

공유책방은 집에 쌓여 있는 책을 플랫폼 내 책방에 등록하여 다른 사용자와 교환 및 나눔할 수 있는 플랫폼입니다. 사용자가 책을 등록하기 위해서는 다음과 같은 필수적인 절차가 필요합니다.

1. 검색: 제목 or 바코드(ISBN) 스캔
2. 책 선택: 일치하는 결과(책)들의 표지 리스트를 보고 내 책을 선택
3. 옵션 선택: 나눔 or 교환, 책의 상태 (상, 중, 하), 교환이라면 원하는 토큰의 갯수
4. 사진 업로드: 책의 사진 등록 (상태 확인을 위함)
5. 위치 확인: 사용자의 위치 확인 (카카오맵 활용)

문제상황

책을 등록하는 과정이 다소 복잡합니다. 이를 한 페이지에 모두 보여주면 아마 아래 사진보다 복잡한 결과물이 나왔을거 같습니다. (지도, 사진폼 등등...) 사용자는 복잡한 폼에서 의사결정에 걸리는 시간이 늘어나고 결국 사용자 경험이 저하됩니다. 이는 UX 법칙 중 힉의 법칙에 해당됩니다.

힉의 법칙(Hick's Law)?

의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

인터페이스에 요소가 너무 많으면, 취해야 할 동작이 명확하지 않고, 핵심 정보를 찾기 어려워집니다. 즉 사용자에게 인지 부하(congnitive load)를 줍니다.

섹션화를 통한 개선

이를 개선하기 위해 폼을 섹션화하였습니다. 우선 폼을 성격에 따라 5단계로 분리하였습니다. 각 단계가 마무리되면 다음 단계 컴포넌트가 새로운 One page로 나타납니다. 커스텀 훅을 이용한 자동 스크롤로 부드러운 이동을 지원하였습니다.

소스코드

구현한 코드는 다음과 같습니다. (React, JavaScript 기반)
스크롤을 지원하기 위한 커스텀훅을 만들었습니다. 타겟 태그에 ref를 걸어두면 타겟으로 스크롤됩니다.

// Custom Hook
const useScrollTo = () => {
  const ref = useRef(null);
  const [isScrollTo, setIsScrollTo] = useState(false);

  useEffect(()=>{
    if(ref.current && isScrollTo) {
      ref.current?.scrollIntoView({ behavior: 'smooth' });
      setIsScrollTo(false);
    }
  },[isScrollTo])

  return [ref, setIsScrollTo];
}

// RegisterPage
const RegisterPage = () => {
  const [step2Ref, setIsScrollToStep2] = useScrollTo();
  const [step3Ref, setIsScrollToStep3] = useScrollTo();
  // 생략...

  const [isView, setIsView] = useState({
      step2: false,
      step3: false,
      // 생략...
  });
  
  const onClickButton = () => {
	// 메인 로직 생략
  
	setIsView({ ...isView, step2: true });
	setIsScrollToStep2(true)
}

  return (
      <Step1SearchContainer />
      {isView.step2 && <Step2SelectContainer ref={step2Ref} />}
      {isView.step3 && <Step3SelectContainer ref={step3Ref} />}
      // 생략...
  )
}

작동 순서는 다음과 같습니다.

1. 섹션 1에서 폼을 입력 후 완료 버튼 클릭합니다.
2. 두번째 isView가 활성화 되며 다음 섹션이 열립니다.
3. 스크롤 커스텀 훅을 통해 ref가 걸려있는 타겟으로 스크롤됩니다.

이렇게 작성한 코드의 결과물은 다음과 같습니다. 불필요한 정보를 노출하지 않고, 무엇을 해야 하는지 명확히 제시함으로써 사용자의 인지 부하를 낮추었습니다.