UX writing 분석하고 개선한 8가지 사례
작지만 강력한 효과, UX writing
들어가기에 앞서
입사 당시 사이트를 구축한지 1년도 되지 않은 우리 회사. 그간 자체적으로 만든 오프라인 수업을 신청하는 용도로만 사이트를 운영했다. 지금은 온라인으로 확장해 사이트 내에서 수업을 들을 수 있도록 개편했다.
수업 신청과 취소만 가능해도 큰 무리가 없던 이전과 달리, 이제는 필요한 메뉴와 기능도 많아지고 플로우도 복잡해졌다. 사용성을 높이는 디자인을 위해 전문 서적과 인터넷 조사, 온라인 강의를 통해 공부하며 조금씩 실행에 옮긴 사례를 정리해 보았다.
홈에서는 수업이라더니,
상세페이지에는 클래스,
추천 섹션에선 프로젝트?
같은 상품을 세 가지 용어로 불렀다.
BX 디자인에서는 일관성이 중요하다. 지향하는 가치를 다양한 브랜드 접점에 일관된 보이스와 이미지로 설해야 긍정적인 경험을 제공할 수 있는 초석이 되기 때문이다. 그중 온라인 접점이 오프라인보다 더 많은 고객을 먼저 만나게 되면서 디지털 프로덕트의 경험은 날이 갈수록 중요해지고 있다.
입사 직후, 사이트를 둘러보는데 위와 같이 일관되지 않는 부분이 여럿 보였다. 이왕 하는 거 제대로 해보고 싶다! 더 나은 서비스를 위해 UXUI디자인을 공부하는 과정에서 UX writing을 알게 되었다. 오, 앞선 문제를 해결할 수 있겠다!
UX writing이란
웹과 모바일, 앱 같은 디지털 프로덕트에 사용되는 모든 텍스트를 말한다. 텍스트로 프로덕트의 사용성을 높여 긍정적인 경험을 만드는 걸 목표로 한다. 조슈아 포터라는 프로덕트 디자이너가 한 전자상거래 사이트의 결제 단계에서 원인 모를 에러에서 비롯된 이탈율을, 한 문장의 텍스트로 해결한 사례가 주목받으면서 꾸준히 중요성이 대두되고 있다.
UX writing에 관한 자료를 찾아보며 파악한 핵심요소를 3가지로 정리했다. 이미 자세하게 소개한 글이 많기에 개념은 한 두 줄로 간단히 정리했다. 그보다 핵심요소를 어떻게 적용했는지 내 사례를 중심으로 글을 써보고 싶었다.
간단명료성
예? 뭐 때문에... 아이디? 비밀번호? 뭐가 문제죠?사용성과 가장 밀접하게 직결된 요소라고 생각한다. 복잡하고 명확하지 않은 텍스트는 사용자를 고민하게 하고 결국 포기하게 만들기 때문이다. 의미를 직관적으로 파악할 만한 쉬운 용어를 사용하고, 꼭 필요한 핵심만 남겨 중복된 내용을 최대한 제거한다. 사용자 행동에 따른 결과가 어떤 원인 때문인지, 다음 단계로 넘어가기 위해서는 어떤 행동을 해야 하는지 뾰족하게 제공해야 한다.
일관성
배달의 민족 굿즈와 앱. 오프라인과 온라인 브랜드 경험의 일관성을 보여준다.UX는 BX에 포함되는 개념이라고 한다. 온오프라인의 수많은 브랜드 경험 중 디지털 프로덕트의 경험을 UX로 구분하기 때문이다. 고로 BX를 기반으로 UX를 설계해 일관된 브랜드 톤앤보이스를 유지하는 게 필요하다.
유도성
카카오페이. 약관을 하나씩 체크할 필요 없이 '모두 동의하고 시작'을 누르면 된다.앞서 소개한 간단명료성과 일관성을 기반으로 사용자가 고민 없이 행동하고 끝까지 작업을 수행하도록 돕는 문구가 필요하다. 해야 하는 일 보다 얻을 수 있는 가치를 제공하여 사용자가 작업을 완료하도록 행동을 유도한다.
자, 이제부터 간단명료성, 일관성, 유도성이란 안경을 쓰고 우리 사이트에서 발견한 문제를 어떻게 개선했는지 소개하겠다. AS IS는 기존 사이트를, TO BE는 개편될 사이트를 거의 그대로 가져와 다듬은 이미지다.
간단명료성
l 사례1 : 휴대전화번호 인증하기
휴대전화번호 인증이 되지 않아 수업 신청을 상담톡으로 요청한 사용자가 있었다. 번호만 입력하면 인증은 정말 쉬운데, 뭐가 문제였을까? 오래 전에 인증한 전화번호를 다시 한번 인증해봤다. 음...? 왜 문자가 안 오는 거지? 시스템상 오류인가 싶었다. 한참 뒤에 다른 일 때문에 카톡에 들어갔더니, 아니, 카톡으로 인증번호가 온 게 아닌가.
우리는 인증번호를 포함한 모든 알림을 카카오톡으로 보내고 있다. 하지만 나는 카톡 알림을 끈 채로 사용한다. 여러 사이트에서 휴대전화번호를 인증해 봤지만 대부분 문자였지 카톡으로 인증한 적도 없었다.
해당 문제를 해결하기 위해 아래와 같이 개선했다.
카카오톡으로 인증번호를 발송했다는 안내 문구를 추가했다.
인증번호를 받지 못했을 경우 사용자가 해볼 수 있는 대안을 추가했다.
유선까지 포함되는 '전화번호'라는 항목명을 '휴대전화'로 더 뾰족하게 수정했다.
버튼명을 각 상황에 더 알맞게 수정했다. 번호 입력 후에는 '인증번호 받기'로, 인증번호 입력 후에는 '인증하기'로.
다행히(?) 그 사용자는 정말 시스템 오류였다.
l 사례 2 : 선물하기
사례 1과 같은 맥락으로 선물하기도 보완했다. 처음 우리 사이트에서 선물하기를 사용했을 때도 문자를 기다렸다. 왜 안 오지...?22 아니라 다를까 카톡으로 도착한 선물. 꼭 개선해야 할 사항이라 생각했다.
l 사례 3 : 모달 타입
모달 중 사용자가 항목을 선택해야 할 때 제목이 들어가는 타입이 있다. 예를 들어 공유하기를 클릭했을 때 어떤 경로로 공유할지 선택해야 하는 경우다.
그런데 이번 글을 정리하면서 작업 중인 모달 타입을 개선했다. 선택형 타입을 성격이 다른 알람형 타입에도 적용하다니. 구조에 따른 형식에 중점을 둔 나머지 의미 없이 본문 내용을 제목에 반복했다. 사용성 컨설턴트 스티브 크룩에 따르면, 일관성을 헤쳐서 명료성이 증가한다면 명료성에 더 중점을 두어야 한다고 말하기도 했다.
l 사례 4 : 취소의 두 가지 의미
이어서 작업 중인 모달. 신청한 수업을 취소하려는 경우 모달을 제공하는데 여기서 고민이 생겼다. 수업신청을 취소하려는 행동을 취소하는 경우와 말 그대로 이전에 신청한 수업을 취소하려는 경우가 생기기 때문이다. 처음엔 '취소'와 '신청취소'로 버튼을 설계했다. 하지만 '취소'를 나란히 배치하니 오히려 혼란스러웠다. 행동을 취소하는 상황에서 다른 앱은 어떤 문구를 사용하는지 살펴보았다.
크게 세 가지로 나뉘었다.
[취소] [확인]
[아니요] [예]
[아니요] [신청취소]
[취소] [확인]의 경우, 질문과 응답 간에 흐름을 따지면 '신청취소를 확인한다'는 말이 어색하다. 수업신청을 취소할 거니까 '취소'를 누르는 게 맥락상 맞게도 느껴진다.
[아니요] [예]의 경우, 질문과 응답 간에 흐름은 자연스럽다. 대화를 주고 받는 느낌도 들어 친근하게 느껴졌다. 브랜드 톤앤보이스에는 적합할지 모르겠으나 구글 메티리얼 디자인에 따르면, 모달에서 수행 작업을 선택해야 하는 경우 Yes/No 보다 Delete/Cancel 같은 명료한 단어를 권장한다.
[아니요] [신청취소]의 경우, 대화형과 명사형으로 두 단어 사이 일관성이 없다. 하지만 '신청취소'가 '네'와 '확인'에 비해 가장 명료하다. '취소' 자리에 '아니요'를 사용함으로써 '신청취소'와 헷갈릴 일도 없다.
일반적으로 왼쪽에는 작업 중단 버튼이, 오른쪽에는 작업 진행 버튼이 있다는 익숙함에 사용자는 무심코 작업을 해결할지도 모른다. 하지만 명료한 텍스트까지 곁들인다면 사용성은 더 높아지지 않을까? 어떤 방식이 우리에게 맞을지 고민한 결과, [아니요] [신청취소]를 적용했다. 사례3에서 말한 것처럼 일관성보다는 간단명료성이 우선되어야 사용성을 높일 수 있다고 판단했기 때문이다.
일관성
사이트 내 텍스트를 브랜드 톤앤보이스에 맞게 통일하는 작업을 하고 있다. 우리 브랜드는 편견 없이 누구나 쉽고 재미있게 건강한 삶을 만들기를 바란다. 이 메시지가 고객에게 잘 전달되도록 광고나 콘텐츠를 제작할 때도 부드럽지만 친근하게 표현하기 위해 노력하고 있다.
기존 사이트에는 브랜드 톤앤보이스가 부분적으로 반영되었다. 브랜드 소개 페이지에는 잘 반영되었지만 수업 상세 페이지나 자주 묻는 질문과 같이 사용자가 자주 사용하는 페이지에는 부족했다.
수업 상세 페이지 항목
자주 묻는 질문 일부유도성
l 사례 1 : 소셜계정으로 간편한 회원가입
기존에 사용하는 소셜 계정으로 다른 서비스에 쉽게 가입하고 로그인하는 '소셜로그인'. 사용자가 온라인 서비스마다 아이디와 비밀번호를 만들고 기억할 필요가 없어 흔하게 사용되고 있다. 우리도 편리한 서비스 사용을 위해 네이버와 카카오톡, 페이스북 소셜로그인을 지원한다. 실제로 소셜로그인 사용자 비율이 이메일로그인 사용자보다 높다. 그 유용성을 회원가입할 때는 드러내지 못한 게 아쉬웠다.
기존 사이트에서는 로그인할 때만 소셜계정 활용이 가능했다. 헤더나 사이드 메뉴에서 회원가입으로 바로 진입하면 소셜 계정을 통하는 접근 경로가 없어 이메일 가입만 가능했다. 회원가입을 할 때도 소셜 계정으로 가입할 수 있도록 섹션을 상단에 배치하고 간편함을 강조하는 문구를 더했다.
l 사례 2 : 비어있지 않은 빈 페이지
요즘 온라인 서비스를 보면 빈 페이지를 더 이상 그냥 빈 페이지로 두지 않는다. 찰나의 순간에도 사용자가 서비스를 이용하도록 유도 장치를 곳곳에 심어 놓는다.
스타벅스 : 좋아하는 메뉴에 하트를 누르면 나만의 메뉴를 만들 수 있다는 사용법을 설명한다.
유튜브 : 스타벅스와 같이 개성있는 일러스트가 눈길을 사로 잡는다. 바로 동영상을 업로드하는 버튼으로 작업을 유도했지만, 동영상 업로드 시 얻을 수 있는 가치를 다소 무미건조하게 표현했다.
티빙 : 유튜브처럼 바로 수행(콘텐츠 탐색)할 수 있는 버튼이 있다. 특히 콘텐츠를 추천받을 수 있다는 기대감을 불러 일으키며 부드럽게 권유하는 텍스트가 인상적이었다.
실례를 참고하여 '신청한 수업이 없습니다' 라는 말조차 없던 기존 사이트를 아래와 같이 개선했다.
이모지와 일관된 브랜드 톤앤보이스로로 친근한 이미지를 만들고자 했다.
수업을 신청하면 사용자가 어떤 가치를 얻을 수 있는지(선생님의 코칭을 직접 받을 수 있다) 설명했다.
수업을 바로 탐색하는 CTA를 배치했다.
l 사례 3 : 편리한 일정보기
기존 사이트에 전체 수업을 탐색하는 페이지에는 '날짜별로 보러가기' 버튼이 있었다. 말 그대로 날짜와 요일을 기준으로도 수업을 탐색할 수 있도록 돕기 위해서다. 강연이나 전시, 행사 등 오프라인 프로그램을 구매하는 데는 다양한 기준이 있겠지만 결국 선택에 가장 크게 작용하는 요소는 일정이기 때문이다.
그런데 아쉬운 건, 가장 가까운 일정의 수업부터 나열되어 사용자가 나중 일정을 보려면 계속 스크롤을 내려봐야 하는 게 불편했다. 전체 수업 페이지에서 겪는 불편함을 해결하지 못했다.
기존 사이트를 보완하기 위해 아래와 같이 개선했다.
기능을 사용하면 어떤 점이 유용한지 설명하는 섹션을 만들어 '수업 일정'으로 이동을 유도했다.
기능 명칭을 '날짜'대신 '수업 일정'으로 바꾸어 명료성을 높였다.
기능의 본질인 일정 탐색을 돕기 위해 달력 형태 UI를 적용했다.
계속 디깅할 수밖에
UX writing에서 중요한 3가지 요소와 이를 중심으로 실무에 적용한 사례를 정리해 보았다. 다사다난한 과정 끝에 얼마 전 사이트 개편을 마무리 지었다. 분명 위 사례가 정답은 아닐테다. 지금도 여전히 문제점을 찾고 보완하며 시행착오를 겪는 중이다. 사용성을 높이기 위해서는 계속 디깅(digging)할 수 밖에 없겠지! 이 글이 각자가 쓴 텍스트를 점검해보는 기회가 되길 바라며, 여기서 글을 마친다.
명확하고 쉽게 만들기 위해 노력을 기울인 흔적이 없는 사이트를 방문하면 사이트뿐 아니라 사이트를 만든 회사에 대한 신뢰도 줄어든다.
- 스티브 크룩, <사용자를 생각하게 하지마!>
참고
How Words Can Make Your Product Stand Out (Google I/O '17)
스티브 크룩, <사용자를 생각하게 하지마!>
