[UX]스크롤과 주의 > 디자이너팁

디자이너팁

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

[UX]스크롤과 주의 정보

[UX]스크롤과 주의

본문

스크롤과 주의

테레사 페센덴 2018년 4월 15일

 

요약: 사람들은 예전보다 더 수직으로 스크롤한다. 하지만 새 시선추적 데이터는 사람들이 여전히 페이지 아래보다 접힌면 위를 더 본다는 것을 보여준다.

 

 

사람들의 행동은 상당히 안정적이고, 사용성 지침은 시간이 지나도 거의 바뀌지 않는다. 하지만 어떤 사용자 행동은 웹이 스크롤을 배려하는 초기 이후로 변화했다. 초기에는 사용자들이 수직으로 스크롤하는게 드물었다. 하지만 긴 페이지가 일반적인 1997년에는, 대부분의 사람들이 스크롤을 배웠다. 하지만, 접힌면 위에 있는 정보는 여전히 가장 많은 관심을 받는다. 최근인 2010년 경에는, 시선추적 연구가 사용자들이 보는 시간중에 80%가 접힌면 위에서 소비된다는 것을 밝혀냈다.

 

2010년 이후, 반응형 디자인과 최소주의가 등장하면서, 많은 디자이너들은 부정적인 공간이 있는 긴 페이지로 전환했다. 사용자 행동이 이런 웹디자인 트렌드의 인기로 변화했는지 다시 질문할 시간이다.

 

시선추적 데이터

 

연구에 대해서

 

질문에 답하기 위해, 우리는 1920×1080 해상도에서 13만 시선 고정에 관한 X, Y 좌표를 분석했다. 120명의 참가자들이 시선을 고정했다. 그들은 경제외 산업의 광범위한 범위에 속한 수천개의 사이트들과 관련된 최신 시선초적 연구의 일부였다. 이 연구를 위해, 우리는 여러가지 페이지와 산업에 걸쳐

사용자 작업에 관한 폭넓은 범위에서 분석하도록 초점을 맞췄다. 뉴스, 쇼핑, 블로그, FAQ, 백과사전 페이지를 포함했다.

 

우리는 최신 데이터를 1024x768 모니터에서 실시한 이전의 시선추적 연구에서 얻은 예전 데이터와 비교했다.

 

연구 결과

 

우리가 연구한 커진 화면과 새로운 웹디자인 트렌드 사이에서 두가지 변화가 일어났다. 사용자의 입장에서 적응이 가능했다. 우리는 두 변화의 상대적인 영향을 풀어낼 수 없었다. 하지만 양쪽의 시간이 흐르면서 그건 문제가 아니다. 그리고 우리는 원했던 것에 불구하고 어느 하나라도 취소할 수 없었다.

 

가장 최근 연구에서 사용자들은 접힌면 위의 페이지를 보는데 약 57%의 시간을 소비했다. 2160픽셀에 달하는 두 화면을 보는데는 74%를 소비했다. (이 분석은 최대 페이지 길이를 무시한다. 그 결과는 페이지 길이가 짧거나 사람들이 컨텐츠가 담긴 두 화면을 넘긴 후에 포기하기 때문일 수도 있다.)

 

이 결과들은 2010년 기사 보고와는 아주 다르다. 보는 시간중에 80%는 접힌면 위에 시선을 고정하는데 쓰였다. 하지만, 접힌면 아래에 두는 관심은 급격히 줄어들며 2010년과 2018년도 마찬가지다.

 

 

460410853_1523854430.5802.png

 

[percentageviewingtimeverticalattention.png]

 

접힌면 위에 있는 컨텐츠는 보는 시간 중에 가장 많은 부분을 차지한다. 약 74%는 컨텐츠가 가득한 두 화면을 보는데 쓰인다. (접힌면 위에 있는 정보는 아래와 즉시 합쳐진다). 나머지 26%는 페이지 길이보다 더 아래로 작은 증가를 소비했다.

 

 

