디자이너의 UX writing
UX writing을 시작하는 3가지 원칙
디자이너가 UX writing을 잘하는 것은 중요하다. 아이콘이나 버튼 등의 시각적인 요소를 사용하여 화면을 그리는 것만큼이나 사용성을 높이는 데 큰 영향을 끼치기 때문이다. 알맞은 상황에 적절하게 배치된 마이크로카피는 단순한 텍스트 그 이상의 힘을 가진다.
인터페이스와 사용자 사이의 언어적 연결은 사용자 경험이라는 퍼즐을 완성하는 마지막 한 조각
- 킨너렛 이프라 Kinneret Yifrah, <마이크로카피>
마이크로카피라는 용어는 2009년, 조슈아 포터로부터 시작되었다. 한 사이트에서 청구서 주소 입력 에러로 온라인 거래의 5~10%가 실패, 금전적 손실 발생하고 있었는데 그는 "신용카드 대금 청구서의 주소와 같은지 꼭 확인해 주세요."라는 간단한 문장을 추가함으로써 이를 해결했다. 정확한 카피라이팅 덕분에 에러 대응 시간을 줄일 수 있었고, 고객 전환이 개선돼 수익을 증가시킨 것이다. 이 경험 이후 <Writing Microcopy>라는 제목으로 정확한 위치와 타이밍에 몇 개의 단어를 추가함으로써 사용자 경험(UX)을 완전히 바꿀 수 있다는 생각을 공유한 것이 시초가 되었다.
"신용카드 대금 청구서의 주소와 같은지 꼭 확인해 주세요."라는 문장을 추가한 것이 마이크로카피의 시초이다.이처럼 마이크로카피는 제품에서 텍스트로 표시되는 단어나 문구를 뜻한다. 섹션의 제목이나 탭 레이블, Placeholder, Validation Message와 같은 것들이다. 그리고 이러한 마이크로카피를 작성하는 행위를 UX writing이라고 한다.
섹션 제목, 탭 레이블, Placeholder, Validation Message 등 다양한 마이크로카피로 구성된 화면들구글은 2007년 I/O에서 <How Words Can Make Your Product Stand Out> 라는 주제로 UX writing을 처음 소개했다. UX writer인 Maggie Stanphill은 강연에서 마이크로카피가 가져올 수 있는 비즈니스 임팩트를 몇 가지 사례로 보여준다.
구글의 호텔 검색에서 Book a Room을 Check availability로 바꾸는 것만으로 engagement가 17% 상승했다. 기능에는 변화가 없지만, 사용자가 의사 결정을 할 때 사고하는 흐름에 맞게 마이크로카피를 변경했고 실제 효과를 확인한 것이다.
UX writing은 제품 내에서 사용자를 안내하고 올바른 상호 작용을 할 수 있도록 돕는다. 사용자와 인터페이스를 끈끈하게 연결하는 것은 제품을 만드는 우리의 역할이다. 그러므로 적절한 단어를 선택하고 정확한 표현을 사용하여 더나은 사용자 경험을 만들기 위한 노력은 필수적이다.
UX writing을 시작하는 3가지 원칙
책 <마이크로카피>와 How Words Can Make Your Product Stand Out (Google I/O '17)를 바탕으로 UX writing을 시작할 때 알아두어야 할 원칙을 3가지로 정리해보았다.
1. 보이스앤톤부터 디자인하기
2. 명확하면서 간결하고, 유용한 표현 사용하기
3. 사용자의 눈으로 다시 한번 확인하기
1. 보이스앤톤부터 디자인하기
사용자가 제품에 갖는 감정적인 연결을 브랜드 보이스라고 한다. 인터페이스를 사람처럼 느끼게 만드는 주요 요소이며, 사용자의 마음을 얻고 사용자가 반응하도록 동기를 부여하는 감정적인 연결 고리를 만든다.
책 <마이크로카피>에 따르면 사람들은 컴퓨터를 다룰 때 다른 사람을 대할 때와 같은 사회적 규범을 따르는 것을 발견했다고 한다. 쉽게 말하면, 기계와 소통 시에도 사람과 대화하는 느낌을 기대한다는 것이다. 인터페이스의 성격이 일관되지 않을 때 사용자의 혼란을 초래할 수 있다. 특히 콘텐츠는 언어적 요소이고 보이스 톤은 비언어적 요소인데 이 두 요소가 일치하지 않는 경우 사용자는 의심을 품게 되고 거부감을 느낀다.
보이스앤톤을 디자인하는 첫 번째 단계는 제품을 분석하는 것에서 시작한다. 먼저 브랜드와 타깃 고객을 명료하게 정의해야 한다. 또한 경쟁사로부터 갖는 차별성을 찾아내 가장 뛰어난 면을 보이스앤톤으로 표현할 방법을 고려해야 한다.
구글의 보이스앤톤
구글이라는 브랜드의 장점은 검색 페이지가 갖는 단순성과 사용 편의성이다. 기념일마다 로고에 특징을 담는 Google Doodle의 유쾌함 또한 구글을 대표하는 특징이다. 구글은 이러한 유용성과 낙관주의를 브랜드 보이스로 표현한다.
데이터를 사용하지 않고도 문제없이 서비스를 사용할 수 있다는 이점을 유쾌한 일러스트와 함께 나타냈다.배달의 민족과 왓챠의 보이스앤톤
배달의 민족(이하, 배민)은 '배민다움'이라는 캐치프레이즈를 내세우며 강력한 브랜드 아이덴티티를 가져가는 회사 중 하나이다. 배민의 페르소나는 막내들이 대하기 어렵지 않은 친근한 동네 형, 소통하기 쉬운 복학생 형이다. 마이크로카피에서 유머러스하고 친근한 이미지를 느낄 수 있다.
배달의 민족 앱 화면왓챠라는 브랜드에는 모두의 다름이 인정받고 개인의 취향이 존중받는, 더 다양한 세상을 만들겠다는 다짐이 담겨있다고 한다. 대세가 아닌 나만의 취향, 나만의 콘텐츠를 즐길 수 있는 것이 왓챠가 가진 특징이다. 기술 기반의 추천 기능이 자칫 기계적인 느낌을 줄 수 있지만, 친근하고 다정한 느낌의 보이스앤톤으로 제품의 성격을 잘 끌어나가고 있다.
왓챠피디아 앱 화면2. 명확하고 간결하면서 유용한 표현 사용하기
UX writing은 마이크로카피를 이용해 사용자와 소통하는 작업이다. 백 엔드 언어를 사용자 언어로 변환하는 과정이 필요하다. 제품 안에서 일어나는 여러 가지 사건을 사용자가 잘 이해할 수 있도록 우리는 명확하고 간결하면서 유용한 표현들로 마이크로카피를 작성해야 한다.
Google I/O '17 강연에서는 명확성, 간결성, 유용성의 3가지 체크리스트로 마이크로카피를 점검하는 과정을 소개한다.
아래와 같은 팝업이 있다. 사용자가 제품에 로그인을 시도한다. 어떤 이유에서인지 잘못된 비밀번호를 입력하고 앱에서는 이 상황을 사용자에게 알린다.
명확성 Clear
전문 용어보다는 사용자의 맥락에 맞는 행동을 표현하세요.
실패와 인증, 이 문구는 완전히 제품의 입장에서 쓰여졌다. 실패는 소프트웨어의 문제일 뿐 사용자의 문제가 아니기 때문이다. 실패라는 단어를 조금 낮출 필요가 있다. 로그인을 완료하지 못한 것을 큰 실패라고 부르기에는 사용자의 입장에서 과한 면이 있다.
또한 사용자에게 인증보다는 로그인이라는 단어가 더 익숙한 표현이다. 실패와 인증이라는 기술적 상황을 로그인으로 대체했다. 이를 통해 명확성이 정확함을 뜻하지 않는다는 것을 알 수 있다. 다시 말해 정확한 상황을 표현한다고 해서 사용자가 명확하게 인지할 수 있다는 건 아니라는 의미이다. 그보다는 사용자가 이해하기에 충분한 컨텍스트가 무엇인지를 고려해야 한다.
글을 명확하게 만들 수 있는 또 다른 방법은 동사에 주의를 기울이는 것이다. 동사는 행동을 나타내며, 문장에서 가장 강력한 힘을 갖고 있다.
에러가 '발생했다'는 문장은 상황을 바로 인식하기에는 약한 표현이다. 제품 내부의 상태를 설명하는 것이기 때문이다. 따라서 사용자의 행동을 중심으로 문장을 바꾸는 것이 좋다.
아래는 명확성을 기준으로 마이크로카피를 수정한 결과이다. 기술적인 전문 용어를 없애고 사용자의 맥락에 맞는 행동을 묘사하였다.
특히 명확성은 UX writing뿐 만 아니라 제품을 소개하거나 앱 업데이트 문서를 작성할 때도 해당한다. 기술적인 사양을 말하는 대신 사용자가 접하게 될 새로운 기능, 할 수 있는 작업을 안내하는 데 집중해야 한다.
간결성 Concise
군더더기 없이 꼭 필요한 만큼의 단어만 사용하세요.
간결함을 짧다는 것과 혼동해서는 안 된다. 강연에서는 economical이라는 표현을 사용한다. 단어의 뜻처럼 경제적이고 실속있게, 딱 필요한 만큼 쓰는 것이다. 화면의 모든 단어가 필요한 기능을 설명하는 데 쓰이고 있는지 체크하자. 그렇지 않다면 불필요한 공간을 낭비하고 있는 것이다.
위 팝업에서 헤더인 '로그인 에러'는 큰 기능을 하지 않는다. 헤더가 없이도 팝업을 이해하기 충분하기 때문에 생략해도 무방하다.
이 부분은 디자인에도 적용되는 중요한 사항이다. 디자인을 하다 보면 불필요한 헤더, 하위 텍스트, 사이드바 또는 설명 등으로 화면을 채워야 한다는 압박을 받곤 한다. 하지만 디자인은 무엇인가를 추가할 때가 아니라 더는 버릴 것이 없을 때 완성된다. 특히나 모바일은 스크린이 크지 않기 때문에 사용자가 작업을 수행할 때 필요한 것이 아니라면 화면을 차지할 필요가 없다.
여기서 만족하지 않고 텍스트를 제거하기 위해 더 엄격한 규칙을 적용할 수도 있다.
실제 예시에서는 You entered an incorrect password를 Wrong password로 줄였다. 영문법은 목적어가 맨 끝에 오기 때문에 본론을 더 빨리 보여주기 위해서 목적어를 제외한 나머지 부분은 과감히 생략했다.
이렇게까지 생략이 가능한 이유는 다음과 같다. 사용자는 화면의 모든 단어를 읽지 않는다. 읽는다기보다 스캔하는 것에 가깝다. 다음은 iTracking에서 연구한 모의 히트맵이다.
사람들의 초점이 닿는 곳을 색상으로 표시한 것을 보면 F자 패턴을 그리는 것을 확인할 수 있다. 화면의 첫 번째 줄, 두 번째 줄을 읽고 그다음부터는 섹션을 건너뛴다. 각 섹션의 첫 번째 또는 두 번째 단어만 스치듯이 훑어 내려간다.
따라서 우리는 마이크로카피를 간결하게 유지하고, 중요한 것을 우선으로 보여주는 Frontloading 방식으로 디자인을 해야 한다.
유용성 Useful
사용자가 할 수 있는 행동을 제시해주세요.
유용성 파트에서는 팝업 예시에서 한 번도 손대지 않았던 Call to action(이하 CTA)을 다룬다. 여기서 '확인'은 좋은 CTA가 아니다. 비밀번호가 잘못되었다면 사용자의 행동은 확인으로 끝나지 않기 때문이다. CTA는 말 그대로 사용자의 행동을 유도해야 한다. 아마도 사용자는 다시 한번 시도하고 싶을 것이다.
만일 비밀번호가 무엇이었는지 기억해내지 못한다면 재설정을 하고 싶을 수도 있다. 비밀번호 까먹은 경우 사용자가 취할 수 있는 유일한 옵션이 다시 시도라면 짜증만 날 뿐이다.
명확성, 간결성, 유용성을 바탕으로 아래와 같은 결과물이 완성되었다. 이 세 가지 법칙에 주의를 기울인다면 제품과 사용자를 더 잘 연결할 수 있게 될 것이다. UX writing에 있어 중요한 것은 사용자에게 주의를 기울이는 것이다. 충분히 고려하지 않은 마이크로카피로 인해 실제로 앱은 사용량이 감소하고 사용자의 외면을 받는다.
명확성, 간결성, 유용성을 설명한 Allison은 UX writing은 과학이 아니라는 점을 강조한다. 때로는 세 가지 원칙들이 서로 배치되는 상황에 놓이기도 한다. 명확성이나 사용성을 위해 간결함을 포기해야 할 때도 있다.
“These three principles aren't in perfect harmony. There is a kind of tension in between them. They're competing with each other.”
- Allison Rung, UX Writer, Google
실제로 조금 전 팝업의 마이크로카피를 수정하는 과정에서도 이를 확인할 수 있다. 간결성을 바탕으로 내용을 생략하는 단계에서는 명확성이 약간 줄었다. 그리고 유용성을 얻기 위해 마이크로카피를 추가하면서 이전보다 간결성이 떨어지게 되었다.
이처럼 UX writing은 명확성과 간결성, 그리고 유용성 사이의 올바른 균형을 찾는 것이다. 상황의 맥락을 고려하여 그 순간에 사용자가 하고 싶어 할 만한 행동이 무엇인지 생각하고 가장 적당한 답을 찾아가는 과정이다. 그리고 이 과정에서 꼭 필요한 것이 바로 앞서 설명한 브랜드의 보이스앤톤이다. 브랜드 보이스는 제품 특성에 맞는 방식으로 명확성과 간결성, 유용성 사이의 적절한 균형을 판단할 수 있도록 안내한다.
3. 사용자의 눈으로 다시 한번 확인하기
우려와 의심 해소하기
아직 깊은 유대를 형성하기 전이라면 사용자는 우리의 제품을 신뢰해야 할 이유가 없다. 공을 들여 신뢰를 얻는 과정이 필요하다. 사용자가 당연히 가질만한 우려와 의심에 주목하고 제품의 인터페이스 곳곳에서 적극적으로 표현해야 한다. 사용자의 우려를 인식하고 존중한다는 것과 안심해도 된다는 것이 분명히 드러나도록 마이크로카피를 작성해야 한다.
특히 사용자가 우려하는 사항에는 다음과 같은 것들이 있다.
이메일 주소 제공
특별한 개인 정보 제공
소셜 미디어 계정으로 회원 가입하기
안심결제
무료 체험판
환경설정 및 시스템 구성
다운로드 또는 설치
이전의 왓챠에서 사용했던 마이크로카피들.업데이트 이후 해당 마이크로카피는 삭제되었지만, 사용자의 우려와 의심을 해소하는 사례로 적절하다고 생각되어 가져왔다.
지식의 저주 없애기
이미 어느 정도 지식을 가진 사람은 그 지식이 부족한 사람의 관점에서 사물을 보지 못한다는 것, 이것이 바로 지식의 저주이다. 제품을 만드는 사람의 머릿속에는 전체적인 그림이 입력되어 있다. 이 상태에서 마이크로카피를 작성하다 보면 본인도 모르게 맥락을 생략하고 꼭 필요한 내용을 빠뜨리는 불상사가 생긴다. 이러한 지식의 저주는 사용자와 인터페이스 사이에 간격을 만든다.
일단 무언가를 알고 나면 알지 못한다는 것이 어떤 느낌인지 상상할 수 없게 되는 것이다. 우리가 아는 정보가 '저주'를 내린 셈이다. 또한 이러한 저주는 우리의 지식을 타인에게 전달하기 어렵게 만든다. 우리는 이제 듣는 사람의 심정을 두 번 다시 느낄 수 없기 때문이다.
-댄 히스, 칩 히스, <스틱>
Photo by Alvaro Reyes on Unsplash책 <스틱>에 따르면 '지식의 저주'로부터 확실히 벗어나는 방법은 두 가지라고 한다.
첫째는 아예 처음부터 아무것도 배우지 않는 것
둘째는 메시지를 받아들여 변형하는 것
당연하게도 첫 번째인 아예 처음부터 아무것도 배우지 않는 것은 불가능하다. 이미 알고 있는 것을 배우지 않은 상태로 되돌리는 방법 또한 현대 과학으로 아직 발견되지 않았다. 그렇다면 우리는 두 번째 방법을 써야 한다. 메시지를 받아들여 변경하는 방법은 다음과 같다.
마이크로카피를 작성하고 앞서 말한 원칙을 체크리스트로 두고 계속해서 질문을 던져본다. 이 메시지는 명확한가? 군더더기는 없는가? 사용자의 우려와 의심을 충분히 해소해주었나? 이런 식으로 계속해서 스스로 점검하고 고쳐나간다. 마이크로카피는 사용자가 가질 수 있는 모든 질문에 즉각적이고 이해하기 쉬운 답을 제공해야 한다. 그렇게 사용자는 제품에 확신을 갖게 된다.
UX writing을 도와주는 3가지 원칙을 정리해보았다. 다시 한번 말하지만, UX writing에 옳은 정답이란 없다. 브랜드의 성격에 따라 수많은 방법과 스타일로 작성될 수 있기 때문이다. 마이크로카피는 브랜드의 보이스앤톤에 맞게 디자인되어야 한다. 따라서 UX writing은 시작점은 체계적으로 만들어진 내부 작업 문서, 브랜드만의 공식 가이드를 만드는 것이다. 그다음 사용자가 물어볼 수 있는 일반적인 질문들로 몇 가지의 체크리스트를 만들고 완전히 새로운 사용자의 시선으로 프로세스를 확인해야 한다. 질문이 생길 수 있는 곳을 찾으려고 노력하고 계속해서 고쳐나가야 한다.
참고:
How Words Can Make Your Product Stand Out (Google I/O '17) https://youtu.be/DIGfwUt53nI
책 <마이크로카피>, <스틱>
커버 이미지: Photo by Kelly Sikkema on Unsplash
