[UX Writing] Q: UX 라이팅 어떻게 써야할까요? A: 두가지로 요약해드립니다. - ❶편. 이해하기 쉽게 쓰기

이미지 자료 중 일부는 학위 연구에서 인용하였습니다.

---

 

Q. 모바일 앱 어플리케이션에서 텍스트는 몇 % 나 차지하고 있을까요?
인터콤에 따르면, 앱스토어 내 인기 앱 25개를 분석했을 때 앱 안에 들어가는 텍스트는 평균 36%정도 된다고 합니다.

심지어 Strava, Google Maps, Uber 같은 지도 및 운송 서비스와 Paypal, Revolut 등의 핀테크 서비스의 경우 인터페이스의 40% 이상을 텍스트가 차지하고 있어요.

---

소셜미디어 (Facebook, Instagram, Snapchat, TikTok, Twitter, YouTube) 26.4%
피트니스 (Fitbit, Strava) 35.3%
여행 (Airbnb, Ryanair) 35.5%
음악 및 오디오 (Apple Music, Spotify Stitcher) 36.3%
스트리밍 미디어 (Apple Music, Netflix, Prime Video, Spotify, Stitcher, YouTube) 38.8%
서비스 (Airbnb, Deliveroo, Uber) 40.5%
유통 (Amazon, eBay, Ticketmaster) 40.7%
개인 금융 (Paypal, Revolut) 41.0%
지도 및 운송 (Strava, Google Maps, Uber) 45.2%

Why 36% is the magic number: Finding the right amount of text in mobile apps

---

 

우리가 자주 사용하는 배민/토스에 텍스트가 사라진다면 어떨까요?
원하는 기능을 쉽게 찾을 수 있나요?

배달의 민족 / 토스

 

'마이크로카피'의 저자 킨너렛 이프라는 오프라인 매장에서 직원이 제품을 소개하고, 구매에 대해 감사를 표하는 것처럼 인터페이스에서 고객과의 소통이 단어를 기반으로 이루어진다고 언급했습니다. 텍스트는 서비스와 사용자 간의 인터랙션에 있어 중요한 요소라는 점을 명심해야 하죠.

 

텍스트는 사용자를 안내하는 정보 요소로서, 온보딩이나 오류 상태와 같은 순간에만 보이는 것이 아닌 사용자의 앱 경험 전반에 존재합니다. 인스타그램 시니어 디자이너 믹 레예스(Mig Reyes)는 본인의 블로그에서 <Design is still about words>라며 텍스트의 중요성을 강조하기도 했죠.

 

Reminder: Design is still about words

 

---

 

인터페이스 내에 자리한 텍스트를 UX 라이팅이라 부르고 있습니다. 사용자 경험에 영향을 주는 단어, 문장 등을 통칭하는 표현이죠.

▼ ▼▼▼ 보다 자세한 UX 라이팅 개념은 아래 아티클을 확인해 주세요:) ▼▼▼ ▼ 

