도서 | 하루 5분 UX (8)
제8장: 시각디자인의 원칙
Lesson 51: 시각적 무게(콘트라스트와 사이즈)
이 레슨은 5가지 시각 디자인 원칙 중 첫 번째로, 사용자의 관심을 유도하는 방법을 알려줄 것이다.
시각적 무게 개념은 꽤 직관적이다.
레이아웃에서 어떤 것들을 다른 것들보다 더 '무겁게' 보이게 해야 한다.
사람들의 이목을 집중시킬 것이다.
사용자가 목표를 이루는 데 방해받지 않는 것도 중요하다.
사용자의 시선을 좀 더 쉽게 유도할 수 있고, 그들의 시선이 다음에 어디로 가야 할지 결정할 수 있다.
★주의★
시각적 무게는 상대적인 것이다.
모든 시각 디자인 원칙에서는 디자인 요소의 대상을 둘러싸고 있는 주변의 것들을 비교하는 것이 중요하다.
콘트라스트
밝은 것과 어두운 것의 차이를 말한다.
차이가 클수록 콘트라스트가 더 높다고 표현한다.
뎁스와 사이즈
우리는 멀리 있는 것보다는 가까이에 있는 것을 좀 더 쉽게 알아차린다.
만약, 어떤 물체의 크기가 동일하다면, 시선은 왼쪽에서 오른쪽으로 옮겨질 것이다.
디자인이 '평면적'이더라도 사이즈는 그러한 효과를 준다.
일반적으로 중요한 것을 덜 중요한 것에 비해 크게 만든다.
이는 한 페이지 안에서 시각적 계층을 만들어내며, 사용자가 훑어보기 쉽게 한다.
사용자가 무언가를 구매하는 대신 로고를 쳐다보고 있기를 원하는 것이 아니라면 로고를 더 크게 만드는 것은 잘못된 선택이다.
Lesson 52: 색상
의미를 담아라
형태는 모두 동일하더라도 색상에 따라 다른 의미를 줄 수 있다.
색상을 일부러 선택했다면 반드시 의미를 담아야 한다.
★핵심 팁★
특정 색상을 고집하며 다른 디자이너와 다투지 마라.
UX에서는 흐릿한 빨강이나 선명한 빨강이나 그냥 빨강일 뿐이다.
진술 혹은 후퇴를 표현하라
색상도 '소란'스럽거나 '조용'할 수 있다.
EX
'구매' 버튼 같은 것은 화면 밖으로 튀어나온 것처럼 보이는 색상으로 정해야 한다.
사람들은 앞으로 '진출'하는 것처럼 보이는 색상을 더 많이 클릭한다.
뒤에 물러나 있기를 원하는 것은 '후퇴'시키자.
항상 화면에 존재하는 메뉴에는 이런 효과를 적용하는 것이 좋다.
와이어 프레임을 단순하게 만들어라
색상은 꼭 필요할 때만 사용해야 한다.
UX 디자이너는 보통 와이어프레임을 작성할 때 흑백만 사용한다.
UX 디자이너들은 기능에 집중하고, UI 디자이너들은 심미성과 느낌, 스타일에 집중한다.
시각적 원칙들을 조합하라
오류나 경고 표지는 빨간색으로 만들고 콘트라스트를 높여라.
그게 아니라면 후퇴색인 녹색으로 작게 표시하는 것이 가장 좋다.
Lesson 53: 반복과 패턴 깨기
패턴을 깨라
사람들은 오른쪽에 있는 옵션보다 왼쪽에 있는 옵션을 더 많이 클릭할 것이라는 사실을 예상할 수 있다.
EX
똑같이 생긴 오리 5마리가 줄지어 가고 있다고 생각해 보자. 그중 한 마리가 단독으로 행동한다.
'메뉴'라면 정중앙의 옵션은 사람들의 시선을 사로잡기에 이전보다 더 많은 클릭 수를 얻게 될 것이다.
반면 왼쪽 옵션들의 클릭은 분산되며 이전보다 덜 인기를 얻게 될 것이다.
뻔하고 단순한 내용처럼 보이지만, 디자인에 적용하면 사람들이 중요한 버튼과 옵션, 인기 스타를 놓치지 않게끔 해줄 것이다.
★주의★
패턴을 깨면 정작 사용자들이 봐야 할 중요한 것들로부터 눈길을 뺏을 수도 있다.
패턴을 깨기 전에 우선 패턴을 잘 만들어야 한다.
강조하고 싶은 부분에 변화를 주어라
패턴이나 배열을 만들기 위해서는 시각적 무게와 색상을 일정하게 유지해야 한다.
사용자의 시선은 패턴의 한쪽 끝에서 반대편 끝으로 따라갈 것이다.
이 패턴을 깨려면 그저 강조하고 싶은 부분에 변화를 주면 된다.
Lesson 54: 라인 텐션과 엣지 텐션
시각적 '텐션'이란 매우 기초적인 개념이지만 얼마나 유용하게 사용할 수 있는지 알게 되면 깜짝 놀랄 것이다.
라인 텐션
EX
8마리의 오리가 일렬로 줄지어 있다.
우리는 이것을 개별적으로 보지 않고 한 줄로 인식한다. 이것이 바로 라인 텐션이다.
선이나 길이 존재하지 않는데도 존재하는 것으로 인식하는 것이다.
엣지 텐션
레이아웃 측면에서는 라벨처럼 작은 것에 더 많은 집중이 필요할 때 사용하면 좋다.
레이아웃이 좀 더 단순하고 일관성 있게 느껴지게 하는 효과도 있다.
또는 사람들이 클릭했으면 하는 버튼으로 향하는 시각적 길을 만들 수도 있다.
빈티지 광고들은 로고를 강조하는 방법으로 이 기법을 종종 사용한다.
자신의 원칙들을 조합하라
'텐션'이 생긴 틈을 비워두기도 하지만,
그러지 않고 색의 그라데이션을 이용해 아이템 목록으로 이어지는 길을 만들 수도 있다.
개별적 요소가 아니라, 그 요소들이 한 형태를 만들고 있는 그룹 전체에 시각적 무게 효과를 줄 수도 있다.
이는 레이아웃에 추가로 무언가를 더하지 않고 사용자의 관심을 사로잡을 수 있는 좋은 방법이다.
Lesson 55: 정렬과 근접성
정렬
같은 모습을 가지더라도 우리의 인식에 '배열'이 관여한다면,
비슷한 기능을 가진 버튼들도 정렬된다고 느낄 것이다. 다른 차원의 콘텐츠도 정렬될 수 있다.
정보는 스프레드시트처럼 열과 행 속에서 여러 가지 다양한 의미를 전달할 수 있다.
근접성
두 대상 사이의 거리는 서로 얼마나 연관되었는지에 관한 느낌을 전달할 수 있는 것을 '근접성'이라고 한다.
EX
한 가지 행동(ex 구매 혹은 애플리케이션 다운로드)에 관련된 헤드라인, 내용, 버튼을 '패키지'처럼 디자인하는 것이다.
이를 통해 사용자들은 설명을 읽지 않고도 그것들이 서로 관련 있는 내용이라는 사실을 이해할 수 있다.
Lesson 56: UX를 위한 모션 이용하기
사용자를 기다리게 하지 마라
EX
놀라운 화면 전환과 매끄러운 애니메이션 버튼, 패럴랙스 스크롤링(사용자가 마우스를 스크롤할 때 원거리에 있는 배경 이미지는 느리게, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법)을 디자인하기 전에 잠깐 사용자를 생각해 보자.
기다리는 것보다 더 나쁜 것은 간혹 애니메이션이 글씨를 가리기도 하고, 사용자가 읽고 클릭해야 할 콘텐츠와 버튼을 찾는 데 방해가 된다는 점이다.
모션은 종종 짜증을 유발한다
진동 배너와 뛰어다니는 버튼 때문에 짜증이 난 적이 있다면 모션이 얼마나 이목을 끄는지 알고 있을 것이다.
뇌가 인지하는 것들의 목록을 작성해 우선순위를 매겨본다면 모션이 가장 앞에 올 것이다.
직선은 방향성을 만든다
주요 기능을 강조하거나 사용자들이 어디로 가야 할지 안내하고 싶다면 움직이는 직선 모션은 좋은 선택이다.
사람들의 시선은 곡선을 따라 이동한다
사용자들이 애플리케이션을 처음 이용해 설명이 필요한 경우라면 그들이 화면을 한 바퀴 둘러볼 수 있도록 곡선 모션을 이용하는 것이 좋다.
곡선 경로를 따라 사용자의 시선을 이동하게 하고, 필요한 곳에서 애니메이션을 멈춰 시선을 머무르게 할 수 있다.
