도서 | 하루 5분 UX (9-2)

제9장: 와이어프레임과 프로토타입

Lesson 64: 폴드, 이미지, 헤드라인

폴드

사용자가 스크롤을 하기 전에 보이는 디자인 영역.

폴드 위에 있는 영역 전체는 사용자의 눈에 잘 보인다.

한 연구에 따르면, 사용자 중 60~80%가 폴드 아래에 흥미로운 것이 있을 것 같으면 즉시 스크롤을 내린다고 한다.

폴드 위에 어떤 내용이 있든 상관없이 폴드 아래에 무엇이 있는지 사용자가 알 수 있어야 한다.

그렇지 안흥면 사용자는 찾아볼 생각도 하지 않을 것이다.

★주의★

페이지 상단에 배경 이미지를 넣는 것이 유행이다.
그러나, 배경 때문에 폴드 아래에 아무것도 없는 것처럼 보인다면 사용자들은 스크롤을 내리는 대신 그냥 떠나버릴지도 모른다.

이미지

이미지는 사용자의 시선을 유도할 수 있으므로 잘 활용해야 한다.

특히 레이아웃에서 인물의 이미지는 사용자의 시선을 끄는 가장 강력한 수단이다.

이미지에 감정이 실릴수록 관심을 끄는 효과가 있다.

★핵심 팁★

인물의 이미지를 사용할 때는 그 인물의 시선이 어디로 향하는지가 중요하다. 사용자의 시선을 유도하고 싶은 곳으로 향하게 하라.

헤드라인

인물 이미지를 제외한다면 우리의 시선은 레이아웃에서 가장 크고 콘트라스트가 높은 테스트로 가기 마련이다.

따라서, 사람들이 스캔을 시작하는 곳에 헤드라인을 배치시켜야 한다.

헤드라인 아래에는 가장 중요한 내용이 배치되어야 한다.

★요약★

1. 사용자가 스크롤하기 전에 관심을 끌 만한 것을 제공하라.
2. 폴드 아래에도 내용이 있다는 것을 분명히 알려주어라.
3. 감정이 드러나는 이미지를 사용해 사용자의 시선을 유도하라.
4. 가장 중요한 내용 근처에 헤드라인을 배치하라.

---

Lesson 65: 인터랙션 축

이 아이디어는 믿기 어려울 만큼 단순하다.

인간의 관심은 극히 제한적이다. 우리는 한 번에 한 가지에만 집중할 수 있다.

그러니까 하나의 콘텐츠에 집중하고 있을 때는 효율적이게도 다른 콘텐츠는 눈에 들어오지 않는 것이다.

엣지를 찾아라

각각의 엣지는 인터랙션 축이다.

당신의 시선은 그 축이 끝나거나 다른 것이 방해하기 전까지 축을 따라갈 것이다.

사용자의 관심은 보통 인터랙션 축에 고정되어 있고, 그 관심이 사라지면 다른 인터랙션 축으로 이동한다.

사람들이 클릭하기를 바라는 버튼이 있다면 인터랙션 축 위에(아니면 근처에) 두어라.

---

Lesson 66: 폼

폼은 사용자 측면에서 시간을 많이 할애하게 되는 부분이다.

혼란과 오류, 무응답 같은 문제들이 있지만 웹 사이트에서 가장 중요한 부분 중 하나라는 사실, 잊지 말자!

긴 페이지 하나? 짧은 페이지 여러 개?

이해하기 쉽게 만들 수만 있다면 여러 페이지로 나누어도 상관없다.

사용자가 중간에 그만둬도 입력 내용이 저장될 수 있도록 단계별로 페이지를 나누는 것도 좋다.

이때 중요한 점은 폼이 간단하게 느껴져야 한다는 것이다.

양질의 답을 얻을 수 있는 입력 유형을 선택하라

폼의 목적은 사용자가 입력하는 정보를 수집하는 데 있다.

양질의 답을 얻을 수 있는 가장 좋은 입력 유형을 선택해야 한다.

EX

사용자로부터 가능한 많은 응답을 받아야 한다면 체크박스를,

좀 더 선택적인 응답이 필요하다면 라디오 버튼을 이용하는 것이 좋다.

라벨을 적절하게 사용하라

