유저 인터페이스 제약에는 낮은 색상 대비를 이용하라
Today
Today UX 아티클
UX Movement에 올라온 Anthony의 글 Use Low ColorContrast for User Interface Constraints를 전문 번역한 글입니다.
낮은 색상 대비는 웹 디자인에서 발생하는 흔한 문제입니다. 낮은 색상대비의 문제는 텍스트와 버튼을 유저가 보기 힘들다는 겁니다. 보통 높은 색상 대비를 웹사이트에 사용하는 것이 가장 좋습니다. 하지만 여기서는 낮은 색상 대비가 유저에게 도움이 되는 경우를 살펴보겠습니다.
유저 인터페이스 디자인에서 제약(constraints)이란 유저가 컨트롤을 가지고 취할 수 있는 행동을 제한해주는 겁니다. 이는 유저가 상호작용 하는 동안 디자인을 보다 이용하기 쉽게 해 주고 유저 오류를 줄여줍니다. 제약이 있는 유저 인터페이스 컨트롤을 이용할 때, 낮은 색상 대비를 약간 활용하면 이런 제약을 효과적으로 소통할 수 있습니다. 제약이 유용하고 필수적인 몇 가지 사례를 살펴보겠습니다.
첫 번째는 페이지네이션(paginations) 사례입니다.
유저가 웹사이트의 1번 페이지에 있을 때, “이전(previous)”링크는 비활성화 상태로 보여야 합니다. 낮은 색상 대비를 “이전” 링크에 사용하면, 유저에게 링크를 쓸 수 없음을 알릴 수 있습니다. 그 링크를 클릭해도 어디로도 이동할 수 없다는 뜻입니다. 이렇게 되면 유저가 뒤가 아닌 앞으로 가게 되는데, 여러분은 유저가 1페이지에 있을 때 이렇게 행동하길 원할 겁니다.
두 번째 사례는 캐러셀(carousels) 사례입니다.
캐러셀에서는, 유저가 먼저 앞으로 나아가길 원할 겁니다. 하지만 항목 리스트가 끝나면 캐러셀은 유저가 뒤로 갈 수 있도록 유저를 제한해야 합니다. 캐러셀에서 흔히 발생하는 문제는 스크롤링 제한을 두지 않는다는 것입니다. 이렇게 되면 끝없이 스크롤 할 수 있는 무한 루프가 만들어져서 유저에게 혼란을 야기할 수 있습니다. 유저가 캐러셀에서 어느 정도 위치에 자신이 와 있는지 알 수 없기 때문입니다. 유저는 특정 항목이 캐러셀 시작쯤에 있는지 끝쯤에 있는지 알 수 있어야 합니다. 이렇게 해야 유저가 원할 때 뒤로 가거나, 그만 보고 싶을 때 멈출 수 있습니다.
세 번째 사례는 멀티페이지 스테핑(multi-page stepping)입니다.
멀티페이지 스테핑에서 사용된 제약은 유저가 프로세스에서 어느 단계에 와 있는지 알려주고 얼마큼 단계가 남았는지 보여줍니다. 이는 유저가 쉽고 정확하게 여러 페이지의 단계를 끝마칠 수 있도록 유저를 가이드해줍니다. 낮은 색상 대비를 남은 단계에 사용하여 다음 단계로 넘어가기 전에 유저에게 앞으로 밟아야 할 단계와 현재 위치한 단계를 알려줄 수 있습니다.
낮은 색상 대비를 제약에 사용하는 것은 유저가 디자인과 보다 효과적으로 상호작용할 수 있도록 도와주는 훌륭한 테크닉입니다. 이경우가 유일하게 낮은 색상 대비를 웹사이트에서 사용해도 되는 경우입니다. 디자인할 때 이를 염두에 두면, 유저에게 좋은 사용자 경험을 전할 수 있을 겁니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성전자, SK텔레콤, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
