시각적 계층 (Visual Hierarchy) 효과

정의

정보를 시각적으로 구조화하여 사용자의 주의를 유도하고 중요한 내용을 강조하는 것을 말한다

설명

시각적 계층을 잘 구성하면 사용자가 정보를 파악하고 이해하는데 도움이 되기 때문에 웹,앱 디자인에서 특히 중요하다

예시

웹사이트에서 중요한 정보를 큰 제목과 선명한 이미지로 표현하고, 부가적인 내용은 작은 글씨와 심플한 디자인으로 나타내는 것이 시각적 계층의 예시

UIUX디자인에 활용하기

시간적 계층을 uiux에 적용하면 사용자가 정보를 더 빠르게 파악하고, 필요한 내용에 쉽게 접근할 수 있다

시각적 계층으로 사용자 경험을 향상시키고 사용자 행동을 유도해보자

제목과 부제목 크기, 색상, 타이포

중요한 내용에는 큰 크기와 명확한 색상 사용으로 시선을 끌고 부가적 정보는 작은 크기와 덜 강렬한 색상을 사용하도록 한다

타이포 또한 중요한 내용은 볼드하게, 부가적인 정보엔 노멀한 폰트를 사용한다

그래픽 요소 활용

주요 기능이나 서비스를 나타내는 아이콘, 혹은 이미지를 사용해 중요성을 더 강조한다. 이 때, 아이콘은 명확하고 간결해야한다

강조할 내용은 색상이나 배경을 변경하여 시선을 끌도록 한다

레이아웃 조정

정보 중요도에 따라 레이아웃을 조정하여 중요한 내용이 눈에 띄도록 배치하여 사용자가 콘텐츠를 쉽게 스캔하고 필요한 정보에 빠르게 접근할 수 있도록 한다

7가지 시각적 계층 원칙 아티클 읽어보고 더 쏙쏙 이해해보기

읽기패턴

삼등분의 법칙