카테고리 보관물: UX

웹페이지 골든 트라이앵글 – Golden triangle on web page

Golden triangle in web page (골든 트라이 앵글) 지난번 포스트에 ATF(Above the fold line; 이하 줄임) 얘기를 할 때 언급하지 못한 것 같아서 추가해서 포스트를 올려 봅니다. ATF를 얘기할 때는 보통 eye-tracking(기계장치로 사람의 눈동자를 추적해서 동선을 파악하는 테스트)의 결과에서 나온 Golden-triangle에 대해서 언급하는 경우도 많습니다. Golden-triangle은, 검색페이지나 웹페이지에서 사용자에게 노출되면서 시선이 집중되는 영역을 적외선감지기에서 보여지는 온도처럼 표기한 그림을 그리고, 거기서 시선이 가장 많이 집중(focusing)되는 역삼각형모양의 가장 중요한 영역을 말합니다. wpid-google-eye-scan-2010-10-20-03-442.jpg 위와 같은 그림입니다 (인터넷에서 줏어왔습니다. 저희 회사것은 공개불가 ‘o’) 위 그림은 유명한 구글의 검색결과에 대한 eye-tracking한 결과입니다. 대부분의 검색결과 사이트들은 위와 위사한 역삼각형 모양의 hot-spot(hot-focusing) 영역을 가지게 됩니다. (적어도 좌철방식을 쓰는 나라에서는 그렇습니다. 우철방식의 아랍권은 어찌되는지 모르겠네요. 궁금할 따름입니다) eye-tracking (eye-scan)은 특별한 장치를 설치하고 선정된 사용자에게 임무을 부여하거나 또는 무작정 서핑(검색)을 시켜서 눈동자의 동선과 머무 시간, 마우스의 위치와 클릭등을 추적하는 user test를 말합니다. 장치가 비교적 고가이고 사용자를 선정해서 테스트 하는 것도 만만치 않기 때문에 환경이 마련되어 있지 않은 곳에서는 쉽게 하기는 힘든 테스트입니다. 또 운영하는데 경험과 지식도 필요합니다. 아무튼 테스트 결과는 저런식으로 많이 display해서 보여주게 되는데 색깔이 빨갛게 집중된 곳일 수록 사용자의 시선이 많이 머문곳입니다. 즉 더 중요하게 관리되어야 하는 영역이라는 뜻도 됩니다. 보편적으로는 위 그림과 같은 성향을 띕니다만 성향일 뿐이고 실제로 eye-tracking을 해보면 모든 사이트의 결과가 천편일률적으로 저렇게 나오지는 않습니다. 즉, 다른 페이지의 결과를 가지고 대충 유추해서 참고하는 것은 괜찮지만 정확하지 않을 수 있으므로 환경이 마련될 수 있다면 자기가 운영하는 웹페이지의 시선이 집중되는 곳을 확인하기 위해서는 eye-tracking을 직접 해봐야 합니다. 굉장히 재미있는 결과를 볼 수도 있습니다. 차이점이 나오는 대표적인 요인이 UI나 layout의 배열같은 visual의 차이에도 많이 있고, 브랜드에 대한 성향을 미리 파악하고 있다거나 습관 또는 뭔가 부수적인 영향에 의한 것들에도 사용자가 당연히 interaction(반응)을 합기 때문입니다. 구글이 저렇기 때문에 내 웹사이트도 저럴 것이다라고 보편일반화 하는 분들이 있는데 저는 오류라고 주장하고 싶습니다. 가장 일반적으로 쉡게 범하는 오류는 내 사이트를 golden triangle에 잘 부합시키도록 design과 UI를 크게 바꾸었는데 결과가 다소 다르게 나온다고 말하는 경우입니다. 당연히 다릅니다. 그래서 새로 바뀌는 UI에 대해서도 미리 eye tracking이 되어야 합니다. 또는 bucket test등을 통해서 미리 살펴보아야 합니다. 그래서 UI같은 것도 한꺼번에 바꾸는 것이 아니라 서서히 바꾸는 것이고 큰 틀을 벗어나는 모험을 할 것인지 안할 것인지를 결정하는 것도 중요합니다. User의 반응은 우리가 생각하는 것보다 매우 상대적이고 유연하고 학습이 잘되어 있고 나름대로 타당성을 가지고 있게 마련입니다. 가장 재미있는 오류라고 생각하는 것이 golden triangle에 붉은색 영역에 비싼 광고를 배치하면 잘 되겠네 라고 생각하는 것입니다. 반드시 그렇지 않을 수도 있습니다.

