UX는 어둠의 세계에서만 존재하는가?

우리는 프로젝트에서 작업한 산출물에 대해서 사용자들이 알아주기를 바란다. 그리고 실제로 사용자들은 오감을 통해서 그것을 경험하게 된다. 예를 들면, 디자이너의 시안을 통해서 심미적인 경험을, 개발자의 소스 코드를 통해서 속도의 체감 등을 경험하게 된다. 하지만, UX의 산출물은 어떠할까?

UX 산출물 만큼 사용자들이 오감을 통해 느끼기에 쉽지 않은 것도 없다. 사용자들이 UX의 산출물에 대해서 느끼는 것은 어떤 특정 부분이 아닌 다른 산출물을 결합한 총체적인 경험이기 때문에, UX의 산출물에 대해서는 따로 떼어 놓고 이야기할 수 없다. 예를 들어, 사용성이 좋은 서비스나 제품이라면 사용자가 별 다른 어려움 없이 사용하기 때문에, UX 산출물 자체에 대한 관심이나 인지를 하지 못한다. '어..사용성이 좋네..' 라고 느끼면서 서비스나 제품을 이용하는 사용자는 거의 없다. 또한, UX 산출물 자체가 디자인 작업이나 개발 작업에 자연스럽게 녹아들기 때문에 최종 산출물에서 UX 산출물이 어떻게 적용되었는지 평가하기가 쉽지 않다. 그렇기 때문에, 조직 내에서도 UX 산출물의 결과 및 영향력에 대해서 평가하라는 내용을 전달 받으면 어떻게 해당 내용을 평가해서 공유해야 하는지 막막할 때가 있다. 그렇다고 저희도 몰라요~ 라고 이야기 할 수도 없지 않는가...

그러면 과연 UX 산출물의 결과를 가시적으로 볼 수 없는 것인가? 볼 수 있는 경우가 있다. 예를 들면, 사용성이 안 좋은 경우이다. 이 때에는 사용자들이 바로 불평불만을 털어놓기 시작한다. 왜 이런 서비스나 제품을 만들었는지 이해 자체를 못한다. 그리고 비난의 화살은 UX를 하는 사람에게 향할 수 있다.

UX 산출물은 좋은 경험을 제공해 줄 때는 안 보지이만, 나쁜 경험을 제공해 줄 때에만 유관부서에게 보여지는 것인가? 그렇다면, 우리는 닌자와 같이 어둠의 세계에서만 갇혀 살아야 하는 존재인가? 우리는 끊임없이 음지에서 양지로 나올 수 있도록 노력해야 한다. 사용자 입장에서 나쁜 서비스나 제품에 대해서 UX를 적용했을 때, 어떻게 개선될 수 있으며 어떻게 사용자에게 좋은 경험을 제공해 주게 되는지 계속해서 알려줘야 한다. 그래야만 UX에 대한 중요성이 사내에도 공유될 수 있을 것이다.

Scrolling and Attention

페이지 로딩이 끝났다. 웹 사이트의 내용들이 보이기 시작했다. 어떤 것을 보고 어떤 것을 클릭해서 더 볼지 결정해야 한다. 시간은 없다. 평균적으로 25초 이내에 어디로 이동할 것인지 결정하고 클릭까지 해야 한다. 화면 아래에도 무언가 내용이 더 있을 것이다. 스크롤을 해서 화면 아래의 내용을 확인할 것인가 또한 결정해야 한다. 페이지 안에서 머무는 제한된 시간은 점점 짧아진다. 압박이다. 마음이 조급해진다. "

 

 

웹 사이트를 설계하다 보면 고민이 생긴다. 컨텐츠의 위치를 고려하다 페이지 길이를 어느 정도까지 해야 할 것인지, 화면 상단에 어떤 것을 우선적으로 배치해야 할 것인지에 대해서 고민하게 된다. 가장 중요하다고 판단되는 내용을 화면 상단에 배치하는 전략을 세운다. 그렇다고 해서 화면 하단을 포기하기에는 공간적인 낭비가 되는 것 같아 꺼린다. 이럴 때 사용자의 이용 행동 패턴은 어떻게 되는지 확인해야 한다.

 

이와 관련하여, 최근 Jacob Nielson은 "Scroliing and Attention"이라는 아티클에서 사용자들이 웹 페이지를 볼 때 화면 상단(above the fold)을 80.3%, 화면 하단(below the fold)을 19.7% 비율로 본다고 발표하였다. 그리고, 이것을 토대로 화면 상단에 중요한 내용을 우선적으로 배치해야 한다고 주장하고 있다. 화면 상단 중심으로 사용자들이 탐색을 한다는 직관성 의견에 객관적인 데이터를 제공하고 있는 것이다.

 

이 연구 결과를 보면서, 당연한 것 2가지가 머리 속에 바로 떠 올랐다. 그리고 그것 때문에 이런 현상이 당연한게 아닐까 하는 생각을 하게 된다.

 

• 웹 사이트를 설계할 때, 컨텐츠의 중요도를 고려하여 중요도가 높은 것부터 가장 눈에 잘 띄는 위치가 배치해야 한다.
• 사용자는 우리가 생각하는 것 이상으로 무지무지하게 게으르다. 주는 것만 받아 먹는 경향이 매우 강하다.

 

 

 

Selling Usability : User Experience Infiltration Tactics

