brunch

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX DAYS SEOUL Jan 09. 2022

인라인 스크롤 영역 피하기

Inline Scroll Areas

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2015년 5월 6일의 기사입니다)

최근 전자 상거래 탐색 및 검색 인라인 스크롤 영역에 대한 대규모 사용성 연구에서 수많은 사용성 문제가 발생하는 것으로 나타났습니다. 섹션 페이지가 독립적으로 스크롤될 때마다 피험자는 보다 근본적인 개념적 어려움과 함께 몇 가지 낮은 수준의 상호 작용 문제에 부딪쳤습니다.

일반적으로 디자이너는 페이지에 있는 모든 섹션에 대한 더 나은 내용을 제공하기 위해 페이지에 주어진 섹션이 차지하는 공간을 제한해 인라인 스크롤 영역을 사용합니다. 사실, 우리의 검색 사용성 벤치마크에 따르면 최고 수익을 올린 전자 상거래 사이트의 26%가 필터링 옵션을 나열하기 위해 인라인 스크롤 영역을 사용합니다. 의도는 좋지만 인라인 스크롤 영역을 사용한 결과는 좋지 않습니다.

이 기사에서 우리는 페이지 내에 별도의 스크롤 가능한 목록을 가짐으로써 발생하는 사용성 문제를 살펴보고 이 비 친화적인 디자인 안티 패턴에 의존할 때 발생하는 개념적 상호 작용 문제와 5가지 구체적인 상호 작용 문제를 설명합니다.

인셉션 스타일 스크롤링

사용자는 인라인 스크롤 영역이 웹 페이지의 더 큰 스크롤 가능 영역 내에 배치되는 중첩된 스크롤 창을 도입하기 때문에 종종 당황합니다. 영화 인셉션의 중첩된 꿈처럼 스크롤 가능한 영역 내의 스크롤 가능한 영역입니다! 영화 줄거리에서는 그러한 복잡성이 바람직할 수 있지만 사용자 인터페이스 디자인에서는 그렇지 않습니다.

스크롤링 내에서의 스크롤링은 이해하기 쉬운 개념이 아닙니다. 그러나 사용자가 머리를 감싸며 고민하더라도 스크롤 영역 간에 종속성이 발생하기 때문에 디자인에 상당한 정신적 오버헤드가 발생합니다. 사용자는 스크롤 영역이 상호 연관되어 있기 때문에 인라인 스크롤 영역이 일부 잘려있을 경우 스크롤 영역 간의 관계를 추적해야 합니다.

인라인 스크롤 영역은 기본 데스크톱 앱에서 익숙한 일반적인 디자인 패턴인 창 내에 여러 스크롤 창을 갖는 것과 다른 개념입니다. 여기에서 스크롤 가능한 영역은 중첩되지 않지만 대신 인터페이스의 개별 부분을 명확하게 제어하므로 상호 의존적이지 않습니다. 따라서 다중 스크롤 창은 인라인 스크롤 영역으로 인해 발생하는 개념적 문제를 겪지 않습니다.

기술에 정통한 사용자는 이러한 구분을 할 수 있고 대부분의 일반 사용자는 결국 개념적 뉘앙스를 해결하지만(물론 잠재의식적으로) 인라인 스크롤 영역은 사용자가 시작하기도 전에 페이지에 불필요한 복잡성과 정신적 오버헤드를 많이 유발합니다. 실제 내용을 해석하고 상호 작용해야 합니다.

테스트 중에 우리는 인라인 스크롤 영역에 직면했을 때 피험자가 부딪혔던 5가지 구체적인 상호 작용 문제를 자주 관찰했습니다.

5가지 상호 작용 문제

인라인 스크롤 영역은 특히 5가지 핵심 상호작용 문제로 어려움을 겪습니다. 내용 부족, 스크롤 하이재킹, 보이지 않는 콘텐츠 및 스크롤바, 지나치게 민감한 스크롤바, 스크롤 영역 "활성화"입니다.

그럼 하나씩 살펴보겠습니다.

1) 내용 부족

인라인 스크롤 영역 내부 콘텐츠 내용을 얻는 것은 제한된 공간으로 인해 사용자에게 어려운 경우가 많습니다. 설계상 인라인 스크롤 영역은 사용자가 한 번에 모든 옵션을 볼 수 없도록 하므로 사용자는 보이지 않는 콘텐츠를 기억해야 합니다.

2) 스크롤 하이재킹

인라인 스크롤 영역은 사용자가 마우스 휠을 사용하거나 터치 장치(예: 스마트폰 또는 태블릿)에 있을 때 페이지 스크롤을 하이재킹 할 수 있습니다.

