우리는 모두 거기에 있었다. 검색 결과, 제품, 주문 또는 데이터 항목의 긴 목록이 있을 수 있습니다. 물론 모든 종류의 필터와 정렬 및 검색이 이미 마련되어 있습니다. 그러나 고객이 관련 항목 을 탐색하도록 도와야 하며 이를 위해서는 항목 탐색을 지원하고 속도를 높여야 합니다.
당신의 타고난 디자인 본능은 처음에는 구식 페이지 매김에 충실하라고 말할 수 있습니다. 그러나 당신이 그것을 알기도 전에 당신은 무한 스크롤 이 당신이 가지고 있는 매우 독특한 사용 사례를 고려할 때 고려해야 할 좋은 옵션 인지 궁금해하기 시작할 것입니다. 무한 스크롤이 실제로 좋은 아이디어입니까? 음, 우리 모두는 무한 스크롤에 대해 강한 의견을 가지고 있으며 일반적으로 그다지 좋은 의견은 아닙니다. 여기에는 여러 가지 좋은 이유가 있습니다.
무한 스크롤 문제 #
무한 스크롤의 문제는 잘 알려져 있습니다. 가장 분명한 것은 페이지에 있는 옵션의 양이 너무 많고 관리 하기가 너무 어렵다는 것입니다. 정말 끝이 보이지 않는 정보의 심연 에 빠져드는 기분 입니다. 표시된 옵션의 수가 편안한 범위 를 벗어나면 많은 사용자가 이에 대한 반응으로 페이지를 완전히 포기하는 것은 놀라운 일이 아닙니다.
또한 스크롤에 언제 얼마나 많은 항목이 나타나는지 제어할 수 없습니다. 무한 스크롤의 "이전" 세그먼트와 "신규" 세그먼트 가 모두 동일한 항목 스트림에 속하므로 쉽게 탐색할 수 있는 방법이 없는 것과 같습니다 . 몇 가지 항목을 위아래로 스크롤하면 마지막 몇 가지 항목을 두 번 세심하게 스캔하지 않는 한 이미 본 것과 아직 보지 못한 것을 즉시 확인하기 어렵습니다.
페이지 매김 대 무한 스크롤. 확실한 승자가 없는 오래된 토론
페이지 매김 대 무한 스크롤. 확실한 승자가 없는 오래된 토론. 이미지 크레디트: Yogev Ahuvia( 큰 미리보기 )
때때로 주소 표시줄의 URL은 스크롤할 때 변경되지만 더 자주 변경되지 않으므로 나중에 계속 탐색하려면 처음부터 다시 시작해야 합니다. 그리고 한 번에 특정 항목 집합을 탐색하기 위해 자신이나 사랑하는 사람에게 URL을 보내려는 경우 목록에서 위치를 북마크 할 수 없기 때문에 일반적으로 고통스럽습니다.
바닥글에 도달하고 싶다면 스크롤할 때마다 새로운 항목 스트림이 들어오기 전에 바닥글에 도달할 수 있는 기적적인 기회를 얻기 위해 약간 더 빠르게 스크롤해야 합니다. 때때로 사용자는 스크롤하는 동안 스크롤 문제에 직면하게 됩니다. 동시에 타격 Esc- 무한 스크롤을 제 시간에 취소 합니다. ( 일반적으로 실패합니다. )
게다가 무한 스크롤 은 페이지 길이에 대한 사용자의 기대치를 스크롤할 때마다 다시 보정해야 하므로 스크롤 막대 를 깨뜨립니다. 스크롤바는 페이지가 실제로 얼마나 긴지에 대한 약속 이지만 새로 로드된 항목의 경우 약속은 항상 잘못됩니다. 새로 로드된 항목을 화면 판독기에 적절하게 알리는 접근성 문제 는 물론 연결이 끊기는 성능 문제 는 말할 것도 없습니다.
위에 나열된 모든 문제는 사용성이 좋지 않습니다. 따라서 우리가 종종 무한 스크롤을 솔루션보다 더 많은 문제를 생성하는 유행하는 기술로 무시하는 것은 놀라운 일이 아닙니다. 그리고 디자이너로서 우리가 페이지 매김 및 "더 많은 로드" 버튼과 같은 다른 옵션을 대신 사용하는 경향이 있다는 것은 놀라운 일이 아닙니다.
페이지 매김 및 "더 로드" #
일반적인 용의자: pagination 으로 돌아가서 모든 무한 스크롤 문제를 피할 수 있습니다 . 그리고 많은 이점이 있습니다. 그것으로 사용자는 항상 명확한 시작과 명확한 끝을 가지고 있습니다. 사용자가 페이지를 끝내고 다음 페이지로 이동할 때 아직 본 것과 보지 않은 것에 대한 매우 명확한 "잘라내기"가 있으며 탐색하는 동안의 완성도가 있습니다.
Thinkific 웹사이트에 표시된 페이지 매김
아마도 약간 구식이지만 매우 안정적 입니다. Thinkific.com 의 페이지 매김 . ( 큰 미리보기 )
또한 주어진 페이지에 표시되는 데이터의 양을 제어 할 수 있습니다(일반적으로 페이지당 항목 수를 변경하는 컨트롤 포함), URL은 모든 페이지마다 다르며 바닥글은 접근하기 쉽고 옵션은 표시됩니다. 관리하기가 더 쉽습니다.
불행히도 사용성 테스트에서 때때로 페이지 매김이 전혀 잘 수행되지 않습니다 . 훨씬 더 예측 가능하고 관리하기 쉽지만 무한 스크롤에 비해 훨씬 느리기 때문에 사용자는 종종 훨씬 덜 탐색하고 종종 "느린" 느낌을 받습니다. 처음 몇 페이지에 더 많은 시간을 할애하고 그 시간에 필터와 정렬을 더 자주 사용하지만 무한 스크롤에 비해 전체 항목을 적게 보고 참여도가 낮은 경우가 많습니다.
페이지 매김의 이점을 유지하면서 무한 스크롤로 사용자를 압도하는 것을 피하려면 대신 "더 로드" 패턴 을 사용할 수 있습니다 . 사용자가 스크롤을 시작하면 탭하거나 클릭할 때 더 많은 항목을 로드하도록 선택할 수 있습니다. 일부 구현에서는 사용자가 아래로 스크롤하기 시작하면 처음에는 더 많은 항목이 자동으로 표시되지만 특정 임계값에 도달하면 "더 로드" 버튼이 나타납니다.
제품 페이지에 표시된 한 쌍의 온이어 헤드폰
Crutchfield에서 "더 로드" 패턴이 사용 중입니다. 처음 몇 개의 스크롤에서 새 항목이 자동으로 나타납니다. "더보기" 버튼은 사용자가 58개 항목에 도달했을 때만 나타나기 시작합니다. ( 큰 미리보기 )
예를 들어, 초기 페이지 로드에 10-30개의 제품을 표시할 수 있습니다 (모바일에서 10개, 데스크톱에서 30개). 사용자가 목록의 끝에 도달하면 다음 10-30개 제품을 자동으로 가져올 수 있습니다. 사용자가 30~70개 항목에 도달하면 "더 로드"로 전환합니다. 또한 "뒤로" 버튼을 사용하여 뒤로 돌아갈 수 있는 옵션을 제공하므로 사용자는 항상 탐색 위치를 제어할 수 있습니다.
자신이나 다른 사람에게 이메일 주소 링크를 보내 다른 시간이나 날짜에 계속할 수 있는 온이어 헤드폰이 표시된 제품 페이지의 스크린샷
사용자가 목록의 현재 위치에 대한 링크를 보내고 나중에 계속 탐색하도록 허용할 수 있습니다. Crutchfield UI를 기반으로 한 목업입니다. ( 큰 미리보기 )
또한 사용자가 이메일을 입력하고 나중에 현재 있는 목록의 위치로 이동할 수 있는 링크를 얻을 수 있도록 하여 나중에 탐색을 계속할 수 있는 옵션을 제공할 수도 있습니다. 이것은 나중에, 아마도 다른 장치에서 또는 다른 시간에 브라우징을 계속할 수 없는 문제를 해결합니다.
"더 로드"는 전자 상거래에서 매우 잘 작동합니다. 사용자는 모든 항목이 단일 페이지에 표시되고 바닥글이 항상 도달할 수 있으므로 표시되는 내용을 제어할 수 있습니다. 또한 사용자가 "더보기" 버튼을 누를 때마다 URL이 변경되면 무한 스크롤의 속도와 페이지 매김의 편안함 및 보안을 결합 합니다. 사용자는 더 많이 탐색하고 더 많이 참여하는 것 같습니다. 따라서 이 패턴은 긴 목록에 대해 고려할 수 있는 좋은 옵션입니다.
무한 스크롤을 아예 포기할 수 있다는 뜻인가요? 반드시는 아닙니다. 무한 스크롤의 중요한 이점은 사용자가 더 많은 것을 보고 싶을 때 새 항목 을 표시하는 결과 표시 속도입니다 . 결과적으로 무한 스크롤을 더 좋게 만드는 몇 가지 기술과 전략이 있습니다. 그러나 앞에서 설명한 모든 문제를 해결해야 합니다.
Angular용 KendoUI
Angular용 Kendo UI는 데이터 처리, 성능, UX, 디자인, 접근성 등 모든 앱 요구 사항을 충족하는 구성 요소를 제공합니다.
무료 평가판 시작
목록에서 위치 북마크하기 #
무한 스크롤을 개선하는 가장 쉬운 방법은 목록에서 "새 항목"과 "이전 항목" 사이의 구분선을 표시하는 것입니다. 새 배치가 들어오면 항목을 시각적으로 구분하고 사용자가 목록에서 나중에 계속 탐색할 위치를 표시할 수 있습니다. 우리는 또한 그들이 본 모든 제품을 별도의 페이지 에서 볼 수 있도록 하여 모든 옵션의 무한 스트림에서 본 옵션을 분리할 수 있습니다. 이 상호 작용의 예가 아래에 표시됩니다.
서로 다른 두 쌍의 커버 이어 헤드폰을 보여주는 제품 페이지의 예
목록의 "새" 세그먼트와 "이전" 세그먼트 사이에 충분한 공백을 추가하고 사용자가 나중에 탐색을 계속할 수 있도록 하는 버튼. Crutchfield UI를 기반으로 한 목업입니다. ( 큰 미리보기 )
사용자가 "나중에 여기에서 계속"을 클릭하면 확인 표시를 표시하고 브라우저에 위치를 저장하거나 사용자에게 이메일 주소를 묻는 모달을 표시 할 수 있습니다.
오버이어 헤드폰 제품 이미지
사용자가 나중에 계속 탐색하기를 원할 때 표시되는 팝업입니다. Crutchfield UI를 기반으로 한 목업입니다. ( 큰 미리보기 )
또는 뉴스레터 상자를 직접 표시하여 사용자가 페이지 의 현재 위치에 대한 링크를 복사할 수도 있습니다. 긍정적인 부작용으로 이는 사용자의 이메일을 수집하여 나중에 새 항목에 대한 알림을 보낼 수 있는 옵션도 제공합니다.
두 쌍의 오버이어 헤드폰 제품 이미지
문구를 '목록의 이 위치에 대한 링크 복사'로 변경합니다. Crutchfield UI를 기반으로 한 목업입니다. ( 큰 미리보기 )
바닥글 공개 #
위의 솔루션은 사용자의 위치에 대한 이해 부족 문제를 해결할 수 있지만 항목이 자동으로 로드 되므로 바닥글에 도달하는 것과 같은 다른 문제가 여전히 있습니다 . 이것은 해결하기 아주 쉽습니다.
고정 머리글에 익숙한 것처럼 바닥글 공개 를 통합할 수 있습니다. 오른쪽 하단 막대에 지속적으로 유지되고 페이지의 나머지 부분이 무한 스크롤을 사용하는 동안 필요한 경우 바닥글을 표시하는 작은 도우미를 통합할 수 있습니다. 실행 중인 좋은 예는 말레이시아의 쿠알라룸푸르에서 음식 배달 서비스를 제공하는 Dahmakan 입니다(현재 사용 중인 무한 스크롤 없음). 바닥글은 클릭하거나 탭할 때 여는 것이 아니라 키보드 탐색을 통해서도 액세스할 수 있어야 한다는 점을 강조할 가치가 있습니다 .
재생: 필요할 때 바닥글을 표시하고 숨기는 버튼이 있는 바닥글 표시. (