지금 서울여대 교수님으로 계신 전 NHN UX Lab의 이지현 교수님과 함께 랩원들은 그 동안 한국에 UX를 전파하고, 회사 내에서도 UX Process를 만들기 위해서 많은 고생을 했다. UX에 대해서 잘 알려지지 않은 시절, 한국에서 성공적인 사례가 없었던 시기부터 UX를 알리기 위해서 정말 많은 고생을 한 것이다. 그 결과 나름 한국 기업 중 UX Process를 만든 성공적인 사례로 만들었고, 벤치마킹을 하고 싶은 부서로 만들지 않았나 생각한다. 하지만 그렇다고 NHN 내에서도 UX Process를 완벽하게 구축했다고 생각하지 않는다. 우리의 역할에 대해서, 그리고 사내에 더 많은 사람에게 UX를 단순한 지식이 아닌 서비스를 제공하는 주요 관점 중 하나로 알리기 위해서 더 많은 노력을 하고 있다.

 

그런 과정 속에 있는 나는 얼마 전에 아마존에서 한 권의 책을 알게 되었고, 지금은 너무나 정신없이 이 책을 읽고 있는 중이다. 그 책을 보면서 지난 고생했던 시절과 함께 앞으로 사내에, 더 나아가 한국에 UX를 제대로 정착시킬 것인가에 대해서 더 많은 고민을 하게 되었다. 그리고 그 안에서 나름 방법을 찾게 된 것은 아닌가 하는 생각을 하게 된다.

 

 

그 책은 John S. Rhods가 쓴  Selling Usability : User Experience Infiltration Tactics  책이다. John S. Rhods는 한국에는 잘 알려지지 않았지만, 꾸준히 UX를 전파하기 위해서 열심히 노력한 사람이다. 우리가 보기에 미국이라는 나라에서 IBM, MS, Google 등 많은 대기업 내에 UX 부서가 있고, 그들의 위치가 나름 확고하다고 생각하고 있다. 그래서 미국은 UX의 천국이 아닌가 하는 생각을 하게 될지도 모른다.

 

 

 

하지만, 미국도 아직까지는 더 많은 기업들이 UX에 대해서 제대로 이해하고 있지 못하며, 실제 조직 내에서도 그 필요성에 대해서 제대로 인식하고 있지 못한다. 그래서, UX를 하는 사람들의 고충도 한국 못지 않게 큰 것이 사실이다. 오죽했으면 User-Centered Design Stories: Real-World UCD Case Studies 이라는 책이 나올 정도였겠는가... 미국 기업 내에서도 UX를 한다는 것은 한국에서와 마찬가지로 아주 힘든 상황인 것이다.

 

Selling Usability : User Experience Infiltration Tactics  에서는 UX에 대해서 전혀 알지도 듣지도 못한 기업일지라도 어떻게 하면 UX를 정착시킬 수 있는지 나름 Tips을 제공하고 있다. 이 Tips은 John S. Rhods가 UX 컨설팅을 하면서 겪은 경험에 기초해서 나온 것이다. 실제 경험에서 나온 만큼 매우 유용한 것들이 많으며, 현재 내게 닥친 이슈에 대해서 어떻게 해결하면 좋을지 해결 방향에 대해서 조언을 해 주고 있다. 더 많은 생각과 실타레를 푸는 방식을 말이다.

 

책 자체도 매우 쉽게 쓰여져 있다. 부담없이 읽을 정도이다. 하지만, 그 안에는 무수한 보물이 숨겨져 있으며, 우리가 전략적으로 어떻게 하면 UX를 사내에 전파시킬 수 있을지에 대해서 매우 유용한 Tips이 있다. 한국에서 UX를 하는 사람, 사내에 UX를 전파하고자 하는 사람은 꼭 읽어봤으면 한다. UX를 전파한다는 것은 매우 고도화된 전략과 접근이 필요한 것이다.

 

 

왜 진작에 이런 책이 나오지 않은 것이지!!!!

 

Needs vs. Wants

Needs와 Wants...

 

Needs는 사용자들이 어떤 과제를 수행함에 있어서 반드시 필요한 요소를 말한다. 이에 반해, Want는 사용자들이 요구하는 것을 말한다. Wants는 반드시 필요한 요소는 아니지만 사용자들이 기대하는 또다른 요소이다. Needs는 과제에 의해 결정되지만, Wants는 문화, 광고, 사용자 자신이 가지고 있는 관점, 그리고 자아상(Self-image)에 의해 결정된다.

 

우리가 사용자 중심의 디자인을 제공해 주기 위해서는 기본적으로 사용자의 Needs를 파악하여, 사용자의 Needs에 부합하는 서비스나 제품을 제공해 주어야 한다. 반드시 선행적으로 제공되어야 하는 필수적인 것이다. 이에 반해, Wants는 선택사항일지도 모른다. 과제를 수행함에 있어 필수적인 요소는 아니기 때문이다. 그렇다고 해서 Wants를 무시해서는 안 된다. Needs를 반영한 서비스나 제품은 차별성을 제공해 주지 못하기 때문이다. 결국, Wants를 충족시켜줄 수 있는 것을 제공해 줌으로써, 해당 서비스나 제품의 차별성을 제공해 줄 수 있기 때문에 우리는 절대 간과할 수 있는 것이 아니다.

 