입력해야 할 내용을 알려주는 라벨은 짧고 분명하며 읽기 쉬워야 하고, 입력창 가까이에 위치해야 한다.

그렇게만 하면 라벨 관련 문제는 99% 해결된다.

설명이 필요할 때

몇 개의 단어로 설명 가능하다면, 라벨과 입력창 근처에. 

문장이 길어진다면,  폼의 측면으로 이동시켜 사용자의 흐름을 방해하지 않아야 한다.

최대한 우아하게 오류를 처리하라

폼에는 언제나 오류가 존재한다.

사용자가 당신이 기대하는 정보를 입력할 수 있도록 예시를 보여주는 것도 오류를 줄일 수 있는 방법이다.

이를 인라인 에러 핸들링이라고 부른다. (ex 패트위드 강력함 정도, 올바른지 '체크' 혹은 'X' 표시)

반면, 사람 이름처럼 입력한 내용이 검증할 수 없는 정보라면 사용하면 안 된다.

사용자가 '다음' 혹은 '완료'버튼을 클릭할 때 폼에 오류나 놓친 질문이 없는지 확인할 수 있게 하라.

★핵심 팁★

홈의 하단에서 오류를 확인할 수 있도록 만들어라!
만약 사용자가 상단까지 스크롤해야 어디가 틀렸는지 알 수 있다면 그들은 망설이지 않고 떠나버릴 것이다.

속도 VS 오류

일반적인 질문의 경우

폼의 라벨 입력창 위에 왼쪽 정렬로 배치.

특이하고 복잡한 질문의 경우

라벨 입력창 왼쪽 측면(같은 줄)에 배치한다면 사용자의 속도를 떨어뜨리겠지만, 낮은 오류 발생가능성.

'완료' 버튼을 왼쪽 인터렉션 축 위에 두는 것이 좋다. 만약 폼의 내용이 논란의 여지가 있거나 심각한 주제를 다룬다면 '완료' 버튼을 오른쪽에 두고 사람들이 반사적으로 클릭하는 대신 잠깐 멈춰 생각할 수 있게 하는 것이 좋다.

---

Lesson 67: 주요 버튼과 보조 버튼

주요 버튼

생산적: 가입, 구매, 저장, 송부, 공유, 콘텐츠 제공 등

이전에 존재하지 않았던 것을 생산한다.

주요 스타일

배경과 확연히 구분되는 높은 콘트라스트(색상 또는 색조의 강한 대비)

레이아웃 내 위치

사용자가 보는 즉시 반사적으로 알아차릴 수 있도록 인터랙션 축 위 혹은 근처에 두기.

보조 버튼

비생산적: 취소, 건너뛰기, 재설정, 제안 거절

새로운 것을 창작하지 못하게 하거나 저해한다.

보조 스타일

배경과 비슷하도록 낮은 콘트라스트(비슷한 색상 또는 색조)

레이아웃 내 위치

사용자가 필요할 때 의식적으로 찾아야만 보일 수 있도록 인터랙션 축에서 멀리 떨어진 곳에 두기

중요 버튼

간혹, 계정 삭제처럼 비생산적 행동이 중요할 때가 있다.

이러한 행동은 레이아웃상 보조 위치에 주요 스타일로 디자인해야 한다.

이런 종류의 버튼은 행동의 중요성을 상기하기 위해 경고를 뜻하는 색(빨강, 오렌지, 노랑)으로 디자인하는 것이 좋다.

특수 버튼

아마존의 '원 클릭 구매' 버튼, 핀터레스트의 '핀잇' 버튼, 페이스북의 '좋아요' 버튼은 모두 이 디자인 처치를 받은 것이라 할 수 있다.

---

Lesson 68: 적응형 디자인과 반응형 디자인

각각에 맞게 설계하는 적응형 디자인

주로 디바이스 몇 개를 골라 각각에 맞게 설계한 디자인.

스마트폰을 통해 방문하는 사용자는 작은 버전을 보게 될 것이고, 데스크톱을 통해 방문하는 사용자는 큰 버전을 보게 될 것이다. 이것이 내용의 전부다. 

적응형 디자인은 만들기 쉽고 시간이 적게 걸린다. 반응형과 비교했을 때, 매우 정적이다.

