UX 디자인을 위한 7가지 원칙
내가 디자인을 할 때 중요하게 생각하는 UX의 원칙들
UX 디자인은 알면 알수록 재미있지만 한편으로는 알면 알수록 어렵다.
'열 길 물속은 알아도 한 길 사람 속은 모른다.'
열 사람이 있다면 열 가지 생각이, 백 사람이 있다면 백가지 생각이 존재한다. UX 디자이너는 사람들의 마음과 생각을 이해하고 파악해서 디자인을 해야 하는 사람들이다. 하지만 내 마음도 잘 모르는데 남의 마음을 아는 게 어디 쉬운 일인가? 그 마음을 이해하고 파악해서 그들의 지갑을 열게 하는 것은 그야말로 산 넘어 산이다.
UX 디자인을 심미적인 측면에서만 접근한다면 당신은 UX 디자인의 기본을 다시 터득하고 올 필요가 있다. UX 디자인의 세계를 공부하면 공부할수록 이 분야는 디자인 감각만 있는 사람보다 디자인 감각을 가진 수학자, 물리학자 혹은 심리학자, 작가, 건축가에게 더 맞는 직종이라는 생각이 든다. UX 디자이너는 자신이 디자인한 화면에 대한 합당한 이유를 설명할 수 있어야 하며, 화면이 흐름을 논리적으로 설명할 수 있어야 한다. UX 디자이너는 디자인 요소, 아이콘 요소 하나하나의 존재 이유, 치수까지 자신이 세운 가설을 토대로 디자인적으로 구현해야 하는 사람들이다.
사실 UX 디자이너와 UI 디자이너는 엄연히 다른 역할을 하는 사람들이다. 대학원 시절 내 연구 주제의 주요 대상은 '노년층'이었다. 노년층의 삶을 향상하기 위한 공간을 위한 디자인 가이드라인을 주로 연구하였고 그들의 육체적, 심리적 변화에 대한 리서치를 진행하였다.
그 당시에는 노년층을 대상으로 하는 연구주제가 썩 마음에 들지 않았다. 남들처럼 반짝거리는 무언가를 디자인하고 싶었고 누구나 '우와'하고 이야기할 만한 연구 주제를 갖고 싶었다. 그렇게 석사, 박사 과정이 끝났을 때만 해도 난 내 연구주제나, 내 연구 대상에 대한 애착이 별로 없었다. 그래서 수년간 공부했던 시간을 잠시 접어 둔 채 디자인 리서처의 길이 아닌 다른 길을 기웃거렸다. 다른 길을 간 것을 후회하지는 않지만 시간이 지날수록 오랫동안 공부했던 것들에 대한 미련이 생기기 시작했다. 그제야 나는 처음부터 다시 시작한다는 마음으로 UX 디자인 공부를 하기 시작했다.
실제로 (모바일을 기반으로 하는) UX 디자인 분야는 모바일 기기가 발전하는 속도만큼 디자인 트렌드의 속도도 매우 빠르게 변화하는 분야이다. 새로운 툴이 계속 생겨나고 디자인 트렌드는 해마다 바뀐다. 현업에 있는 사람들도 꾸준히 공부하지 않으면 금세 뒤쳐지는 분야가 UX 디자인 분야이다. 그랬기 때문에 나는 거의 처음부터 다시 배우는 마음으로 UX 디자인 공부를 시작하였다. 내가 가진 지식 외에 배워야 할 것들이 정말 많았다. 그렇게 UX 디자인을 다시 공부하기 시작하면서 깨닫게 된 것이 있는데 오래전에 노년층을 대상으로 했던 연구들이 내 디자인 철학에 큰 디딤돌이 되고 있는 것이었다.
관련이 없는 점들 속에서 새로운 가능성을 찾을 수 있다.(이미지: https://www.saysamyang.com/212)그동안 내가 연구했던 노년층에 대한 연구는 공간과 사람에 집중했지만 노년층의 육체적, 심리적, 정신적 상태에 대한 리서치는 공간을 넘어 모바일 기기까지 연결되었고 모바일 기기에 익숙하지 않은 계층을 이해하는데도 큰 도움이 되었다.
내가 만난 노년층의 대부분은 지각 수용자 그룹 중에서도 가장 수용을 늦게하는 사용자들이 많았다전반적으로 봤을 때 노년층은 기계 습득이 느리거나 대부분의 테크놀로지를 가장 마지막에 받아들이는 계층에 속한다. 노년층을 대상으로 한 스마트폰 설문조사 결과를 살펴봐도 그들의 활동능력을 살펴볼 수 있다. 아래의 그래프에서 볼 수 있듯이 노년층들은 기본적인 스마트폰 활용 능력(전화 걸기, 문자 보내기, 사진 찍기 등)을 제외한 부가 기능에 대한 습득 능력은 매우 느린 것을 알 수 있다.
새로운 기계 혹은 기능을 익히는 것은 노년층에게는 또 다른 스트레스이자 어려움으로 다가온다. 나이에 따라서 변화하는 인지적인 반응도 있지만 개인적인 실수로 개인 정보나 금전이 유출이 되는 등 실질적인 피해를 입을 수 있다는 막연한 두려움도 매우 크다.
https://www.idaegu.co.kr/news/articleView.html?idxno=298302실제로 필자가 엄마(만 65세 이상)와 스마트폰에 앱 하나를 설치하기 위해선 아래와 같은 대화가 오고 간다.
나: 엄마, 앱스토어에서 <상호명> 앱 깔면 돼.
엄마: 앱스토어가 어딘데?
나: (앱스토어의 링크를 복사해서 카톡 대화창에 공유한 후) 엄마, 그냥 이거 눌러서 설치하면 돼.
엄마: (앱을 설치하면서도) 이거 설치하면 돈 빠져나가고 개인 정보 유출되는 거 아니니?
나: 그런 거 아니야. 그냥 클릭해서 설치하면 돼.
엄마: 설치는 다 했는데 어떻게 열면 되니?
나: 그냥 앱을 누르면 돼.
엄마: 아이디와 비밀번호를 입력하라는데 뭘 눌러야 돼?
나:...........
이런 대화가 비단 우리 엄마에게만 해당되는 대화는 아닐 것이다. 스마트폰에 익숙하지 않고 한 번도 앱을 설치해보지 않은 노년층 혹은 사용자라면 충분히 발생할 수 있는 문제들이다.
대학원에서 만난 노년층, 그리고 내 주변의 노년층 혹은 모바일 기기에 익숙하지 않은 사용자들과 이야기를 나누고 그들의 행동을 관찰하면서 난 앞으로 UX 디자인을 할 때 어떤 철학을 가지고 디자인을 해야 하는지를 고민하게 되었다. 인터넷을 조금만 검색해 봐도 UX 디자인의 원칙들은 쉽게 찾아볼 수 있지만 필자의 학문적인 경험, 개인적인 경험을 토대로 필자가 추구하는 UX 디자인의 7가지 원칙은 다음과 같다.
1. 단순해야 한다
2. 직관적이어야 한다
3. 쉬운 언어를 사용한다
4. One thing per page
5. 시각적 일관성을 유지한다
6. 친절하고 또 친절하게 반응하자
7. 에러 메시지를 정확하게 전달한다.
1. 단순해야 한다
디자인을 하다 보면 필요 이상의 디자인을 하게 될 때가 있다. 글을 쓸 때도 마찬가지다. 분량이 많아야 글을 좀 쓴 것 같고 아는 게 많은 것 같아서 우리는 글의 내용보다 분량에 집중할 때가 많다. (대학교 레포트를 쓸 때 장평과 폰트 크기를 키워봤던 경험이 있는 사람들이라면 이 의미를 알 것이다.)
초창기의 앱이나 웹사이트의 대표 화면은 그 회사가 제공하는 서비스를 최대한 많이 보여주는 것이었다. 다양한 사람들이 들어오는 장소인 만큼 그들의 다양성을 존중한다는 취지에서 최대한 많은 서비스를 넣어서 소비자들의 필요를 충족시켜주었다.
그런 회사에 반기를 든 대표적인 회사가 구글이다. 구글은 검색을 하는 사용자의 니즈 하나에 집중했고 검색 기능을 제외한 모든 기능을 제거하였다. 처음에 사용자들은 아무것도 없는 허허벌판이 어색하게 느껴졌지만 이내 단순하게 검색에만 집중한 구글의 검색창을 이용하기 시작했다.
검색에만 집중할 수 있게 디자인된 구글 검색창모든 회사들이 구글의 검색창처럼 핵심 상품을 하나만 보여주고 판매하기는 힘들 것이다. 여기서 강조하고 싶은 것은 앱 디자인은 너무 많은 서비스를 보여주기보단 때로는 그 기업이 전달하고 싶은 핵심 '가치'를 1-2가만 잘 전달해도 소비자들은 그 기업을 선택하게 된다.
2. 직관적이어야 한다
해외 모바일앱 디자인 사례를 분석할 때 가장 많이 언급되는 단어 중 하나가 '직관적(intuitive)'라는 단어이다.
모바일앱 디자인에서 직관적 디자인은 어떤 것을 의미할까?
직관적의 사전적 의미를 살펴보면 '판단이나 추리 따위의 사유 작용을 거치지 않고 대상을 직접적으로 파악하는 것' (출처: 표준국어대사전)으로 나와 있다.
영어의 사전적 의미는 'using or based on what one feels to be true even without conscious reasoning' 정도로 해석이 된다.
한 마디로 직관적인 기능은 그 기능을 보는 순간 설명하지 않아도 기능을 바로 알아차리는 것이라 할 수 있겠다.
하지만 직관적인 디자인을 할 때 조심해야 하는 것이 있다. 바로 직관적 디자인이 디자인의 목표가 되어서는 안 된다. 무슨 말이냐면, '직관적'이라는 단어는 사람들마다 다른 의미로 다가올 수 있다. 즉, 10대에게 '직관적'이라고 생각한 제품이 60대에겐 '직관적'이지 않을 수 있다.
위의 필자의 예에서처럼 필자에게 앱스토어 아이콘은 직관적인 아이콘으로 다가오지만 60대 엄마에게는 직관적이지 않고 앱스토어에서 앱을 사서 설치한다는 개념부터 익숙하지 않았다.
직관적인 디자인은 사용하는 나이, 성별, 문화적 차이, 문화적 배경에 따라서 달라질 수 있기 때문에 디자이너의 입장에서는 사용하기 쉽다는 개념만 적용해서는 안된다. 내가 디자인하려는 제품의 대상을 철저히 이해하고 디자인을 할 필요가 있다.
사용하는 세대층이 넓은 앱일 경우, 각 아이콘에 대한 문자적 설명을 넣어주는 것이 바람직하다3. 쉽고 간결한 언어를 사용한다.
쉽게 읽히는 글을 쓰는 것은 매우 중요하다. 나 혼자 보는 글이 아니라면 같은 글을 여러 번 반복해서 고치고 고쳐서 쉽게 쓰는 연습을 해야 한다.
마크 트웨인(Mark Twain)은 <톰 소년의 모험>을 쓴 미국의 유명한 소설가이다. 글쓰기에서 필요 없는 군더더기를 제거하는 것의 중요성을 설명할 때 그의 인용어를 종종 사용한다.
I apologize for such a long letter - I didn't have time to write a short one.
(바빠서) 긴 편지를 보내서 죄송합니다.
어려운 한자와 평소에 자주 사용하지 않은 단어들을 섞어 사용하는 글은 나 스스로 글쓰기 실력을 쌓는 데에는 도움이 될지는 몰라도 대상이 정해진 글쓰기에서는 바람직하지 않다. UX 디자인의 글쓰기는 철저히 사용자에게 맞춰져야 한다. 사용자들 중에서도 모바일에 익숙하지 않은 사용자들에게 맞춰져야 한다. 실제로 대중을 위한 글쓰기 난이도는 중학교 2학년 수준의 글쓰기로 유지하는 것이 가장 좋다는 말도 있다.
호흡이 긴 문장보다는 간결한 문장이 좋고 어려운 단어보다는 쉬운 단어로 모두가 이해할 수 있는 글을 쓰는 능력은 UX 디자이너에게도 반드시 필요한 능력이다.
4. One thing per page
모바일이라는 작은 화면 안에서 사용자에게 한꺼번에 너무 많은 정보를 강요할 때 사용자는 쉽게 이탈해 버리거나 두려움을 느낀다. 따라서 한 화면에 한 가지 행동만 집중하게 하는 디자인은 매우 단순하지만 강력하다.
개인적으로 한 페이지에서 한 가지 행동에 집중하게 해주는 one thing per page 원칙을 선호한다. 모바일에 익숙하지 않은 사용자로 하여금 내가 하는 행동에 확신을 얻을 수 있고 앱을 사용하는데 편안함을 느낄 수 있게 해주는 것은 정말 중요하기 때문이다.
영국의 모바일 뱅킹 회사인 레볼루트(Revolut)의 회원 등록 과정one thing per page 원칙은 금융과 관련된 모바일앱에서 쉽게 발견할 수 있다. 그중 UX 디자인이 정말 깔끔하다고 생각했던 앱이 있는데, 영국의 대표적인 모바일뱅킹 앱인 레볼루트(Revolut)의 개인 등록 정보 절차 과정이었다.
최근의 앱들이 사용하는 SNS를 이용한 빠른 회원가입을 유도하는 것과 달리 모바일 뱅킹 회사는 회원가입부터 개인의 상세한 정보가 들어가야 하는 앱 중의 하나이다. 따라서 회원가입 시 사용자의 이탈률을 막는 것이 가장 중요한 이슈이기도 하다.
레볼루트 앱의 회원 가입 과정은 약 14단계로 이루어져 있다. 숫자로만 느끼면 매우 긴 과정으로 보이지만 one thing per page 원칙을 적용해서 회원가입을 쉽게 유도하고 있었다.
우선 고객이 스스로 입력을 해야 하는 항목을 최소화하기 위해 자동으로 제공되는 정보들이 많았다. 개인 전화번호를 입력한 후 6 digit code를 입력할 땐 자동으로 번호가 제공되어 왔고 (그림 1), 집 주소를 적을 땐 전화번호를 기반으로 현재 국가가 자동으로 표시된다(그림 2), 이메일을 입력해야 하는 항목 역시 내 휴대폰에 입력된 이메일 주소가 제공되어 별다른 수고 없이 이메일 입력이 가능하다 (그림 3).
화면 상단의 바를 통해 회원 가입 절차 진행 과정을 볼 수 있었기 때문에 사용자들은 회원가입 여정을 눈으로 식별할 수 있었다.
필요하지만 건너뛸 수 있는 정보들 역시 한 화면에 하나씩 이해하기 쉽게 전달함으로써 긴 프로세스 과정의 이탈을 막기 위해 신경을 쓰고 있었다.
모든 모바일앱에서 one thing per page 법칙을 적용하기는 힘들다. 적어도 결제 프로세스가 들어가는 과정이나 회원가입을 해야 하거나 개인의 최소한의 정보를 얻어야 하는 상황에선 한 페이지에 한 가지의 행동에 집중하는 것이 필요하며 이런 디자인은 사용자의 이탈률을 낮추거나 결제 구매율을 높이는 좋은 수단이 될 수 있다.
또한 모바일앱에 익숙하지 않은 노년층을 대상으로 하는 앱이라면 더욱더 one thing per page원칙을 세우는 것이 좋다.
5. 시각적 일관성을 유지한다
처음 디자인을 할 때 쉽게 하는 실수 중 하나가 디자이너의 욕심이 과하게 들어간 앱을 디자인하는 것이다. 가장 쉽게 발견되는 곳이 폰트와 색상 디자인이다. 하나의 폰트로 가는 것은 너무 밋밋해 보여서 강조할 수 있는 곳에 새로운 폰트를 추가하고 또 추가한다. 하나의 색상만 사용하는 것 또한 디자이너의 손길이 들어간 느낌이 없어서 색을 더하고 또 더한다. 사용할 때는 모든 것이 필요해 보이지만 막상 모든 것을 한 곳에 모아 놓았을 때 매치되는 것은 쉽지 않다.
옷을 입을 때를 생각해보자. 옷을 잡 입고 못 입는 사람들의 차이는 어떻게 구별할 수 있을까? 나름 패셔너블하다는 사람들의 패션은 한 가지 주제로 통일을 하되 그 속에 포인트를 살리는 패션을 연출하는 사람들이 많다. 반대로 옷을 잘 못 입는 사람들의 경우, 마음에 드는 모든 패션을 머리부터 발끝까지 장착한다. 나는 잘 못 느끼지만 남들은 확연히 느끼게 되는 그런 패션 스타일을 선호하는 사람들. 내 주변에도 그런 사람이 있는가?
모바일앱의 성격에 따라서 다양한 폰트 디자인과 사이즈, 색상이 어울리는 앱이 있을 수 있다. 하지만 내 모바일의 성격이 정보 전달 혹은 일관성을 유지해야 하는 내용을 다룬다면 폰트는 2개 이상을 넘기지 않는 것이 좋다.
화면을 디자인할 때도 멋진 그래픽을 구현하기 이전에 내 디자인이 얼마나 시각적으로 일관성이 있는지를 고민하고 따져봐야 한다.
6. 친절하고 또 친절하게 반응하자.
사용자에게 친절한 앱은 어떤 앱일까? 사용하기 쉬운 앱일 수도 있지만 필요한 상황에 적절한 반응을 보여주는 앱이라고 생각한다. 사용자에게 실시간으로 피드백을 주는 것은 정말 중요하다.
그 시작은 회원가입에서부터 시작이 된다. 회원가입을 할 때 내가 등록한 이메일이 올바른 이메일인지, 미리 등록된 이메일이 아닌지를 설명해주는 것은 기본이다. 비밀번호를 생성할 때도 실컷 다 만들어 놓은 비밀번호를 평가해주기보단 실시간으로 비밀번호가 제대로 만들어지고 있다는 것을 알려주는 것이 좋다.
비밀번호를 입력할 때 실시간 반응을 보여주는 것이 필요하다
물건을 장바구니에 담았을 때 담았다는 신호를 보내거나, 결제를 완료했을 때 완료했다는 신호를 주는 것, 로딩을 하는 과정에서 로딩이 되는 시간을 보여주는 것 역시 사용자 입장에서는 친절한 디자인으로 느껴질 수 있다.
친절한 디자인이 되기 위해선 미세 상호작용 디자인을 이해할 필요가 있다. 그와 관련된 글은 아래를 참고하자.
7. 에러 메시지를 정확하게 전달한다.
우리가 생각하는 UX 디자인은 물 위에 떠 있는 빙산의 모습일 것이다. 하지만 물속에 더 큰 빙산이 있다는 것은 디자인을 끝내고 출시까지 하고 운영을 해 본 사람만 느낄 수 있는 세계가 아닐까?
처음 디자인을 할 때는 간과하게 되는 부분 중 하나가 문제가 발생했을 때 대처하는 에러 메시지 디자인이다. 만드는 입장에서는 실수에 대한 생각을 잘하지 못한다. 수개월 동안 디자인했기 때문에 내 디자인이 완벽해 보이지만 세상에 완벽한 디자인은 없다. 예상치 못하는 순간에 사용자는 실수를 하고 에러 메시지를 경험한다. 그런 순간에 얼마나 적절한 조치를 위트 있게 전달하냐는 좋은 디자인을 하는 것보다 더 중요하다.
OS X의 Human Interface Guideline에서 알림(alert)는 다음과 같이 설명하고 있다.
알리려는 상황을 명확하고 간결하게 설명할 것.
'에러가 발생했습니다.'와 같은 알림 메시지는 사용자를 혼동스럽게 만들고 짜증스럽게 만들 수 있다(...) 결과에 대해서 상세하게 설명하는 유익한 텍스트를 쓰고, 가능한 해결책이나 대안을 제시해야 한다. 왜 사용자가 해당 상황에 대해 신경을 써야 하는지를 설명하기 위해 필요한 정보를 제공해야 한다(...) 유익한 텍스트는 문제 해결을 위한 선택지를 함께 제공하는 것이 가장 좋다(...) 모든 것을 사용자의 언어로 표현해야 한다.
아직 많은 회사에서 경고 메시지, 에러 메시지는 프로덕트 매니저나 UX 디자이너, 개발자가 주로 카피를 작성한다. 하지만 구글이나 페이스북, 애플과 같은 글로벌 회사에서는 이런 에러 메시지만 전문적으로 쓰는 UX 라이터가 존재하고 더 많은 기업에서 전문 UX 라이터를 채용하고 있다.
점점 더 많은 회사에서 UX writer를 고용하고 있다아직 UX 디자이너가 에러 메시지까지 써야 하는 상황이라면 문제에 대해서 최대한 이해하기 쉽고 간결한 메시지를 전달할 수 있는 것이 필요하다.
Thomas Fuchs가 쓴 <How to write a great error message>에 따르면 에러 메시지를 쓸 때 주의해야 하는 사항은 다음과 같다.
1. 불필요한 정보에 알림 창을 무분별하게 사용하지 말라.
(Don’t abuse alerts for upselling or showing superfluous information. People will stop reading the messages that are actually important.)
2. 사용자가 메시지의 내용을 알고 있다고 섣불리 가정하지 말라. 사용자가 이해하기에 충분한 정보를 항상 포함하라.
(Don’t just assume people know about the context of a message. They might toggle between apps and see your message days after it happened. Always include enough information for users to make sense of it.)
3. 친근하고 비 기술적이며 위협적이지 않은 목소리를 사용하라.
(Use a friendly, non-technical, non-threatening tone of voice.)
마치며
지금까지 필자가 추구하는 UX 디자인 원칙을 나누어 보았다. 위에 언급된 원칙들은 이미 UX 디자인에서 많이 사용되고 있는 원칙들이다. 특별할 것도 특이할 것도 없는 원칙들이다. 위에 언급된 원칙 외에도 더 많은 UX 원칙이 UX 디자인에 적용된다.
모두가 아는 원칙들을 굳이 한 번 더 설명을 하는 첫 번째 이유는 나 자신을 위해서이다. UX 디자인을 할 때 원칙을 생각하면서 디자인을 해야 한다는 스스로를 위한 다짐이 가장 크다. 두 번째 이유는 UX 디자인 세계에 입문하는 사람들을 위한 당부이자 부탁의 메시지이다. 처음 UX 디자인을 시작하는 디자이너들이라면 UX 디자인의 '디자인'에 집중하기보다는 'UX(user centerd)-사용자 중심'에 집중을 해서 사용자들의 마음을 헤아리고 이해하는 것이 UX 디자이너가 될 수 있기를 바란다.