[UX Writing] 개념 뽀개기 (UX 라이팅, UX 디자인, 마이크로카피, 카피 라이팅, 테크니컬 라이팅, 콘텐

 

---

 

 

그렇다면 좋은 경험을 제공하기 위해 UX 라이팅은 어떻게 쓰여야 할까요?

간결하게, 이해가 쉽게, 핵심을 먼저, 능동태, 현재 시제, 긍정문, 일관된 보이스 등 여러 방법이 소개되어 왔는데요, 복잡하게 생각할 것 없이 두 가지는 꼭 기억해야 합니다.

이해가 쉽고, 일관되게.

 

---

 

 #1. 이해하기 쉽게 

❌ 무조건 쉬운 단어만을 사용하는 것은 옳지 않아요.

🙆‍♀️ 사용자 관점에서 이해하기 쉽게 작성하는 것이 핵심입니다. 서비스가 타깃 하는 직군이 간호사나 의사라면, 그 사람들이 업무에서 자주 언급하는 단어를 사용했을 때 오히려 더 쉽고 명확하게 전달할 수 있죠. 그 외 직군 사람들이 봤을 때 외계어 같은 단어일지라도요.! 반대로 병원 방문객 중 불특정 다수가 보는(/사용하는) 서비스라면, 아이부터 노인까지 모두 이해할 수 있는 표현을 선택해야겠죠! 사용자가 평소 어떤 표현을 자주 쓰는지, 어려운 단어는 무엇인지 귀 기울인다면 금방 발견할 수 있어요.

적합한 라이팅을 통해 사용자의 합리적인 행동과 선택을 이끄는 텍스트를 마이크로 카피(micro-copy)라 부르는데요, UX 라이팅이 사용자 경험과 관련된 모든 언어와 언어의 체계를 관장한다면, 마이크로 카피는 주요 액션에 가깝게 위치한 언어를 의미합니다. (참고로! UX 라이팅 안에 마이크로 카피가 포함되어 있어요.) 

그런데.. 오히려 '이해하기 어렵게' 작성해서 비즈니스에 득이 되는 방향으로 사용자 선택을 유도하는 다크 패턴 역시 존재합니다. 아래 아티클은 다섯 가지 <UX 라이팅 다크 패턴>을 소개하는데요, 긴 문장으로 심리적 장벽을 만들거나 직관적이지 않아 오해하게끔 만드는 표현들이 이에 속합니다.

---

이해하기 어렵게 작성해 전환을 높이는 다크 패턴(Dark-pattern)

1) 부정적으로 인식될 수 있는 모든 단어를 긍정적인 문구로 위장
2) 부정적인 것을 피해 가기 위해 친숙한 제목 사용
3) 본래의 목적을 숨기기 위한 비문 사용(Self-serving Syntax)
4) 재검토를 유도하는 버튼 텍스트 (confirm-shaming과 유사)
5) 전문 용어 장벽

We Value Your Privacy (At About $0.50): Dark Patterns in UI Copy 2021

---

 

가장 대표적인 사례 몇 가지만 살펴볼게요.

 

1) 부정적으로 인식될 수 있는 모든 단어를 긍정적인 문구로 위장

Facebook과 같은 소셜 미디어 웹 사이트에서 너무나 쉽게 찾아볼 수 있는 다크 패턴입니다. SNS는 광고 상품을 위해 사용자의 검색 등 활동 테이터를 추적하기 위해 사용자 동의를 받아야 하는데요, 페이스북은 부드럽지만 모호한 대안을 위해 '추적(Tracking)' 대신 개인화 광고(Personalised Ads)라 부르고 있습니다.

그 외에도 미디엄, 아마존 등도 부정적인 표현을 위장해 사용자에게 전달하고 있습니다. 사용자의 입장에서 부정적으로 와닿는 단어를 한번 꼬아 이해하기 어렵게 만듦으로써 혼란을 주는 거죠.

- Medium ‘Paywall’ → ‘Partner Programme’
- Amazon ‘Cancellation’ → ‘End Benefits’

https://prototypr.io/post/we-value-your-privacy-at-about-0-50-dark-patterns-in-ui-copy

 

---

 

2) 부정적인 것을 피해 가기 위해 친숙한 제목 사용

이번에는 미디엄의 사례인데요, 아래 보이는 모달의 목적은 계정 업그레이드를 요청하는 것입니다. 그런데 모달 헤더를 볼까요? "당신 정말 많이 읽었네요. 정말 좋아요. (You read a lot. We like that.)"라니..