모든 페이지의 길이가 다른 것은 확실하다. 사람들이 페이지 전체에 걸쳐 시선 고정을 어떻게 나누는지 밝혀내기 위해, (페이지 길이는 관련없음) 우리는 페이지를 20% 부분으로 갈랐다. (예, 각 페이지의 5분의 1) 일반적인 웹사이트에서, 페이지 상단의 20% 내에서 보는 시간이 42% 이상 소비된다. 페이지 상단의 40%에서는 65% 이상 소비된다. 검색 결과 페이지에서, 우리는 2010년 연구결과에 만족하지 않았다. 보는 시간의 47%는 페이지 상단의 20%에서 소비된다. (페이지 상단의 40%에서는 75% 이상) 상단 결과만 보는 사용자들의 경향을 반영한 것이다.

 

 

460410853_1523854453.5138.png

 

[percentageviewingtimesegmentsvertical-graph.png]

 

사람들은 페이지 상단의 20%를 보는데 더 많은 시간을 불규칙적으로 소비한다.

 

 

첫번째 화면 안에서 접힌면 위의 컨텐츠만 본다면, 상단을 향한 정보가 하단보다 더 많은 관심을 받는다. 접힌면 위를 보는 시간중에 65% 이상이 시점의 상단 절반에 집중된다. 검색 결과 페이지에서, 첫 화면의 상단 절반은 75% 이상 관심을 받는다. (오랜 진실이지만, 사용자들은 반복한다. 구글에서 1, 2위가 되더라도, 당신은 인터넷에서 존재하기 어렵다. 10년 전에는, 우리가 확인한 이 사용자 행동으로 여전히 구글을 잘 속였다.)

 

 

460410853_1523854606.1206.png

 

[percentageviewingtimeabovefoldvertical-graph.png]

 

접힌면 위에 있더라도, 관심은 페이지 상단을 향해 집중된다. 특히 검색엔진 결과 페이지에 해당된다.

 

 

스캐닝 & 읽기 패턴

 

우리는 (보는 시간이 57%일 경우) 접힌 면 위에서 가장 많은 관심을 받은 컨텐츠를 봤다. 컨텐츠가 가득한 두번째 화면은 (보는 시간이 17%일 경우) 약 3분의 1이 관심을 받는다. 나머지 26%는 롱테일 법칙으로 퍼진다. 즉, 가까운 정보의 일부는 페이지 상단으로 가며, 읽혀질 기회가 높다.

 

개별적인 읽기 패턴은 이 결과를 확인해준다. 많은 사용자들은 컨텐츠가 잘 구축되지 않은 페이지를 스캔할 때 F패턴를 접한다. 그들은 페이지 상단과 가까운 곳에 위치한 텍스트를 더욱 철처히 보는 경향이 있다. (텍스트로 이뤄진 첫 문단) 그리고 페이지 하단에 나타난 정보에는 훨씬 적은 시간을 소모한다.

 

사람들이 페이지가 조직된 방법을 이해해야 하는 경우에, 구축한 방법으로 나타난 목록이나 정보라면, 사람들은 더 많은 시선을 맞춘다. 일단 그렇게 되면, 사람들이 수행중인 작업에 관련된 정보에만 아주 효율적으로 집중하는 경향이 있다. 따라서 상단과 멀리 떨어진 컨텐츠에는 (보는 시간도 줄어들고) 훨씬 적게 시선을 맞춘다.

 

460410853_1523854527.9632.png

 

[charities-gazeplot.png]

 

이것은 대표적인 시선 기록으로 사용자 대부분의 사선 고정이 페이지 상단에 집중되어 있는 것을 보여준다. 하지만 항상 상단끝을 집중하는 건 아니다. 이런 시선 분포는 특정 디자인과 사용자들의 목표에 달려있다. 정보가 흥미롭다면 사용자가 가끔 조금씩 읽을 수도 있다. 하지만 전체적으로, 페이지를 내릴수록 시점이 소멸한다.

 

 

2010년과 현재 비교

 

2010년에는, 보는 시간이 접힌면 위에서 소모되었다. 최근, 그 수는 57%에 불과하며, 긴 페이지가 넘쳐나는 결과이기도 하다. 이건 뭘 의미할까?

 

첫번째, 전체적으로, 디자이너들이 완벽함의 환상에 대응하고 사람들이 스크롤하게 하려고 기표를 만드는 일을 잘하고 있다. 다시 말해서, 그들은 긴 페이지의 단점을 알고 적은 규모로 완화시킨다. 두번째, 사용자들이 스크롤에 적응된 것을 의마한다. 스크롤이 필요한 페이지의 보급은 습관이 되었으며 우리에게 행동으로 다가왔다.

 

