Writing for interfaces

[chaneeii]

Writing for interfaces

🎞 WWDC22 : Writing for interfaces

Introduction

“what you see is what you get”

Mac이 처음 디자인되었을때의 원리입니다. 그리고 여기엔 language(언어)도 포함됩니다.
맥은 simple language를 통해 이해하기 쉽게 제작되었습니다. 맥은 이를 사용하는 사람들에 집중하며 여러분을 반기죠!
애플은 아주 초기부터 사람들에게 쉬운 언어로 다가가는 것을 중요시해왔습니다.

이것은 애플뮤직앱입니다. 무엇인가 허전하지않나요?
이것이 바로 writing의 중요성 입니다.

Writing is about communicating, which, of course, includes the words, but it also includes the structure of those words, the timing in which they appear, and the feeling people have reading them.

Writing는 의사소통에 관한 것입니다. 물론, writing하면 단순히 단어들이 떠오르지만, Writing 은 단어들의 구조, 단어들이 나타나는 시기, 그리고 사람들이 단어들을 읽는 감정/느낌을 포함합니다.

“Design through the lens of language”

앱을 디자인하는 과정의 일부로 쓰기를 일찍 할수록, 유저들에게 더 좋은 경험을 제공해줄것이라는 것입니다.
따라서 본 영상에서는 앱에 writing을 할때 고려해야할 내용들에 대해 설명합니다.

Product에 Words를 Develop할때 고려해야 요소 (PACE)

앱에 writing을 할때 고려해야할 내용들은 크게 4가지로 PACE 라고 합니다.

• Purpose (목적)
• Anticipation (예측)
• Context (문맥)
• Empathy (공감)

Purpose

앱의 화면을 개발할때, 누군가가 그 순간에 알아야할 가장 중요한것에 대해 생각해보세요!
이것이 화면의 목적입니다. 그럼 목적을 어떻게 전달해야 할까요?

• Consider information hierarchy (정보의 계층을 고려해야 한다)
• Know what to leave out (무엇을 뺄지 알아야 한다)
• Have a purpose for every screen (각 스크린은 목적을 가진다)

Consider information hierarchy (정보의 계층을 고려해야 한다)

“정보의 계층을 고려한다” 는 스크린에서 요소를 어떻게 배치(order) 하는 지에 관한 것입니다.

• 사용자는 스크린의 내용을 순서대로 읽지만은 않는다.
• 예를들면, 위쪽에 위치한 작은 설명을 적은 텍스트보다는 아래쪽의 large button이 더 빨리 눈에 띌 것이다. 따라서 header와 button 등 각 요소의 order를 잘 구성하는 것이 중요하다.

Know what to leave out (무엇을 뺄지 알아야 한다)

화면의 목적을 알고 있으면 무엇을 유지하고 무엇을 빼고 혹은 다음 화면에 배치할지 결정할 수 있습니다.

• 너무 많은 detail을 제공하기 보다는 simplicity를 목표로 해야한다.

왼쪽 화면의 경우 iPhone Needs to Cool Down 이라는 텍스트는 꽤나 명확하게 보입니다.
하지만 텍스트가 더있죠? 이 화면은 너무나도 많은 것을 하고자합니다.
스크린의 목적을 생각해보세요! 아이폰을 식혀야한다면, 당연히 태양아래에 있거나 많은 앱을 실행해야겟죠?
아 근데 이 스크린의 목적은 비상연락을 하는 것일 수도 있어요!
근데 버튼이 굉장히 큽니다! 그래서 마치 이것이 필수적인것처럼 보이기도합니다!

두번재 스크린은 상대적으로 매우 심플해보입니다!
headline은 단지 Temperature이죠? 온도계아이콘에서 온도가 높은 것을 보여주고 있기때문에 우리는 명시적으로 이것이 온도가 높다니 어쩌니 알려줄 필요가없습니다.
그리고 단순히 하나의 문장이 아이폰이 어떠한 행동을 취해야하는지 알려줍니다. 또한 비상전화 버튼도 작아서 필요할대 사용할 수 있으면서도 명료하게 무엇을 해야하는지 나타내고 있습니다.

