How_the_Color_Blindness_Work_UX_Research-01

특수한 사용자를 위한 배려

매출 혹은 고객 충성도를 높이기 위해 기능 중심으로 사용자 경험을 개선시키고, 페이지뷰를 높이고, 이탈률을 줄이고자 하는 노력은 사실 사용자 배려의 측면보다는 회사의 비즈니스 측면에 좀더 초점이 맞춰있다고 볼 수 있습니다. 사용자에게 온전히 초점이 맞춰진 배려는 사실 아주 작은 ‘디테일’에 나타납니다. 이와 같은 맥락에서 오늘은 웹접근성 관점에서 고려해야 할 특수한 사용자를 위한 배려이야기를 간단히 풀어보려 합니다.

일반 사용자들을 위한 설계만으로도 고려해야 할 점은 무수합니다.
사실 그것만 다 챙기기도 버겹습니다.
하지만 여기에 ‘디테일’을 하나 더한다면, 소수의 특수한 사용자들에게 편의를 넘어선 ‘감동’을 이끌어 낼 수도 있습니다.

아래 두 가지 예제 중에서 사용자에게는 무엇이 더 직관적일까요?

02 01

[ 출처. 이미지 및 일부내용 UX Dilemma 블로그 내용 일부 발췌 http://www.sitepoint.com/ ]

일반 사용자 관점에서 봤을 때는 각 색상이 지니는 상징적 의미와 버튼에 들어간 레이블의 적절성과 위치 등을 기준으로 의견을 나눌 수 있을 것 같습니다. 일반적으로는 오른쪽 안을 선호하겠네요.

하지만 여기에 간과된 부분이 있습니다.
특정 사용자 층, 즉 색각이상자에 대한 사용성이 고려되지 않았다는 점입니다.
웹접근성에 대해 관심을 갖고 계신 분이라면 위 그림만 보고도 이미 알아차리셨으리라 생각됩니다.

통계에 따르면, 호주남성의 8%, 미국남성의 7%, 한국남성의 약 6%가 적녹색맹으로 알려져 있습니다. (출처. 나무위키)
전색맹과 부분색맹 중 부분색맹이 대부분이고, 부분 색맹 중에서도 빨강과 녹색이 모두 회색으로 보이는 적록색맹이 가장 주를 이룬다고 합니다.

03

[출처. 이시하라 색각 검사표]

신체검사 때 많이 보셨던 이시하라 색각 검사 표인데요.
적록색맹인 경우에는, 저 숫자가 8이 아닌 3으로 보인다고 합니다.

아래는 적록색맹에 대한 비교 체험 영상입니다.

[ 출처. '색맹 비교체험 자동차 운전할 때’ - 유투브 ]

영상을 보니 정말 빨강과 녹색에 대한 구분이 전혀 되질 않네요.
이런 사소할 수 있는 오류가 일반인들은 인식하기 힘들지만, 소수자에게는 빈번하고 익숙한 불편함인 것이 사실입니다.

만약 색맹을 가진 분들이 active user인 서비스나 제품을 설계하고 디자인한다고 가정한다면, 어떤 것들을 고려해야 할까요?
웹 접근성이라는 관점에서 훨씬 더 다양한 방향성이 있을 수 있지만, 생각나는 사례들을 정리하자면,

먼저, 되도록 컬러로 차별화를 두는 디자인은 피합니다.
부득이 사용한다면 녹색과 빨간색의 조합은 반드시 피하고, 색각 이상자도 동일하게 인식할 수 있는 색상 조합을 선택합니다.
좀더 식별을 위해서는 텍스트, 레이블, 버튼 등에 차이를 두는 것이 좋습니다.

08

[출처 . USC UI engineer Riely Hilliard 블로그 http://rileyh.com/usc-js/]

Color spectrum 이 너무 가까운 부분에 있는 것도 문제가 되겠네요.
녹색과 붉은 색 빛깔이 함께 쓰이면 색깔을 더 밝게 만드는 경향이 있습니다.
아무래도 Color spectrum에서 서로 너무 근접해 있기 때문에 생기는 증상인 듯 합니다.

05

Contrasting을 잘 이용하여 좋은 대비를 만드는 것이 이 부분에서 포인트라 할 수 있겠네요.

06 07

[ 출처. 270towin ‘historical president Election ]

 

특수한 사용자를 위한 배려는 이미 많은 글로벌 서비스 업체들이 선두에서 이끌어 가고 있는 부분이 있습니다.
그 중 ‘아마존’과 ‘드롭박스’에서 엿보이는 ‘디테일’을 간단히 예로 들어보려고 합니다.

‘아마존’은 세계에서 가장 큰 온라인 서점이기도 하고, 지금은 음반, 의류, 주방용품, 자동차 용품, 컴퓨터 소프트웨어 등 다양한 영역으로 비즈니스를 확대하고 있어 세계에서 명실상부한 최고의 오픈마켓 중 하나가 되었습니다.

09

[출처. 아마존 홈페이지 http://www.amazon.com/ ]

아마존의 메인페이지에 처음 접속하면, 상품 검색, 회원가입, 로그인과 같은 CTA버튼은 누가 보더라도 여기서 무엇을 해야할지 Contrast의 적절한 대비를 잘 활용하여 안내를 해주고 있습니다.

아래 상품 상세 페이지에서도 웹접근성을 고려한 설계가 엿보입니다.
구매 및 렌트에 대한 가격과 평점 정보 등은 누구에게나 잘 보일 수 있도록 CTA버튼이 디자인되어 있습니다.

10

[출처. 아마존 홈페이지 제품 상세보기 http://www.amazon.com/ ]

하나의 좋은 예를 더 살펴보도록 하겠습니다. 아래 사진은 드롭박스의 화면인데요.

11

아이콘에 각 상태를 알려주는 장치가 되어 있습니다.
워낙 조그마한 상태 체크 표시 장치이기 때문에 컬러 구분만으로 상태를 확인하는 것은 어려울 수 있으나
모든 사용자들이 혼동없이 상태 아이콘을 통해 상태를 명확하게 인지하는데 도움을 주고 있습니다.

제품과 서비스를 기획하고 디자인하는 데 있어, 만들어 내는 사람이 삼는 가치우선순위는 은연중에 드러나게 되어 있습니다.
사용자를 바라보는 관점, 서비스의 목표, 철학 등 여러 가치척도에 따라 사용자 배려 영역의 깊이와 방향이 달라질 수 있고, 그에 따라 고민의 종류도 깊이도 달라지게 됩니다.

한마디로, ‘디테일’이 달라집니다.
사소한 버튼 하나, 레이블 하나, 설명문구 하나의 작은 배려를 통해,
일부 사용자들의 ‘익숙한 불편함’을 줄여주는 작은 디테일이 전 참 좋습니다. ^^

감사합니다.

– 가치 UX 그룹 백희성

 

* 메인이미지 출처. http://www.youxdesign.com/

Share this:

Leave a comment