우리가 여기서 초점을 두어야 하는 것은, 과연 Wants라는 것은 무엇인가, Wants를 어떻게 파악할 수 있는가, Wants를 반영한 제품이나 서비스를 어떻게 제공해 줄 것인가 등에 대해서 심도있는 논의가 필요하다는 것이다. 이것은 쉬운 일이 아니겠지만, 우리가 반드시 고민해 봐야 하는 것이다

 

 

검색 패턴에 대한 개관 (3)

Information Scent에 근거한 검색 행동

 

 앞에서사용자는 자신의 검색 의도와 목적에 따라 검색어를 입력한다고 했다. 이 때 사용자는 이미 Information Scent라는 것을 형성하게 되며, 이 Information Scent에 근거한 탐색 패턴을 보이게 된다. Information Scent는 검색 의도나 목적에 부합하는 일련의 단어들의 집합(참조단어군)을 말한다.

 

<클릭해서 보세요>

 

위의 예시를 보면, 사용자의 검색 목적이나 의도에 따라 참조하게 되는 단어군이 달라진다. 디지털 카메라를 구입하려고 정보를 알아보게 되는 단계에서는 '리뷰', '상품명', '디지털 카메라'와 같은 단어가 중요하게 되지만, 구매 단계에서는 '무료배송', '할인'과 같은 단어가 달라지게 된다. 사용자는 검색 목적이나 의도에 따라 서로 다른 Information Scent를 형성하게 되는 것이다.

 

이 Information Scent에 대해 자세하게 알고 싶다면 Peter L.T. Pirolli가 쓴 Information Foraging Theory: Adaptive Interaction with Information 책을 참고하기 바란다. Information Scent에 대해서 너무나 잘 설명해 놓고 있다.

 

Information Scent에 근거한 핵심적인 탐색 패턴은 전형적인 F자 형태의 탐색이다. 제목을 중심으로 탐색이 이루어지며, 필요한 경우 관련성이 높고 핵심적인 부가 정보(참조단어군)에 주목하게 된다.

 

<클릭해서 보세요. 자료참조: Google Eyetracking Repot(2005), Enquiro>

 

이 때, 관련된 핵심 부가 정보는 해당 검색 결과를 클릭할 것인지 판단하는 참조적인 역할만 수행한다.

 

검색 결과 탐색 과정에서 이미지 요소의 영향력도 검색 목적 및 의도, 그리고 그에 따른 Information Scent가 어떻게 형성되었느냐에 따라 결정된다. 검색 목적 및 의도에 따라 나타난 검색 질의어가 Image-dependent한 성격을 가지고 있다면, 이미지를 참조할 가능성이 높아진다. 그리고, 이 때 이미지의 Quality가 좋을수록 클릭 가능성 또한 높아지게 된다.

 

 

인터넷 이용에 있어서의 인지 필터(Cognitive Filter) 작용과 웹 설계

다른 매체에 비해 인터넷은 사람들에게 어떤 형태로든 Interaction을 하도록 요구하고 있다. 정보가 나타나면 그 정보를 읽고 클릭을 하는 등의 최소 수준 이상의 반응을 요구하는 것이다. 이것은 인터넷이 기본적으로 Hypertext의 형식을 띄고 있기 때문에 나타난 현상이다. 사용자들은 Hypertext나 Hypermedia라는 환경 속에서 그들의 경험을 형성할 수 있는 선택 옵션을 가져야만 한다.

 

사용자들은 인터넷과 상호작용하는 동안, 먼저 어떤 정보를 볼 것인가에 대해 의사결정을 해야 하는데, 이것은 결국 관련된 웹 사이트들에 걸쳐 어떤 정보를 처리할 것인지 의사결정을 하는 것이다. 여기서 어떤 일관된 선택을 하기 위해 환경을 조작하고 자신에게 익숙한 형태로 변경할 필요성이 제기된다. 문제는 시간이 지남에 따라 Internet에 존재하는 정보의 양이 기하급수적으로 증가하고, 그 결과 사람들이 처리해야만 하는 정보의 양이 더욱 더 많아지기 때문에 심각성은 더욱 커져간다.

 

결국, 사용자들이 어떻게 그 많은 정보를 처리해야 하고, 어떻게 해야 보다 효율적이면서 신속하게 정확한 의사결정을 할 수 있는지에 대해서 관심을 가질 수 밖에 없다. 즉, 수 많은 정보를 Filtering하기 위해서 사용자들은 무엇을 어떻게 해야 하는지 이해해야만 하는 것이다.

 

인지심리학에서는 이것과 관련하여 Cognitive Filtering이라는 개념을 연구해 왔다. 외부 환경 자극을 모두 처리하기에는 인간의 인지 처리 능력(Cognitive processing capacity)가 매우 제한적이기 때문에, 한번에 처리할 수 있는 양을 제한하려고 한다. 이 때 작용하는 기제가 바로 Filter와 같은 역할을 한다는 것이다.

 

이 Filter에 의해 사람들은 수 많은 자극 중에서 자신에게 의미가 있다고 판단되는 일부 자극에 대해서만 주의를 기울이고 정보를 처리한다. 이 때 기울이는 주의를 선택적 주의(Selective Attention)이라고 한다.

 