Have a purpose for every screen (각 스크린은 목적을 가진다)

• 앱의 전체 flow 와 각 screen은 명확한 목적을 가져야한다.
• 하나의 목적으로 여러개의 스크린을 만들지 말아라
• 우리가 앱의 core value는 무엇인지 고려하고 그것이 전체적으로 잘 나타내게 디자인 하는 것은 중요하다. (애플-privacy)

Anticipation (예측)

Speaking directly to people in the right way is one way to take your app experience from functional to magical.

• Think of a conversation (대화를 생각해보기)
• Develop your voice and vary your tone (voice 를 개발하고, tone 을 다양하게 하기)
• Know what comes next (다음에 무엇이 올지 알기)

Think of a conversation (Think of a conversation)

앱에서의 언어/말을 구성할때 이것을 대화처럼 생각하는 것은 큰 도움이 됩니다. 앱과 사용자 사이에 dialogue (대화)가 있기 때문이죠!

좋은 대화에는 앞, 뒤 맥락이 있습니다. 때로는 듣고 말하고 질문을 하기도 합니다.
사람들간의 대화를 생각해보면, 앱에서도 어떤순간에 어떠한 방식으로 잘 소통하면 좋은지 예상할 수 있을 것입니다.

잘시간이 되었을때 방해금지모드가 "Sleep Well" 이라고 한다. 그리고 다음날 일어날때 알람이 깨우면서 "Turn Off Alarm?" 이라고 하는 것은 마치 앱이 대화를 하는 것처럼 들린다.

이러한 대화는 사람들이 느끼기에 매우 직관적이며 마치 device가 사용자의 니즈에 말을 거는 것처럼 느껴집니다.

Develop your voice and vary your tone (voice 를 개발하고, tone 을 다양하게 하기)

대화하듯이 표현함에 있어서, 글 작성자들은 voice와 tone에 대해 이야기를 많이들 이야기 하곤 합니다. 국내에서는 토스가 대표적이죠!
우선 여러분들의 app에 voice(목소리)를 개발하고 tone(말투)을 다양화하는 것이 중요합니다.
애플은 애플 기기를 사용하든 일정한 하나의 voice 를 가지지만, 상황에 따라 다른 톤을 사용합니다.

voice 와 tone

• voice : 아는 사람의 말은 언제 어디서 들어도 ‘아 그 사람이다!’ 라고 알 수 있습니다.
  사람의 목소리는 변하지 않기 때문이죠! 따라서 서비스의 목소리가 다르다면 사용자는 혼란에 빠집니다.
• tone : 목소리는 언제나 같지만 말투는 변합니다. 따라서 가볍게/진지하게, 재밌게/심각하게 등 맥락에 공감하는 말투를 잘 설정하는 것이 중요합니다.

Voice 를 설정하는 Tip

• 누구와 이야기를 하는지를 생각하고 사용할 어휘를 고르기
• 일반적으로 사용 되는 용어의 목록을 정하기

Tone 을 설정하는 Tip

• 사용자들이 겪게 될 것들을 생각하기
• 너무 방방뛰는 톤(?) 은 자주 사용하지 않기 -> 멍청해보일 수 있음
  • 하지만 애플워치에서 링을 다 채웠을떄때는 너 링을 무려 35일 연속 달성했어!!!!라면서 나름 격하게 축하를 해줍니다.이러한 것은 축하하는 상황에 적합한 톤이지만, 자주 사용하면 멍청해보일 수 있죠

Know what comes next (다음에 무엇이 올지 알기)

UX 라이팅을 할때는 항상 다음에는 무엇이 올지 생각해야합니다. 다음 action 이나 사용자가 받게될 question 을 예측하는 것은 우리가 어떠한 것을 사용자에게 말해야하는지를 결정하는데 도움이 됩니다.
특히 디자인과 텍스트가 밀접하게 연계될 때 앱은 사용하는데 자연스럽게 느껴집니다.

