brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Oct 25. 2016

선택 버튼 상태 분명하게 보여주기

UX 디자인 배우기 #59

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


UX Movement에 올라온 Anthony의 글 Making Selected Button States Clear for Color Blind Users를 전문 번역한 글입니다. 


컬러는 유저 인터페이스에서 많은 것을 전달합니다. 하지만 색맹 유저에게는 그만큼 많은 것을 전달하지 못합니다. 색맹 유저는 보통 색이 다른 대상을 구분하지 못한다는 문제를 가지고 있습니다.

버튼에 시각적 단서로 컬러만 적용하면, 색맹 유저는 선택된 상태가 무엇인지 더 구분하기 어려워집니다. 컬러만 이용하는 대신, 버튼의 모양도 활용해야 합니다. 


네비게이션 바


네비게이션 바에는 많은 버튼이 있지만, 컬러만 이용하면 어떤 것이 현재 선택된 상태인지 알기 어렵습니다. 많은 사이트에서는 버튼 레이블에 대비되는 컬러를 주겠지만, 색맹 유저는 인지하기 어렵습니다. 


컬러만 이용하는 대신, 버튼 레이블에 밑줄을 추가해보세요. 색맹 유저도 선택된 버튼이 무엇인지 혼동하지 않을 것입니다. 그들도 한 번에 확인할 수 있을 겁니다. 


세그먼티드 버튼(SegmentedButtons)


색맹 유저에게좀 더 시각적인 단서가 필요한 또 다른 영역은 ‘세그먼티드 버튼’입니다. 많은 사이트에서 다른 상태를 구분할 수 있도록 배경색을 바꾸는 방법만 이용하고 있습니다. 일반 유저에게는 분명하게 보이는 차이이지만, 색맹 유저는 그 차이를 구분하는 데 어려움을 겪을 것입니다. 


색맹 유저는 밝은색과 어두운 색이 배경으로 채워져 있다는 것은 볼 수 있지만, 어떤 것이 선택되었다는 뜻이지는 구분하기 어려울 수 있습니다. 체크마크 아이콘을 선택된 버튼 레이블 옆에 추가하여 혼선을 없애야 합니다. 


토글 스위치(Toggle Switches)


토글 스위치 역시 색맹 유저는 시각적 단서와 관련한 문제를 겪고 있습니다. On과 Off 상태를 컬러만 이용해서 보여주면, 선택된 상태를 구분하기 어렵습니다. 


상태를 보다 명확하게만들기 위해서, “on”과 “off” 레이블을 스위치에 더 해도되고, “on” 상태에 체크마크를 더해도 됩니다. 



컬러로는 충분하지 않다


색맹은 전체 인구의 많은 부분에 영향을 미칩니다. 만일 모든 유저에게 도달하고 싶다면, 컬러로 소통하는 것은 충분하지 않습니다. 버튼 상태를 보다 명확하게 보여주기 위해 체크마크, 밑줄, 레이블 등 추가적인 시각적 단서를 이용하는 것을 고려해보세요. 


색맹 유저는 이미 우리들보다 어려움을 겪고 있습니다. 여러분이 조금만 더 노력하면 그들의 삶을 좀 더 쉽게 만들어 줄수 있을 겁니다. 



매거진의 이전글 색상 디자인 적용 Tips

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari

브런치 로그인