사용자들은 사이트를 방문할 때, 어떤 목적이나 의도를 가지고 방문하고 목적이나 의도에 부합한다고 판단되는 정보에 우선적으로 주의를 기울이게 된다(Lavie et al. 2004). 하지만, 이것은 부분적으로 목적이나 의도와 관련성이 없다고 판단되는 정보에 대해서는 주의를 기울이지 않음으로써 달성될 수도 있다. 즉, Distractions을 감소시키고 중요하다고 판단되는 정보에 대해 더 많은 주의를 기울이려는 인지 기제(Cognitive mechanism)이 작용하는 것이다.

 

특히, 검색 행동에 있어서 이 부분은 매우 중요하게 부각된다. 의사결정은 사용자들에 의해 이루어지며, 사용자들은 제공되는 정보와 정보가 제공되는 방식에 대해 자신만의 방법으로 재조직화한다. 개인적인 선호와 과거 경험에 의해 재조직화되는 방법은 달라지며, 그 결과로 개인차가 발생하게 된다.

 

다음을 보자.  아래 그림은 인터넷 검색을 하면서 정보 제한(Information Restrictions)과 더불어 인지 필터(Cognitive Filter)가 어떻게 작동되는지 보여주는 하나의 예시이다.

 

 

검색 행동에서 첫번째 요소는 시작 지점(Entry Point)이다. 검색을 하는데 있어서 시작 지점이 어디냐에 따라 추후 발생되는 행동 패턴이 다소 달라진다. 가장 쉽게 생각할 수 있는 것이 브라우저의 시작 페이지가 어디냐는 것이다. 우리는 포털 사이트로, 개인 홈페이지로, 회사 홈페이로, 또는 인트라넷 홈페이지 등 다양한 페이지 중 하나를 브라우저의 시작 페이지로 설정한다. 만약, 시작 지점에서 사용자 자신이 원하는 정보가 하이퍼링크로 노출되어 있다면, 문제는 그렇게 심각하지 않다.

 

하지만, 검색을 해야 한다면 문제는 달라진다. 어떤 사용자들은 포털 또는 검색 사이트를 초기 화면으로 설정해 놓을 수도 있지만 어떤 사람들은 다른 종류의 사이트(예를 들면, 회사 홈페이지나 개인 홈페이지 등)를 초기 화면으로 설정해 놓을 수도 있다. 만약, 포털이나 검색 사이트가 아닌 다른 사이트로 브라우저의 초기 화면으로 지정해 놓는다면 여기서도 하나의 선택을 해야 한다. 과연 어느 사이트로 가서 검색을 할 것인가? 특정 검색 사이트를 선택해서 가리고 했다면, 어떤 방법으로 갈 것인가? URL을 직접 입력해서 갈까? 아니면 즐겨찾기에 저장해 놓은 것을 통해 이동을 할 것인가? 검색 사이트로 이동했다면, 이번에는 검색어를 입력해야 한다. 어떤 검색어를 입력해야 내가 원하는 정보를 빠르게 얻을 수 있을까? 검색어를 선택해서 입력하니 검색결과가 나타났다. 어떤 검색결과에 내가 원하는 정보가 있을까? 아니면 추천검색어가 있는데 추천검색어를 통해서 접근하면 더 빠르게 정보를 얻을 수 있을까? 그 이후에도 끊임없이 선택의 순간이 온다.

 

즉, 우리는 매 순간 다양하고 방대한 정보 중에서 선택해야 하는 끊임없는 암묵적인 강요를 받고 있다. 하지만, 문제는 시간이 지나면서 정보를 얻게 되면서 더욱 더 많은 것을 기억해야 하고, 그 중에서 올바른 의사결정을 해야 한다. 이것은 우리에게 인지 부하(Cognitive Load)로 인해 우리의 인지 정보 처리 용량을 넘어서게 된다는 것을 의미한다. 즉, 수 많은 정보 중에서 중요하지 않다고 판단되는 정보에 대해서는 이미 주의를 기울이지 않기로 했다는 선택적 주의라는 필터가 작용해야만 한다는 것을 의미한다. 그 결과로 예를 들면, Banner Blindeness 효과와 같은 현상이 나타나는 것이다.

 

우리는 웹 사이트를 만들 때, 사용자에게 유용하다고 판단되는 가능한 많은 정보를 한번에 모두 노출시키려고 애쓰는 것을 볼 수 있다. 하지만, 이것은 엄밀히 말해 인간의 인지 처리 능력을 무시한 행동일 것이다. 인간의 인지 처리 능력, 그리고 사용자가 원하는 것이 무엇인지 고려하지 않는다면 오히려 사용자들은 그 사이트를 무시할 것이다. 왜냐하면, 그 사이트에 방문해 봤자 도대체 어떻게 무엇부터 시작해야 하는지 몰라서 어려움을 느끼게 되기 때문이다.

 

마케팅에서 '선택과 집중'이라는 단어를 많이 쓴다. 한정된 자원을 효율적으로 사용하기 위해서이다. 웹 사이트를 만들 때도 마찬가지이다. 모든 것을 다 노출하기 보다는 사용자가 가장 원하는 것이 무엇인지 정보의 중요도를 고려하여 웹 사이트를 만들어야 한다. 사용자의 목적 및 의도, 그리고 사용자가 가지는 한계를 제대로 이해해야만 사용자에게 친화적인(User-friendly) 사이트를 만들 수 있을 것이다.

 