예를들어, 애플워치 숨쉬기 instruction 은 매우 clear 하고 다음에 무엇을 해야할지 확실히 알려줍니다.

1. 당신의 호흡에 집중하세요!
   그리고 다음단계에 무엇을 해야하는지 모를때 이것은 순서대로 그림과 텍스트를 통해서 언제 숨을 쉬어야하는지 알려줍니다.
2. 들이쉬세요
3. 내쉬세요

Context (문맥)

• Think outside the app (앱 밖의 상황을 고려하기)
• Write helpful alerts (도움이 되는 alert 작성하기)
• Create useful empty states (유용한 empty state 창조하기)

Think outside the app (앱 밖의 상황을 고려하기)

먼저 앱밖의 상황을 고려해보는 것으로 시작해보세요!
누군가 앱을 쓸때, 집같이 조용한 공간에 있을 수도 있지만, 아주 바쁜 공항이라던가 회사라던가 운전중이라던가 요리중이라던가 여러상황이 있을 수 있겠죠? 또 그들이 앱을 사용하는데 완전히 집중하기 어려울 수도 있구요!
그러한 상황을 고려해보세요!

Write helpful alerts (도움이 되는 alert 작성하기)

앱에는 몇가지 알림이 있을 수 있으며, 이 알림은 사용자가 작업을 확인하거나 선택할때 적합하게 사용합니다.
이러한 경고는 보통 앱의 흐름에서 멈추고 제공하게 되므로 유용하고 명확한 경고를 줄 수 있겠죠?

좌측과 같이 날씨앱을 사용할때 위치기반으로 날씨를 추천해주기 위해 처음에 위치정보권한요청을 보내는 것은 문맥적으로 맞습니다. 또한 이 권한을 어떻게 사용할지, 함께 알려주죠

우측과 같이 몇개의 알림은 destructive action (파괴적인 행위)을 가집니다. 이 Context는 매우 중요한 선택을 해야하는 사용자 에게 정보를 놓치지 않게보여주게 됩니다. Remove 와 같은 파괴적인 액션을 지닌 버튼은 따라서 왼쪽에 빨간색으로 강족하여 배치하게됩니다.

어떤 버튼이 UX측면에서 좀 더 좋아보이나요?

버튼이 단순히 예 및 아니오라는 레이블이 작성이 되어있는 것이 아니라
alert에 writing할때는 항상 버튼이 수행할 작업에 대해 구체적으로 설명하는 것이 좋습니다.
위쪽에서 취소확인 이라는 것은 굉장히 애매하고 뭐라는지 알아듣기도 어렵습니다. 또한 그 밑에 있는 plain 한 텍스트도 vague(모호)합니다. 특히, 언제부터 접근이 안되는지 이해하기 어렵죠!

error 를 다루는 법

다음은 올바른 에러알림을 작성하는 법은 아래와 같습니다.

• 사용자는 몰라도 되는 에러코드를 보여주지 않기
• OK와 Cancel 같이 같은 기능을 하는 의미없는 label / button 은 사용하지 않기
• “Oops!” “Uh-oh” (어머, 이런 안되는 군요!) 와 같은 거짓가득한 문구 지양하기
• ‘Add Payment Method’ 와 같이 사용자가 어떻게 문제를 해결해야하는지 바로 안내하고, 나중에 이 문제를 해할 수 있도록 해주는 것이 중요

Create useful empty states (유용한 empty state 창조하기)

유용한 힌트를 주거나 받은 편지함에서 파티를 여는 것을 예로 들 수 있습니다.
적절한 톤을 사용하세요.
사용자가 장난을 너무 많이 치지 말고 무엇을 할 수 있는지 명확히 합니다.

