Scroll Fading 101

스크롤 페이드는 새로운 디자인 패턴입니다. 스크롤에 의해 실행되는 애니메이션을 말합니다. 사용자가 페이지의 특정 지점까지 스크롤하면 새로운 요소나 콘텐츠가 페이드 인되거나 페이드 아웃됩니다. 움직임(및 애니메이션)은 세심하게 처리됩니다. 즉, 눈이 자동으로 그쪽으로 끌립니다. 결과적으로 잘못 배포된 애니메이션은 매우 주의를 산만하게 할 수 있습니다. 우리는 빠른 사용자 경험이 화려한 경험보다 낫다는 것을 알고 있기 때문에 정성적 사용성 테스트 연구에서는 모두 스크롤 페이딩을 사용하는 여러 업계의 웹사이트를 테스트했습니다. 이 문서에서는 우리가 발견한 내용과 권장 사항에 대해 설명합니다. 이 페이지에서: 스크롤 페이딩이란 무엇입니까? 스크롤 페이딩 대 스크롤재킹 스크롤 페이딩이 사용되는 이유는 무엇입니까? 연구 조사: 결과 스크롤 페이딩 모범 사례 결론 스크롤 페이딩이란 무엇입니까? 사람들이 온라인에서 읽는 방식에 대한 시점 추적 연구를 통해 우리는 사용자가 스캔한다는 사실을 알고 있습니다. 정보를 더 쉽게 소화하고 검색할 수 있게 만드는 한 가지 전략은 정보를 작은 덩어리로 표시하는 것입니다. 디자이너는 사용자가 페이지의 특정 지점으로 스크롤할 때 이러한 청크를 도입할 수 있습니다. 정의: 스크롤 페이딩 사용자가 페이지의 특정 지점까지 아래로 스크롤하면 특정 페이지 요소가 나타나거나 변경되는 애니메이션입니다. . Apple.com에서는 스크롤 상호 작용으로 인해 텍스트가 페이드 인됩니다. 페이지의 자연스러운 스크롤 진행으로 텍스트가 드러나는 대신 텍스트가 애니메이션으로 표시됩니다. Apple.com: 스크롤 상호작용으로 인해 다음 텍스트가 페이드 인됩니다. 무제한 일일 캐시백. (페이지의 자연스러운 스크롤 진행으로 표시되지 않고) 텍스트가 어떻게 움직이는지 확인하세요. 스크롤 페이딩 대 스크롤재킹 스크롤 페이딩과 스크롤재킹은 스크롤과 관련된 두 가지 서로 다른 디자인 패턴입니다. 이들 사이의 주요 차이점은 스크롤 페이딩은 사용자가 스크롤할 수 있는 방식에 영향을 주지 않고 사용자가 페이지의 특정 지점으로 스크롤할 때 단순히 애니메이션을 트리거한다는 것입니다. 이와 대조적으로 스크롤재킹은 사용자의 스크롤 속도를 변경하고 경우에 따라 스크롤 방향을 변경하여 운영 체제에 설정된 스크롤 속도를 무시합니다. 스크롤 페이딩과 스크롤재킹을 함께 사용할 수 있습니다. 아래 Reachdesk.com 예에서는 사용자의 스크롤 속도가 변경되고(스크롤재킹) 사용자가 스크롤할 때 페이지의 요소가 페이드 인됩니다(스크롤 페이딩). Reachdesk.com: 유용성 연구의 이 클립에서 참가자는 스크롤재킹 및 스크롤 페이딩이 나타나는 페이지를 탐색합니다. 사용자가 페이지의 중요한 전달 순간 부분까지 아래로 스크롤하면 스크롤 속도와 방향이 가로채고 사용자가 여전히 세로로 스크롤하고 있음에도 불구하고 페이지가 가로로 이동하기 시작했습니다. 가상 참석률을 42%까지 향상이라는 텍스트와 같은 항목이 시야에 사라졌습니다. 이는 스크롤잭 내의 스크롤 페이드의 예입니다. 스크롤 페이딩이 사용되는 이유는 무엇입니까? 디자이너는 아래에 설명된 몇 가지 일반적인 이유로 스크롤 페이딩을 사용합니다. 긴 페이지를 통해 사용자 안내 스크롤 자체는 인터페이스에 동작을 도입하지만 스크롤은 사용자가 제어합니다. 스크롤 페이딩은 사용자가 직접 제어하지 않는 두 번째 유형의 모션을 도입합니다. 즉, 요소가 나타나고('페이드 인') 사라졌다가('페이드 아웃') 다시 나타날 수 있습니다. 이러한 추가 모션은 페이드 인 또는 아웃되는 요소에 높은 중요성을 부여하여 주의를 끕니다. 스크롤 페이딩을 사용하여 중요한 클릭 유도 문구를 강조할 수 있습니다. 또한 점진적인 공개를 통해 정보가 밀집된 페이지를 통해 사용자를 안내할 수 있으므로 정보를 더 쉽게 소화할 수 있습니다. 데이터 로딩 최적화 제품 디자이너는 사용자에게 표시될 때까지 페이지의 일부를 로드하지 않는 지연 로딩을 옹호할 수 있습니다. 이 방법은 대역폭 및 데이터를 보존하고 스크롤 없이 볼 수 있는 부분에 요소를 빠르게 로드하는 데 우선순위를 올바르게 지정합니다. (우리는 스크롤 없이 볼 수 있는 부분 콘텐츠가 거의 즉시 로드되어야 한다는 것을 알고 있습니다. 사용자가 너무 오랫동안 기다릴 의향이 있기 때문입니다< /span> 계속 진행하기 전에). 따라서 웹사이트 개발 팀은 사용자가 충분히 아래로 스크롤할 때만 이미지나 기타 데이터 집약적인 리소스를 로드할 수 있습니다. 적시에 지원 정보를 추가하세요. 디자이너는 특정 시간에 사용자에게 관련 정보를 표시하기 위해 스크롤 페이딩을 활용하는 경우가 많습니다. 아래 예의 Crypto.com은 초점이 맞춰진 텍스트가 설명하는 애플리케이션의 보조 이미지로 희미해집니다. 스크롤 페이딩은 추가 시각적 정보를 추가했을 때 테스트에서 잘 작동했습니다. 그러나 일부 사용자의 경우 큰 이미지가 충분히 빠르게 로드되지 않아 데이터 로딩 최적화의 중요성이 더욱 강조되었습니다. Crypto.com: Crypto.com 홈페이지에 있는 이 클립에서는 스크롤 페이딩을 사용하여 Crypto 인앱 경험을 설명합니다. 사용자가 화면의 자산을 최대한 활용하고 안전하게 섹션으로 스크롤하면 두 개의 전화 알림이 오버레이로 표시됩니다. 브랜드 신뢰성 향상 디자이너들이 스크롤 페이딩을 활용하는 세 번째 이유는 브랜드의 신뢰성과 신뢰성을 전달하기 위한 것입니다. 예를 들어, 텍사스 오스틴 대학교 홈페이지에서 아래로 스크롤하면 숫자 카운터 애니메이션이 실행되고 사이트의 정보가 실시간으로 업데이트된다는 것을 사용자에게 보여줍니다. 우리 연구에 참여한 여러 사용자가 이러한 인식을 갖고 있었습니다. Utexas.edu: 유용성 연구의 이 클립에서 스크롤 페이딩은 숫자 정보에 대한 사용자의 관심을 끌고 정보가 최신이고 실시간으로 증가한다는 느낌을 갖게 했습니다. 연구 조사: 결과 한 번만 애니메이션 적용 스크롤 페이딩의 요소 지속성은 사용자가 해당 페이지 위치에 처음 도달할 때만 발생하는 애니메이션을 나타냅니다. 요소는 계속 표시되며 사용자가 페이지 위아래로 이동할 때 스크롤 페이딩 애니메이션이 반복되지 않습니다. 요소 지속성은 페이지의 애니메이션 양을 줄이고 반복되는 애니메이션보다 더 잘 작동합니다. 작업 지향 사용자는 요소 지속성이 동반될 때 스크롤 페이딩으로 인해 부정적인 영향을 받지 않았습니다. 반면, 지속성 부족은 문제가 되었습니다. 동일한 사용자가 원하는 정보가 다시 나타나도록 하는 정확한 스크롤 위치를 찾는 인내심이 없었기 때문입니다. 예를 들어, 많은 연구 참가자들은 계산기의 입력과 출력이 동일한 뷰포트에 표시되지 않았기 때문에 Crypto.com에서 계산기를 사용하는 데 어려움을 겪었습니다. 사용자가 입력을 다시 조정할 때마다 아래로 스크롤하고 페이드인 스크롤 애니메이션이 출력을 표시할 때까지 기다려야 했습니다. 결과는 시간 낭비와 짜증이었습니다. 한 참가자는 실망스러운 표정으로 말했습니다. 웹사이트에서 즉시 아래로 스크롤해야 할 것 같습니다. . . 그리고 나한테 이걸 보여줘. . . 아래 위로 스크롤해야 하기 때문입니다. Crypto.com: 한 연구 참가자가 이 온라인 계산기에서 여러 입력을 선택한 결과를 보려고 했으나 스크롤 페이딩으로 인해 계산기 출력이 계속 나타났다가 사라지는 문제로 인해 어려움을 겪었습니다. 완전성에 대한 환상 콘텐츠 발견 가능성 감소 완전성에 대한 환상은 사용자가 눈에 보이는 콘텐츠가 완전하다고 인식하지만 스크롤해야 볼 수 있는 부분 아래에 더 많은 콘텐츠가 있을 때 발생합니다. 대형 히어로 그래픽이나 동영상, 콘텐츠 요소 사이의 넓은 공백, 콘텐츠 흐름 중단(예: 광고)으로 인해 완전성이라는 착각이 드는 경우가 많습니다. 저희 연구에 따르면 스크롤 페이딩은 완성도에 대한 착각에 기여할 수도 있으며 특히 스크롤 페이딩을 생성하기 쉬운 다른 패턴과 결합할 때 더욱 그렇습니다. 이미 완성된 것처럼 보였던 페이지에서 접힌 부분 아래의 정보가 천천히 사라지자 많은 연구 참여자들은 페이지에서 더 이상 찾을 수 있는 것이 없다고 가정했습니다. 여러 참가자가 Crypto.com 페이지에서 이 문제를 경험했습니다. 사용자가 스크롤해야 볼 수 있는 부분 아래로 스크롤한 후에만 페이지 하단의 정보가 희미해지기 때문입니다. 결국 우리 연구 참가자들은 사이트를 탐색하는 데 시간을 보냈기 때문에 희미해진 정보를 발견했지만 실제 생활에서는 대부분의 사용자가 스스로 그것을 발견하지 못할 것이라고 가정하는 것이 안전합니다. Crypto.com: 이 영상은 연구 참가자가 원하는 수익률 정보를 발견한 순간을 보여줍니다. 이 정보는 계산기 아래에 있었고 스크롤 페이드에 표시되었지만 사용자가 빈 공간으로 충분히 스크롤한 경우에만 가능했습니다. 그녀는 처음에 이 정보가 처음에는 보이지 않았기 때문에 전혀 존재하지 않는다고 가정했습니다. 효과적인 글쓰기에 따른 스크롤 페이딩 텍스트의 이해 텍스트의 스크롤 페이딩은 사람들이 텍스트를 이해하는 데 영향을 줄 수 있습니다. 일반적으로 스크롤 페이딩은 웹 작성 모범 사례를 따르는 텍스트에서 잘 작동했습니다. 예를 들어, MagicLinks 웹사이트를 읽는 한 참가자는 스크롤이 희미해지는 텍스트를 빠르게 지나갔다가 다시 위로 스크롤하여 다시 읽었습니다. 왜냐하면 그는 내용을 이해하지 못했기 때문입니다. 부분적으로는 텍스트가 너무 느리게 희미해졌기 때문이고, 부분적으로는 글쓰기가 더 효과적이었을 수 있었기 때문입니다. MagicLinks.com: 연구 참가자는 일련의 텍스트 스크롤 페이드를 거쳐 궁극적으로 텍스트를 다시 읽어야 했습니다. 이에 반해 Apple Card 웹사이트의 스크롤 페이딩 텍스트는 짧고 강력하며 정보가 풍부하기 때문에 이해하기가 더 쉬웠습니다. 스니펫은 처음 몇 단어로 제품 가치를 간결하게 전달하고 스캔을 지원했습니다. 또한 Apple 카드 페이지 디자인은 카드의 주요 판매 포인트가 포함된 텍스트에 상당한 시각적 무게감을 부여했습니다. Apple.com: 한 연구 참가자는 자신의 관심을 끌었지만 압도하지는 않은 여러 텍스트 및 이미지 스크롤 페이드 애니메이션을 살펴보았습니다. 사용자가 콘텐츠 페이드 인을 너무 느리게 건너뛰었습니다. 텍스트가 페이드 인되는 속도도 이해에 기여했습니다. 스크롤 페이드 속도가 너무 느리면 빠르게 스캔하는 사용자가 스크롤을 건너뛰고 지나치는 경우가 많습니다. 이전 연구에 따르면 500ms 이상 걸리는 스크롤 페이드 애니메이션은 너무 느리게 인식되는 것으로 나타났습니다. 이 기간에 접근하거나 초과하면 여러 사용자가 페이드 인이 완료되기 전에 요소를 스크롤하여 지나치는 것을 관찰했습니다. Apple.com: 연구 참가자는 개인 정보 보호 및 보안 콘텐츠 블록이 완전히 페이드 인되기 전에 스크롤하여 지나갔습니다. 스크롤 페이딩 이미지가 종종 로드에 실패하여 브랜드에 해를 끼침 우리의 연구에서는 여러 스크롤 페이드 이미지가 있는 페이지에서 모든 이미지를 로드하지 못하는 경우가 많았으며, 이는 위에서 설명한 데이터 로드 위험의 결과를 확인했습니다. Cigna.com에서는 텍스트 스크롤이 페이드 인되었음에도 불구하고 이미지가 로드되지 않았으며 연구 참가자들은 뭔가 놓친 듯한 느낌을 받았습니다. 한 사용자는 이 부분이 마음에 들지 않습니다. 텍스트는 있지만 옆에 이미지가 없기 때문입니다. 이미지가 텍스트를 향상시키는 데 도움이 될 것 같습니다. 이미지를 로드하고 볼 수 있었던 또 다른 참가자는 보험 선택 경험이 스트레스를 주는데 이미지가 스트레스를 줄이고 브랜드 개성을 형성하는 데 긍정적인 변화를 가져왔다고 언급했습니다. Cigna.com: 느린 이미지 로딩으로 인해 한 연구 참가자의 경험이 악화되었습니다. 그는 건강 관리가 "어려우므로" 페이지에 일부 이미지가 포함되었으면 좋겠다고 말했습니다. 스크롤재킹 + 스크롤페이딩 = 최악의 사용성 스크롤페이딩이 스크롤재킹된 페이지 섹션 내에서 발생했을 때 몇몇 연구 참가자들은 압도당하고 좌절했습니다. 스크롤 페이드 애니메이션의 산만한 동작과 스크롤 잭의 제어 부족이 결합되어 인지 과부하가 발생했습니다. 이는 위의 Reachdesk 클립에서 발생합니다. 여기서 연구 참가자는 페이드 인/아웃 스크롤되는 텍스트와 이미지를 접했으며 가로 스크롤 잭 내부에도 포함되어 콘텐츠를 읽고 탐색하고 이해하기 어렵게 만들었습니다. 스크롤 페이딩 모범 사례 우리의 연구 결과에 따르면 스크롤 페이딩으로 인해 사용성 장애가 복합적으로 발생하지만 디자이너는 다음 지침을 준수함으로써 이를 방지하고 그 이점을 활용할 수 있습니다. 텍스트 페이드인 속도 최적화 텍스트가 너무 느리게 페이드 인되면 사용자가 텍스트를 건너뛸 가능성이 높습니다. 결과적으로 그들은 웹사이트가 제공하는 내용과 그것이 자신의 요구 사항을 충족하는지 여부를 이해하지 못할 수 있습니다. 그러나 페이드인 속도가 너무 빠르면 애니메이션을 인식하지 못할 수도 있습니다. 완벽한 기간을 찾으려면 100~400ms 사이의 속도로 실험해 보세요. 사용성 테스트에서 비율을 조정하고 테스트하여 애니메이션이 눈에 띄기에는 너무 빠른지 아니면 페이지를 통해 사람들을 안내할 만큼 점진적인지 확인하세요. 아> 콘텐츠 페이드 인은 한 번만 많은 사용자가 페이지를 처음 통과할 때 대부분의 스크롤 페이딩 텍스트를 자연스럽게 건너뛰기 때문에 스크롤 페이딩의 요소 지속성은 사용자가 화면 상단으로 돌아가는 도중에 콘텐츠를 볼 수 있는 더 나은 기회를 제공합니다. 읽지 못했거나 이해 또는 비교 목적으로 다시 읽어야 하는 경우. 우리 연구에서는 사용자 효율성을 지원하고 인지 부하를 줄이기 위해 콘텐츠 유지의 중요성을 확인했습니다. 한 번에 하나의 요소 유형으로 페이드 인 텍스트와 이미지가 동시에 사라지면 사용자의 관심을 너무 많은 방향으로 끌고 압도할 위험이 있습니다. 우리 연구에서 스크롤 페이딩의 가장 성공적인 예는 텍스트나 이미지 중 한 번에 하나의 요소에만 애니메이션을 적용했습니다. 텍스트와 이미지가 함께 페이드인되는 웹사이트에서는 사용자의 관심을 끌기 위해 경쟁했습니다. 인터페이스에 대한 모든 동작은 신중하게 배포되고 평가되어야 합니다. Apple.com 디자인에서는 텍스트나 이미지가 페이드 인되었지만 동시에 둘 다는 아니었습니다. 이러한 관행은 한 번에 한 곳으로 사용자의 관심을 효과적으로 끌었으며, 항상 가장 중요한 곳이었습니다. 해당 페이지는 우리 연구에서 전반적으로 최고의 효율성과 이해도를 보였습니다. 스크롤을 장려하기 위해 근접성과 폐쇄성의 게슈탈트 원칙을 활용하세요. 과도한 공백을 제거하여 한 콘텐츠 섹션과 페이드 인되는 다음 콘텐츠 섹션 사이의 근접성을 줄이면 사람들이 완전하다는 환상에 빠질 가능성이 줄어듭니다. 또한 각 후속 콘텐츠 섹션의 적어도 일부를 표시하여(예: Apple 카드 웹사이트에서) 폐쇄 원칙을 활용하세요. 사용자가 아래로 스크롤하여 전체 콘텐츠를 보도록 유도합니다. 모바일에서 스크롤 페이딩 방지 데스크톱에서 관찰된 사용성 문제는 모바일에서 더 작은 화면 길이로 인해 더욱 악화되었으며, 이는 한 번에 볼 수 있는 픽셀 수가 적고 스크롤 피로도가 증가했음을 의미합니다. 예를 들어, Crypto.com 모바일 사이트에서는 사용자가 웹사이트 계산기를 사용하기 위해 데스크톱에서보다 훨씬 더 많이 스크롤해야 했습니다. 그들은 새로운 입력을 테스트할 때마다 계산기 출력이 페이드 인될 때까지 기다려야 했습니다. 더욱이 모바일에서는 계산기와 그 아래 정보 사이의 공백으로 인해 완성도에 대한 환상이 더욱 심했습니다. 텍스트를 간결하게 유지하세요 스크롤 페이딩은 그 안에 포함된 텍스트가 간결하고 전달 가치가 있을 때 대체로 가장 성공적이었습니다. 웹 작성의 모범 사례와 자연스럽게 조화를 이루면서 최고 수준의 효율성과 이해력이 가능해졌습니다. 결론 스크롤 페이딩은 잘못 사용하면 심각한 사용성 문제를 일으킬 수 있습니다. 상대적으로 빠른 속도로 조금만 사용하면 사용자의 관심을 끌고, 브랜드 인지도를 향상시키며, 페이지 로딩 속도를 높이고, 콘텐츠를 더 작고 소화하기 쉬운 덩어리로 나눌 수 있습니다.