사용자가 디지털 콘텐츠를 읽지(Reading) 않고 스캔(Scanning)하듯 재빠르게 훑어보는 F자 형태를 보인다는 것은 너무나 유명한 사실입니다. 이러한 스캔 패턴을 지닌 사용자들은 서비스가 유용한지를 판단하기도 전에 페이지나 단락의 처음 일부분만 읽고 필요 없다는 생각이 들면 바로 떠나버리고 맙니다. 이는 인터페이스의 처음 두 단락에는 가장 중요한 정보가 나와 있어야 한다는 것을 시사하기도 합니다.

다시 돌아와.. 미디엄의 헤더를 읽은 누구도 그것이 실제로 무슨 의도를 전달하려는지 확신하지 못할 것입니다.

https://prototypr.io/post/we-value-your-privacy-at-about-0-50-dark-patterns-in-ui-copy

 

---

 

3) 본래의 목적을 숨기기 위한 비문 사용(Self-serving Syntax)

"A 상품을 신청하지 않으신다면, 체크박스를 선택하지 마세요."

이중 부정은 사용자를 지독히도 헷갈리게 만드는 문장인데요, 역시나.. 또 미디엄은.. 이중부정문을 통해 고의적으로 혼란을 주네요. (이쯤 되면.. 하지 말라는 건 다하는 서비스가 아닐까...) Plainlanguage.gov 역시 명확하고 이해하기 쉬운 언어를 위해 이중 부정적 진술은 피해야 한다고 가이드합니다.

 

▼그 외 여러 사례가 아래 아티클에 소개되었습니다.

We Value Your Privacy (At About $0.50): Dark Patterns in UI Copy 2021

 

---

이해하기 어렵게 작성해 혼란을 주는 이기적인 눈속임은 오히려 사용자 경험을 헤치는 요소로 작용합니다. 이러한 다크패턴은 인지+정보전달을 위한 UX 라이팅이라 보기보단 행동유도가 우선시되는 비즈니스 라이팅이라 부르는 것이 더 적합해 보이네요.

 

다시 돌아와 어떻게 하면 마이크로 카피를 이해하기 쉽게 작성할 수 있을까요?

특히 행동과 가깝게 배치된 마이크로 카피는 서비스 플로우(Flow)에 맞추어 "원활하게" 사용할 수 있도록 돕는 역할을 합니다. 사용자는 여러 화면을 통해 서비스를 경험하기 때문에, UX 라이터는 사용자의 시나리오와 여정을 자세히 파악하여 맥락에 맞는 글을 전달해야 해요. 서비스 플로우에 맞추어 어떤 정보를 어떻게 제공해야 하는지 살펴봅시다.

 

UX 라이팅 혹은 콘텐츠 전략 분야에서 Flow에 적합한 정보를 적절히 제공하기 위해 콘텐츠 맵핑 방법(Content Mapping Method)이나 웹 플로우 맵핑 방법(Web Flow Mapping Method)을 아이데이션 도구로서 사용하곤 합니다. 두 가지 모두 서비스 기획자가 어떤 정보를 제공해줘야 할지 작성하는 방법으로, 맥락에 맞는 대화형 UX 라이팅을 작성하는 데 효과적입니다. 또한, 사용자 여정 지도와 유사한 형태를 띠는데, 각 플로우에서 사용자 과업이 무엇인지, 인터페이스에서 액션 해야 하는 부분은 어디인지 등을 살펴봄으로써 필요한 전략을 세울 수 있습니다. 전자가 사용자의 질문과 과업을 기반으로 UX 라이팅을 설계한다면, 후자는 과업 별 사용자가 해야만 하는 행동과 사용자의 감정을 중심으로 플로우와 UX 라이팅을 살펴본다는 차이가 있어요. 

좌-콘텐츠 맵핑 방법(Content Mapping Method) / 우-웹 플로우 맵핑 방법(Web Flow Mapping Method)

 

두 가지 방법을 혼합해서 간단한 워크숍을 진행해 보았는데, 시각적으로 사용자 플로우를 확인할 수 있어, 빈틈을 발견하고 개선점을 아이데이션 하는데 효과적이었습니다. *^^*

