✅ UI 컴포넌트와 UX 라이팅 (1)
#체크박스 #UX라이팅
� 한 줄 요약
- 체크박스 문구 작성법
✔️ 이번에는 UI 컴포넌트와 UX라이팅에 대한 이야기를 풀어보고자 해요. 어떤 이야기냐? '특정 UI 컴포넌트에 알맞은 UX라이팅은 무엇일까?'에 대한 이야기예요. 일단 UI 컴포넌트가 무엇인지부터 살펴볼까요?
• UI 컴포넌트는 사용자 인터페이스를 구성하는 요소로, 버튼, 입력 필드, 드롭다운 메뉴, 체크박스 등과 같은 것들을 포함합니다. 이러한 컴포넌트들은 UI를 구성하고 사용자가 애플리케이션과 상호작용할 수 있도록 합니다.
✔️ 즉, 쉽게 말하자면 '다른 요소와 구분하고, 행동하고 반응하고, 현재상태에 대한 정보를 전달 하도록 구성된 디자인'이라고 할 수 있어요. 예를 들어 우리가 어떤 버튼을 클릭했을 때, 서비스에서 발생할 상호작용을 예측할 수 있도록 만든 거죠.
✔️ 오늘은 어떤 컴포넌트를 대상으로 이야기할 것이냐, 그것은 바로 '체크박스'예요. 체크박스는 2개 이상의 옵션을 선택할 때 주로 사용해요. 다중 선택의 의미를 담고 있죠. 게다가 On/Off 개념도 담고 있어요.
✔️ 체크박스와 비교되는 버튼으로는 라디오버튼이 있어요. 라디오버튼은 다음 글에서 설명할 테지만 체크박스와 선택 항목 중, '1개의 옵션만 선택'할 수 있도록 만들어진 컴포넌트죠. 라디오버튼도 체크박스처럼 On/Off 개념을 담고 있어요.
1. 단어 위계 설정
✔️ 체크박스 정의를 고려하자면, '옵션을 다중 선택할 수 있고, On/Off의 개념이 들어가 있다.'라고 할 수 있겠죠. 다중 옵션이 들어가기 때문에 일관성이 들어가 있어야 하며, 단어의 위계가 분명해야 해요. 그래야 사용자가 혼동없이 옵션을 읽고 선택하겠죠.
✔️ 하나의 예를 함께 볼까요?
✔️ 왼쪽 문구는 스킬에 대한 분류로 나열이 됐어요. 그 결과 이 문서를 보는 사람들이 '어떤 스킬'을 원하는지 명확히 확인할 수 있죠. 반면 오른쪽은 어떨까요?
✔️ Figma, Notion처럼 회사 이름으로 Microsoft와 한글과컴퓨터가 적혀있지만, 그에 대한 세부 스킬들이 나뉘어져 있다보니 한눈에 확인이 어려워요.
✔️ 예를 들어 Microsoft일지라도, PPT, Excel, Word 등 상세 툴들이 다양하게 나뉘어져 있어요, 이 내용을 확인하는 담당자들은 각각의 툴을 요구할 가능성이 높기 때문에, 무엇을 잘하는지 명확히 확인이 되지 않는 거죠.
✔️ 게다가 왼쪽은 영어로 일관성 있게 표기하고 있어요. 첫 문자는 대문자(약자는 모두 대문자)로 표기했고, 길이도 비슷하게 맞춤으로써 가독성을 높였죠.
✔️ 반면 오른쪽은 영어 사이에 한글로 표기된 옵션이 있어 일관성을 해치고 있죠. 이럴 경우, 사용자에게 한글이 눈에 띄게 되어 가독성이 떨어지는 문제가 발생하죠.
2. 단어 중복 방지
✔️ 다음은 단어를 중복하여 사용하는 예인데요. 타이틀과 콘텐츠에 동일한 내용을 넣는 거죠. =
✔️ UX라이터의 흔한 실수 중 하나인데요. 타이틀과 콘텐츠 내용을 중복해서 넣는 경우예요. 타이틀에 분명히 '알림 설정'이라는 내용을 넣었음에도 콘텐츠에도 반복적으로 '알림'이란 단어를 넣는 거죠.
✔️ '알림'이라는 단어를 넣지 않아도, 전체 콘텐츠를 요약한 타이틀이 내용을 담고 있기 때문에 생략해도 돼요. 또한, 사용자들은 내용을 해석하는데 어려움이 없어요.
✔️ 게다가 '알림'이라는 중복 단어가 사라지기 때문에 더 간결해지고 명확해지죠. 사용자는 단어 하나만 보고도 '의미를 파악'할 수 있고, '다음 행위'에 대해 결정할 수 있어요.
✔️ 추가적으로 체크박스에는 On/Off에 대한 내용이 들어가 있기 때문에, (콘텐츠) 알림 On(Off)라는 의미도 포함되는 거죠. 즉, UI가 함의하고 있는 컴포넌트의 의미도 함께 고려해야 해요.
3. 긍정문 옵션 제시
"인간의 뇌는 부정문을 이해하지 못합니다." - Simon Sinek
✔️ 제가 긍정문을 써야 한다는 가이드라인을 작성할 때, 반드시 넣는 내용인데요. 인간의 뇌는 기본적으로 부정문을 이해하지 못해요. 대표적인 예로 '코끼리는 생각하지마'가 있죠.
✔️ 우리는 코끼리는 생각하지 말라는 글을 봤음에도, 가장 먼저 '코끼리'를 떠올려요. 그 다음에 코끼리가 필요없다고 받아들이는 거죠. 이렇듯 인간이 뇌는 부정문에 대한 인지를 위해서는 '한 단계 더 거쳐야 해요.'
✔️ 이런 측면이 있기 때문에, 부정문보다는 긍정문으로 작성해야 하고, 부정문으로 작성해야 할 때는 그 내용을 명확하게 제시하세요. 간혹 부정 먼저 넣고 그에 대한 부정을 넣어 긍정으로 표시하는 경우가 있는데요. 절대 하지마세요.
✔️ 인간이 뇌는 그렇게 되면 세 번의 연산을 거치게 되는 거예요. 그만큼 인지적 부하가 발생하여, 사용자의 선택이 지연되죠. 이중 부정을 없애는 팁도 있어요.
✔️ 바로, 긍정으로 바꾸면 돼요. 부정의 부정은 긍정이니까요. 하지만 모든 선택지에 해당되는 것은 아니고, Yes/No로 떨어지는 경우만 해당 돼요. 그 외는 좀 더 고민하여 문구를 작성해야 해요.
4. 옵션 디폴트 값 설정
✔️ UX라이팅은 UX를 고려해야 한다고 말하잖아요. 그렇기 때문에 '디폴트 값'을 어떻게 보여줄까도 우리는 고민해야 해요. 사용자의 선택을 도와주기 위함이죠.
✔️ 데이터 기반으로 가장 많이 선택하는 옵션을 디폴트 값으로 제안할 수 있고, 기업의 의도에 따라 디폴트 값을 설정할 수 있어요. UX라이터라면 후자 보다는 전자의 의견을 전달하세요. 왜 그래야 할까요? UX라이터는 사용자를 위한 직무이니까요.�
