UX Process를 정착시키는 것의 어려움

UX에 대한 관심과 화두가 집중되고 있지만, 실제 조직 내에 UX Process를 정착시키는 것은 어려운 어려운 일이다. 관심은 많지만 UX에 대한 이해가 상대적으로 부족하고, 정신없이 돌아가는 프로젝트에 UX Process를 적용시키는 것이 상당히 부담이 되기 때문이다. 그리고 유관 부서원들 간의 이해관계에 따라서 프로젝트의 진행과정이 상당히 달라지기 때문에 UX Process가 적용되는 것에 대해서 상당한 거부감이 있다. 나도 회사 내에서 UX Lab원들과 함께 UX Process를 정착시키는 과정에서 상당히 많은 시행착오와 마음고생을 했다. 그러던 중 책 하나를 알게 되었다. 그 책을 읽으면서 상당한 공감을 하였고, UX를 시작하려는 사람들이 꼭 읽어봤으면 했다.

 

 

그 책은 User-Centered Design Stories: Real-World UCD Case Studies라는 책이다. 실제 프로젝트를 진행하면서 UX Process에 대한 이해가 없는 조직과 같이 협업을 하면서 경험했던 어려움과 해결과정에 대해서 사례를 들고 있다. 그리고 UX Process를 정착시키기 위해서는 어떠한 노력과 전략이 필요한지에 대해서 예를 들어 설명하고 있다. 이 책을 읽다 보면 조직 내에 UX Process를 정착화시키는 것이 얼마나 어려운지, 그리고 정착시킨 후에도 안정되게 유지하기 위해서 얼마나 많은 노력을 해야 하는지에 대해서 잘 느끼게 된다. 하지만, 분명한 것은 UX에 대한 인식을 제대로 하게 된다면, 그 효과는 우리가 생각했던 것보다 더 엄청날 수 있다는 것이다. 그리고 그렇게 할 수 있다는 기대와 자신감을 충분히 가지고 있어야 한다.

 

 

 

조직 내에서 UX Process를 정착시키기 위해서는 상당히 전략적인 접근이 필요하다. UX Process를 도입하기 전과 도입한 후의 결과물이 얼마나 달라질 수 있는지 명확하게 보여줘야 하는데, 그 성과물의 Quality에 대해서도 널리 홍보해야 한다. 즉, 지속적으로 Best Practice가 될 수 있는 성과물들을 보여줘야 하며, 그 안에서 UX가 얼마나 훌륭한 역할을 할 수 있는지에 대해서 지속적으로 인식시켜줘야 한다. 그리고 UX에 대한 인식과 지식을 갖출 수 있도록 수많은 물밑(?) 작업도 해야 한다. 또한 UX 전문가가 될 수 있도록 역량을 충분히 키워야 하고 개인 스스로도 발전해 나가야 한다. 이것은 분명 단기간에 되는 일이 아니며, 하나씩 하나씩 돌을 쌓아 나가야 하는 것이다. 우리도 회사 내에서 UX에 대한 인식을 갖추기 위해서 수년간 노력을 했으며, 지금도 부단한 노력을 하고 있다.

 

아직 우리나라에서의 UX는 아직 걸음마도 떼지 못한 상태이다. 그만큼 어려움도 있겠지만, 분명 노력을 한다면 성과는 있을 것이다. 좌절하지 말고 항상 도전하는 자세로 열심히 함께 노력했으면 한다.

 

 

 

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

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

 

과거와 비교하여 우리가 사용하고 있는 모니터의 사이즈가 커지게 되고 해상도 또한 비약적으로 높아지기 시작했다. 거기에 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을 만든다면, 사용자의 경험을 극대화시킬 수 있을 것이다.