한계에 도전하다 – 롱 스크롤 웹사이트의 개요

긴 스크롤 또는 무한 스크롤, 웹 사이트는 정확히 다음과 같습니다. 페이지는 "평균" 웹 사이트 페이지보다 훨씬 길기 때문에 "무한" 스크롤합니다. 이러한 유형의 사이트는 사용자 생성 콘텐츠가 많은 Pinterest와 같은 소셜 미디어 사이트와 일부 뉴스 및 블로그 사이트에서 인기를 얻었습니다. 개인 웹 사이트 및 포트폴리오도 롱 스크롤 기술을 사용하여 사용자 참여 및 사람들이 사이트에서 보내는 시간.

무한 스크롤은 대중적이고 일반적인 디자인 패턴이 되었지만 긴 스크롤을 사용하는 사이트를 디자인할 때 UI 디자이너가 알아야 할 몇 가지 잠재적인 함정이 있습니다. 긴 스크롤 디자인 패턴을 사용하는 것이 적절하지 않은 사이트 유형도 있습니다.

Long Scroll의 목적과 이점

롱 스크롤 웹사이트의 가장 큰 장점 중 하나는 방문자를 사이트에 더 오래 머물게 한다는 것입니다. 사람들이 더 많은 콘텐츠를 소비하기 위해 의식적인 결정을 내릴 필요가 없을 때 클릭할 가능성이 줄어듭니다.

이를 Facebook, YouTube, Netflix 및 유사한 사이트에서 사용자가 보고 있는 동영상이 끝나면 동영상을 자동 재생하는 방식과 유사하다고 생각하십시오. 방문자가 새 비디오를 클릭하기 위해 노력해야 하는 경우 다른 사이트를 완전히 클릭할 가능성도 있다는 것을 알고 있습니다. 하지만 동영상이 계속 재생된다면 계속 시청할 가능성이 더 큽니다.

긴 스크롤 사이트가 제대로 코딩되면 새 콘텐츠가 포함될 때마다 새 URL이 로드됩니다. 이는 사이트에 대한 더 많은 페이지 조회수와 동일하며, 이는 광고 수익과 사이트의 전체 가치를 증가시킬 수 있습니다.

모든 UX 결정과 마찬가지로 형식을 결정하기 전에 실제로 사이트를 사용할 사람들의 장점과 단점을 비교하는 것이 중요합니다. 긴 스크롤은 특정 유형의 사이트에 좋은 옵션이 될 수 있지만 다른 상황에서는 사용자를 짜증나게 할 뿐입니다. 이 둘의 차이점을 배우는 것이 중요합니다.

롱 스크롤을 사용해야 하는 경우(및 사용하지 말아야 하는 경우)

긴 스크롤을 고려할 때 기억해야 할 핵심 사항은 어떤 종류의 사이트를 디자인하든 콘텐츠가 형식을 결정해야 한다는 것입니다. 긴 스크롤 웹사이트는 특정 유형의 콘텐츠에 적합하지만 다른 유형의 경우에는 큰 UX 실패를 초래할 수 있습니다.

전반적으로 작업 및 목표 지향 사이트는 무한 스크롤 디자인의 이점을 얻지 못합니다(예: 전자 상거래 사이트 및 사용자가 확실한 진행 상황을 보고 싶어하는 자습서 또는 기타 교육 사이트). 이러한 유형의 사이트는 사용자에게 완성감과 성취감을 제공해야 하며, 이는 긴 스크롤 사이트에서는 달성하기 어렵습니다.

예를 들어 Etsy는 2012년에 무한 스크롤 디자인을 시도했지만 결국 페이지 매김으로 다시 전환했습니다. 그들은 고객이 여전히 거의 같은 속도로 구매하지만 사용자 참여는 훨씬 떨어졌음을 발견했습니다. 수행한 검색 횟수와 같은 것들도 떨어졌습니다.

일부 전자 상거래 사이트에서 방문자에게 제공하는 옵션 중 하나는 제품 페이지를 볼 때 "모두 보기" 옵션입니다. 이렇게 하면 해당 형식을 선호하는 사용자를 위해 더 짧은 결과 페이지를 유지하면서 사용자가 무한 스크롤 형식으로 사이트를 볼 수 있는 옵션이 제공됩니다.