웹 설계 시 고려해야 하는 요소 - 모니터 사이즈와 해상도

웹 설계를 하다보면 고려해야 하는 요소들이 너무 많다. 그 중에서 가장 기본적이지만 생각보다 우리가 지나치는 요소가 하나 있다. 바로 모니터 사이즈와 해상도이다.

 

과거와 비교하여 우리가 사용하고 있는 모니터의 사이즈가 커지게 되고 해상도 또한 비약적으로 높아지기 시작했다. 거기에 4:6의 비율에서 와이드 모니터의 보급 증가로 인해 16:9라는 비율 또한 상당히 증가한 상태이다.

 

이것은 우리에게 많은 이익을 줄 수 있다. 과거에 비해 한 화면에서 표현할 수 있는 정보의 양과 시각적 효과들의 제약에서 다소 벗어날 수 있다는 것이다. 즉, 우리는 한 화면에서 더 많은 것들을 보여줄 수 있다.

 

하지만, 우리는 여기서 한 가지를 짚고 넘어가야 할 것이다. 일단, 주변을 살펴봐라. 사람들이 어떤 모니터 사이즈를 쓰고 있고, 해상도를 어떻게 설정해 놓고 쓰고 있는지... 나만 보더라도 일단 24인치 와이드에 1920 X 1200이라는 고해상도를 설정해 놓고 있다. 개인적으로 쓰고 있는 노트북만 하더라도 13인치 와이드에 1600 X1200 이라는 해상도를 설정해 놓고 쓰고 있다.

 

내가..그리고 내 주변 사람들이 그렇게 설정해 놓고 쓰고 있기 때문에 상대적으로 모니커 크기나 해상도에 상관없이 웹 서비스를 기획하거나 디자인을 해도 되는 것일까? 이 부분에서 한 때 심각하게 고민을 한 적이 있었다.

 

네이버 서비스와 관련된 다양한 프로젝트를 하다보면, 우리 서비스의 대상이 누구인지 고민하게 된다. (물론, 다양한 User Modeling을 통해서 다양한 시각으로 접근해서 우리의 대상을 정한다.) 사실, 서비스에 따라 다르겠지만 네이버는 어느 특정 계층이 쓰는 것이 아닌 전 국민이 쓴다는 점에서 크게 벗어나지 않는다. 여기에서부터 고민이 시작되는 것이다.

 

내외부 데이터를 이리저리 살펴보다 보니, 약간의 충격적인 사실을 접했다. 내가 생각했던 것보다.. 아니 우리가 생각했던 것보다 고해상도를 쓰는 사용자의 비율이 압도적이지 않다는 것이다. 해상도만 하더라도 1024 X 768로 설정해 놓고 쓰는 사용자의 비율이 생각한 것보다 매우 높다는 것이다. 왜 이런 비율이 나온 것일까?

 

우리 어머니만 하더라도 연세가 지긋하시다. 그래서 안경을 쓰더라도 작은 것은 잘 보지 못하신다. 그러신 분이 상당한 고해상도로 놓고 쓰신다면 눈을 찡그리시고 무슨 글자인지 보실려고 아주 많은 집중력을 필요로 한다. 그러다 보면, 조금 후에 머리가 아프시다고 컴퓨터를 꺼 버리실 것이다. 나에게는 1920 X 1200 이라는 고해상도가 매우 익숙하지만 어머니에게는 절대 그렇지 않다. 내 주변, 특히 회사 동료나 친구들을 보면 고해상도를 사용하는 비율이 매우 높다고 생각하겠지만 거기서 한발 더 나가서면 그 비율은 점점 줄어들 것이다.

 

네이버 서비스를 기획하고 디자인할 때 가장 기본이 되는 해상도는 1024 x 768이다. 매우 특별한 경우를 제외하고는 이 해상도를 가장 기본으로 한다. 물론, 1280 X 1024로 해도 괜찮지 않을까 하는 상황이 있지만, 네이버는 아직까지 1024 X 768을 기본으로 한다. 시간이 지나면 해상도 기준은 점점 올라갈 것이다. 하지만, 그것은 아무 기준 없이 변경해서는 안 된다.

 

웹 기획을 하고 설계를 하고 디자인을 할 때, 우리 서비스의 사용자가 누구인지 그리고 그들에게 최적의 경험을 제공해 주기 위해서 무엇을 해야 할지 다시 한번 고민해 봐라. 모니터 사이즈와 해상도 처럼 그냥 지나쳐도 될 것 같은 것에 대해서도 다시 한번 고민해 봐라. 그러면 나중에 더 큰 문제가 생기기 전에 미리 예방할 수 있을 것이다.

 

Smashing Editorial에서 'Screen Resolutions and Better User Experience'라는 포스팅에서 이와 관련된 내용을 논의하고 있다. 이 내용을 보면서 웹 설계 시 모니터 사이즈와 해상도를 어떻게 고려해야 할지 고민해 봤으면 한다.

Featrue Creep...

웹 서비스를 기획하거나 디자인할 때, 가장 빈번하게 발생하는 문제가 기능을 어디까지 추가해야 하는가이다. 처음에는 단순하고 명확한 컨셉에서 시작하지만 프로젝트가 진행되면 될수록 관련된 부서 및 사람들에 의해 조금씩 조금씩 기능 및 Feature가 추가되기 시작하고 나중에는 걷잡을 수 없이 많아지게 되는 것이다. 이것을 "목초지의 양"이라는 개념으로 설명하기도 하고 Joshua Porter는 "Feature Creep"이라는 단어로 표현한다.

 