Above The Fold line

접선 위 영역 (Above The Fold Line) 줄여서 ATF 혹은 ATFL 이라고 많이 부릅니다.
특별한 행동을 취하거나 노력을 들이지 않고 어떤 출판물에서 보여지는 영역을 의미합니다. 즉 순간적으로 시선이 닿았을 때 노출되는 hot spot 영역을의미합니다. 웹검색이나 웹서비스, 웹포탈에서는 일반화된 용어입니다만 관련분야외에서는 이 용어를 잘 모르더군요. 행동과학등이나 마케팅 측면에서도 상당히 중요한 용어입니다. 수정하면서 스크린샷을 한 번 넣어봤습니다. ATFL라는 용어의 어원은 신문(News paper)등을 가판대에서 판매 할 때 반으로 접어서 판매하는데 접혔을 때 보통 헤드라인이 보이게 되고, 그 페이지에 중요한 뉴스(아마도 헤드라인)가 보이게 되서 관심이 있는 사람은 신문을 구매 하게 되는데요. 거기에서 시작된 용어라고 합니다. 웹페이지에서 ATF는 처음 사이트에 접속했을 때 또는 검색서비스에서 검색어를 입력하고 난 결과페이지에서 웹 브라우저에서 스크롤바를 내리지 않고 눈으로 볼 수 있는 페이지영역을 말합니다.
일반적인 디자인이나 출판에서 말하는 것과는 다소 차이가 있습니다. 웹브라우저는 종이처럼 접히는 것은 아니니까요. 스크린샷에서는 아래쪽 빨간 가로선 까지의 영역을 말합니다. 오른쪽에 보시면 스크롤을 더 내려야 볼 수 있는 영역이 많이 있음을 알 수 있습니다. 참고로, 이 때의 웹 브라우저의 창의 크기는 전체화면을 다 차지하고 있는 전체 크기(full size)의 상태인 것으로 간주합니다. 이렇게 간주하는 것은 사용자들 마다 창 크기가 다르긴 하지만 보통의 사용자는 웹 브라우저를 거의 최대에 가까운 사이즈로 놓고 사용하기 때문입니다. 해상도는 그 당시에 가장 많이 보유되어 있는 모니터사이즈와 그래픽카드의 성능에 따라 달라지는데 현재는 1280*1024 정도로 봅니다. 해상도는 계속해서 모니터링해서 주 대상이 되는 사용자들의 주 해상도를 인지하는 것도 중요합니다. 사용자들의 모니터가 고성능이 되면 이 기준도 달라지겠지요. ATF를 따로 용어로 만들어서 말하고 언급하는 가장 중요한 이유는 하나입니다. 사용자의 클릭의 대부분을 받는 영역이기 때문에 잘 이 영역에 뭔가를 잘 배치해야 좋은 결과 즉, 금전적 이익이나 서비스의 기능을 제대로 보여줄 수 있습니다. 즉, 이 영역을 어떻게 활용하는 가에 따라서 서비스의 흥망이 결정될 수도 있습니다.
* 사용자의 시선을 받는 가장 첫번째 영역(첫번째 인상을 줄 수 있는 영역)
* 이 영역밖의 페이지, 그러니까 스크롤바(scroll bar)를 내려서 봐야 하는 영역은 사용자의 행동과 노력을 요구합니다. 그런 것을 잘 하지 않는 사용자들도 상당히 많습니다
* ATF밑의 페이지에 있는 정보를 보기 위해서는 스크롤바를 – 마우스나 단축키를 이용해서 – 내려야 하는데 ATF밖의 1차적으로 사용자의 첫번째 시선에서 박탈당하기 때문에 노출될 기회마저 박탈당할 확률이 매우 높아서 이 쪽에 위치한 링크들은 클릭비율이 높지 않습니다. ATF 밖의 영역에 대해서 말하자면 이 부분의 문제는 사용자가 이 부분의 정보를 확인하기 위해서는 노력이 든다는 것입니다. 즉, ATF안에 원하는 정보가 없을 경우 사용자는 다음과 갈은 행동 패턴 중에 하나를 취하게 됩니다.

  • 스크롤바를 눌러서 결과를 확인하거나
  • 다른 곳(다른 사이트)으로 이탈하거나
  • 또는 ATF안에 있는 링크 중 가장 그럴듯한 것을 클릭 정해진 순위는 없고 웹사이트의 성향이나 property(웹사이트 안에서의 단위 서비스)에 따라 사용자가 많이 취하는 행동들의 우선순위가 달라집니다. 앞서 말씀드렸듯이 보통 사용자들은 스크롤이 긴 경우에는 스크롤바를 끝까지 내리려 하지 않습니다. 사용자들은 매우 성급하고 힘들게 뭔가를 찾는 행위를 싫어합니다. (행동과학의 연구 결과가 그렇다고 합니다) 이 것은 아이트래킹 테스트 (eye tracking test; 사용자의 눈동자를 추적해서 행동패턴을 추적하는 테스트)의 결과에도 빈번히 나오는 것인데 이제는 정말 흔한 리포트입니다. 그리고 스크롤바를 내리면 내릴 수록 더 중요하지 않을 것이라는 사용자 나름대로의 판단을 하기 때문에 동일한 정보가 노출되도 사람들 마음속에서는 어떤 링크나 정보가 페이지의 하단부에 있을 수록 weighting해서 중요도 점수를 스스로의 마음속에서 자연스럽게 감점해 버립니다.

