포용성 고려한 UX 디자인, UX 라이팅 방법 가이드
현직 디자이너가 설명해주는 포용성 제대로 반영한 UX 라이팅 A to Z
안녕하세요!
이제 곧 8년차를 바라보고 있는 UX/UI 디자이너 지밍리입니당~ ㅎㅎ
요즘 제가 생각하기에 UX에서 꼭 고려해야 하는 키워드 중 하나가
"포용성"이라고 생각해요!
그래서 오늘은 포용성을 고려한 UX 라이팅을,
화면에서 바로 적용할 수 있게 정리해보려고 하는데요!
장애 유무나 성별 같은 정보는 물론이고,
손이 바쁘거나 소리가 큰 곳에 있거나 글을 빨리 읽기 어려운 상황까지
다양한 포용성 분야를 다뤄볼 생각이에요 ㅎㅎ
지금부터 그럼 포용적 UX 라이팅에 대해서 알아볼까요?!
출처: 한국일보포용성이란? 포용성의 정의와 UX 라이팅 범위
포용성은 특정 사용자를 따로 표시하는 게 아니라,
서비스가 많은 상황을 받아들일 수 있도록 하는 거예요!
예를 들어 한 손으로 폰을 잡고 있거나, 주변이 시끄럽거나,
눈이 쉽게 피로해지는 상황 등 다양한 경우가 있겠죠?
포용적 UX 라이팅은, 정확한 안내와 선택 가능 구조를 먼저 고려하는 일이에요!
버튼 텍스트, 입력 라벨, 도움말, 오류 메시지, 권한 안내, 알림, 빈 화면 문구까지
전부 라이팅 범위에 들어갈 수 있어요.
프로젝트에서 문제가 많이 생기는 부분 중 하나는 "실패 화면"이라고 생각하는데요!
"정상적으로 입력해 주세요." 같은 문장은 사용자가 할 수 있는 다음 행동을 알 수 없어요..
사용자는 지금 무엇이 안 됐는지, 어디로 돌아가야 하는지, 다시 시도해도 되는지
다음 액션에 대한 정확한 정보를 전달받기를 원해요!
포용성은 이런 상황에서 크게 드러나게 된답니다 ㅎㅎ
출처: 아모레퍼시픽포용적 UX 라이팅 작성 기준과 예시
1. 상태 설명 먼저, 다음 행동 제시
오류 문구는 상태 설명으로 시작하는 게 가장 안정적이에요!
그리고 다음 행동은 한 번에 끝나지 않아도 돼요
아래처럼 구성하면 대부분의 화면에서 적용할 수 있어요~
형식이 맞지 않아요
010으로 시작하는 번호를 입력해 주세요
계속 문제가 생기면 고객센터로 연결해 주세요
여기서 중요한 건, 사용자가 지금 선택할 수 있는 행동을 문장 안에 함께 보여주는 거예요.
재시도 버튼이 있으면 재시도, 다른 방법이 있으면 다른 방법,
문의가 필요하면 문의까지 같이 보여주는 게 더 좋겠죠?
2. 정상·비정상 표현 지우기
정상, 비정상, 일반, 특수 같은 단어는 서비스가 사용자를 평가하는 느낌을 만들기 쉬워요 ㅠㅠ
가입 유형이나 인증 방식은 사람을 나누지 말고, 기능 선택으로만 보여주는 방식을 추천해요!
가장 무난한 구성을 알려드릴게요~
인증 방식 선택
휴대폰 인증
이메일 인증
선택한 방식은 나중에 변경할 수 있다는 점을 전제
특정 사용자를 별도 메뉴로 떼어두는 대신,
동일한 흐름에서 옵션으로 제공하면 화면도 단순하게 구성할 수 있죠.
이 방식은 개발과 운영에도 도움이 되는데,
그 이유는 분기 화면이 줄어들기 때문이에요!
3. 성별 정보 요청 줄이기, 요청 시 선택권 확보
성별을 묻는 정말 많은 서비스들이 있지만,
기능에 꼭 필요하지 않다면 묻지 않는 걸 가장 추천드리고 싶어요.
정말 필요한 경우에도 저는 다음 3가지를 포함하고 있어요!
선택 항목으로 표시
수집 목적을 한 줄로 표시
추후 변경 가능 여부 표시
단 두개의 선택지만 두기보다는 "기타", "선택 안 함" 같은 선택지도 고민해봐야 해요~
4. 거절·제한 화면에서 대안 제시
본인 인증 실패, 권한 거부, 결제 실패 같은 화면은 앞서 설명드린대로,
문제가 꽤 많이 생기곤 하는 중요한 화면이에요.
이때는 안내형 문장이 낫고, 가능한 대안을 포함해서 안내해야해요!
카메라 권한이 꺼져 있어요
설정에서 카메라 권한을 켠 뒤 다시 시도해 주세요
사진 업로드로 대신 진행할 수도 있어요
대안이 없다면 그 사실까지 설명해드리는 게 더 좋아요!
다만 그때도 사용자를 몰아세우는 표현은 피하는 게 좋겠죠?
5. 톤은 담백하게, 감정 과잉 줄이기
친절한 말투가 곧 포용성을 의미하지는 않아요.
특히 실패 상황에서 과한 감탄사나 귀여운 말투는 불편하게 느껴질 수 있어요 ㅠㅠ
짧고 정확하게, 그리고 필요한 정보만 주는 톤이 오래갈 수 있어요~ㅎㅎ
UX 디자인 의도를 유지하기 위한 구현 포인트
포용적 UX 라이팅은 상태 케이스가 다양하기 때문에
구현하는 데에 있어서 많은 어려움이 있어요.
성공/실패만 있으면 된다고 생각했지만,
포용성을 고려하다보면 로딩, 재시도, 부분 실패, 권한 거부, 정책 제한 등...
뭐가 자꾸 많아지는 기분이 들죠!
그때 급하게 들어간 문구는 대체로 딱딱하거나 공격적으로 느껴질 수 있어요.
이번엔 UX 디자인 의도를 그대로 유지하기 위해서
개발자 분들과 어떻게 구현단계를 거치면 될 지 설명드릴게요!
1. 상태 매트릭스 만들기
입력 폼 하나만 하더라도 정말 많은 상태가 따라붙는데요!
예를 들어 휴대폰 번호 입력이라면
입력 전
입력 중
형식 오류
인증번호 전송 중
인증번호 전송 실패
인증번호 입력 오류
제한 횟수 초과
이런 상태들이 있을 거예요.
이 상태마다 버튼, 안내 문구, 보조 문구도 바뀌거든요...
디자이너가 이 목록을 제대로 만들어두면 개발에서 누락을 줄일 수 있어요!
2. 문구를 화면에 고정하지 않기
문구를 코드에 직접 넣으면 수정이 늦어져요.
운영 중에 정책이 바뀌거나, 특정 문구가 불편하다는 피드백이 들어오면
바로 바꾸기가 어려워진답니당...
그래서 문구를 키로 관리하고, 관리자나 설정 파일에서 바꿀 수 있도록 해야해요!
이 구조는 A/B 테스트나 다국어 적용에도 유리해요 :)
3. 접근성 속성까지 같이 확인하기
스크린리더는 화면을 눈으로 보는 대신,
휴대폰이나 컴퓨터가 화면 내용을 소리로 읽어주는 기능인데요!
시각장애가 있거나, 화면을 보기 어려운 상황에서 많이 써요.
예를 들어 버튼이 있으면 스크린리더는 "버튼, 로그인" 같은 식으로 읽어줘요.
입력칸이 있으면 "편집창, 이름 입력" 같은 방식으로 읽어줘야
사용자가 어디에 뭘 써야 하는지 제대로 알 수 있겠죠?
그런데 화면에 글자가 보인다고 해서,
스크린리더가 그 글자를 자동으로 같이 읽는 건 아니에요.
입력칸 위에 이름이라고 써 있어도, 그 글자가 입력칸과 연결이 안 돼 있으면
스크린리더는 그냥 "편집창"이라고만 읽을 수 있어요...ㅠㅠ
그래서 디자이너가 라이팅을 잘 써도,
개발에서 입력칸과 라벨을 연결해주지 않으면
그 문장이 스크린리더 사용자에게는 전달이 안 되니, 꼭 확인해야해요!
UX 디자인 제대로 구현하는 외주개발사 추천
디자이너가 UX라이팅을 제대로 해내더라도,
개발 과정에서 상태 처리와 연결 구조가 맞지 않으면 그 의미가 사라져요...
그래서 포용적 UX 라이팅은 디자이너의 의도대로 개발까지 이어지는 과정이 정말 중요하고
그래서 개발사와의 소통이 중요한데요!
오랜시간동안 디자인 에이전시에서 일하면서 정말 많은 외주개발사와 프로젝트를 진행했어요~
그 중에 디자이너의 의도를 가장 잘 반영해 개발이 이루어졌던 외주개발사를 추천드릴게요!
UX 라이팅을 디자이너 의도대로 잘 구현하는 외주개발사 똑똑한개발사인데요~
똑똑한개발자는 기획 단계에서 입력 흐름과 예외 상황을 먼저 정리하고,
그 목록을 기준으로 화면과 문구를 같이 구현해주더라고요.
그래서 특정 상황에서 튀는 문구가 줄고, 화면 전반의 톤이 안정적으로 유지될 수 있었어요! ㅎㅎ
디자이너가 만든 가이드가 개발 결과물에서 그대로 보이도록 하는 게 생각보다 까다로워서
한 번에 제 의도대로 개발을 마무리해주셨던 똑똑한개발자가 정말 인상깊게 남았어요.
똑똑한개발자는 디자인 어워즈 수상 내역도 있는 디자인 잘하는 외주개발사에요~디자인 잘하는 개발사 중 하나로,
디자인 부분에서도 많은 도움을 줄 수 있는 외주개발사로 추천드리니
포용적 UX 디자인 등 디자인과 제대로된 구현이 중요한 프로젝트라면
외주개발사 똑똑한개발자를 추천드릴게요!
(똑개팀 홈페이지 링크예요~)
포용성 UX는 이제 선택이 아닌 필수!
오늘 정리한 내용을 다시 한 번 돌아보자면
포용적 UX 라이팅은 사용자의 다양한 상황을 미리 고려할 수 있는 필수적 배려라고 생각해요!
포용성을 고려할수록 상태가 많아지고, 그만큼 구현 과정이 어렵지만
필수적인 부분이 된 만큼 그것을 제대로 디자인하고 구현할 수 있어야 하죠!
디자인 단계에서 상태별 문구 정리
개발 단계에서 라벨 연결이나 예외 처리까지 함께 점검
특히 이 두가지는 정말 중요하구요!!!!
오늘도 긴 글 읽어주셔서 정말 감사드려요 ㅎㅎ
다음번에는 어떤 이야기로 돌아올까요?
공감과 댓글도 부탁드립니당~~ :)