말 그대로 핵심 기능이나 Feature도 아닌 부가적인 기능과 Feature로 인해 사용자의 경험을 악화시킬 수 있고 그로 인해 사용자들은 좋아하기는 커녕 오히려 해당 서비스를 외면할 가능성도 그만큼 높아진다. 얼마전, 신문에서 휴대폰에서 제공하는 기능 중 사용자들이 사용하는 기능이 20%도 안 된다고 발표했다. 다양한 기능이 통합되어 가는 컨버전스 시대에서 오히려 사용자들은 복잡해 지는 것에 대한 거부감이 발표하는 것이다.

 

TV 리모콘만 보더라도 얼마나 많은 기능 및 버튼을 제공하고 있는가... 난 리모콘을 보면 한숨부터 나온다. 실제 내가 리모콘에서 사용하는 기능 및 버튼은 단지 전원 on/off, 채널변경, 음량조절, 소스 변경 뿐이다. 아마 리모콘에서 제공하는 기능 및 버튼 중 10% 정도만 사용하는 것 같다. 나머지는 무엇을 하는 기능인지 알지도 못하고 왜 제공하는지도 잘 모르겠다.

 

사실, 기능이나 Feature를 추가하는 것은 어렵지 않다. 하지만 한번 빼려고 하면 정말 많은 고통(?)을 겪어야 한다. 특정 기능이나 Feature를 빼려고 한다면 그것을 제안한 사람에게 정말 많은 시간과 커뮤니케이션을 해야만 하고 그것은 프로젝트 진행 과정에서 정말 큰 문제가 될 수도 있다. 기간 내 프로젝트를 끝내기도 힘들어지고 중요한 핵심 기능을 먼저 고려하기 보다는 중요하지도 않는 부가 기능에 더 신경을 써야만 하기 때문이다.

 

새로운 서비스나 제품을 만들 때 우리는 모든 것을 다 고려할 수 없다. 만약 정말 필요하다면 서비스나 제품을 런칭한 후 단계적인 접근을 통해 중요도 순서에 따라 해당 기능이나 Feature를 순차적으로 적용하는 것이 좋다. 이 때에도 계속해서 고민하고 사용자 조사 등을 통해 사용자의 핵심 Needs에 얼마나 부합하고, 사용자의 핵심 Task를 절대 방해하지 않는지 끊임없이 확인하고 확인한 후 추가해야 할 것이다.

 

Joshua Porter(2008)는 이것과 관련된 단순한 도식(Schema)를 제안하고 있다. 이것은 얼핏보면 매우 단순하지만 매우 중요한 함의를 담고 있다. AOF Method라고 불리는 것인데... 하나씩 살펴보면서 지금 하고 있는 프로젝트를 다시 한번 생각해 보는 것이 중요할 것이다. 그것도 지금 당장~~!!!

 

 

#

AOF Method by Joshua Porter(2008)

 

AOF 는 Activity, Objects, 그리고 Features를 의미한다. AOF Method는 다음의 일반적인 세 단계로 구성되어 있다.

 

1. Primary Activity에 초점을 맞추어라.

     다음 질문에 가장 먼저 우리가 대답을 할 수 있어야 한다.

     "우리의 사용자는 무엇을 하는가?"

 

2. Objects를 규정해야 한다.

     Activity를 파악했다면, 그 activity를 하는 동안 사용자들이 상호작용하는 Object를 규정해야만

     한다.

    "사용자들이 상호작용하는 핵심적인 Objects는 무엇인가"

 

3. 핵심 Feature Set를 결정해야 한다.

     Activity와 Objects를 명확하게 규정했다면, 핵심 Feature Set을 파악할 수 있다. 이 때 다음

     질문에 대답을 할 수 있어야 한다.

     " Objects에 대해 사용자들이 어떤 행동을 하고 있으며, 우리가 제공하는 서비스가

      그것을 충분히 수행할 수 있도록 해주는 중요한 것은 무엇인가?"

 

 

#

다시 한번 강조하지만, 기능이나 Features를 추가할 때는 반드시 고민하고 또 고민해야 한다. 넣는 것은 쉽지만 빼는 것은 어렵다는 사실을 각인하면서... 우리 서비스의 가장 핵심적인 컨셉이 무엇인지 고민하고 사용자들이 수행하는 핵심 task에 얼마나 중요한 것인지, 핵심 Task를 방해하는 것은 아닌지... 고민하고 테스트 하고..고민하고 테스트 하고... 꼭 그래야 한다.

사람들은 웹 페이지 내 텍스트를 얼마나 읽을까?

지금까지 연구된 것에 의하면 사람들은 웹 페이지에서 제공되고 있는 다양한 요소들 - 텍스트, 이미지, 아이콘 등 - 을 자세하게 읽기 보다는 자신이 원하는 정보들을 중심으로 탐색(scanning)하는 것으로 알려져 있다. 이것은 많은 것을 시사한다. 예를 들면, 점차 웹에서 뉴스 기사를 읽는 비중이 커지면서 뉴스 사이트에서 어떻게 기사를 제공해야 하는지 고민하게 된다. 이것은 기존의 오프라인 매체와 다른 특성들로 인해 읽기(reading)와 관련하여 다른 행동 패턴을 보이기 때문이다.

 