// 블러 처리 //

 

---

 

맵핑하는 작업까지 필요 없다면.. 각 라이팅이 갖는 역할(목적)을 고려해 작성해 봅시다.

라이팅은 사용자 행동 이전 동기 부여를 하고, 사용자 행동에 동반되는 지침을 전달하고, 사용자 행동 이후의 피드백을 줌으로써 혼란을 막습니다. 각 라이팅이 위치하는 이유와 목적에 맞게 작성한다면, 사용자는 원하는 정보를 얻고 행동할 수 있어요. 사토레이 파도마저스키가 소개한 <11가지 UX 라이팅 텍스트 패턴>을 대입해 보면 이를 파악하기 더 쉬워집니다.

 

행동 이전의 동기 부여	행동에 동반되는 지침	행동 이후의 피드백
✓ 타이틀(Title) ✓ 디스크립션(Description) ✓ 레이블(Label) ✓ 인터랙티브 텍스트(Button and other interactive text)	✓ 조작(Control) ✓ 텍스트 입력 필드(Text input field)	✓ 확정 메시지(Confirmation message) ✓ 알림(Notification) ✓ 에러(Error) ✓ 공백 상태(Empty state) ✓ 전환 텍스트(Transitional Text)

 

상황에 따라 그에 맞는 다른 메시지를 전달하는 것은 중요하며, 사용 전/중/후 각각 사용자에게 필요한 정보가 다르다. 그에 맞는 정보를 제공하는 것이 이해하기 쉽게 작성하는 것이 사용자 수준에 맞는 단어를 선택하는 것 이전의 첫 시작점이다.

 

행동 이전의 동기 부여

✓ 타이틀(Title) ✓ 디스크립션(Description) ✓ 레이블(Label) ✓ 인터랙티브 텍스트(Button and other interactive text)

 

유저가 취해야 할 액션 혹은 콘텐츠의 맥락을 명확하게 제공하는 것이 중요합니다. 그래서 다음 단계를 명확히 하는 UX 라이팅(버튼을 눌렀을 때 어떤 일이 발생할지 명확하게 인지할 수 있는 라이팅)이 행동 이전 동기 부여를 위한 좋은 글이에요.

너무나도 유명한 Google IO17에서 발표된 Google 사례에 따르면, 다음 단계를 명확히 하는 마이크로카피 작성함으로써 17% 참여도 증대했다고 합니다. "Book a room"에서 "Check availability"라고 타이틀(Title)만 바꾼 성과였죠.

Google IO17

 

수행할 일보다 얻게 될 가치에 초점 맞추는 것도 좋은 동기 부여 방법 중 하나입니다. 이때 동작 동사를 통해 혜택 보여주는 것도 좋아요. 동작 동사는 서비스로부터 어떤 혜택을 받을 수 있는지 정확히 이해하는 데 도움을 줍니다. 사용자에게 제공되는 가치가 무엇인지 이해하도록 돕고 그 가치를 스스로 경험할 수 있도록 가치를 보여줘야 합니다.

‘전환되는 콜투 액션 작성 방법(How to write a call-to-action that converts)’라는 Michael Aagaard의 아티클에 따르면 한 사이트에서 버튼 속 카피를 ‘주문하기’에서 ‘정보 얻기’로 바꾸자 주문량이 40% 증가했다는 사례가 소개되었죠.

 

구체성이 더해지면 UX 라이팅은 더 날카로워질 수 있는데요. ‘무료 체험하기’ 보다 ‘30일 무료 체험’이 더 낫고 ‘업로드하기’보다는 ‘코멘트 업로드하기’가 더 구체적이다. 이는 유저가 버튼 클릭을 일이 아닌 가치로 느끼게끔 하기 위함이니 문장이 길어지는 것을 두려워하지 않아도 됩니다.

 

행동에 동반되는 지침

✓ 조작(Control) ✓ 텍스트 입력 필드(Text input field)

 