마우스 휠을 통해 페이지를 스크롤할 때 인라인 스크롤 영역이 사용자의 커서가 "점유한" 위치로 스크롤되어 인라인 영역이 페이지 스크롤링을 "하이재킹"하게 할 수 있습니다. 마찬가지로 인라인 영역을 의도적으로 스크롤할 때 영역 끝에 도달하면 전체 웹 페이지가 스크롤되기 시작합니다. 사용성 테스트 중에 이것은 스크롤링할 때마다 커서 위치를 지속적으로 인식해야 하는 이 불규칙한 스크롤 경험으로 인해 페이지 제어 부족을 자주 표현하는 피험자에게 큰 불편으로 판명되었습니다.

스크롤 하이재킹은 큰 인라인 스크롤 영역이 사용자를 "트랩"하여 인라인 콘텐츠 대신 페이지를 스크롤할 수 없도록 하는 터치 장치에서 훨씬 더 파괴적일 수 있습니다. 이는 모바일에 최적화된 웹 페이지의 포함된 지도 및 유사한 스크롤 및 드래그 가 가능한 콘텐츠에 특히 일반적입니다.

3) 보이지 않는 콘텐츠 및 스크롤바

iOS, Android 및 Mac OSX 트랙패드의 현재 기본 스크롤바 디자인은 비활성 스크롤바를 숨기는 것입니다. 이는 모든 태블릿 및 스마트폰 사용자의 대다수가 실제로 인라인 스크롤 가능 영역이 어디에 있는지 알 수 없다는 것을 의미합니다.

이는 사용자가 페이지를 조작할 때 원치 않는 놀라움을 초래할 뿐만 아니라 사용자가 현재 표시된 콘텐츠가 잘려서 전체 페이지 콘텐츠의 일부만 보고 있다는 것을 인식하는 데 필요한 시각적 어포던스가 종종 부족함을 의미합니다.

실제로 우리는 테스트 대상이 특정 옵션이 단순히 제공되지 않는다고 생각했기 때문에 전자 상거래 사이트를 떠나는 것을 보았습니다. 실제로는 스크롤 막대가 사라져 인식하기 어려웠던 인라인 스크롤 영역에 의해 옵션이 잘렸습니다.

4) 지나치게 민감한 스크롤바

일부 데스크톱 사용자는 스크롤 휠을 사용하는 대신 실제 스크롤바를 드래그합니다. 테스트하는 동안 앞서 언급한 "스크롤 하이재킹"을 경험하는 사람들을 위해 자주 사용되는 대체 방법으로 관찰되었습니다. 기술적인 관점에서 보면 스크롤바를 드래그하는 데 아무런 문제가 없지만 실제로는 긴 목록이 작은 스크롤 영역에 국한될 때 스크롤바가 지나치게 민감해지기 쉽습니다.

사실, 많은 테스트 대상자들은 매우 민감한 스크롤 막대로 인해 영역을 너무 빠르게 스크롤했기 때문에 많은 관련 옵션을 무의식적으로 건너뛰었습니다. 이것은 사용자가 사이트에서 이러한 옵션을 제공하지 않는다고 (잘못하지만 이해할 수 있게) 결론을 내릴 수 있기 때문에 심각한 결과를 초래할 수 있습니다.

5) 스크롤 영역의 "활성화"

테스트 중 일부 주제에 있어서 인라인 스크롤 영역을 "활성화"하려고 클릭하는 것을 몇 번 관찰했습니다. 그러나 대부분의 인라인 스크롤 영역에는 링크 목록(예: 값 필터링)이 포함되어 있기 때문에 이 클릭은 종종 테스트 대상이 의도하지 않게 값 중 하나를 적용하여 우회로 보내는 결과를 초래합니다.

비슷한 맥락에서 일부 사용자는 스크롤 가능한 영역이 다양한 유형의 키보드 명령을 지원할 것이라고 생각했습니다. 예를 들어, 자녀를 위해 레고를 찾는 한 피험자는 키보드 문자 "L"을 누르고 "브랜드" 필터 목록의 해당 부분으로 그녀를 스크롤할 것으로 예상했습니다(네이티브 드롭다운에서 예상한 대로 이어짐). 다른 사람들은 위쪽 및 아래쪽 화살표 키를 사용해 보았습니다. 키보드 명령이 잠재적으로 지원될 수 있더라도 실제로 테스트한 사이트 중 어느 곳도 지원하지 않았으며 이러한 키보드 상호 작용을 적용하려고 할 때 주제가 스크롤 가능한 요소를 가리키지 않는 경우가 많았습니다(여러 필터가 있는 사이트에서 사용자가 탐색을 시도하고 있습니다).

인라인 스크롤 영역 피하기

인라인 스크롤 영역으로 인해 발생하는 개념 및 상호 작용 문제를 감안할 때 웹 디자인에서 이러한 문제를 아주 드물게 사용해야 한다는 것은 분명합니다. 우리는 웹 디자이너로서 인라인 스크롤 영역이 간격 문제에 대한 편리한 설루션 임을 발견할 수 있고 전문 웹 사용자로서 우리 스스로(특히 당사 사이트에서) 탐색하는 데 어려움이 거의 없지만 분명히 적절한 디자인 패턴이 아닙니다.