바닥부터 시작하는 UX 스터디 01
UX 견습생의 User Inyerface 웹페이지 뜯어보기: 시작 화면
아무것도 모르는 UX 초보가 혼자 UX 디자인을 공부하려면 무엇을 하는 게 좋을까? 이 질문은 최근 UX 디자인을 공부하기로 결심한 뒤로 나를 끊임없이 괴롭히던 난제였다. UX 디자인 공부에 도움이 되는 책을 읽어보면 어떨까? 다행히 세상에는 UX 키워드가 붙은 책들이 넘치도록 많았다. 아는 선배의 추천을 받아 몇 권의 책을 읽어보았다. 어떤 책들은 어려웠고, 어떤 책들은 나같은 사람이 읽기에도 간단했다. 하지만 뭔가 결정적으로 경험치가 쌓여간다는 느낌이 들지 않았다. 마치 교양 강의 시험을 치고 나면 학기 중에 공부했던 지식이 모두 사라지듯 책과 온라인 기사로 읽은 지식도 순식간에 휘발될 지 모른다는 생각이 불현듯 나를 스쳤다. 그렇게 몇 개의 책과, 사이트와 강좌들을 배회하다 내린 결론은 직접 해보자는 것이었다. 나는 아직 화면도, UX의 개념도 익숙하지 않다. 무엇이 좋은 UX인지도 잘 구분하기 어렵다. 하지만 직접 머리로 공부한 것들을 활용할 수 있는 기회가 있다면 아직 견습생에 불과한 나도 보다 효과적으로 성장할 수 있을 것이라고 생각한다.
이 프로젝트는 그런 마음으로 시작한 프로젝트이다. '바닥부터 시작하는 UX 스터디'는 말 그대로, UX에 대해서 잘 모르는 사람이 가장 기초부터 UX/UI에 대해서 하나씩 공부해가는 스터디 과정을 기록할 예정이다. 그 첫번째 스터디 과제로, 본 프로젝트는 'User Inyerface'라는 웹페이지를 분석하고자 한다.
'User Inyerface'는 벨기에의 IoT 제품/서비스 에이전시 Bagaar에서 제작한 웹 기반의 게임이다. 재미있는 것은, 이 웹사이트가 의도적으로 잘못 설계되어 있다는 점이다. 플레이어는 이 잘못된 웹사이트에서 가능한 빨리 폼 양식을 채워야 한다. 이 점에 착안해, 해당 웹사이트가 일부러 위반하고 있는 원칙들을 찾아보고 분석한다면, 기본적인 화면 구조를 익히는 데 도움이 될 것이다.
또한 본 프로젝트에서는 화면 분석을 위해서 스티브 크룩의 UX 저서인 「(사용자를) 생각하게 하지 마!」를 참고하고 있다. 나같은 초보 UX 견습생에게도 쉽게 읽히는 책이므로 UX공부에 관심이 있다면 추천한다.
화면에서 주는 메세지가 명확해야 한다.
화면 디자인에서 가장 중요한 것은 무엇일까? 무엇보다도 중요한 것은 '메세지의 명확성'이다. 사용자가 해당 화면을 보았을 때, 이 화면의 의도나 목적, 사용법을 파악하지 못하면 혼란에 빠지기 때문이다. 스티브 크룩의 「사용자를 생각하게 하지 마!」에서는 책의 첫장에서부터 사용자를 고민하게 해서는 안 된다고 강조하고 있다.
그렇다면, User Inyerface의 화면은 어떨까?
User Inyerface의 시작 화면위 이미지는 User Inyerface에 접속했을 때의 첫 화면이다. 얼핏 보기에는 제법 괜찮아 보일지도 모른다. 그러나 이 시작 화면은 명확성이 현저하게 떨어진다. 그 이유는 크게 두 가지에서 비롯된다.
잘못된 시각적 계층구조(정보의 위계)
사용자의 기대에 반하는 액션 설계
1.잘못된 시각적 계층구조(정보의 위계)
정보의 시각적 위계이 화면이 명확성이 떨어지는 것은 화면에서 사용자에게 전달되는 정보의 위계가 잘못 형성되어 있기 때문이다. 화면을 처음 보았을 때, 어떤 순서대로 눈에 들어오는가?
눈에 제일 먼저 들어오는 정보는 ①의 NO가 쓰여있는 녹색 버튼이다. 그렇다면 이 버튼이 화면에서 어떤 역할을 하는 것인지 바로 추론할 수 있는가? 그렇지 않다. 오히려 여러가지 의문이 먼저 떠오른다.
무엇이 아니라는 것인가?
누르면 창이 닫히는 것인가?
그럼 다음 단계로는 어떻게 넘어갈 수 있지?
②의 텍스트와는 무슨 관계가 있지?
이러한 의문을 간직한 채로 화면을 전부 둘러보고 나면, 이 화면에서 가장 의미있는 요소는 눈에 띄지도 않는 "다음 페이지로 넘어가려면 여기를 클릭하세요" 라는 ③의 문장이라는 것을 알 수 있다. 가장 의미없는 요소가 돋보이고, 사용자가 가장 알아야 하는 요소가 마지막에서야 눈에 띈다는 점에서 현재 이 화면의 시각적 계층구조는 사용자를 불편하게 만들고 있다.
사용자는 화면을 순차적으로 읽지 않는다. 그렇기 때문에 화면에서 눈에 띄지 않는 요소가 있다면 쉽게 무시해 버린다. 이 시작화면처럼 중요한 정보가 눈에 띄지 않게 처리되어 있다면 사용자는 그 요소를 찾느라 짜증내다가, 곧 피로를 느끼고 웹사이트를 떠날 것이다.
사용자는 읽지 않고 시선을 사로잡을 단어나 문구를 찾으며 대강 훑어본다. 물론 뉴스나 보고서, 제품 설명서처럼 사용자가 읽을 만한 문서가 포함된 예외적인 페이지도 존재한다. 하지만 그 페이지에서도 사용자는 읽기와 훑기를 번갈아 하곤 한다.(스티븐 크룩, 사용자를 생각하게 하지 마!, 23p)
2. 사용자의 기대에 반하는 액션 설계
클릭할 수 있는 것처럼 보이는 요소들또한 이 화면은 사용자의 기대에 반하게끔 설계되어 있어 혼란을 가중시킨다. 화면에서 사람들은 누를 수 있는 것을 찾는다. 이것들은 일반적으로 본문과 서식이 다르거나, 밑줄이 쳐져 있거나, 다른 색상으로 하이라이트 되어 있는 등 별도의 눈에 띌 수 있는 시각적인 특징을 가지고 있다.
웹페이지를 훑어볼 때 사용자는 클릭할 수 있는 요소를 구분할 시각적 단서를 찾는다. 터치스크린이라면 탭할 수 있는 요소가 될 것이다. 단서는 보통 형태(버튼, 탭), 위치(메뉴 표시줄 안), 서식(색상, 밑줄)을 통해 드러난다. (스티븐 크룩,사용자를 생각하게 하지 마!, 41p)
이 화면 같은 경우에는 아래와 같은 요소들이 클릭 가능해 보일 것이다.
돋보이는 녹색 버튼(처럼 생긴 것)
click이라고 쓰여 있고 밑줄 쳐진 텍스트
next page라고 쓰여 있고 서식이 다른 텍스트
대문자로 쓰여 있는 HERE
대문자로 쓰여 있는 GO
우리가 상대방과 대화하면서 때 그들의 반응을 기대하는 것처럼, 사용자들도 화면에서 이런 요소들을 만났을 때 자연스럽게 기대하는 반응이 있다. 예를 들어 이 페이지의 경우, NO가 붙어있는 녹색 버튼을 제외하고는 나머지 요소들을 클릭했을 때 다음 페이지로 넘어갈 수 있을 것이라고 예상하게 된다.
그러나 이 화면은 이러한 요소들을 의도적으로 사용자의 기대를 배신하기 위해 사용하고 있다. 실제로 클릭할 수 있을 것처럼 생긴 요소들은 대부분 동작하지 않는다. 일반적으로 링크가 있는 요소는 커서를 가져갔을 때 그 모양이 바뀌므로, 시간이 조금 걸리겠지만 어떤 사용자들은 진짜 링크를 찾기 위해 이 방법을 사용해 볼 수도 있을 것이다. 그러나 이 화면은 예상했다는 듯이 그 술수조차 봉쇄하고 있다. 커서를 갖다 대는 것으로는 링크를 판별할 수 없는 것이다. 그렇다면 대체 다음 페이지는 뭘 눌러야 갈 수 있는 것인가?
한참을 위 아래 번갈아가며 아무거나 누르다 보면, 대문자로 쓰인 HERE가 실제 작동하는 버튼이라는 것을 알 수 있게 된다. 해당 글자는 대문자로만 쓰여 있어 본문 텍스트들보다는 구분되는 편이지만 여타 페이크 링크나 버튼에 비해서 판독성이 현저하게 떨어진다. 그조차도 함께 놓인 GO와 혼동하기 쉽다. 이처럼, 해당 화면에는 클릭할 수 있는 요소에 대한 단서를 남용하여 사용자의 기대를 배신하고 있다.
그렇다면 어떻게 해야 이 화면을 개선할 수 있을까?
HOW TO: 메세지를 명확하게 하는 방법
1. 클릭할 수 있는 요소와 아닌 것을 명확하게 구분한다.
현재 User Inyerface의 시작화면에는 클릭할 수 있을 것처럼 보이는 요소가 너무 많이 남용되고 있다.
이를 하나로 통일시켜 사용자의 혼란을 줄인다.
2. 전달하는 메시지의 중요도에 따라 시각적 계층구조를 구성한다.
현재 화면에는 중요한 정보가 일부러 숨겨져 있다. 따라서 화면에서 중요한 정보들이 더 잘 돋보일 수 있도록 시각적 계층구조를 다시 구성한다.
User Inyerface 시작화면 수정 1안이 두가지 원칙에 따라 우선 아무 정보값이 없는 녹색 NO 버튼을 삭제하고, 누를 수 있는 링크에만 표시한 뒤
해당 문장을 보다 눈에 띄는 색상으로 바꾸었다. 필요 없는 정보들이 전부 삭제된 것 뿐인데도 이전 화면보다 훨씬 명확해 보인다. 그러나 이 화면에는 텍스트가 너무 많아 사용자가 시간을 들여 읽어야 한다는 단점이 있다. 비슷한 요소가 화면에 너무 많아지게 되면 단조로움이 강해지고 사용자가 훑어보기 어렵다.
User Inyerface 시작화면 수정 2안이 경우, 이렇게 클릭할 수 있는 부분을 보다 분명하게 표시하면 이전보다 쉽게 사용자가 바로 다음 단계로 넘어갈 수 있다. 그러나 버튼을 강조하면서 주변 텍스트의 중요도가 보다 약화되었다. 왜냐하면 "다음 페이지로 가려면 HERE를 누르세요" 라는 문장을 전부 읽지 않더라도 사용자는 버튼의 기능을 추론할 수 있기 때문이다. 따라서 버튼 주변의 텍스트들은 이제 사용자의 주의를 흩트릴 수 있는 시각적 잡음이 될 수 있다.
시각적 잡음(visual noise)은 페이지 이해를 방해하는 주요 요소 중 하나다. 복잡성이나 주의 분산에 대한 허용치는 사용자마다 차이가 있다. 페이지에 잡음이 많아도 크게 신경 쓰지 않는 사람도 있긴 하다. 하지만 대부분은 짜증을 낸다.(스티븐 크룩, 사용자를 생각하게 하지 마!, 42p)
User Inyerface 시작화면 수정 3안구구절절한 설명 텍스트 없이 이렇게 버튼 하나만 남겨도 사용자에게 저 버튼이 다음 페이지로 진행하는 링크라는 암시는 충분히 줄 수 있다. 버튼 이름 역시 START를 사용함으로써 보다 의미를 강조했다.
이제 처음 화면보다 제법 명확해졌지만 여전히 부족한 부분이 있다. 사용자가 사이트의 의도나 목적을 알기 위해서는 중간의 본문을 전부 읽어야 한다. 위에서 언급했지만 화면에서 사용자의 시선은 순차적으로 움직이지 않는다. 눈에 띄는 부분만 훑어보고 대략적인 정보를 통해 사이트를 탐색한다. 3안의 현재 화면에서는 시작 버튼을 누르면 뭔가 변화가 일어날 것임은 한눈에 눈치챌 수 있으나, 사용자가 START 버튼의 존재 이유와 목적을 파악하기 위해서는 시간이 오래 걸린다. 사이트와 해당 페이지의 목적을 소개하는 중간 본문의 정보가 잘 구분되지 않기 때문이다.
User Inyerface 시작화면 수정 4안본문을 읽어보면 위쪽 문단은 해당 페이지를 소개하고, 아래쪽 문단은 해당 페이지의 게임을 플레이하는 방법을 소개하고 있다는 것을 알 수 있다. 사용자의 입장에서는 상단 보다는 하단의 정보를 강조하는 것이 페이지를 빨리 파악하는 데 편리하다. 왜냐하면 이 페이지는 게임의 시작 화면이기 때문이다. 게임이라는 단어를 본 순간 사용자는 이 페이지가 게임을 목적으로 한다는 것을 바로 이해할 수 있다. 따라서 플레이 방법에 대한 정보를 강조하는 것이 중요하다. 또한 하단의 START 버튼과 연계했을 때에도 자연스럽다. 이렇게 본문에서 시각적 계층구조를 명확히 하면 이 웹사이트의 목적과 의도를 보다 명확하게 사용자에게 전달할 수 있다.
Comment from. DD Kim(UX Designer)
리디자인 중에는 4안보다는 오히려 3안이 마음에 들어. 3안에서 녹색 본문을 읽지 않는 사람이 4안이 되었다고 읽고 싶어질 것 같지는 않거든ㅋㅋㅋ. 그래도 중요한 내용을 읽게 하려는 시도는 좋았어. 4안은 폰트 색과 크기가 다양하다보니 오히려 어지러운 것 같아. 특히 To play the game과 그 뒷 문장은 왜 다른 색상으로 표현해야 하는지 의문이 들었어.
※ 본 연구 포스트는 Bagaar로부터 웹사이트 내용 게재 허락을 받았습니다.
User Inyerface 웹사이트: http://www.userinyerface.com