이때 가장 고민이 되고 있는 것 중 하나가 과연 텍스트를 어느 정도 제공해야 하는가이다. 보통 한 단락은 두서너 문장으로 제공하고 단락마다 한 줄을 띄움으로써 모니터 상에서의 가독성을 높이라는 가이드가 많이 공유되어 있다. 하지만, 전체 길이를 어느 정도 제공하는 것이 가장 효과적인가에 대해서는 일반적인 합의가 없는 상태이다. 분명한 것은 텍스트의 전체 길이가 길어지더라도 사람들은 스크롤을 해서 텍스트를 끝까지 읽는 비율이 매우 높지만, 과연 그 사람들이 전체 내용에 대해서 얼마나 잘 읽고 이해할 수 있는가는 다른 문제라는 것이다.

 

Jacob Nielson의 최근 자료에 따르면, 한 페이지 내에서 제공되는 텍스트의 18%에 대해서만 사용자들이 읽는다고 한다. (사실 읽는다기 보다는 탐색scanning이라는 단어가 더 맞는 것이다). 하지만, 전체적으로 텍스트 길이가 길어지면 길어질수록 그 비율은 더 떨어진다. 그만큼 아무런 생각없이 텍스트만 잔뜩 늘어놓는 것은 사람들에게 이 텍스트를 절대 이해하지 마시오라고 강요하는 것과 동일한 것을 주는 것이다.

 

이 문제를 해결하기 위해 다양한 방법을 활용하고 있다. 해당 텍스트 아래 간단하게 전체 내용을 요약한 것을 먼저 제공해 줌으로써 사용자들이 전체 맥락을 더 잘 이해할 수 있게 해 준다거나, 좌측이나 우측에 컨텐츠의 구조를 제공하고 거기에 링크를 제공함으로써 사용자들이 더욱 쉽게 자신이 원하는 내용을 찾게 해 주기도 한다.

 

하지만 여기서 가장 중요한 것은 텍스트의 길이가 길던 짧던 가장 핵심적인 내용이 무엇이고, 그 내용을 전달해 주기 위해서 우리는 무엇을 해야 하는지에 대해서 먼저 고민해봐야 한다는 것이다. 그래야만 사용자들이 쉽고 빠르게 해당 내용을 이해할 수 있게 서비스를 제공해 줄 수 있을 것이다.

 

아래는 Jacob Nielson의 최근 자료인 "How little do users read?"이다. 한번 읽고 보고 고민해 보면 좋을 것 같다.

 

Jacob Nielson 자료 보러 가기: http://www.useit.com/alertbox/percent-text-read.html

인터넷 뉴스 사이트 레이아웃 구조를 어떻게 설정해야 하는가?

인터넷 뉴스 사이트를 디자인한다고 할 때, 가장 먼저 고민해야 하는 것이 전체적인 레이아웃 구조를 어떻게 가져가야 하는 것인가이다. 레이아웃 구조를 어떻게 설정하냐에 따라 전체적인 디자인이나 컨텐츠 구성 방식이 달라지기 때문이다. 이때, 동시에 고려해야 하는 것이 Business Goal과 User Goal이다. 두 가지 목적 중 어떤 한 가지 목적에만 치우친다면 반쪽 짜리 사이트가 될 것이며, 결국 사용자들에게 외면을 받을 것이다.

 

또한, 우리는 동시에 레이아웃 구조의 특성에 대해서 잘 알고 있어야 한다. 여기서 언급할 레이아웃 구조를 크게 두 가지 관점에서 보았다. 하나는 단 구성을 중심으로 한 레이아웃 구조이며, 또 다른 하나는 내비게이션과 컨텐츠를 중심으로 한 레이아웃 구조이다. 두 가지 관점은 서로 배타적인 것이 아니라, 병행해서 고려할 수 있는 것이다.

 

 

1. 단 구성을 중심으로 한 레이아웃 구조

 

1) 2단 구성

구조가 단순하기 때문에, 내비게이션을 쉽게 하고 정보의 가독성을 높일 수 있다는 장점이 있다. 하지만, 적은 단 구성으로 많은 양의 정보를 담을 수 없다는 단점이 있다. 특히, 배너 광고와 부가 서비스 메뉴 등이 놓여질 공간이 적절하지 않기 때문에 세심한 주의를 기울여야 한다.

 

2) 3단 구성

많은 뉴스 사이트들이 사용하는 구성방식으로서 2단 구성보다는 많은 양의 정보를 담을 수 있으며, 배너 광고 등이 놓여질 공간을 확보할 수 있다는 장점이 있다. 그러다 조밀한 텍스트이 나열을 초래하기 쉽기 때문에 가독성 측면에서는 그다지 좋다고 할 수 없다.

 

3) 4단 구성

다양한 정보를 서비스하는 포털 뉴스 사이트에서 자주 볼 수 있는 구성이다. 그만큼 4단 구성은 매우 많은 양의 링크 정보 등을 그룹핑하는데 효율적인 구성이 될 수 있다. 하지만 이용자의 시선을 줄 수 있는 가능성이 높아지는 것이 문제가 된다. 2단과 3단 구성에 비해 상대적으로 더 많은 배너 광고를 삽입할 수 있다. 가장 큰 문제는 가독성인데, 3단 구성과 비교하여 사용자들은 매우 빡빡한 텍스트들을 접하게 되어,자신이 원하는 정보를 찾는 것이 더욱 힘들어진다.

 

 