페이지 매김은 사람들이 정보를 시간 순서대로 보는 것이 중요한 경우에도 유용합니다. 한 페이지 스크롤링 웹사이트가 사람들로 하여금 훑어보고 건너뛰도록 부추기는 반면, 페이지 매김은 방문자의 속도를 늦추고 적절한 순서로 정보를 소비할 가능성을 높입니다.

단일 페이지 스크롤링 웹사이트가 정말 빛날 수 있는 곳은 추가 콘텐츠나 기사를 읽는 것이 자연스러운 흐름인 사이트입니다. 이것은 뉴스 사이트나 주제 블로그와 같은 것에 적용됩니다. 이러한 사이트의 사용자는 한 번에 많은 양의 정보를 가져오기를 원하며 무한 스크롤을 사용하면 훨씬 쉽습니다.

무한 스크롤이 인기 있는 UX 선택인 또 다른 분명한 영역은 소셜 미디어 사이트 또는 사용자 생성 콘텐츠가 많은 사이트입니다. Facebook, Pinterest 및 Twitter는 모두 무한 스크롤을 사용합니다. 이러한 사이트는 사용자를 가능한 한 오랫동안 사이트에 유지하기를 원하며 무한 스크롤은 이를 잘 수행합니다.

롱 스크롤의 심리적 비용

모든 디자인 결정의 심리적 효과는 항상 신중하게 고려되어야 합니다. 단일 페이지 스크롤 웹 사이트에 관해서는 심리적 영향과 그에 대한 심리적 영향이 있습니다.

고려해야 할 첫 번째 사항은 사용자가 의도적인 클릭을 신경 쓰지 않는다는 것입니다. 클릭은 처음부터 사실상 컴퓨팅, 그래픽 사용자 인터페이스 및 인터넷의 일부였습니다. 사람들은 특정 유형의 상호 작용에 익숙하며 더 많은 콘텐츠를 보기 위해 몇 개의 링크를 클릭해야 하는 경우 꺼려하지 않을 것입니다.

많은 사용자가 기본적으로 무한 스크롤을 싫어합니다. 스크롤해야 할 매우 긴 페이지에 직면하면 끝없는 정보의 바다에 빠진 것처럼 느껴질 수 있습니다. 사용자가 특정 정보를 찾을 때 스크롤을 찾는 것이 가장 효율적인 방법은 아닙니다.

페이지 길이를 정확하게 표시하지 않기 때문에 무한 스크롤은 페이지 측면의 스크롤 막대를 끊습니다. 모든 사용자가 스크롤 막대를 사용하는 것은 아니지만 이 점에서 무한 스크롤이 불편할 수 있습니다.

무한 스크롤은 또한 사용자가 한 페이지에서 작업을 완료하거나 목표에 도달한 후 다음 페이지를 클릭하여 얻을 수 있는 완료 감각을 제거합니다. 이러한 완성도를 잃으면 사용자가 낙담할 수 있으며 동일한 정보나 작업에 대해 다른 출처를 찾게 될 수 있습니다.

긴 스크롤링 웹사이트가 가질 수 있는 또 다른 심리적 영향은 사용자가 페이지 아래에 있는 콘텐츠를 맨 위에 있는 콘텐츠보다 덜 중요하게 보는 경향이 있다는 것입니다. 헤더를 사용하면 방문자의 두뇌가 "상단" 위치에 대해 일종의 "재설정"을 하므로 도움이 될 수 있습니다.

롱 스크롤 웹사이트 모범 사례

웹 사이트 프로젝트가 긴 스크롤 디자인에 적합하다고 판단되면 최적의 사용자 경험을 제공하기 위해 염두에 두어야 할 몇 가지 모범 사례가 있습니다.

먼저 바닥글을 버리십시오! 콘텐츠가 계속 로드되면 바닥글이 페이지 하단에서 계속 밀려납니다. 즉, 바닥글에 포함된 모든 콘텐츠 또는 정보가 보이지 않는 상태로 유지됩니다. 더 나쁜 것은 사용자가 바닥글을 살짝 보았지만 아무 것도 클릭할 기회도 가지지 못한 채 바닥글을 보지 못하는 경우입니다. 고정 바닥글을 사용하는 것이 이 문제를 해결하는 한 가지 방법이지만 바닥글을 완전히 제거하는 것이 더 나은 옵션인 경우가 많습니다.