텍스트 입력 필드(Text input field)는 행동에 동반되는 대표적인 지침입니다. 사용자가 정확한 정보를 입력하도록 돕는 것이 목적인데요, 어떤 정보가 올바른 형태인지에 대한 힌트 써두고, 입력되어야 하는 정보명, 입력되어야 하는 정보의 사례, 정보를 입력하도록 요구합니다. 사용자가 어떻게 하면 성공할 수 있을지를 짧고 명확하며, 경험의 맥락을 끊지 않고 전달해야 해요. 팝업, 스낵바 등을 통해 사용자의 주의를 진행 중인 경험보다 해당 에러에 집중시키고, 해결 방법을 제시해도 좋습니다.

아래 사례는 적합한 비밀번호를 입력할 수 있도록 'Passwords must'를 가이드하고 있어요.

 

행동 이후의 피드백

✓ 확정 메시지(Confirmation message) ✓ 알림(Notification) ✓ 에러(Error) ✓ 공백 상태(Empty state) ✓ 전환 텍스트(Transitional Text) 

 

확인 페이지에서 완료까지 로딩(기다리는 시간)이 길다면, 로딩 시 현재 진행형 동사로 실시간으로 진행 상황을 알려줘야 합니다. 기다리는 시간이 비교적 짧다는 사실을 알려 유저가 조바심을 느끼지 않도록 도와야 하기 때문이죠.

만약 오류가 발생했다면, 사용자 이탈로 이어질 확률이 크기 때문에 섬세한 라이팅이 필수입니다. "X를 하기 위해서는, Y를 해보세요."같이 해결책을 이해하기 쉽게 제시해 주거나, 상황을 안전하게 복구시킬 수 있는 액션을 버튼으로 제공해야 합니다. 사용자가 해결할 수 없는 상황이라면 자세한 설명이 있는 링크를 더하거나, 흥미 있어할 만한 다른 콘텐츠를 제공할 수도 있어요.

유튜브(Youtube)는 오프라인 상태로 서비스에 접근했을 때 '재시도 BT(복구할 수 있는 액션)'과 '오프라인 저장 동영상으로 이동 BT(다른 콘텐츠 제공)'을 제공했어요.

 

---

 

장황하게 시작했지만, 조금은 미미한 결론은.. 다음과 같아요.

.
.
.

고객의 가치 + 문구/단어 적합성 = 이해가 쉬운 UX 라이팅 

고객의 가치에 맞고, 글을 구성하는 문구/단어가 적합하다면 충분히 이해하기 쉬운 UX 라이팅이 될 수 있다.
이는 행동을 유도하고 전환율을 높이는데 도움을 줄 것이다!

 

-
☑️☑️ 체크 체크 ☑️☑️
☑ 고객이 자주 사용하는 단어, 표현은 무엇인지 살펴보자.
☑ confirm-shaming을 유도하진 않는지 / 비문은 아닌지 / 헷갈리는 부분은 없는지 등을 살펴보자.
☑ 고객이 원하는 가치 / 겪고 있는 문제 / 궁금해하는 내용이 무엇인지 살펴보자.
☑ 각 UX 패턴에 맞추어 적합한 위치에 고객이 원하는 정보를 잘 갖추고 있는지 살펴보자.

 

 

참고 자료

UX writing 텍스트 패턴 11가지

We Value Your Privacy (At About $0.50): Dark Patterns in UI Copy 2021

[UX Writing] 개념 뽀개기 (UX 라이팅, UX 디자인, 마이크로카피, 카피 라이팅, 테크니컬 라이팅, 콘텐

Why 36% is the magic number: Finding the right amount of text in mobile apps

http://www.riss.kr/search/detail/DetailView.do?control_no=78757eeaa771b68dffe0bdc3ef48d419&outLink=K&p_mat_type=be54d9b8bc7cdb09

 

 

---