2. 내비게이션과 컨텐츠를 중심으로 한 레이아웃 구조

 

1) 뒤집힌 7자형 (Inverted 7 Layout)

가장 일반적으로 많이 사용되는 것으로서, 이용자가 정보 탐색을 위해 화면을 주시하는 순서에 따라 구성된 가장 효율적인 레이아웃이라고 할 수 있다. 화면 상단에 수평적인 패널이 놓여있고 왼편에 내비게이션을 위한 패널이 놓이며 오른쪽의 패널은 개방되어져 있는 레이아웃이다. 전달해야 하는 정보량이 많은 사이트의 경우에 이 레이아웃에 사용하며 왼편에 내비게이션 패널을 둠으로써 보다 체계적인 내비게이션을 제공할 수 있는 인터페이스를 구성하게 된다.

 

2) L자형 (L-Shaped Layout)

이 레이아웃 또한 인터넷 인터페이스를 위한 레이아웃으로 많이 사용되는 것으로, 왼편에 내비게이션을 위한 요소들을 수직적으로 배열하고 하단에 광고나 추가적인 내비게이션 도구를 제공하는 레이아우엇이다.

 

3) 양쪽으로 단을 이룬 레이아웃 (Double-Task Layout)

이 레이아웃은 스크린의 좌측과 우측 모두에 수직적인 단을 배치하고 화면 중앙에 텍스트 등의 내용을 배치하는 것이다. 메뉴가 많은 경우나 광고가 많은 경우에 경제적인 방법으로 사용딜 수 있는 레이아웃이지만, 화면이 너무 조밀해 보이는 단점도 있다.

 

4) 개방형 (Open Layout)

이 레이아웃은 가장 깔끔하고 사용하기 쉬운 레이아웃으로 내비게이션 요소들이 화면의 상단에만 나타나는 것으로 내비게이션 버튼이 적은 사이트에 이상적인 레이아웃이다.

 

 

크게 두 가지로 구분한 것을 적절하게 병행해서 사용하고 있는 것이 현재 네이버의 뉴스 서비스이다. 네이버 뉴스 서비스는 3단 구성으로 뒤집힌 7자형(Inverted 7) 레이아웃 구조를 사용하고 있다. 그리고 현재 대부분의 뉴스 사이트에서 가장 많이 선택하고 있는 구조이다.

 

 

전체적인 레이아웃 구조를 선택했다면, 그 다음 고민을 해야 하는 것이 좌우측 그리고 중앙 영역의 넓이(Width)를 어떻게 가져가야 하는 것이다. 이 때 여러 가지 요인들을 중심으로 생각할 수 있지만, 이 때 가장 우선적으로 고려해야 하는 것이 뉴스 서비스의 핵심이 라고 할 수 있는 뉴스 기사 컨텐츠가 보이는 중앙 영역이다. 가장 우선적으로 뉴스 기사를 잘 읽힐 수 있도록 해야 결국 그 서비스가

성공할 수 있기 때문이다.

 

언어심리학에서는 필요 이상이 긴 줄은 가독성을 떨어뜨리고 지루함을 주며, 너무 짧은 글줄은 빈번한 눈의 정지를 요하기 때문에 독서 속도를 감소시킨다고 한다. 컴퓨터 화면의 적당한 자간과 행간은 문장을 읽어 내려가는 데에 있어서 줄의 혼돈을 일으키지 않게 한다. 즉, 다음 줄을 정확하게 찾으려는 행간 도약 운동 (Saccadic eyemovement)을 할 때, 응시 시간(Gaze duration)에 큰 영향을 미치고 행간의 간격이 150% 이하가 되면 가독성이 떨어지게 된다.

 

Cybil Burt는 독자들이 대개 글자가 아니라 전체 형태를 통해 문맥을 이해하며, 한순간 볼 수 있는 범위는 가로 세로 1인치, 즉 12 포인트 활자 6자폭이라고 주장하고 있다. 또한 기능적 신문 디자인을 주장한 Edmund Arnold는 가독성이 가장 높은 글줄의 길이를 5.3cm로 잡고 있으며, 최소 길이를 3.7cm, 최대 길이를 8.6cm로 잡고 있다.

 

이것을 인터넷 뉴스에 적용하면 Width를 150~349 pixel로 볼 수 있으며, 최적의 글줄 길이가 215 pixel로 볼 수 있을 것이다. 하지만, 실제 오프라인과 온라인의 특성을 감안하고, 온라인 뉴스 서비스에서는 사용자가 원할 경우 폰트 사이즈를 자유롭게 변경할 수 있기 때문에 이 기준을 그대로 사용하기에는 무리가 있다.

 

하지만, 분명한 것은 레이아웃이나 Wireframe을 설계할 때 반드시 뉴스 기사를 먼저 고려하여 Width를 설정해야 한다는 것이다. 가독성을 최대한 높이면서 사용자들이 편하게 기사를 읽고 다른 기사를 탐색할 수 있는 Width를 설정해야 하는 것이다.

 

이러한 것들을 고려해서 레이아웃 구조나 Wireframe을 만든다면, 사용자의 경험을 극대화시킬 수 있을 것이다.