UX 텍스트 패턴

출처: 이번 콘텐츠는 토레이 파드마저스키의 < 전략적 UX 라이팅 >을 읽고 작성했습니다.

스타일과 목적에 부합하는 웹 글쓰기

UX 라이터가 쓰는 표현은 
사용자가 필요한 무엇을 찾고 있을 때 
도움을 주고 기억에서 사라져야 한다. 

---

UX 텍스트 패턴

실제 사례를 바탕으로 유저의 사용성 측면에서 스타일과 목적을 살리는 10가지 웹 글쓰기 패턴을 알아본다. 

[전략적 UX 라이팅]에서 소개한 UX 텍스트 패턴에서는 사례 예시가 한정적이어서 국내 사례를 찾아 대입해보았다. 

1. 타이틀: 유저가 가장 먼저 접하는 단일 텍스트

브랜드 네임 타이틀은 그 자체로 경험을 의미한다. 브런치 한다, 구글링 한다, 컬리한다처럼 하나의 동사화가 되어 회자된다. 

▲ 브런치한다, 구글링한다, 컬리한다

상호작용 텍스트(대화의 수단): 버튼, 아이콘, 설명, 공백상태, 라벨, 확정·에러 메시지 ▼

유저가 다음 단계로 넘어가기 위해 탭 하거나 클릭하면서 상호작용(링크 > 실행 > 명령)하는 모든 유형의 텍스트를 말한다. 

2. 버튼: 유저는 버튼을 누르고 다음 단계로 이동한다. 

유저의 액션을 불러일으킨다는 의미로 CTA(Call To Action) 버튼이라고도 한다. 

More Info.

-유저는 버튼을 선택하고 누르면서 사이트 안에서 대화(경험) 한다. 

-버튼 디자인은 눈에 띄게 텍스트는 구체적이며, 한두 단어로 짧게 표현한다.

-유저가 실제로 사용하는 단어로 쓴 버튼의 사용 빈도가 높다.

-UX 텍스트는 지시형으로 쓴다.

-버튼 순서는 가장 일반적이거나 우선하는 행동을 먼저 제시하는 게 좋다. 

▲ 흐름을 대화하듯 잇는 역할이다 / 슬랙 로그인, 스타벅스 이벤트 참여 독려

3. 아이콘: 가장 좋은 건 아이콘과 함께 쓴 단어가 한눈에 들어오는 것. 

딱 맞아떨어지는 아이콘과 텍스트의 절묘한 조화는 창조의 산물이 아닐까. 통상 아이콘에는 최소한의 단어만 제시한다. 토스처럼 부가설명을 곁들이기도 하고. 시각적으로는 아이콘과 단어를 다르게 표현해 그 차이를  분명히 보여준다.  

▲ 아이콘 디자인에 진심인 토스, 애플 홈페이지 스토어 아이콘 ▲▼

4. 설명: 정보를 담은 텍스트로 구, 문장, 단락으로 표현한다. 

설명 텍스트는 통상 유저가 읽어야만 그 목적을 달성하기 때문에 가능한 쉽게 표현한다. 

※ 한 문단이 3행 정도면 그중 몇 단어만 시선을 끌뿐이다. 최대한 적은 단어로 표현하자.

텍스트 벽 없애기

텍스트를 간략하게 유지하고, 유저가 눈으로 훑어볼 수 있도록 아이디어를 분리하면 유저는 제대로
이해하고 있다는 자신감을 얻고 그 경험을 성공적으로 사용할 것이다. -79p 

▲ 카카오뱅크와 카카오톡 설정 > 세부 정보를 간략히 소개한다

5. 공백상태: <공백의 쓰임새> 콘텐츠 읽고 오기

공백상태에서의 텍스트는 한 줄 정도로 단순할 수 있고, 타이틀, 설명, 버튼처럼 여러 요소가 한 데 묶일 수도 있다. ‘X를 하려면 Y 하세요(To do X, do Y)’와 같은 형식을 사용하면 기능(X)과 액션(Y)을 동시에 강조할 수 있고 유저를 다음 단계로 진입하게 할 수 있다.  

6. 라벨: 항목, 목록, 상태, 과정, 양, 단위를 나타낼 때 쓴다. 

전달해야 하는 세부사항이 많을 때 정보를 간편하고 명료한 형식으로 전달할 수 있다. 

More Info.

-라벨은 단일 명사나 명사 쌍으로 구성하며 어려운 특수용어보다는 구체적인 용어를 사용한다.

-아이콘, 항목과 같은 수동적인 화면 요소와 관련이 있으며 해당 맥락에 한정한다. 

-라벨은 간략하고 기술적이지만, 사용자가 읽기만 하므로 버튼 문구와는 구분한다.

▲ 서핏 카테고리, 네이버 배송 현황, 코레일 티켓 발권 화면

7. 컨트롤: 유저의 니즈에 맞출 수 있는 맞춤 범위와 상태를 알려준다.

More Info.

-컨트롤 텍스트의 경우 이름(명사 또는 동사구)과 상태를 고려하며 유저가 이해할 수 있는 방식으로 지정한다. * 체크박스 표시, 슬라이드 버튼의 위치, 온·오프 스위치가 어느 쪽에 위치하는지, 활성화/비활성화 등

-컨트롤과 짝을 이루는 UX 텍스트는 컨트롤 상태와 일치해야 한다.

▲ 카카오톡과 카카오뱅크 설정 화면

8. 텍스트 입력 필드: 유저가 정확한 정보를 입력할 수 있도록 돕는 텍스트 패턴이다.

플레이스 홀더라고도 한다. 간혹 힌트를 미리 입력된 텍스트로 해석하는 유저도 있으므로 라벨과 힌트를 함께 제시하여 더 정확한 정보를 제공하는 것도 좋다.  

* 라벨+힌트 텍스트가 함께 있는 디자인보다 깔끔하게 표현할 수는 있지만, 사용성은 떨어질 수도 있음 

▲ 원티드 로그인과와 오늘의집 문의 화면

9. 전환 텍스트: 특정 동작이 진행 중이라는 사실을 알리는 텍스트 패턴이다. 

현재진행형 동사로 표현한다. 로딩 스피너로 지체 시간이 비교적 짧다는 사실을 알려 유저가 조바심을 느끼지 않도록 돕는다. 

*로딩 스피너 loading spinner, 데이터가 로딩되는 동안 로딩 중이라는 사실을 보여주는 요소

▲ 토스의 로딩 스피너

10. 확정 메시지: 유저가 기대하는 절차나 결과가 완료되었다는 사실을 확정해준다.

눈에 보이지 않는 절차가 완료되었다는 사실을 알려 사용자가 안심하도록 한다. 

*동작의 결과가 지연될 때 사용하면 특히 효과적이다.

▲ 29CM 홈페이지_로그아웃  *정상적으로-표현은 되도록 쓰지 않을 것 / ▲ 브런치 글쓰기 페이지

11. 오류 메시지: <오류 메시지> 콘텐츠 읽으러 가기

*북리뷰

<전략적 UX 라이팅>