적어도 어느 정도는, 사람들이 여전히 스크롤을 많이 하지 않는다. 그들이 정보로 가득한 세번째 화면으로 넘어가는 일은 아주 드물다. 기본적으로, 장벽으로 작용하는 접힌 면은 세번째 화면으로 밀어내린다. 8년 전에는, 보는 시간의 80%가 정보로 가득한 첫째 화면에서 소모되었다. 최근에는, 보는 시간의 81%가 세번째 화면까지 소모되었다.

 

우리는 사람들이 이유가 있다면 스크롤할 것이라고 항상 말했다. 주의는 여전히 페이지 상단을 향해 지속된다. 그 점은 컨텐츠의 일부로 가장 발견하기 쉽고 여러분의 사용자가 본다. 스크롤에 드는 상호작용 비용은 긴 페이지의 아래 부분에 있는 컨텐츠를 볼 가능성을 줄인다.

 

흥미롭게도, 화면 해상도 증가는 예상대로 스크롤 감소로 이어지지 않는다. 그 이유는 아마 디자이너와 개발자들이큰 화면에 영향을 받지 못했고, 대신, 컨텐츠를 더 멀리 분산시켰기 때문이다. 좋든 싫든, 사용자들은 과거보다 더 스크롤에 압박받는다. 하지만 더 이상은 아니다. 정보 밀도는 아마도 웹 초기에 너무 높지만, 페이지 디자인은 확실히 너무 미흡한 경향이 있다.

 

영향

 

사용자들은 특히 접힌면 위에서, 페이지 상단을 보는 시간을 더 많이 소모하지만, 당신이 명심해야 할 몇가지가 있다.

 

페이지 상단에 가치가 높은 컨텐츠인 사업과 사용자 목표를 내놓는다. 페이지 아래는 이차적인 관련 정보를 수용할 수 있다. CTA는 접힌 면 위에 둔다.

 

적절한 폰트 스타일로 중요한 컨텐츠를 향한 관심을 끈다. 사용자들은 정보가 중요한지 확인하려고 제목과 굵은 텍스트에 의지한다. 그리고 컨텐츠의 새 부분을 찾아낸다. 이런 요소들이 사이트 전체에 걸쳐 시각적으로 일관성이 있다면 사용자들이 찾기 쉽다.

 

가짜 바닥에 주의하라. 모던한 최소주의 디자인에 갈수록 흔하다. 완벽함의 환상은 스크롤을 방해한다. 텍스트 자르기 같은 기표를 활용해서 사람들에게 컨텐츠가 접힌면 아래에 있다고 알려준다.

 

대표 사용자들과 디자인을 테스트한다. "이상적인" 페이지 길이를 밝혀내고 사용자들이 쉽게 보고싶은 정보를 확인한다.

 

 

결론

 

최근 웹페이지들이 길어지고 부정적인 공간을 포함하는 경향이 있지만, 사용자들은 예전보다 더 스크롤을 하고 싶어하고, 여전히 페이지 상단에서 대부분의 시간을 소비한다. 컨텐츠 순위조정은 컨텐츠 계획 과정에서 중요한 단계다. 강한 시각적 기표는 가끔씩 사용자가 스크롤을 해서 접힌면 아래에 있는 컨텐츠를 발견하도록 유도한다. 이상적인 페이지 길이를 밝혀내려면, 실제 사용자들과 테스트한다. 아주 긴 페이지는 고객들의 관심을 잃는 위험을 증가시킨다는 사실을 명심하자.

 

 

출처: 닐슨 노먼 그룹

추천0

댓글 전체

좋은 자료 감사합니다. 많은 도움 되었습니다.
문단 간격, 글자 굵기, 사진 위치까지 잘 정렬하셔서 편하게 읽었습니다.
전체 138
디자이너팁 내용 검색

회원로그인

진행중 포인트경매

  1. 500여 동영상강좌 평생 무료 이용 쿠폰 (365OK 무료이용)

    참여9 회 시작18.07.16 11:13 종료18.07.21 11:13
  2. GNU푸시앱 70%할인(107,800원 상당) 쿠폰

    참여0 회 시작18.07.16 10:39 종료18.07.19 10:39

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT