[UXOX] 색을 이용한 시각적 위계

모멘티 UXOX입니다.
오늘은 시각적 위계에 대해 알아볼 시간입니다.

우리가 앱이나 웹을 이용하면서 많은 종류의 정보들이 나열되어 있는데요
정보들이 같은 크기와 색상으로 보여진다면 어떨까요?

아마 우리는 중요한 요소와 빠른 정보력을 얻기 위해 찾아보느라
눈은 많은 피로가 누적 됩니다.

이러한 이유로 화면을 기획하고 디자인할 때 어떤 정보가 중요하고 부가설명인지 놓치면
안되는 부분은 어떤 부분인지 고려하는 것이 매우 중요합니다.

시각적 위계란?

각 요소에 따른 중요도를 부여하는 것을 의미하는데요!
오늘은 색을 이용한 시각적 위계를 간단한 예시를 통해 알아보겠습니다.

Do

색상 위계를 줄때는 기능이 대비되는 만큼 색상을 대비시키는 것이 좋습니다.
그래야 사용자는 중요한 포인트를 빠르게 확인할 수 있습니다.

Don't

같은 크기와 색상이라면 사용자는 얻고자 하는 정보를 빠르게 보기 힘들고
서비스 이탈할 가능성이 높아집니다.

Don’t 에 비해 모멘티 문구와 버튼이 한눈에 잘 보이고
툴팁은 텍스트가 작음에도 불구하고 기능을 강조되는 것을 볼 수 있습니다.

다음 시간에는 더욱 더 알찬 UXOX시간으로 돌아오겠습니다.
긴 글 읽어주셔서 감사합니다. 여러분들께 유익한 글이 되었으면 좋겠습니다.

*UXOX는 더 나은 사용자 경험을 연구하기 위하여, 모멘티에서 발행하는 UX 시리즈 입니다.