사용자들도 하단부에 위치한 것들은 랭킹에 밀렸거나 많이 중요한것이 아니라는 것을 알고 있다는 것인데 이미 사용자들도 웹페이지의 노출방식에 훈련이 되어 있기 때문입니다. 사용자들은 이미 역으로 웹서비스의 천편일율적인 노출방식에 대해 습관 또는 학습된 행동으로 이러한 reaction을 취하는 것이고 이제 는 이에 역행하는 노출방식이나 디스플레이 방식은 스스로 거부하려합니다. 다만 리스팅형(나열해서 뭔가를 보여주는 형태)이 아닌 Front door page(포탈사이트의 맨 처음 페이지)의 경우에는 패턴이 다른 것으로 알고 있습니다만 이쪽은 제 관심밖이라 아는 것이 많지 않습니다. ATF에 관한 세부적인 것이나 가장 중요한 hot spot(자주 노출되거나 클릭하는 영역), click rate(링크 클릭 비율), behavior pattern(원하는 것을 찾아가는 행동 패턴)은 UI(User interface)나 여러가지 세부적인 요소에 따라 다소 차이가 있을 수 있습니다만 기본적으로는 거의 모든 웹사이트가 유사한 것으로 알고 있습니다. 보통, 어떤 검색포탈사이트의 검색결과에서 두 번째로 시선을 받는 중요한 위치는 보통 광고가 차지합니다. 검색 포탈이라면 키워드광고가 나오는 곳입니다.
구글, 네이버, 야후 다 똑같습니다. 구글은 이스트레일(east rail; 검색결과 페이지에서 오른쪽 컬럼)에 나오지 않느냐? 라고 물으시는 분이 있는데 찾아 보시면 중앙 부분에 광고가 노출 되는 것들이 있습니다. 첫번째의 시선받는 곳은 메뉴나 주요기능이 차지합니다. 검색포탈이라면 검색입력상자(Search bar)나 그런것들이지요. 여기에 광고를 싫지는 않습니다만 최근에는 검색입력상자에 키워드등을 광고형태로 노출해서 검색을 유도하는 것도 보실 수 있습니다. 보통의 포탈사이트에서 왜 광고나 각종정보를 첫페이지의 상단부에 덕지덕지 붙이고 가능한 중요한 단어들만 나열해서 백화점식으로 나열하는지에 대한 첫번째 이유중 하나와도 ATF는 관련이 있습니다.
저렇게 하지 않으면 안될까라는 생각을 많이하고 천편일률적인 나열방식을 거의 모든 포탈이 채택하고 있어 차별화가 안된다는 것을 알고 있지만 바꾸려고 해도 이미 많은 사용자의 행동패턴이 저런 방식에 익숙해져 있어서 그렇게 하지 못하는 것입니다.