시각적 신호를 사용하는 것이 중요합니다. 특히 기본 화면이 로드될 때 페이지에 더 많은 콘텐츠가 있다는 것이 즉시 명확하지 않은 경우에 중요합니다. 페이지가 로드될 때 화면을 채우는 큰 헤더 이미지 또는 시각적 콘텐츠가 있는 사이트에는 종종 아래에 더 많은 콘텐츠가 있음을 나타내는 화살표(때로는 애니메이션) 또는 유사한 이미지가 포함됩니다.

고정 헤더 또는 탐색 링크가 있는 고정 사이드바를 사용하여 탐색이 일관되게 표시되어야 합니다. 이에 대한 예외는 고정 헤더가 귀중한 화면 공간을 차지할 수 있는 모바일 장치의 경우입니다. Facebook은 사용자가 아래로 스크롤하면 헤더가 사라지고 다시 위로 스크롤하기 시작하면 다시 나타나도록 하여 이를 잘 처리합니다.

Chrome 웹 브라우저는 화면 하단의 컨트롤과 유사한 작업을 수행합니다. 사용자가 아래로 스크롤하면 사라지고 다시 위로 스크롤하기 시작하면 다시 나타납니다. 사용 가능한 화면 공간을 최대화하는 인터페이스를 만드는 매우 직관적인 방법입니다.

무한 스크롤 웹사이트에서 고맙게도 더 일반적이 된 한 가지 중요한 UX 기능은 각 섹션이 스크롤될 때 URL을 변경하는 것입니다. 일부는 페이지 내의 내부 책갈피로 이 작업을 수행합니다. 다른 사이트, 특히 뉴스 사이트와 블로그는 사용자가 스크롤할 때 전체 URL을 업데이트합니다. 이는 페이지 자체의 변경 사항에 관계없이 사용자가 연결하려는 콘텐츠에 정확히 연결할 수 있도록 하기 때문에 중요합니다.

일부 웹 디자이너는 콘텐츠를 동일한 페이지에 직접 로드하는 "더 보기" 버튼을 사용하여 "하이브리드" 긴 스크롤 사이트로 간주될 수 있는 사이트를 만들기로 선택합니다. 일부 UI 디자이너는 페이지에서 이것을 반복적으로 사용하는 반면 다른 디자이너는 한 번만 포함하도록 선택하고 그 후에 사이트를 보다 전통적인 긴 스크롤 형식으로 전환합니다.

이러한 긴 스크롤 웹사이트별 디자인 고려 사항 외에도 좋은 디자인을 만들기 위한 다른 UI 및 UX 모범 사례는 여전히 무한 스크롤을 사용하는 사이트에 적용됩니다.

Long Scroll을 올바르게 수행한 예

다음은 Andrew McCarthy의 사이트입니다. 디자인은 독특하지만 동일한 정보를 계속해서 무한 스크롤합니다. McCarthy는 디자이너이기 때문에 군중에서 눈에 띄기 위한 의도적인 선택일 가능성이 큽니다.

그리고 이 사이트가 모든 콘텐츠를 다시 로드하지 않고 맨 위로 루프백하지만 동일한 콘텐츠를 계속해서 반복하는 Sam Rosen의 또 다른 예입니다.

결론

긴 스크롤 웹사이트는 새로운 것은 아니지만 새로운 수준의 성숙도에 도달하고 있습니다. 디자이너는 더 이상 이 패턴을 다음 "큰" 것으로만 사용하지 않고 대신 패턴이 사용자 경험에 미치는 영향에 주의를 기울이고 있습니다.

무한 스크롤 웹사이트를 만들 때 모범 사례를 따르면 디자이너는 사용자를 좌절시키기보다는 즐겁게 하는 UX를 만들 수 있습니다. 동시에 제대로 구현된 긴 스크롤 웹사이트는 브랜드가 웹사이트 목표를 달성하는 데 도움이 될 수도 있습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 설득력 있는 디자인: 고급 심리학을 효과적으로 사용하기
• 디자인 심리학과 멋진 UX의 신경과학
• 경험이 전부입니다 – 최고의 UX 가이드
• Ultimate UX Hook – UX의 예측적이고 설득력 있고 감성적인 디자인
• 검증된 UX 법칙(인포그래픽 포함)