• empty state에서는 해당 스크린이 어떤 역할을 하는지 모를 수 있으므로 유용한 가이드라던가 어떤 컨텐츠가 이 페이지에 지침을 제공해준다.
• 적절한 톤을 사용한다.
• 장난이나, idiom 보다는 무엇을 하는지 clear하게 알려준다.

Empathy (공감)

UX 라이팅에서, 공감을 가진 다는 것은 모두를 위한 글을 쓰는 것을 목적으로 합니다.

• Write for everyone (모두를 위한 글쓰기)
• Be responsive to localization (Localization 을 고려하기)
• Design for accessibility (Accessibility 디자인하기)

Write for everyone (모두를 위한 글쓰기)

• 간단하고 쉬운 언어 사용하기
• 오해가 있을 법한 관용어나 유머는 삼가 하기

It's best to use simple, plain language, as idioms and humor can be misunderstood or not translate, and some phrases have meanings that exclude people.

앱에는 음악가, 게이머 또는 다른 개발자와 같은 특정 사용자가 있을 수 있으나 그들을 제외하고도 모두와 이야기할 필요가 있죠! 따라서 간단하고 쉬운 언어를 사용하는 것이 가장 좋습니다. 관용어나 유머는 오해를 살 수도 있고 번역이 안 될 수도 있고, 어떤 문구는 사람을 배제하는 의미가 있기도 하기 때문입니다.

Be responsive to localization (Localization 을 고려하기)

Empathy(공감)의 핵심은 현지화 요구에 대응하는 것입니다. 여러분의 앱은 전세계사람들이 사용하게 될 수도 있거든요! 엄청난 기회죠? 그리고 이것은 당신이 언어와 문화에 맞게 앱을 적용시켜야한다는 것을 의미합니다.

Your UI needs to be able to adapt to those language changes.
사용자 UI는 이러한 언어 변화에 적응할 수 있어야 합니다.

• 언어별로 길이 / 방향등이 다를 수 있기 때문에 디자인에서 이러한 요소들을 고려해야합니다.
• 이건 달력의 요일인데요! 나라별로 특정 뜻에 글자수가 다르기 때문에 이러한 부분도 디자인을 고려해야합니다

Design for accessibility (Accessibility 디자인하기)

모든 사람들이 당신의 앱을 사용하게 하는 것은 중요합니다. 여러분의 앱을 가능한 한 많은 사람이 사용하려면, 가능한 한 많은 사람들과 앱이 대화할 수 있어야합니다. 예를 들어 blind 혹은 저시력의 사람들은 VoiceOver를 사용하여 앱을 사용하게 됩니다.

이러한 경우 여러분의 앱의 elements에 라벨링 하는 것을 유의해야합니다.
그것들은 어떤 사람들에겐 앱을 사용하는 경험의 전체가 될 것이고, 여러분은 그 경험이 잘 디자인되기를 원하겠죠?
그러려면 모든 elements에는 사려 깊고 유용하며 설명이 충분한 텍스트가 있어야 합니다.
이리고 이것은 링크 및 버튼과 같은 navigation 관련 항목에 대한 Voice Over 텍스트뿐만 아니라 기호, 그래프 또는 이미지도 포함됩니다.

여기 애플의 미모지에 대한 VoiceOver 예시가 있습니다.
각 설명들은 단순히 물리적인 디테일을 표현했을 뿐만아니라 어떠한 의도로 사용해야하는지도 나타내고 있죠?

Reading your writing out loud

당신의 작성한 글을 크게 읽어보세요!
UX라이팅을 위한 마지막 팁입니다.

이것은 여러분의 글이 대화적으로 들리는지 확인해주고 불필요하거나 반복적인 단어, 문법적 실수 또는 오타를 찾는 데 도움을 줄 것입니다.

Writing for interfaces begins with curiosity for who's on the other side of the screen.

References

• https://developer.apple.com/videos/play/wwdc2022/10037/
• https://www.wwdcnotes.com/notes/wwdc22/10037/
• https://yozm.wishket.com/magazine/detail/1321/