모든 스크린에 적용되는 반응형 디자인

윈도우 사이즈가 달라지면 그에 맞춰 '늘어나고', '조정'되기 때문에 디바이스의 종류와 스크린 해상도에 상관없이 완벽하게 작동한다. '브레이크 포인트' 덕분이다.

---

Lesson 69: 새로 할까 수정할까

무엇이 문제인지부터 밝혀라

가장 먼저 당신이 목표하는 바가 무엇인지 정확히 밝히고, 그 목표와 현재 디자인이 얼마나 동떨어져 있는지 파악해야 한다.

가장 작은 것부터 바꿔라

문제를 감지했고 문제를 해결하기 위해 무엇이 필요한지 알고 있다면 크고 멋진 방법을 찾으려고 애쓰지 마라. 그 일을 해결하기 위한 가장 쉬운 방법을 찾아야 한다.

EX

크로스링크를 추가해 사용자가 잘못된 페이지로 가더라도 원하는 것을 쉽게 찾을 수 있도록 하자. 

새로운 디자인은 구닥다리 디자인을 모두 없앨 수 있지만 기존 데이터 사용과 기대 충족 문제가 있으니 조심히 다루어야 한다.

때로는 덜 하는 것이 최고의 디자인이 될 수 있다

무언가를 빼고도 문제를 풀 수 있는지 스스로에게 계속 질문해야 한다.

자동 기능을 만들어 사용자의 짐을 덜어줄 필요가 있다. 대개 더 적은 것이 낫다.

---

Lesson 70: 터치 VS 마우스

마우스가 손가락보다 나은 점

1. 작고 정확하다

화면 근처로 직접 가지 않더라도 마우스를 통해 더 큰 화면과 상호작용할 수 있다.

마우스는 기술적으로 한 개의 픽셀까지 선택할 수 있다.

미세하고 정밀한 작업이 필요할 때는 마우스를 사용하는 것이 좋다.

2. 화면 속에 존재한다

가장 큰 장점은 클릭하지 않고도 변화를 줄 수 있다는 점이다.

3. 쉽게 선택할 수 있다

손가락을 이용해 터치-드래그를 할 때 시야를 가리는 스크롤 방식에 비해 큰 이점이다.

4. 옵션을 숨겨놓을 수 있다

마우스 우측 버튼(맥에서는 커맨드-클릭)을 누르면 숨겨져 있던 메뉴나 고급 기능이 나타난다.

5. 모양을 변경할 수 있다

많은 소프트웨어가 시각적 피드백을 풍성하게 제공하기 위해 이 점을 활용한다.

손가락이 마우스보다 나은 점

1. 촉각을 통해 피드백을 받을 수 있다

손가락은 피부 안에 신경 조직이 있어 무언가를 만졌을 때 뇌에 해당 사실을 전달한다.

2. 인터페이스에 직접 작용한다

버튼을 클릭하고 싶을 때 마우스를 찾을 필요 없이 버튼에 손가락을 터치하면 된다.

별일 아닌 것처럼 들리겠지만 두뇌의 부담을 훨씬 덜어준다.

3. 물리적인 특성이 적용된다

인터페이스에 직접 닿을 수 있다는 사실이 의미하는 것은 실제 존재하는 물리적 특성이 적용되기 시작했다는 뜻이다.

당신은 '아래로' 스크롤하는 것이 콘텐츠를  '위로' 올리는 것이라는 사실을 알아치라지 못했을 수도 있다.

4. 언제나 이용 가능하다

나의 손가락! 사용하지 않을 때조차 그것들이 어디에 있는지 알고 있으며, 잃어버릴 일도 절대 없다.

5. 멀티터치를 이용한다

손으로 하는 제스처는 대화의 일부로 늘 존재해 왔기 때문에 스와이프나 핀치 기능을 사용하는 데 별 어려움이 없다.

복잡한 제스처가 필요하다면 2개 이상의 손가락을 활용하는 멀티터치를 이용하는 것이 좋다.

6. 충분히 훈련되었다

사람은 보통 네 살 무렵 기본적인 운동 능력을 갖추게 된다.

우리는 아이들이 성인만큼 스마트폰을 잘 조작하는 것을 통해 그 사실을  확인할 수 있다.