조엘 마쉬의 UX 특강 31편 (번역)

출처: http://imseongkang.wordpress.com/2014/04/28/uxcrash31korean/

오랜만에 UX 공부하려고 뒤적거리다가 ‘UX Crash Course: 31 Fundamentals‘라는 글을 발견했습니다. UX 전문가인 Joel Marsh가 새해 다짐으로 ‘1월에는 UX 관련 글을 매일 하나씩 쓰겠어!’라고 마음 먹은 뒤, 정말로 하루에 하나씩 총 31편을 연재한 시리즈인데요. 글 하나하나가 짧고 재미있으면서도, 각 내용을 공부할 시작점으로 삼기에 좋아보였습니다. 공부할 겸 한국어로 옮겨도 좋을 듯해서 저자에게 메일 보내보니 흔쾌히 허락해주더라고요. Thank you! Joel! 그래서 가볍게 번역해서 올려봅니다. 다른 분들께도 도움이 되었으면 좋겠어요.

(노트) 짧은 글이라도 31편을 한데 묶으니 분량이 제법 되네요. UX 디자인이 제 전문 분야는 아니라서 부정확하게 옮긴 부분도 있을 거에요. 그 점은 양해해주시고 지적해주세요. 비영리 조건으로 허가 받았기 때문에, 제 번역물도 마찬가지로 영리적으로 사용하시면 안 됩니다. 자, 그럼 아래부터는 본문 갑니다.

UX의 기본 원리: 어떻게 시작할까

이 글에서는 UX에서 배울 수 있는 모든 것을 다루지는 않습니다. 빨리 훑어보는 거죠. 초보자에서 되도록 빨리 영웅이 될 수 있게요. UX의 큰 영역들은 모두 조금씩 맛볼 테고, 어디를 더 공부해야할 지 알게 될 겁니다. 글 순서는 실제 UX 과정에 얼추 맞췄으니, 작업에 적용해보셔도 좋습니다.

[ 차례 ]

도입, 핵심 아이디어

#01 — UX란 무엇인가?
#02 — 사용자 목표와 사업 목표
#03 — UX의 5대 재료

사용자를 이해하는 법

#04 — 사용자 연구란 무엇인가?
#05 — 사람들에게 질문하는 법
#06 — 사용자 프로필 만들기
#07 — 기기에 맞춰 디자인하기
#08 — 디자인 패턴

정보 설계

#09 — 정보 설계란 무엇인가?
#10 — 사용자 스토리와 정보 설계의 종류
#11 — 와이어프레임은 무엇인가?

시각 디자인 원리

#12 — 시각적 무게감, 대비, 깊이
#13 — 색깔
#14 — 반복, 패턴 파괴
#15 — 선의 긴장, 가장자리의 긴장
#16 — 정렬, 근접도

기능 레이아웃 디자인

#17 — Z 패턴, F 패턴, 시각적 계층
#18 — 둘러보기 vs. 찾기 vs. 발견하기
#19 — 페이지 프레임웍
#20 — 폴드, 이미지, 제목
#21 — 인터랙션의 축
#22 — 폼
#23 — 지시문, 보조 설명, 라벨
#24 — 1차 버튼, 2차 버튼

사용자 심리

#25 — 조건 형성
#26 — 설득
#27 — 경험은 어떻게 경험을 바꾸는가

데이터로 디자인하기

#28 — 데이터란 무엇인가?
#29 — 요약 통계
#30 — 그래프 모양
#31 — A/B 테스트

 

#01

이번 달 제 목표는 디자이너나 디자이너 지망생이 사용자 경험 디자인을 좀 더 많이 시작하게 만드는 거에요. 뭐라도 하려면 처음부터 보는 게 가장 좋겠죠?

UX란 무엇인가

사용자 경험(UX: user experience)은 어디에나 있습니다. 우리가 할 일은 사용자 경험을 창조하는 것이 아닙니다. 그걸 좋게 만드는 게 우리가 할 일이죠. 

“좋은” 사용자 경험이란 무슨 뜻일까요?

흔히 사용자를 행복하게 만드는 게 좋은 사용자 경험이라고 생각합니다. 아녜요! 사용자의 행복이 유일한 목표라면, 웃긴 고양이 사진이나 아무 칭찬이나 대충 던져놓고 퇴근하면 될 겁니다. 뭐, 그런 세상도 나쁜 것만은 아니겠지만, 사장님이 그 결과를 좋아할 진 모르겠네요.

UX 디자이너의 목표는 사용자를 효율적으로 만드는 겁니다.

사용자의 경험이란 건 그저 빙산의 일각일 뿐입니다.

“UX”는 사용자의 경험이라고 많이들 오해하지만, UX는 사용자 경험 디자인의 과정을 “하는” 것에 대한 것입니다.

사용자 각각의 경험은 여러분의 앱이나 사이트에 대한 사용자 각자의 의식적이고, 주관적인 의견이에요. 사용자 피드백은 중요합니다. 가끔은요. 하지만, UX 디자이너들은 그것보다 훨씬 더 많이 해야 한다고요.

UX를 “한다”

UX 디자인(UXD)에는 과학 연구와 아주 비슷한 과정들이 있습니다. 우리는 사용자를 이해려고 연구합니다. 사용자의 요구사항, 에, 그리고 사업의 요구사항을 해결하기 위해 아이디어를 만듭니다. 그리고 실제 세계에 그 해결책들을 구현하고 측정해서 잘 동작하는지 측정합니다.

이 모든 것들에 대해 이어지는 글들에서 배우게 될 겁니다. 뭐 그게 중요한 게 아니라면, 웃긴 고양이 사진들을 계속 쓰셔도 되겠죠.

다음 글에서는 당신이 디자인하는 모든 것들을 바꾸게 될 UX 목표의 두 가지 종류에 대해 배워봅시다.

---

 

#02

새로운 UX 프로젝트를 시작할 때면, 뭔가 디자인하기 전에 여러분의 목표가 뭔지 이해해야 합니다. 콕 집어 말하면 그 중 두 가지요. 여러분이 만드는 모든 것은 이 두 목표에 기반해야 하고, UX 디자이너로 성공하려면 이것보다 더 중요한 것은 없습니다. 그 두 가지란…

사용자 목표와 사업 목표

사용자 목표

사용자들은 언제나 뭔가를 바랍니다. 왜냐면 사용자는 사람이고, 사람은 언제나 뭔가를 바라거든요. 데이트 사이트에서 섹스 상대를 찾든, 유튜브에서 재채기하는 판다를 찾든, 아니면 페이스북에서 구남친을 스토킹하든 간에, 사람들은 뭔가를 원합니다. 어쩌면 뭔가 생산적인 걸 하고 싶어할 지도 모르고요. (뭐 그렇다더라고요.)

(사용자 연구 방법에 대해서는 다음 글들에서 볼 거에요. 지금은 우리가 사용자에 대해 잘 안다고 가정합시다.)

사업 목표

어느 단체든 사이트나 앱을 만들려는 가장 중요한 목적이 있습니다. 보통은 돈인데, 브랜드 인지도일 수도 있고, 아니면 커뮤니티 신규 회원 유치, 뭐 기타 등등일 수도 있습니다.

사업 목표가 어떤 형태인지는 아주 중요합니다. 광고를 좀 더 많이 보여주는 게 목표라면, 상품 판매나 소셜 미디어를 통한 선전을 목표로 할 때와는 UX 전략이 꽤나 다를 겁니다.

사업팀 사람들은 이런 걸 “지표”나 “KPI”라고 부르곤 하죠.

두 목표를 맞추기

UX 디자이너의 진가는 이 두 목표를 얼마나 잘 맞췄는지로 알 수 있습니다. 즉, 사업에서는 이윤이 발생하고, 사용자는 바랐던 목표에 도달하는 것이죠. (순서가 거꾸로면 안 돼요!)

유튜브는 광고로 돈을 벌고, 사용자는 훌륭한 동영상을 찾고 싶어합니다. 따라서 동영상 또는 동영상이 있는 페이지에 광고를 넣는 것은 말이 됩니다. 하지만 한 발 더 나아가, 동영상을 찾거나 비슷한 동영상 발견하는 게 쉬워지면, 사용자들이 더 많은 동영상을 볼 테고, 그럼 유튜브는 돈을 더 많이 법니다.

두 목표가 서로 맞춰져 있지 않으면, 사용자는 바라는 것을 얻지만 사업적으로는 소용이 없게 되거나(사용자는 많지만 성공하지 못함), 사용자가 바라는 것을 얻지 못하게 됩니다(사용자가 없고, 성공도 하지 못함). 유튜브에서 동영상 재생 30초마다 60초짜리 광고를 보게 만들었다면, 아마 순식간에 끔찍하게 죽음을 맞이했겠죠. 누구도 그럴 시간은 없거든요. 하지만 몇 초짜리 광고라면 아주 사랑스럽고 사랑스러운 재채기하는 판다 동영상을 보는 댓가로 낼만한 가격이죠.

다음 글에서는 훌륭한 목표를 훌륭한 UX 전략으로 바꿔내는 다섯 가지 요소에 대해 살펴보겠습니다.

---

 

#03

UX는 과정이에요. 그리고 이 글들은 그 과정을 대략적으로 따라갑니다. 하지만 그 과정 전반에서 늘 명심해야 하는 다섯 가지가 있습니다. 그 다섯 가지란…

UX의 5대 재료: 심리, 사용성, 디자인, 카피라이팅, 분석

이 다섯 가지 중 하나만으로도 특강을 꾸릴 수 있을 겁니다. 그러니 여기선 상당히 팍 줄여보죠. 어쨌거나 지금 제가 쓰고 있는 건 특강이고 위키피디아가 아니니까요. 

그럼에도 제대로 말하자면, 위키피디아의 UX 항목은 UX에 대해 딱 한 번 들어본 사람이 쓴 것 같아요. 딱 그거… 딱 그때… 말이죠.

1) 심리

사용자의 마음은 복잡합니다. 여러분도 알아야만 해요. 여러분에게도 하나 있잖아요. (그렇죠?) UX 디자이너들은 주관적인 생각이나 감정을 굉장히 많이 다루게 됩니다. 그런 것들은 여러분의 결과를 만들어낼 수도 부숴버릴 수도 있죠. 그리고 디자이너는 가끔은 자기 자신의 심리마저 무시해야 합니다. 어려운 일이죠! 자기 자신에게 다음의 질문들을 던져보세요.

여기 처음 오게 된 사용자의 동기는 무엇인가?
이게 사용자들에게 어떤 느낌을 줄까?
사용자들이 바라는 것을 얻으려면 얼마나 작업을 해야 하나?
사용자들이 이걸 하고 또 하고 하면 어떤 버릇이 생겨날까?
사용자들은 이걸 클릭하면서 어떤 걸 기대할까?
사용자들이 아직 배우지 않은 것을 알고 있다고 가정하고 있진 않나?
사용자들이 이걸 다시 하고 싶어할까? 왜? 얼마나 자주?
지금 뭘 생각하나? 사용자가 원하고 필요로 하는 것, 아님 내 자신이 바라고 필요로 하는 것?
훌륭한 행동에 대해서 어떻게 보상하고 있나?

2) 사용성

사용자의 심리가 대부분 무의식적인 거라면, 사용성은 대부분 의식적입니다. 게임처럼 뭔가가 어려울수록 더 재미있는 경우도 있지만, 대부분의 경우는 미스 틴 USA 참가자도 사용할 수 있을 정도로 쉽게 만들고 싶어하죠. 자기 자신에게 다음의 질문들을 던져보세요.

사용자가 덜 입력해도 일을 끝낼 수 있을까?
내가 막을 수 있는 사용자 실수는 없을까? (힌트: 네, 있어요.)
명료하고 직접적인가, 아니면 이건 좀 머리를 써야 하나?
그건 찾기 쉽나(좋음), 놓치기 어렵나(더 좋음), 아님 무의식적으로 기대하게 되나(최고)?
사용자의 가정과 맞는 방향으로 일하고 있나, 아님 그 반대로?
사용자가 알 필요가 있는 걸 빠짐없이 알려줬나?
지금 이 일을 좀 더 흔한 방식으로는 해결할 수 없나?
지금 결정을 내 논리나 내 분류에 맞춰 하고 있나, 아님 사용자의 직관에 따랐나? 어떻게 아나?
사용자가 작은 글씨로 된 부분을 읽지 않아도, 잘 작동하나, 잘 이해되나? 

3) 디자인

UX 디자이너로서, 여러분이 생각하는 “디자인”의 개념은 많은 디자이너들에 비해 좀 덜 미술적이겠죠. 여러분의 “마음에 드는지” 아닌지는 상관없어요. UX에서 디자인은 어떻게 동작하는지에 대한 것이고, 증명할 수 있는 무언가에요. 스타일 문제가 아니라고요. 자기 자신에게 다음의 질문들을 던져보세요.

사용자들은 이걸 좋게 볼까? 이걸 보자마자 신뢰할까?
별다른 문구 없이 원래의 목적과 기능을 잘 얘기하고 있나?
브랜드를 잘 나타내고 있나? 모든 요소가 하나의 사이트에 있는 느낌이 드나?
디자인이 사용자의 시선을 적절한 곳으로 이끌고 있나? 어떻게 알지?
색, 형태, 타이포가 사람들이 원하는 걸 찾도록 도와주나? 세부 사용성을 개선하고 있나?
클릭 가능한 것들이 클릭 불가능한 것들과 다르게 보이나?

4) 카피라이팅

브랜드 카피라이팅과 UX 카피라이팅은 서로 어마어마하게 다릅니다. 브랜드 카피라이팅은 회사의 이미지를 뒷받침합니다. 하지만 UX 카피라이팅은 목적을 달성하는 게 전부에요. 가능하면 직접적이고 단순하게 말예요. 자기 자신에게 다음의 질문들을 던져보세요.

자신감있게 들리나? 사용자에게 뭘 해야할지 말하고 있나?
사용자가 자신의 목표를 완수하도록 북돋아주나? 그게 우리가 바라는 건가?
가장 큰 글씨로 쓴 게 가장 중요한 내용인가? 아니라면 왜?
사용자에게 알리고 있나, 아니면 사용자가 이미 그게 뭔지 알고 있다고 가정하고 있나?
불안해보이지는 않나?
명확하고, 직접적이고, 간결하고, 잘 동작하나?

5) 분석

제 생각에 디자이너 대부분의 약점이 바로 분석이에요. 하지만 고칠 수 있죠! 분석은 UX와 다른 종류의 디자인을 가르는 큰 차이점인데요. 이걸 잘하면 여러분의 가치가 엄청나게 올라간답니다. 말 그대로 이걸 잘하면 월급이 올라요. 자, 그러니 자기 자신에게 다음의 질문들을 던져보세요.

자료를 어떻게 사용하고 있나? 내가 맞다는 걸 증명하려고? 아님 진실을 알려고?
무엇을 찾고 있나? 주관적 의견? 아님 객관적 사실?
그런 대답을 줄 수 있는 정보를 모았나?
사용자들이 왜 그렇게 행동하는지 알고 있나? 아님 사용자들의 행동을 해석하고 있나?
무엇을 보고 있나? 절대적인 수치? 아님 상대적인 개선 정도?
이걸 어떻게 측정할 텐가? 올바른 것을 측정하고 있나?
나쁜 결과도 찾고 있나? 왜 안 그러고 있나?
이 분석 결과로 어떻게 개선할 수 있나?

다음 글에서는 사용자 연구의 여러 방법에 대해 배워보겠습니다! 예이!

---

 

#04

아, 사용자들. UX 태양계의 태양이자 우리의 골칫거리들이시여. UX 쪽의 신성한 법칙 중 하나는 “절대로 사용자를 욕하지 말라.”입니다. 비록 (까짓 솔직해집시다.) 가끔은 정말로 @#$%@하게 그러고 싶을 때가 있지만 말이죠. 하지만 그런 느낌이 든다면 그건 여러분이 사용자를 이해하지 못했기 때문입니다. 그러니 오늘은 이걸 배워보죠.

사용자 연구란 무엇인가?

UX 디자인 과정 중 어느 단계에서 사용자를 연구할까요? 사람들마다 답이 다를 겁니다. 가장 처음에 해야 한다는 사람도 있고, 그림을 좀 그린 다음에 해야 한다는 사람도 있고, 실제로 동작하는 제품을 만든 다음에 하는 거라는 사람도 있습니다.

모두 옳습니다. 사용자 연구를 하면 안 되는 때라는 건 절대로 없습니다. 일찍 하고 자주 하세요.

언제 하느냐는 중요하지 않습니다. 무엇을 하느냐가 중요합니다.예를 들면, ‘사용자에 대해 무엇을 알려고 하나요?’처럼 말이죠.

사람들 대상 연구에서 얻을 수 있는 정보에는 크게 두 가지 종류가 있습니다. 주관적 정보와 객관적 정보입니다.

* 주관적 연구

“주관적”이란 말은 의견, 기억, 또는 어떤 것에 대한 인상을 가리킵니다. 어떤 것에 대한 느낌이나, 어떤 것이 만들어내는 기대 같은 것 말이죠. 객관적 사실이 아니에요.

“가장 좋아하는 색깔이 뭐에요?”
“이 회사를 신뢰하시나요?”
“이 바지를 입으면 내 엉덩이가 끼어보이나요?”

즉, 정답이라는 게 없습니다.

주관적 정보를 얻으려면, 사람들에게 질문을 던져야 합니다.

* 객관적 연구

“객관적”이란 말은 객관적 사실을 뜻합니다. 뭔가 사실인 것. 뭔가 증명할 수 있는 것 말이죠. 여러분이 아무리 간절히 바란다고 해도, 여러분의 의견으로는 바꿀 수 없는 뭔가입니다.

“우리 앱을 얼마나 오래 쓰시나요?”
“우리 사이트로 오는 링크는 어디에서 찾으셨나요?”
“오늘 우리 사이트 방문자는 몇 명이죠?”

사람들의 기억이 완벽하고 거짓말을 전혀 하지 않는다면(특히 자기 자신에게요.), 이런 것도 사람들에게 물어볼 수 있겠죠. 그런 사람을 찾으시면 제게 알려주세요.

객관적 자료는 측정과 통계 형태로 얻을 수 있습니다. 하지만 하나 둘 하는 식으로 셀 수 있다고 해서 모두 객관적인 건 아녜요.

예를 들자면. 102명이 뭔가 좋다고 하고, 50명은 그게 안 좋다고 말한다면, 여기에서 얻을 수 있는 유일한 객관적인 정보는 전체 응답수 뿐입니다. “좋다”나 “안 좋다”는 여전히 주관적인 거죠.

잘 따라오고 계신가요?
(그렇지 않다면, 설명을 제대로 못한 제 탓이죠. 여러분이 제대로 못 읽은 게 아니고요.)

* 표본 크기

대체로 응답자가 많을 수록 정보의 신뢰도가 높아집니다. 주관적인 정보라 할지라도 말예요. 한 명의 의견은 완전히 잘못됐을 수 있어요. 백만 명이 동의한다면 대중의 생각을 잘 나타낸다고 볼 수 있죠(그럼에도 객관적으로는 여전히 틀렸을 수 있지만요). 그러니 연구할 때 되도록 많은 정보를 모으세요.

* 주관적 정보를 엄청 모으면… 거의 객관적 정보가 될까?!

뭔가 객관적인 것, 예를 들어 유리병 속의 젤리 개수 같은 것에 대해 아주 많은 사람들에 물어본다면, 사람들의 평균 추정치는 가끔 실제 객관적인 정답에 근접하곤 합니다.

하지만 뭔가 주관적인 것에 대한 “대중의 지혜”는 폭동도 일으킬 수 있고, 조지 W. 부쉬가 당선되는 일도 만들죠. 그러니.. 예이. 조심하시라고요.

다음 글에서는 사람들에게 질문을 던지는 여러 방법들에 대해 알아보겠습니다. (여러분이 자신의 연구를 망치지 않아야 하니까요.)

---

 

#05

UX에서는, 특히 뭔가 새로운 걸 시작할 때면, 진짜 사람들한테 정보를 얻어야 할 때가 있습니다. 그러니, 오늘은 이걸 배워보죠.

사람들에게 질문하는 법

* 질문의 기본적인 종류 세 가지

열린 질문 – “저를 어떻게 묘사하시겠나요?” 이런 질문에는 광범위한 답이 나옵니다. 피드백을 조금이라도 더 얻고 싶을 때 잘 먹히죠.

이끄는 질문 – “전 어디가 제일 섹시하나요?” 이런 질문은 답을 특정한 종류로 한정시킵니다. 예로 든 질문은 제가 어딘가는 섹시하다고 가정하죠. 하지만 그건 사실이 아닐 수도 있어요! 조심하세요. 이런 종류의 질문은 여러분이 듣고 싶어할 지도 모르는 대답을 제외시켜버릴 수도 있어요.

닫힌/직접적인 질문 – “어디가 더 섹시해요, 제 팔꿈치? 아님 제 무릎?” – 이런 질문은 선택지를 줍니다. ‘네’/ ‘아니오’. ‘이거요’/’저거요’. 하지만 명심하세요. 선택지가 멍청하면 결과도 멍청해집니다.

* 주관적 연구의 예시

인터뷰 – 누군가를 만나 여러 개를 물어봅니다. 1:1로요.

관찰 – 사람들에게 뭔가 할 일을 준 다음, 사람들이 여러분의 디자인을 사용하는 것을 지켜봅니다. 중간에 도와주진 않고요. 끝나고 나면 사람들에게 물어볼 수 있습니다.

포커스 그룹 – 한 방에 사람들 여럿을 모이게 한 다음, 질문을 던져 사람들이 토의하게 합니다. 주의 사항. 확신에 찬 사람들은 해당 그룹의 다른 이들을 설득하곤 합니다. 또 아무렇게나 뽑은 얼마 안 되는 사람들로 얻은 결과는 어디에도 쓸모가 없어요. 그래서 전 실제 생활에서 포커스 그룹을 하느니 제 몸에 불을 붙이겠어요.

설문 조사 – 설문지나 전화, 온라인을 통해 사람들이 답하게 합니다. 온전히 익명이 된 듯한 느낌이 들기 떄문에 유용합니다.

카드 분류 – 아이디어나 분류가 적힌 카드나 포스트잇을 준비해 조사 대상에게 나눠줍니다. 그리곤 각자가 자기 기준에 맞춰 그 카드들을 분류하게 합니다. 많은 사람들에게 이런 작업을 시키고 나면, 여러분의 메뉴가 어떻게 보여야 할 지 아이디어를 얻을 수 있을 겁니다. 유용한 팁. 팀 동료에겐 이런 거 시키지 마세요. 보통의 사용자와 하세요.

구글 – 온라인에 쓸만한 의견이 얼마나 많은지 놀라울 따름입니다. 그것도 바로 지금 공짜로 써먹을 수 있죠.

* 중요사항

똑같은 질문을 똑같은 방식으로 모두에게 물어보세요.
질문을 맘대로 풀어 설명하거나 대답을 제시하려 하지 마세요.
여러분이 특정 대답을 더 바라는 것처럼 보이면, 사람들은 당황하지 않으려고 거짓말을 할 수도 있습니다.
인터뷰 중에는 따로 메모하거나 녹음해두세요. 절대 기억에만 의존하지 마세요. 
노란 눈은 먹지 마세요. (역주: 쓸데없는 중요사항을 가리키는 농담입니다.) 

다음 글에서는 연구 결과로 어떻게 사용자 프로필을 만드는지 알아봅시다.

---

 

#06

마케터가 목표 고객을 선정하듯이, UX 디자이너는 사용자 페르소나/프로필, 즉 연구 결과에 기반한 사용자의 모습을 그리는 것이죠. 하지만 우리의 사용자 프로필은 마케터의 목표 고객과는 많이 다릅니다. 그러니 오늘은 이걸 좀 배워보죠.

사용자 프로필 만들기

* 우선 페르소나나 프로필이 아닌 것부터 짚어봅시다.

성격 유형
인구 분포
“브랜드 스토리” 속의 인물
여러분 경험 속의 전형적인 인물
너무 평면적인 인물
컨셉
예상

* 그럼 페르소나 / 사용자 프로필인건 대체 뭘까요?

실제 사람들의 목표, 기대, 동기, 행동을 묘사한 것입니다. 여러분 사이트에 사람들은 왜 올까요? 뭘 찾고 있죠? 어디에서 불안해지죠? 이런 것들 말예요.

여러분이 알아야할 모든 정보는 여러분의 연구 결과와 자료 속에 있어야 합니다. 연구 결과나 자료로 뒷받침할 수 없는 거라면 그냥 똥을 만들고 있는 거니까 그만두세요.

* 나쁜 프로필: 페르소나 A는 여성이고, 35세-45세의 연령대이며, 수입과 교육 수준은 평균을 웃돕니다. 이들에겐 아이가 최소한 하나 있고, 새 차도 최소한 한 대 있죠. 활발한 성격이고 직장 일에 매진하며, 우뇌 사고를 하는 경향이 있습니다.

나쁜 이유: 광고를 팔고 있는 거라면 훌륭합니다. 하지만 UX에 관해서라면 이 프로필은 기본적으로 쓸모가 없어요. 왜냐고요? 어떤 기능의 아이디어에 대해 이 프로필은 “아냐”라고 말해주지 않기 때문입니다. 35세-45세 사이의 여성이 필요한 기능이 어떤 걸까요? 아무 거나 될 수 있잖아요!

* 유용한 프로필: 페르소나 A는 경험 많은 매니저로서, 보통은 한두 가지의 전문 영역에 관심이 많습니다. 사이트에 자주 방문하지만 시간에 쫓기기 때문에 주말에 읽을 컨텐츠를 “모으는” 것에 집중합니다. 이들은 소셜 미디어에 공유도 많이 하는데, 대부분은 트위터와 링크드인이에요. 이들은 자신들이 지적 리더라고 생각하기 때문에 밖으로 보이는 이미지가 중요합니다.

유용한 이유: 이제 쓸만한 정보가 아주 많습니다! 복실복실한 컨텐츠는 인기가 없을 거에요. 직접 큐레이팅 하는 게 아주 중요할 거니 컨텐츠 카테고리를 설정할 기반을 얻은 셈입니다. 소셜 미디어 공유가 쉬워야 하는데, 몇몇 소셜 미디어만 의미가 있습니다.

이런 프로필이 있으면 여러분은 페이스북 캠페인에 대해 “아냐”라고 말할 수 있게 됩니다. 왜냐면 이 사용자들은 페이스북에서 시간을 보내지 않는다고 하니까요. 자주 노티피케이션을 보내는 것보다 요약 이메일을 보내는 게 더 좋을 것입니다. 왜냐면 이 사람들은 이미 시간에 쫓기고 있으니까요.

* “이상적인” 사용자를 생각해보세요. 여럿이요!

기능에 대해 생각할 때면, 실제 삶에서 보게 될 사용자 중 가장 가치있는 버전을 생각하세요. 여러분은 기존의 행동을 지원하는 것에 그쳐서는 안 됩니다. 이 사용자들을 “이상적인” 버전으로 유도하는 것이 여러분이 할 일이에요.

또한 모든 사용자들이 똑같지 않다는 것도 기억하세요. 다른 행동을 보이는 그룹이 여럿 있을 수도 있는데, 이들 모두가 좋은 프로필이 될 수 있습니다.

다음 글에서는 여러 기기들에 대해 알아봅시다.

---

 

#07

오늘날 우리는 휴대폰이나 노트북, 어느 한 쪽만 얘기하지 않습니다. 어쩌면 그 둘 다에 타블렛을 더할 때도 있겠죠. 머지않아 스마트워치나 구글 글래스같은 “입을 수 있는” 기기도 얘기하게 될 테고요. 그러니 오늘은 이 얘길 해봅시다.

기기에 맞춰 디자인하기

1 단계: 어떻게 만지게 될 것인가? 손가락으로 아님 마우스로? 이 얘기를 이 글에서 다루진 않을게요. ProTip about Touch vs. Mouse interfaces라는 글을 이미 썼으니까요. 거기에서 시작하면 될 겁니다.

2 단계: 작게 시작하라. “모바일 퍼스트”라고 하면, 모바일이 인기 있으니까 그런 거라고 생각하는 사람들이 많아요. 그런 면도 있겠지만, 실제로 그렇진 않아요. 제일 작고 성능이 떨어지는 기기부터 맞춤 디자인하게 되면, 콘텐츠와 핵심 기능에 집중하게 됩니다. 그 결과 단순하면서도 아름다운 앱을 만들게 되죠. 순서를 거꾸로 하게 되면, 마쉬멜로를 돼지 저금통에 넣는 꼴이 될 거에요. 단순하지도 않고 아름답지도 않죠.

3 단계: 이 기기의 특별한 능력은 뭐지? 우리는 밖에 다닐 때 모바일 기기를 지니고 다닙니다. 그래서 놀랍게도 우리는 모바일 기기에 시간을 더 많이 쓰게 되고 위치 정보가 중요 요소가 됐죠. 이 기기들은 작기도 해서, 기기를 들고 다니는 것 자체도 기능이 됩니다. 반면에 랩탑은 밖에 그렇게 들고 다니지 않아요. 하지만 성능이 더 좋고 화면도 훨씬 크고 키보드가 있고 마우스 덕분에 훨씬 더 정확하게 선택하고 기능할 수 있어요. “일관성”에 대해 너무 걱정하지 마세요. 기기가 다르면 가끔은 다르게 생각해야 된답니다.

4 단계: 소프트웨어를 고려하라. “맥 vs PC”는 앙증맞은 광고 캠페인보다 많은 걸 뜻합니다. 시작하기 전에 UX 가이드라인을 쭉 읽어보세요. 또한 iOS7이나 윈도8은 iOS6나 윈도 비스타와는 다르게 보입니다. 어떤 버전을 지원할지, 어떤 버전을 무시할 지 선택해야 할 수도 있어요. 하나의 소프트웨어를 지원할 때마다 나중에 디자인, 개발, 유지에 들어가는 시간은 곱셈으로 늘어납니다. 미리 생각하세요!

5단계: 반응형으로 만들어라. 웹에 올리는 것인가요? 여러 다른 종류의 전화기를 지원하나요? 애플이 조금 다른 신형 아이폰을 만들면 어떻게 될까요? 웹이든 앱이든 현대의 인터넷은 모든 기기에서 동작합니다. 그러니 사용자가 어떤 기기를 사용하든 간에 여러분의 제품이 화면에 맞춰 늘어나거나 적응하도록 확실히 해두세요.

6단계: 동시에 여러 화면을 쓰는 것도 생각하라. 조금 어려운 얘기일 수 있겠지만, 여러분이 준비가 됐을 거라 믿어요. 여러분의 제품을 휴대폰과 컴퓨터를 함께 사용할 수 있나요? TV 리모컨 쓰듯이 말예요. 휴대폰 여러 대로 타블렛 한 대 속의 게임을 조작할 수 있을까요? 한 방에서 말예요. 두 개의 기기에서 로그인하면 어떻게 되죠? 한 쪽에서 다른 쪽으로 데이터를 “던져버릴” 수 있나요? 정보를 동기화는 건 어때요? 실시간 동기화하게 되면 문제가 생기나요? 이런 생각들을 좀 해보세요!

다음 글에서는 흔한 문제들을 해결하는 흔한 해법들, 즉 디자인 패턴에 대해 얘기해볼게요.

---

 

#08

많은 디자이너들이 동일한 문제에 부딪쳤을 때 (예: 모바일 앱의 메뉴 구성), 누군가 그 문제를 우아한 방법 (예: 페이스북 앱의 숨겨진 메뉴)으로 해결하고 많은 디자이너들이 그 해결책을 사용하게 된다면. 사용자들은 그런 사이트나 앱을 더 빨리 이해할 수 있게 됩니다. 똑같은 해결책을 몇 번이고 봤으니까 말예요.

이런 흔히 사용되는 해결책을 가리켜 뭐라고 부르냐면…

디자인 패턴

흔히 쓰인다고 훌륭한 디자인은 아닙니다. “훌륭한” 디자인 패턴은 흔히 쓰이는 한편 사용성이 좋아야 합니다.

인기 있는 디자인 아이디어지만, 실제로는 문제되는 기능을 무시할 수 있게 해주기 때문에 게으른 UI 디자이너들에게 인기있는 경우도 있습니다. 어떤 사람이 못 생겼다고 머리에 봉투를 뒤집어씌우는 꼴이죠.

예를 들어 페이스북의 “햄버거 버튼” (수많은 모바일 앱에서 숨은 메뉴를 나타내고 있죠.)은 메뉴를 넣을 공간이 충분한 전체 화면 크기의 웹사이트에서부터 시작됐습니다. 햄버거 버튼은 널리 쓰이고 있습니다. 그 결과가 좋기 때문이 아니라, 메뉴를 훌륭하게 디자인하는 것보다 메뉴를 숨기는 게 쉽기 때문이죠.

실제 삶에서는 숨은 메뉴가 있는지조차 모르는 사용자들이 태반입니다. 이들은 사이트를 떠나버리거나 사이트 속에서 길을 잃어버리죠.

나쁩니다.

그리고 게으르죠.

“하지마, x팔.” – 제시 핑크맨

****

자, 디자인 패턴은 수백 개가 있습니다. 기기나 기술이 진화하면서 이 패턴들도 늘 바뀌고 있죠. 그래서 정확한 목록을 만들 수는 없어요. 하지만, 여기 둘러볼 만한 링크들을 준비해봤습니다.

1) GoodUI – 디자인할 때 보통 하면 좋은 것들이고 최소한 시도는 해봐야 할 것들을 단순한 그림으로 나타낸 곳입니다.

2) PatternTap – 회원들이 올려놓은 온갖 웹사이트 모음입니다. 주의사항: 좋은 것도 있고, 나쁜 것도 있습니다. 하지만 예시를 쭉 보다 보면 어떤 게 널리 쓰이고, 어떤 건 그렇지 않은지 확실히 감 잡을 수 있을 거에요.

3) Anatomy of a Perfect Landing Page – 아주 새로운 글은 아니지만 여전히 유효합니다. 이 글을 따라하면, 일반적이지만 효율적인 랜딩 페이지를 빠르게 만들 수 있습니다. 사용자들이 여러분의 제품을 검색해서 들어왔을 때 보게 되는 페이지, 즉 첫 페이지 말이죠. 이 글이 맘에 든다면, Unbounce blog도 추천해봅니다.

4) Mobile Patterns – PatternTap과 비슷하지만, 이 곳은 완벽한 디자인을 모은 곳이 아닙니다. 하지만 수많은 모바일 앱 디자인을 훑어보고 어떤 게 “흔한”지 확인하기 좋은 곳입니다.

5) Timoa on Pinterest – UI 요소를 각 기능별로 분류해서 아주 잘 모아놓은 곳이에요.

6) 좋은 패턴 사이트를 제가 빼먹었나요? 제 트위터로 얘기해주세요.

다음 글에서는 우리를 동물과 차별되게 해주는 UX 디자인 파트에 대해 소개해보겠습니다. 정보 설계(Information Architecture) 말이죠.

---

 

#09

지금까지 우리는 대부분 UX 디자인을 이해하고 계획하는 방법에 대해 얘기했습니다. 이 글에서는 실제 똥을 만들어보기 시작할 거에요. 진짜 해결책을 디자인하는 첫 단계는 사물의 일반적인 구조를 파악하는 거에요. 즉 이런 얘기를 접하실 때가 된 건데…

정보 설계란 무엇인가?

“정보”에 “구조”를 만든다는 얘기를 처음 듣는다면, 이 슬라이드가 시작하는 데에 도움이 될 거에요. Understanding Information Architecture.

정보 설계 (IA: Information Architecture)는 작은 프로젝트에선 꽤 단순할 수도 있지만, 큰 프로젝트에서는 어마어마하게 복잡할 수도 있습니다.

정보 설계는 겉으로 보이지는 않아요. 그래서 이 일을 하려면 사이트 맵을 그려야 합니다. 다음은 간단한 예시에요.

 

위의 예는 페이지가 여섯 개인 웹사이트를 보여줍니다. 홈페이지 하나, 메인 메뉴의 섹션 두 개, 세 개의 서브 섹션 페이지, 이렇게요. 각 페이지 사이의 선은 해당 페이지들끼리 내비게이션 (메뉴와 버튼)으로 연결되어있음을 나타냅니다.

주의사항: 사용자가 백만 명이라고 프로필 페이지가 백만 개인 것은 아녜요. 프로필 페이지는 단 한 개죠. 그 페이지에 어느 유저의 프로필이든 나타낼 수 있는 거고요.

이렇게 족보처럼 정리한 페이지들을 가리켜, “계층 (hierarchy)”이나 “트리 (tree)”라고 불러요. 대부분의 사이트나 앱은 이런 식으로 정리하곤 합니다. (이게 유일한 방법은 아니지만요.)

****

사이트 맵을 그릴 때 지켜야 하는 “규칙”은 없지만, 일반적인 가이드라인을 적어볼게요.

단순해보인다고 말이 되는 건 아니다.
명확하고 읽을 수 있게 유지하라.
보통은 위에서 아래 방향으로 그린다. 왼쪽에서 오른쪽으로 그리지는 않는다.
사이트 맵을 “팬시”하게 그리지 말라. 이건 기술 문서지, 패션 쇼가 아니다.

****

깊거나 평평하거나, 그 중간은 없어요.

일반적으로 여러분의 사이트 맵은 굉장히 “평평”하거나 “깊을” 겁니다. 평평하다는 건 메뉴에 섹션이 많고 가장 아래 단계까지 클릭을 덜 할 수 있다는 거죠. 깊다는 건 메뉴가 좀 더 단순한 대신 원하는 페이지에 가려면 클릭을 좀 더 해야한다는 겁니다.

 

위 예시의 어느 쪽이든 페이지 숫자는 동일하다는 걸 확인하세요. 양은 똑같지만 다를 뿐이죠.

월 마트처럼 제품이 굉장히 많은 사이트들은 구조가 “깊어야” 합니다. 안 그러면 메뉴가 말도 안 되게 엉망이 될 테니까요. 유튜브 같은 사이트는 사용자와 동영상만 다루면 되기 때문에 보통은 좀 더 “평평”합니다.

여러분의 사이트가 깊은 동시에 평평하다면 그건 안 좋아요. 여러분의 목표를 좀 더 단순하게 만들거나(#02 ‘사용자 목표와 사업 목표’ 참조), 핵심 기능으로 검색 기능을 훌륭하게 만들어야 합니다.

****

잘못된 고정 관념: 모든 것은 언제나 “3 클릭 안에” 갈 수 있어야 된다고 얘기하는 사람들을 봤을지도 모르겠네요. 그 얘긴 그 사람들이 UX를 90년대에 배웠고 그 뒤로 새로운 것은 아무 것도 공부하지 않았다는 뜻이에요. 대신 사용자에 집중하세요. 자신이 어디에 있는지, 자신이 어디로 갈 수 있는지 사용자가 늘 이해할 수 있도록 하세요. 내비게이션이 쉽고 명확하다면 클릭을 몇 번 하는지는 중요한 게 아니에요.

****

다음 글에서는 메뉴의 분류를 어떻게 결정할지 (아니면 분류를 아예 없앨지) 알아볼게요. 즉, 정보 설계의 종류 말예요.

---

 

#10

정보 설계를 늘 쉽게 설명할 수는 없답니다. 여러분의 팀과 정보 설계에 대해 얘기해보면 도움이 될 거에요. 그리고 여러분 머리 속에서 쉽게 생각해보시고요. 그러니 이번 글에서는 요걸 배워봅시다.

사용자 스토리 & 정보 설계의 유형

사용자 스토리는 사용자가 여러분의 사이트나 앱에서 선택할 수 있는 행동 경로 한 가지를 설명하는 거에요. 짧지만 완전해야 합니다. 전체 디자인을 설명하려면 사용자 스토리가 많이 필요할 거에요.

Google.com의 기본적인 사용자 스토리는 다음과 같겠죠.

사용자는 메인 검색 페이지에 도착한다. 사용자는 아무 검색어나 입력하고 마우스나 키보드로 전송한다. 다음 페이지에서는 검색 결과를 목록으로 보여주는게 검색어와 가장 관련성이 높은 것부터 위에서 표시한다. 사용자는 링크를 눌러 적절한 사이트로 이동할 수 있다. 또는 뭔가 쓸만한 것을 찾을 때까지 더 많은 결과 페이지들을 넘나들 수도 있다.

주의사항: 좀 다소 너무 단순하게 했지만, 무슨 말인지는 아시겠죠?

해당 행위들을 어떻게 해결하고 디자인할지, 구체적인 것은 스토리에서 아무것도 얘기하지 않는다는 것을 확인하세요. 스토리에서 얘기하는 것은 해당 행위들이 가능하다는 것 뿐이에요. 이런 스토리들은 흐름을 기술하기 위한 것입니다. 즉, 사용자가 선택하는 순서 말예요. 최종 UI 결과물을 얘기하는 게 아니에요.

흐름이 단순하고 효율적이라면, 여러분은 잘 하고 계신 겁니다. (지금까지는요.)

어떤 매니저들은 사용자 스토리를 디자이너에게 UX를 이렇게 만들어달라고 지시하는 방식으로 생각하곤 해요. 하지만 완전히 틀린 얘기에요. 왜냐고요? 사용자 스토리는 기본적으로 기능이나 동작의 목록들이에요. 그리고 이것들이 최종 해결책에 큰 영향을 끼치는 것이죠. UX 디자이너가 사용자 스토리를 쓰는 거에요. 팀과 소통하기 위해서요.

거꾸로 하면 안 돼요. 그건 마치 밥 로스에게 어떤 색깔을 쓰라고 말하는 거나 다름없다고요!

(원래는 미켈란젤로라고 쓰려고 했는데, 솔직히 말해서 밥 로스 쪽이 더 좋죠?)

****

자, 그럼 이제 여러분이 사용자 스토리를 쓸 수 있으니, 정보 설계(#09 참고)를 여기에 다시 가져와보죠. 여러분 페이지의 구조가 사용자 스토리의 단계를 결정짓습니다. 그리고 페이지의 구조를 만드려면, 어떤 유형의 정보 설계로 작업할 것인지 골라야 합니다. (유형이 꼭 하나가 아닐 수도 있지만, 지금은 일단 단순하게 해보죠.)

정보 설계의 유형에는 다음과 같은 것들이 있습니다.

분류
할 일
검색
시간
사람

여러분을 위해 하나씩 브렉-다운해보겠습니다. (DJ는 음악 좀 주세요!)

* 분류 

H&M 같은 판매점을 생각해봅시다. 이 곳의 메뉴는 아마도 분류겠죠? “남성복, 여성복, 아동복, 세일 품목” 등등. 콘텐츠의 종류 말예요. 이 분류를 클릭하면 해당 분류에 맞는 콘텐츠들이 나타날 것이라고 예상할 겁니다.

이는 정보 설계에서 가장 흔한 유형입니다. 하지만 금융 상품, 산업용 화학물질, 아님 섹스토이 (친구가 말해줬어요.)처럼 분류가 복잡하다면, 분류명을 보고 여러분이 생각하는 것과 사용자들이 생각하는 것이 같지 않을 수도 있고, 그럼 혼란이 일어납니다. 제가 만약 항문 삽입 도구를 사고 싶다면, 이건 “배터리 동작” 품목에 있을까요, 아님 “야광 제품” 품목에 있을까요? 인생은 어려운 질문으로 가득차있답니다.

* 할 일

사이트나 앱을 조직화하는 또다른 방법은 사용자가 달성하고 싶어하는 목표에 따라 정리하는 것입니다. 은행이라면 “저축, 대출, 투자, 상담, 신규 계좌 개설” 정도면 좀 더 단순한 메뉴가 될 수 있겠죠. 자신이 바라는 것이 무엇인지 사용자가 알고 있다면, 이 방법은 여러분의 디자인을 구조화하기에 아주 좋습니다. 하지만 조심하세요… 사용자가 자신의 모험을 떠날 정도로 늘 잘 알고 있는 건 아니랍니다.

이런 걸 생각해보면, 같은 회사의 사이트라도 할 일에 기반한 사이트와 분류에 기반한 사이트가 얼마나 달라 보일지 깨닫게 될 겁니다. 굉장히 중요한 선택이죠.

* 검색

사이트가 아주 복잡하거나 사용자들이 만든 콘텐츠로 가득하다면, 검색 기반의 설계가 좀 더 말이 됩니다. 유튜브처럼요. 유튜브가 ‘웃김, 슬픔, 광고, 영화, 기타’처럼 분류만 있었다면 쓰기가 정말 어려웠겠죠. 그 분류를 올바르게 유지하는 데에도 엄청난 일이 필요할 테고요.

* 시간

UX를 이제 막 시작하는 거라면, 이 얘긴 조금 깰 수도 있겠네요. 정보 설계를 시간 변화에 따라 디자인할 수도 있습니다. 가장 단순한 예는 여러분의 ‘받은 편지함’이 되겠네요. 거기에선 메시지들이 받은 순서대로 표시되잖아요. 그게 바로 “시간 기반의” 정보 설계 디자인입니다. 그런 사이트에는 “실시간 인기, 보관함, 나중에, 최신” 등의 페이지들이 있겠죠. 레딧이나 페이스북 뉴스 피드가 이런 시간 기반 디자인의 또다른 예겠네요.

* 사람

페이스북이나 다른 소셜 네트웍 사이트들은 사람에 기반한 정보 설계입니다. 모든 페이지들이 해당 정보가 누구에 대한 것인지, 그들 사이의 관계는 어떤지에 맞춰 디자인됩니다.누군가의 프로필 페이지에 도착하면 페이스북은 다른 콘텐츠 유형을 정리하기 위해 ‘사진, 친구, 장소’라는 분류를 사용합니다.

그리고 아마도 다른 유형도 있을 겁니다! 하지만 이번 글은 이미 제법 길어졌네요.

다음 글에서는 모든 UX 책임들 중 가장 성스러운 것에 대해 알아보겠습니다. 와이어프레임 말입니다!

---

 

#11

UX라고 하면 대부분의 사람들은 선과 상자가 있는 도표, 우리가 와이어프레임이라고 부르는 걸 떠올리곤 합니다. 안타깝게도 와이어프레임을 만드는 게 UX를 만드는 것과 같다고 생각하는 사람들이 많아요. 그래서 이번 글에서는 다음을 다뤄보죠.

와이어프레임은 무엇인가?

이 특강을 처음부터 여기까지 보셨다면, UX는 빙산이라는 걸 아셨을 겁니다. 여러분이 보는 건 전체 문제의 아주 작은 부분일 뿐이죠.

시작하기 전에 ‘와이어프레임이 아닌 것 (What Isn’t a Wireframe)’을 먼저 보세요. 여러분의 작업 과정, 아니면 여러분 회사 작업 과정에 나쁜 버릇이 남아있을 지도 모르니까요.

****

일반적인 생각:

와이어프레임은 기술 문서입니다. 위의 예시처럼요. 하지만 위의 것처럼 “예뻐야만” 하는 것은 아닙니다. 선, 상자, 라벨, 색깔 한두 가지. 그게 전부에요.

와이어프레임은 종종 건축 설계도와 비교되기도 합니다. 목적이 비슷하거든요.

건축 설계도는 현장에서 설계자의 계획을 어떻게 실행할 지 알려줍니다. 벽지는 뭘로 할 지, 가구는 뭘로 할 지 같은 게 아녜요. 그리고 설계도는 중요하게 받아들여집니다. 설계도는 그저 제안하는 게 아니고, “간략한 스케치”도 아니고 “빠르게 만들어본 모형”도 아닙니다.

여러분이 화이트보드나 브레인스토밍 중에 그린 모든 스케치들은 가치있습니다. 하지만, 그건 와이어프레임이 아닙니다. 그건 여러분이 나중에 만들게 될 와이어프레임에 대한 여러분의 생각인 거죠.

와이어프레임은 한 시간이면 그릴 수도 있습니다. 하지만 와이어프레임을 계획하는 데에는 몇 주나 몇 달이 걸립니다. 여러분의 동료나 클라이언트가 그걸 이해하는 게 중요합니다.

UI 개발자나 UI 디자이너가 여러분의 “와이어프레임”을 아직 사용할 수 없다면, 그건 와이어프레임이 아닙니다. 그냥 스케치죠. 계속해볼게요.

****

전부 다 쓴 것 같지는 않지만, 일단 여기에서 멈추겠습니다.

이 특강 시리즈의 거의 절반인, 다음 12개의 글에서는 여러분의 와이어프레임을 향상시키는 법을 다루겠습니다. 여러분의 디자인이 그저 좋아 보이는 게 아니라 잘 동작하게 만들어서요.

****

다음 글에서는 사람들의 시선을 바라는 대로 옮길 수 있는 다섯 개의 교훈 중 첫번째 것을 다루겠습니다. 바로 시각적 무게감 말이죠.

---

 

#12

이번 글에서는 사용자의 주목을 끌 수 있는 다섯 가지의 시각 원리 중 첫번째 것을 다룹니다. 여러분의 디자인 중 어떤 부분은 다른 부분보다 더 중요한데, 그렇다고 우리가 늘 자연스럽게 그걸 눈치채지는 못하거든요. 그러니 사용자가 중요한 것을 알아챌 수 있게 도와야 합니다. 오늘 배울 것은…

시각적 무게감: 대비, 깊이, 크기

시각적 무게감이라는 개념은 상당히 직관적입니다. 레이아웃에서 다른 것들에 비해 “좀 더 무거워” 보이는 것들을 뜻하죠. 무거워 보이면 주의를 좀 더 쉽게 끌 수 있습니다. 그리고 그 개념은 UX 디자이너에게는 매우 가치있죠.

우리가 할 일은 사용자들이 중요한 걸 알아챌 수 있게 돕는 것입니다. 그리고 사용자들이 목표외에 다른 것에 방해받지 않는 것 또한 똑같이 중요하죠.

디자인의 어떤 부분에 시각적 “무게감”을 더하면, 사용자가 그 부분을 볼 확률이 높아지고, 그럼 사용자가 그 다음에 무엇을 보게 할 지도 바꿀 수 있습니다.

기억하세요: 시각적 무게감은 상대적입니다. 모든 시각적 원리는 특정 요소를 그 주변과 비교하는 것이에요.

그러니, 잡스러운 건 이제 그만두고, UX 특강의 스타를 소개드리겠습니다. 옛날 옛적의 고무 오리입니다!
*여기서 박수*

 

* 대비

밝은 것과 어두운 것 사이의 차이를 대비라고 부릅니다. 어떤 밝은 것이 어두운 것과 차이가 심할 수록 대비가 “높다”고 합니다.

UX에서는 중요한 것들에 높은 대비를 주고 싶
어합니다. 사진의 가운데 있는 오리처럼 말예요. 이 경우 그림의 대부분이 밝기 때문에 어두운 오리가 좀 더 눈에 띕니다. 그림이 대부분 어둡다면 좀 더 밝은 색의 오리가 더 눈에 띄겠죠.

여기에서 오리가 버튼이고, 모든 버튼이 같은 색이라면, 어두운 버튼을 누르는 사람들이 많을 것입니다.

****

* 깊이와 크기

실제 세상에서 우리들은 멀리 있는 것보다 가까이 있는 것을 더 잘 알아차립니다.

디지털 세상에서는 큰 것이 가까이 있는 것으로 인지됩니다. 위 사진에서 가운데 있는 오리가 그렇죠. 좀 더 작은 것은 더 멀리 떨어진 것으로 인지됩니다. 뒤쪽의 흐릿한 오리처럼 말이죠.

이 오리들이 모두 같은 크기였다면, 아마도 여러분은 왼쪽부터 오른쪽 방향으로 봤을 겁니다. (글을 그런 식으로 읽는 문화권이라면요.)

흐림 효과나 그림자 효과를 주게 되면, 깊이를 좀 더 실제처럼 인지하게 만드는 효과가 있습니다. 디자인이 “플랫”하더라도 크기로 이런 효과를 낼 수 있습니다.

대개 중요한 대상을 덜 중요한 것보다 크게 만들고 싶을 겁니다. 이는 페이지에 시각적 “계층”을 만들어내어 훑어보기 편하게 됩니다. 반면 사용자가 뭐부터 봤으면 좋을지 여러분이 선택할 수 있게도 하죠.

“로고 좀 크게 만들어.”가 잘못된 이유가 바로 그겁니다. 사용자들이 뭔가를 구매하는 것 대신 로고를 쳐다보고 싶어한다면야 얘기가 다르겠지만요.

***

다음 글에서는 다섯 개의 시각 원리 중 두 번째 것을 보겠습니다. ‘색깔’ 차례에요.

---

 

#13

실제 세상에서는 햇빛, 인공 조명, 열기, 냉기, 의복, 브랜드, 패션, 수백만 가지의 다른 것들이 우리의 색깔 인지 방식에 영향을 줍니다. UX 디자이너인 우리는 팬톤이나 브랜드 가이드라인까지는 신경쓰지 않을 수도 있습니다. 하지만 색깔에 대해 확실히 배워둬야 합니다.

색깔

위에 있는 60년대풍 고무 오리에서 색깔에 대해 배울 점이 몇 가지 있습니다.

UX 디자이너로서 우리는 보통 와이어프레임을 흑백으로 작업합니다. 그리고 그건 좋은 일이에요! 우리는 작동에 집중하고, UI 디자이너들은 스타일에 집중할 수 있으니까요.

하지만, 색깔 자체가 작동일 때도 있습니다. 신호등이나 맛에 맞는 하드바의 색깔을 정하는 것 같은 경우죠. 거 왜 중요한 똥 말입니다.

* 의미

가장 위의 그림에는 오리가 세 마리 있습니다. 파랑, 노랑, 빨강. 아, 참 잘 생겼죠. 척 보면 이 오리들은 각기 다른 색입니다. 덕분에 색깔이 각각의 오리의 “의미”를 어떻게 바꾸는지 알기 쉽습니다.

여기에서 오리가 버튼이었다면, 아마도 각각 ‘확인’, ‘취소’, ‘삭제’일 수 있습니다. 연료 탱크 지시등이었다면 ‘가득 참’, ‘절반 남음’, ‘텅 빔’을 뜻했겠죠. 스토브 표시등이라면 ‘차가움’, ‘따뜻함’, ‘뜨거움’이었을 테고요.

무슨 얘기인지 아시겠죠. 오리 자체는 모두 동일합니다. 하지만 색깔이 의미를 바꾼 거에요.

이런 뜻을 담을 필요가 없다면, UI 디자이너가 색을 고르게 두세요. 하지만 뜻이 담겨야 한다면, 여러분의 와이어프레임에 담아주세요.

* 물러나거나 나서거나

또 하나 명심해야 할 건 색깔은 “시끄럽거나”, “조용할” 수 있다는 겁니다.

위에서 두번째 그림을 보면 빨간 오리 하나와 푸른 빛의 오리가 둘 있습니다. 빨간 오리가 조금 더 가까워 보이지 않나요? 실제로는 아니에요. “구매” 버튼 같은 건 화면에서 뛰쳐나올 듯한 색을 띄어야 합니다. “도드라진”(앞으로 튀어나온) 색을 사람들은 더 클릭할 거에요.

반면에 어떤 것들은 뒤로 물러서게 만들어, 보이긴 하지만 방해 요소가 되지는 않게 만들어야 할 때도 있습니다. 푸른 빛의 오리 두 마리처럼 말이죠. 이들은 “물러나”(뒤로 물러난) 있습니다. 이런 색은 화면에 항상 떠있는 메뉴 같은 것에 좋습니다. 뭔가가 여러분을 향해 언제나 외치고 있다면, 그건 불필요한 것이고 더 중요한 다른 것이 받아야 할 주의를 뺏어오게 됩니다.

* 와이어프레임을 단순하게 유지하기

여러 색이 쓰인 와이어 프레임은 동작의 세부를 보는 것에 방해가 됩니다. 중요한 곳에선 색을 쓰세요. 하지만 와이어프레임을 건축 청사진처럼 푸른 색으로 칠하거나, 클라이언트에게 보여주기용으로 온갖 색을 바르진 마세요. 그럼 회의 내내 색깔에 대해서만 혼란스럽게 얘기하게 될 겁니다. “아뇨, 웹사이트가 푸른 색이지는 않을 거에요…”

* 시각적 원리를 결합하기!

색깔은 이전 글에서 다룬 시각적 무게감과 잘 어울리게 쓸 수 있습니다. 뭔가가 크면 알아채게 됩니다. 하지만 뭔가가 크고 빨갛기까지 하면 그냥 지나칠 수가 없죠! 에러나 경고 메시지를 빨갛고 고대비로 만드세요. 그게 아니라 사용자가 한 행위를 그저 확인하는 거라면, 좀 더 작고 후퇴하는 녹색을 쓰면 더없이 좋을 거에요.

****

다음 글에서는 시각적 원리 세 번째, ‘반복과 패턴 파괴’를 다루겠습니다!

---

 

#14

또 하나의 중요한 시각 디자인 원리는 패턴을 만들어서 사용자의 시선을 중요한 것으로 이끄는 것입니다. 다른 모든 좋은 법칙이 그렇듯, 패턴은 깨지라고 만드는 것이기도 하고요. 그러니 이번 글에서는 반복과 패턴 파괴에 대해 배워보죠.

반복과 패턴 파괴

이 구식의 고무 오리들이 당당히 돌아왔습니다!

인간의 뇌는 패턴과 순서 인지에 특별한 재능이 있습니다. 자연에서 뭔가가 계속해서 일어날 때마다 우리는 재빨리 눈치챌 수 있습니다. 사실 우리는 알아채기만 하는 게 아니라, 그런 것들을 다르게 생각하기도 합니다.

첫번째 그림에서는 다섯 개의 똑같은 고무 오리가 한 줄로 늘어서 있습니다.하지만 우린 다섯 개의 개별 오리로 보는 게 아니라, 오리의 줄 하나로 봅니다. 이 오리들을 그룹이나 순서로 보는 거죠. 서구 문화권에 산다면, 글자를 읽을 때처럼 왼쪽에서 오른쪽으로 오리들을 볼 겁니다.

오리 대신 메뉴나 목록이 줄지어 서있어도 우리는 똑같은 일을 할 겁니다. 따라서 가장 왼쪽에 있는 걸 더 많이 클릭하고 가장 오른쪽에 있는 걸 덜 클릭할 것임을 알 수 있습니다.

* 패턴 파괴

두번째 그림에도 고무 오리 다섯 마리가 있습니다. (참 잘 생겼죠?) 하지만 이번엔 한 마리가 따로 떨어져 나와있는데요. 이 녀석을 비욘세라고 불러보죠.

그것 하나가 모든 것을 바꿉니다.

이제 우리가 보는 건 일렬로 줄지어선 (질투심 많은) 오리 네 마리와 혼자 떨어져 스팟라이트를 받으면서 매력적으로 보이는 비욘세입니다. 비욘세에 집중하지 않는 게 어렵습니다. 오리 다섯 마리는 정말 똑같이 대단한데 말예요.

자, 이게 메뉴였다면 어떨까요? 가운데 있는 선택지가 이전에 비해 훨씬 더 많이 클릭될 겁니다. 우리 시선이 거기 고정되어 있기 때문이죠. 또한 이런 클릭은 왼쪽 선택지에서 뺏어온 것이기 때문에 이전에 비하면 왼쪽 선택지의 인기가 덜할 것입니다. (그럼에도 가장 오른쪽에 있는 선택지보다는 여전히 꽤 인기 좋겠지만요.)

* 알아두면 아주 강력한 사실입니다.

단순해보이고 뻔해보이지만, 이 원리를 디자인에 적용하면 (아님 춤출 때 써보시던가요) 사람들이 어떤 게 중요한 버튼이고 선택지인지 알아채게 만듭니다. 뭐 팝 스타일수도 있겠고요.

조심하세요:  패턴을 파괴하면 사용자의 시선을 다른 중요한 것에서도 뺏어올 수 있습니다. 패턴을 깨기 전에, 패턴을 하나 만들어둬야 합니다.

* 이 원리들을 결합시켜 봅시다.

패턴이나 순서를 만들려면, 대상들의 시각적 무게감과 색을 일관성있게 맞추세요. 사용자의 시선은 한쪽 끝에서 시작해서 패턴을 따르다가 다른 쪽 끝에서 끝날 겁니다.

패턴을 파괴하려면, 초점을 주고 싶은 부분만 살짝 바꾸세요. “바로 가입” 버튼을 예상 못했던 색깔과 크기, 형태, 스타일로 만들어 보세요. 그리곤 밤새 클릭 수 올라가는 걸 보는 겁니다!

****

다음 글에서는 이런 개념을 좀 더 심화한 ‘선의 긴장과 가장자리의 긴장’에 대해 다룰게요.

---

 

#15

뭔가를 반복하면 패턴이 생긴다는 걸 이전 글에서 다뤘습니다. 하지만, 특정한 종류의 반복은 “형태”를 인지하게 만들기도 합니다. 그리고 그렇게 하면 사용자의 시선이 어디로 향하는지도 영향을 끼치게 되죠. 그러니 오늘은 ‘선의 긴장’과 ‘가장자리의 긴장’에 대해 알아봅시다.

선의 긴장과 가장자리의 긴장

이제 오리에 질렸다고요? 아뇨, 전 안 그래요. 

시각적 “긴장”이라는 개념은 아주 초보적인 것으로 보이지만, 얼마나 유용할 수 있는지 안다면 놀라실 겁니다. 우리의 두뇌는 패턴이 없는 곳에서도 패턴을 찾는 것에 다소 지나치게 뛰어납니다. 디자이너인 여러분은 이를 활용할 수 있습니다.

* 선의 긴장 

첫번째 그림에선 오리 여덟 마리가 줄지어 있습니다. 우리는 오리 여덟 마리 각각을 보지 않고, 줄로 인식합니다. 그게 선의 긴장입니다. 실제로 선이 있는 것도 아닌데, 선이나 “경로”라고 인지하는 거죠.

우리의 눈은 선이 어디로 이어지는지 경로를 쭉 따라가게 마련입니다. 아주 유용하죠.

패턴을 부쉈던 것처럼 경로를 일부러 부순다면, 그 이빠진 부분에 훨씬 더 시선을 뺏기데 됩니다.

* 가장자리의 긴장

지금까지는 선이 하나만 있다고 가정했습니다. 하지만 하나 이상의 선을 갖고 선의 긴장을 만들어내면 어떻게 될까요?

그 결과는 “형태”가 될 수 있습니다.

두번째 그림에서, 저는 오리가 상자의 “모퉁이”를 만드는 것처럼 보이게 배치했습니다. 오리 12 마리를 볼 수도 있었고 , 세 마리씩 짝지어진 네 개의 그룹을 볼 수도 있겠지만, 여러분 마음 속에서 정말로 보고 싶어하는 건 상자이고, 그래서 그렇게 보입니다.

한 발 더 나아가, 이제 상자 “안”이나 “모퉁이” 사이의 “공간”에  뭔가를 더 넣을 수도 있습니다. (오리 좀 더 넣어볼까요?!) 선의 긴장과 마찬가지로, 가장자리의 긴장은 뚫린 곳에 집중하게 만듭니다.

레이아웃의 관점에서 보자면, 이는 라벨처럼 작은 뭔가에 더 집중하게 만드는 아주 훌륭한 방법입니다. 시각적인 경로를 만들어서 사람들이 클릭하길 바라는 버튼으로 이어지게 만들 수도 있겠죠. 고전적인 광고는 이런 테크닉을 곧잘 사용했습니다.

편리하게도 이렇게 하면 레이아웃이 “더 단순하고”, “더 응집력있어” 보입니다. 12마리의 개별 오리는 잘 다루기엔 너무 많지만, 경로나 상자는 정신적으로는 한 개의 개체거든요.

* 이 원리들을 결합시켜 봅시다.

이번 글에서는 “긴장” 사이의 빈틈을 비워뒀지만, 꼭 그럴 필요는 없습니다. 아이템 목록에 그래디언트를 쓰는 등 색깔을 이용해 경로를 만들 수도 있습니다. 여러 요소들의 그룹을 개별 개체가 아니라 하나의 형태로 다뤄서 시각적 무게감을 더할 수도 있습니다. 레이아웃에 “뭔가”를 추가하지 않으면서도 사용자의 시선을 처리하는 훌륭한 방법이죠.

***

다음 글에서는 이번 특강에서 다섯 번째이자 마지막일 시각 원리에 대해 알아보죠. 정렬과 근접도입니다.

---

 

#16

우리가 배울 마지막 디자인 원리는 뭔가 요소를 추가하지 않으면서도 디자인 요소에 경중과 의미를 더하는 방법입니다. 좀 미묘하게 들리지만, 일상에서 보는 모든 것들에 영향을 끼치고 있어요.

정렬 & 근접도

오늘은 이 구식 고무 오리들에게 작별을 고할 시간입니다 하지만 우리를 떠나기 전에 오리들은 시각 인지의 가장 근본적인 원리 두 가지에 대해 설명해줄 거에요. 그냥 얼굴만 예쁜 녀석들이 아니라고요!

****

* 정렬

첫번째 그림에는 기가 막히게 잘 생긴 오리 여섯 마리가 있습니다. 하지만 녀석들이 정렬된 방식 때문에 관계에 대해서도 많은 걸 알아낼 수 있죠.

두 줄이 보입니다.
가장 왼쪽과 가장 오른쪽에 있는 오리는 “고립된” 것처럼 보입니다.
가운데 있는 두 마리가 가장 잘 “정리된” 것처럼 보입니다.
모든 오리들이 같은 방향으로 이동하는 것으로 보입니다.
동작을 본다면, 가장 왼쪽에 있는 오리가 무리에서 “뒤쳐진” 것으로 보입니다.
동작을 본다면, 가장 오른쪽에 있는 오리가 무리를 “이끄는” 것으로 보입니다.

이 여섯 마리의 오리는 동일합니다. 정렬 만으로 이런 인지를 만들어낸 것이죠.

비슷한 기능을 하는 버튼들도 정렬할 수 있습니다. 서로 다른 층위에 있는 콘텐츠도 정렬할 수 있습니다. 복잡한 의미를 만들려면 스프레드시트처럼 행과 열의 그리드 속에 정보를 넣을 수도 있습니다.

****

* 근접도

두 사물 간의 가까운 정도 또는 먼 정도를 통해 두 사물이 서로 관련됐는지 또는 그렇지 않은지에 대한 감정을 만들어낼 수 있습니다. 그 거리를 “근접도”라고 부릅니다.

두번째 그림에는 여섯 마리의 오리가 있습니다. 이번엔 수평선이나 수직선에 맞춰 정렬한 것이 아니지만, 우리는 두 그룹을 명확히 알 수 있습니다. 각 그룹에 있는 오리들은 팀이나 가족처럼 “함께” 있는 것처럼 보입니다. 근접도만으로 그런 인지를 만들어낸 것입니다.

여러분의 디자인에서 서로 관련있는 요소들은 가까이 두고, 관련없는 요소들은 멀리 떨어뜨려 놓으세요.

예를 들어, ‘구매’나 ‘앱 다운로드’처럼 하나의 액션에 관련된 제목과 텍스트 단락과 버튼은 보통 “패키지”처럼 디자인합니다. 그렇게 하면 사용자가 뭔가를 더 읽지 않아도 이것들이 함께 간다는 것을 이해할 수 있거든요.

이제 여러분은 디자인 천재니까, 다음 글에서는 레이아웃에서 자연적으로 강한 부분과 약한 부분에 대해 알아보겠습니다. Z 패턴, F 패턴, 시각적 계층에 대해서요.

---

 

#17

여러분이 쓴 글자 하나 하나, 여러분이 만든 픽셀 하나하나를 모든 사용자들이 신나게 봐줄 거라고 생각하기 쉽습니다. 그런 망상에서 그만 나오세요. 실제 사용자는 그렇게 하지 않으니까요. 실제 사용자는 훑어봅니다. 훑어본다는 건 뭔가 시선을 잡았을 때만 멈춰서 읽어본다는 뜻이죠. 그러니 이번 글에서는 훑어보기 패턴에 대해 알아봅시다.

Z 패턴, F 패턴, 시각적 계층

웹사이트나 앱을 사용하는 건 그때마다 조금씩 다른 경험처럼 느껴지겠지만, 실제로 사람들이 어떤 디자인을 보는 방식은 꽤나 그럴싸하게 예측할 수 있습니다…

* Z 패턴

제가 생각할 수 있는 가장 지루한 디자인부터 생각해보죠. 한 면 가득 글자로 빼곡한 신문 페이지입니다. 기사는 하나 뿐이고, 제목 없고, 이미지도 없고, 줄바꿈이나 인용 단락도 없습니다. 그냥 글씨가 그것도 다단 형태로 이쪽 구석부터 저쪽 구석까지 꽉 채워져있습니다.

이런 디자인에선 (여러분이 절대로 이런 건 안 만들었으면 좋겠어요.) 사용자들이 일반적으로 위에 표시한 것처럼 “Z” 형태로 훑어봅니다.

지루해요! Zzzzzzzzzz…. (제가 저거 보면서 뭐 했는지 아시겠죠?)

지난 다섯 편의 글에서 시각 디자인의 원리에 대해 설명한 건, 여러분이 이 레이아웃을 더 낫게 만드는 방법을 알기 바랐기 때문이에요.

아하!

큰 제목을 넣거나 (시각적 무게감) 시선이 따라 움직이게 일단으로 처리하거나 (선의 긴장) 더 작은 세부로 나누면 (반복), 사람들이 유명한 F 패턴에 근접하게 됩니다.

위의 컬러 그림은 눈 추적 결과를 “히트 맵”이라는 형태로 보여줍니다.눈 추적은 사람들이 어디를 보는지를 기록하는데, 사람들이 오래 보는 것일 수록 히트맨에서 좀 더 “뜨겁게” 표시됩니다.

비슷한 레이아웃 = 비슷한 결과.

F 패턴은 한때 닐센 노먼 그룹의 창립자를 유명하게 해주기도 했어요. 그 이후 한동안 “도약”급 작업을 내놓진 않았지만, 여전히 읽을만한 보고서를 많이 내놓고 있어요.

* F 패턴은 이런 식으로 동작합니다.

왼쪽 위에서 시작. 여기까진 Z패턴과 같아요.
텍스트의 첫 줄 또는 제목을 읽거나 훑어봄.
뭔가 흥미로운 걸 볼 때까지 단락의 왼쪽 편을 따라 쭉 훑어내려감.
흥미로운 건 좀 더 자세히 읽어봄.
계속 훑어내려감.

이런 방법을 계속 하다 보면 히트맵은 E자나 F자 모양을 띄게 됩니다. 그래서 그런 이름이 붙었죠.

***

* 이게 왜 중요할까요?

특정 페이지의 어떤 부분은 “자연스레” 시선이 많이 가는데, 그 페이지의 다른 부분은 대부분 무시하게 된다는 걸 알아채셨을 지도 모르겠군요. 레이아웃에서 “강한” 지점, “약한” 지점이라고 부르는 게 그런 뜻이에요.

왼쪽 위에 있는 버튼은 오른쪽 위에 있는 버튼보다 클릭을 잘 받아요. 그 다음이 왼쪽 아래, 그리고 다음이 오른쪽 아래죠. 어느 쪽이든 모퉁이에 있는 게 가운데 어딘가에 아무렇게나 처박힌 것보다는 클릭을 많이 받아요. … 뭔가 그 가운데에 묘수를 부리지 않았다면 말예요.

콘텐츠의 각 “블럭”과 각 단도 각자의 F 패턴을 가질 수 있다는 걸 알아두면 더 좋아요. 한 페이지에 F 패턴이 하나만 있어야 하는 건 아녜요. 하지만 이건 좀 더 어려운 얘기니 다음 언젠가 해보죠.

****

* 시각적 계층

중요한 텍스트 표시하려고 타이포그래피 쓰고, 버튼 강조하려고 특정 색깔을 쓰고, 중요한 것에 시각적 무게감을 더 주면,시각적 계층이 생겨나요. 즉, 사람들이 쉽게 훑어볼 수 있는 디자인이 되는 거죠. 로봇처럼 처음부터 끝까지 쭉 훑어보는 게 아니라, 우리 눈은 중요한 곳에서 다음 중요한 곳으로 건너 뛰거든요.

시각적 계층이 좋아 보이기 때문에 좋다고 말하는 디자이너들도 있지만, 실제로는 훑어보기 더 쉽기 때문에 더 좋게 느껴지는 거에요.

* 다른 형태의 눈 추적 결과 유형도 보고 싶나요? 핀터레스트에 제가 모아 놓은 눈 추적 게시판을 보세요!

다음 글에서는 눈 추적에서 영감을 받은 생각들을 계속할 거에요. 목표에 따라 어떻게 다르게 디자인을 사용하는지 배워보죠. 둘러보기 vs 찾기 vs 발견하기. 기대해주세요.

---

 

#18

사이트나 앱은 사용하는 사람도, 각각의 사용하는 이유도 다릅니다. 잘못된 행동에 맞춰 디자인하면 바라는 결과를 얻지 못합니다. 이 글에서는 다음 내용을 배워보죠.

둘러보기 vs 찾기 vs 발견하기

위의 제목은 실제 세상에서는 여러 의미로 쓰일 수 있으니, 이번 글의 목적에 맞게 다시 정의해볼게요.

‘둘러보기’는 이케아에 가서 “아이디어만 얻으려고” 모든 전시실을 둘러본 다음 몇가지 자질구레한 걸 사들고 나오는 것입니다.

‘찾기’는 이케아에 가서 여러분의 말도 안 되게 작은 아파트에 맞는 새로운 소파를 찾는 것입니다.

‘발견하기’는 원하던 소파를 찾고 그 소파에 쏙 들어가는 기발한 협탁도 하나 사는 겁니다. 왜냐면 진짜 멋지게 기발하고 쏙 들어가거든요. 여러분의 인생에 꼭 필요했던 것처럼 말예요.

****

* 둘러보기

여러분이 온라인 스토어를 방문했습니다. 거기 상품이 멋져보이거나, 트렌드를 좆고 싶었다거나, 마침내 2,000$ 짜리 핸드백으로 삶을 완성하는 그 날을 꿈꾸며 간 거라면, 여러분은 둘러보는 중입니다.

둘러보는 사용자는 이미지 대부분을 빠르게 훑어봅니다. 하나씩 차례로, 왼쪽 위부터 시작해서 말예요. 몇 개 건너뛰는 것도 있지만, 그 정돈 상관없어요. 사용자가 매력있게 느낀 사진은 좀 더 주의를 끌게 됩니다. (어쩌면 심지어 클릭해줄 지도 모르죠!)

둘러보기에 맞춰 디자인하려면: 훑어보기 쉽게 만들고 콘텐츠를 빠르고 시각적으로 유지해야 합니다. 페이지를 온갖 똥으로 가득 채우진 마세요. 제품이 감정적으로 호소할 수 있는 면에 집중하세요. 그게 스타일이라면 사진에 집중하세요. 그게 성능이라면 (보트 엔진이나 총처럼) 해당 정보를 라벨로 명확하게 표시해주세요. 그게 브랜드라면 로고를 뚜렷하게 보여주고요. 그게 세공이라면 손으로 한땀 한땀 만든 세부를 확대해보여주세요. 기타 등등.

***

* 찾기

누군가 뭔가 마음에 담아둔 것을 찾으려고 한다면, ‘둘러보기’와 비슷해보일 수 있습니다. 하지만 눈 추적 연구에 따르면 실제 행동은 매우 다르다고 해요. 이들은 사냥을 합니다.

찾는 사용자는 수없이 많은 제품이나 사진을 무시할 것입니다. 여러분의 레이아웃이 잘 조직되어 있다면 이 사용자들이 선택지들을 헤치며 체계적으로 찾을 수 있을 것입니다. 이들은 단 하나라도 놓치고 싶어하지 않아요!

핀터레스트 스타일의 레이아웃은 이런 사용자에게는 맞지 않습니다. “삐뚤빼뚤”하고 아무렇게나 뜨거든요. 하지만 선택지를 “필터링”할 수 있는 건 가끔 쓸만합니다.

찾기에 맞춰 디자인하려면: 속성에 집중하세요. 사용자가 찾는 게 갈색 머리칼, 파란 눈의 러시아 신부라면 이런 속성이 있는 사진마다 멈춰서 볼 겁니다. 하지만 금발은 방해가 될 뿐이겠죠.

대부분 사용자에게 가장 “핵심적”일 속성을 강조하세요. 다른 건 더하지 마시고요. “어수선해”보일까봐 걱정하지 않아도 좋습니다. 정보가 유용하다면 “어수선한” 게 아니니까요. 여기는 미술관이 아니에요.

사용자가 원하는 것을 찾으면, 사용자는 더 많은 정보를 얻으려고 (또는 구매하려고) 클릭하게 될 겁니다. 러시아 신부의 이름, 추가 사진들, 연상의 으스스한 남자들에 대해 어떻게 생각하는지 등은 흥미있는 지점들이 될 수 있겠지만, 그녀의 신발 크기는 어떤지 와플을 얼마나 좋아하는지 같은 건… 음, 별로 중요하지 않겠죠.

****

* 발견하기

자, 여러분이 골동품 카주를 끝내주게 잘 준비해놨다고 칩시다. 사용자들이 그걸 찾고 있지는 않지만, 만약 찾게 되면 살 것 같다고 가정해봅시다. 사용자들이 어떻게 발견하도록 하겠습니까?

‘사람들은 이런 식으로 새로운 걸 발견할 거야.’라는 여러분의 생각은 아마도 실제 사람들이 새로운 걸 발견하는 방식과는 반대일 것입니다. UX의 괴짜 세상에 오신 것을 환영합니다.

여러분은 아마도 다음 두 가지 실수를 저지를 것입니다.

1) 해당 제품을 선전하는 여러분 자체 사이트의 메인 메뉴에 넣거나 “배너”를 만들어 붙일 겁니다.

2) 여러분의 가장 충성스러운 사용자들이 가장 먼저 발견하리라 예상하겠죠. 그 사람들이 지금 디자인에서 가장 오랜 시간을 보내고 있으니까요.

두 가지 모두 틀렸습니다.

#1: 사용자들은 뭔가를 찾을 때만 메뉴에 있는 걸 클릭합니다. 그렇게나 간단한 거에요. 메뉴에서 “발견하는” 사람은 거의 없습니다. 배너도 통하지 않습니다. 왜냐면 배너는 한 번도 통한 적이 없으니까요. 인터넷을 써보긴 하신 거에요? 난데없이 새삼스레 사람들이 배너에 열광할 이유가 있나요?

#2: 경험이 많은 사용자일수록, 새로운 것을 찾아 덜 뒤져봅니다. 실제 세상에서 사이트나 앱에서 뭘 할 수 있는지 알려고 뒤적거리는 건 초짜들 뿐입니다. 경험 많은 사용자들은 자신이 원하는 걸 알고, 어떻게 얻는지도 압니다. 뭐하러 뒤져보겠어요?

“그걸 좋아하신다면, 이것도 좋아하실 걸요…”

사용자가 새로운 걸 찾기를 바라기보다는, 사용자들이 이미 찾는 것을 찾게 해주세요. 새로운 것을 거기에도 덧붙여서 (관련성 있게 해야겠죠.), 사람들이 “발견”할 수 있게 해주세요. 여러분 입장에선 마치 새로운 걸 감춰놓는 기분이 들겠지만, 실제로는 올바른 사람들에게 제대로 보여주고 있는 것입니다.

레딧 같은 사이트라면 사람들은 최고 추천 글을 보러 오는 것이지 새 글을 보러 오는 게 아닙니다. 하지만 새 글에 아무도 추천을 날리지 않는다면, 최고 추천 글도 없어지겠죠! 그래서 레딧은 최고 추천글 목록에 새 글(여러분이 좋아하는 분류에서 뽑아서요.)을 몇 개 끼워넣습니다. 이렇게 하면 새 글도 사람들에게 보이게 되고, 추천도 받고, 삶의 순환을 다시 한 번 시작할 수 있죠.

****

사용자를 이해할수록 어디에 맞춰 디자인해야 할 지 잘 알게 됩니다. 망할 사용자 연구 좀 하시라고요!

****

다음 글에서는 페이지 레이아웃 디자인 실무의 첫걸음을 해볼 겁니다. 페이지 프레임웍 – 내비게이션과 푸터. 기대해주세요.

---

 

#19

여러분은 이제 목표를 세웠고, 사용자를 연구했고, 정보 설계를 계획했습니다. 이제 이 계획들을 실헌할 때입니다, 아싸! 그러니 이 글에서는 다음 내용을 배워보죠.

페이지 프레임웍 – 내비게이션, 푸터, 기타 등등

와이어프레임을 페이지마다 하나씩 하고 싶겠지만, 그러지 마세요! “두 번 재고 한 번에 잘라라” 같은 얘기에요.

보통은 문신을 새길 때처럼 와이어프레임을 만들어야 해요. 커다란 것부터 시작해서 진행하면서 세부를 추가하는 거죠.

이 경우에 커다란 부분이란 모든 페이지에 나타날 요소들입니다. 내비게이션과 푸터 말이죠.

****

* 푸터

푸터는 보통 메인 내비게이션에 넣기에는 너무 일반적이거나 너무 별 것 아닌 정적인 링크들의 모음입니다. 푸터 디자인이 뛰어난 사이트도 있지만 (대단하죠.), 사용자가 해당 사이트를 조작할 때에 필요한 링크들이라면 푸터에 넣어서는 안 됩니다.

여러분 자신에게 물어보세요: “무한 스크롤되는 페이지가 하나라도 있을까?” 그렇다면 푸터에 들어간 모든 것들을 다른 곳 어딘가에서도 쓸 수 있게 해주세요. 언어 변경 메뉴가 푸터에 있는데, 언어를 바꾸려고 할 때마다 푸터가 도망간다면… 엿이나 드세요.

****

* 내비게이션

메뉴는 최소한 두 가지 종류가 있어요. 메인 메뉴와 서브 메뉴요.

메인 메뉴: 정보 설계를 제대로 했다면, 어떤 게 메인 메뉴에 들어가야 할 지 이미 알고 있을 겁니다. 사이트 맵에서 홈페이지 바로 아래에 있는, 즉 첫번째 레벨에 있는 링크들 말이에요.

메뉴가 좌우 방향인지 상하 방향인지 상관없이, 아이템은 가장 인기있는 것부터 가장 인기적은 것 순으로 놓아야 해요. (인기 순위는 사용자 흥미 측정자료에 맞춰하세요. 여러분이 얼마나 좋아하는지에 맞춰 하는 게 아니에요.)

메뉴를 처음 만드는 거라 자료가 없으면, 최대한 추측해서 순서를 정하고 개발자에게 나중에 메뉴 순서를 바꾸기 쉬웠으면 좋겠다고 말해놓으세요. 사이트에 실제 트래픽이 들어오기 시작하면, 추측했던 순서와 실제 인기도가 맞는지 확인하세요. 안 맞다면 고치고요.

서브 메뉴: 서브 메뉴는 사이트맵에서 사용자가 어떤 페이지에 머무르든지 간에 그 페이지 “아래에” 있는 페이지들의 목록입니다. 잠깐, 여러분 사이트맵 만든 것 맞죠? 휴. 좋아요. 아주 잠깐이지만 깜짝 놀랐다고요.

서브 메뉴에서 중요한 건, 링크가 늘 바뀌더라도 서브 메뉴는 모든 페이지에서 같은 위치에 있는 것이 이상적이라는 거에요. 그렇게 하면 사용자들은 어디에서 서브 메뉴를 찾아야 할 지 금방 알 수 있거든요.

* 서브 메뉴를 거대하게 만드는 건 절대 좋은 생각이 아닙니다.

메가 메뉴가 가장 최선의 방책이라고 논쟁하려는 사람을 볼 때마다 늘 놀라게 돼요. 그 말은 정보 설계(& 정보 설계자)가 구리다는 뜻이거든요.

메뉴 하나에 모든 걸 집어넣는 건, 전우주에서 가장 게으른 디자인입니다. 좀 더 노력하세요. 

메뉴는 데이트 같은 거에요. 선택지가 7-8개 이상 필요하다면 누군가의 마음을 아프게 하는 거에요. 어쩌면 그게 여러분의 마음일 수도 있겠고요.

****

* 간단 요약

콘텐츠를 만들기 전에, 여러분 앱의 모든 페이지와 화면에서 내비게이션과 푸터가 돌아가게 만들어놓으세요. 나중에 제게 감사하게 될 겁니다.

****

다음 글에서는 페이지 디자인의 커다란 문제를 다뤄볼게요. 폴드, 이미지, 제목. 기대해주세요.

---

 

#20

여러분은 커리어 내내 UX 디자인에 대해 뻔한 질문을 갖게 될 것입니다. 그 중 일부는 그런 질문을 할 때가 오지 않더라도, 생각해야만 해요. 그러니 이 글에서는 다음 내용에 대해 조금 배워보죠.

폴드, 이미지, 제목

****

* 폴드

구세대 UX 디자이너들이 가장 잘못 생각하는 것 중 하나가 바로 “폴드”입니다. 혹시 못 들어보신 분들을 위해 설명하면, 폴드는 사용자가 스크롤하기 전에 화면에 보이는 부분이에요.

폴드 위쪽에 있는 모든 것들이 최대로 잘 보입니다. 하지만 연구에 따르면 사용자의 60-80% 정도는 폴드 아래에 뭔가 있을까 싶어 스크롤한다더군요.

폴드 위쪽에 있는 거라면 무엇이든간에, 사용자에게 폴드 아래에 뭐가 있는지 말해줘야 합니다. 폴드 아래에 뭐가 있는지 모른다면 사용자는 스크롤을 내릴 만큼 흥미가 동하지 않을 지도 몰라요.

조심하세요: 요새는 페이지 가장 위쪽에 거대한 배경 이미지를 넣는 게 유행입니다. 그 배경이 폴드에서 딱 끊어지면, 사람들은 스크롤하지 않고 떠나버릴 지도 몰라요. “아래로 스크롤해보세요”라는 그래픽을 넣어야 할 정도라면, 지금 디자인이 약한 거죠.

폴드에 대해서는 이 곳을 좀 더 참고하세요.

****

* 이미지

이미지는 작동과 무관하다고 여기는 UX 디자이너들이 많은데요. 하지만 이미지는 사용자의 시선을 유도할 수 있습니다. 그러니 잘 생각해봐야돼요.

특히 인물 이미지는 레이아웃 위의 어떤 다른 것보다도 주의를 잡아끕니다.

일반론이지만, 이미지에 감정이 풍부할수록 사람들을 더 잡아끕니다.

* 유용한 팁: 인물 이미지를 쓴다면, 이미지 속 인물의 시선이 사용자가 바라봤으면 하는 방향을 향하도록 해보세요. 얼마나 달라지는지 알면 놀랄 겁니다.

위에 있는 두 히트맵 모두 레이아웃은 동일합니다. 이미지가 다른데, 하나는 아기가 제목을 보고 있고, 다른 하나는 독자를 보고 있죠.

두 이미지의 결과를 보면, 사용자들은 아기의 얼굴에 굉장히 집중합니다. 하지만 두번째 이미지에서만 텍스트 콘텐츠와 제품 사진, 로고에도 시선이 쏠리고 있죠.

여러분은 어떤 이미지를 고르시겠습니까?

****

* 제목

인물 이미지 외에, 우리 눈은 레이아웃에서 가장 크고 대비가 강한 텍스트 조각에 가장 끌립니다. 그러니 디자인에 커다란 제목을 넣는다면, 동시에 사람들이 훑어보기 시작할 시점을 선택한 셈입니다.

그러므로, 가장 중요한 콘텐츠 바로 위에 제목을 놓는 것이 중요합니다. 제목 바로 아래의 콘텐츠가 그렇게까지 중요한 게 아니라면 불필요하게 사람들의 주의를 너무 끌어버리는 거죠. (동시에 다른 콘텐츠에서 뺏어오는 거죠.) 콘텐츠가 그렇게 배열되지 않았다면, 사용자들은 제목을 읽고선 다음 시선을 줄 곳을 찾을 것입니다.

****

* 간단 요약

스크롤 하기 전에 주의를 기울일만한 걸 주세요.
스크롤 아래 쪽에도 내용이 있다는 걸 확실하게 보여주세요.
감정을 더하고, 사용자의 시선을 이끌 수 있는 이미지를 선택하세요. 
제목 위치를 통해 사용자에게 뭐가 제일 중요한지 알려주세요.

****

버튼은 왼쪽에 있어야 할까요, 아님 오른쪽에 있어야 할까요? 다음 글에서는 드디어 이 질문에 대해 답할 수 있는 규칙에 대해 배워보겠습니다. ‘인터랙션의 축’ 기대해주세요.

---

 

#21

사이트나 앱은 사용하는 사람도, 각각의 사용하는 이유도 다릅니다. 잘못된 행동에 맞춰 디자인하면 바라는 결과를 얻지 못합니다. 이 글에서는 다음 내용을 배워보죠.

인터랙션의 축

이 얘기는 말도 안 되게 단순해요.

인간의 집중력은 아주 한정적이에요. 우리는 한 번에 하나에만 집중할 수 있어요. 다람쥐든, 가슴이든, 덕 다이너스티든 한 번에 하나요. 그래서 콘텐츠 한 덩어리에 집중하고 있으면, 다른 콘텐츠는 잘 안 보이게 됩니다.

안 믿기신다고요? 이걸 보세요. 

****

* 가장자리를 찾으세요.

이번 특강에서 배운 시각 원리들을 모든 디자인에서 쓰게 될 겁니다. 잠시 한 발 뒤로 물러나서 여러분의 레이아웃을 보세요. 레이아웃 곳곳에 “선”이나 “가장자리”, “블록”을 만든 게 보이나요?

이런 것들은 텍스트나 이미지 아니면 줄지어선 것들의 가장자리에 맞춰 정렬되어 있을 겁니다.

이런 가장자리를 가리켜 인터랙션의 축이라고 합니다. 눈은 이 축을 따라 쭉 이동합니다. 축이 뭔가에 방해받거나 끝날 때까지요.

사용자의 시선은 거의 항상 인터랙션의 축에 집중하게 됩니다. 축을 따라 움직이다 멈추게 되면, 다음 인터랙션의 축으로 폴짝 건너뛰죠.

****

* 그러므로

뭔가를 클릭하게 하고 싶으면, 인터랙션의 축 위나 주변에 놓으세요. 클릭 안 했으면 싶은 것들은 다른 곳에 놓고요.

축에서 멀리 있는 요소일수록 사람들이 덜 보게 됩니다. 뭔가를 안 보게 되면 클릭할 수 없죠.

그게 다에요!

****

다음 글에서는 사용성 중 가장 어려운 부분을 진땀 빼며 파헤쳐봅시다. 폼. 기대해주세요.

---

 

#22

디자인하다 보면 사용자가 정보를 입력하는 방법을 디자인해야하는 상황이 옵니다. 시간 문제죠. 그러니 이 글에서는 폼에 대해 후다닥 돌아보겠습니다.

폼

****

폼은 사용성 측면에서 가장 오랜 시간을 들이게 될 곳 중 하나입니다. 사용자들은 입력 폼에서 혼란을 겪고, 실수하고, 관둬버리는데, 사용자 입력 받는 건 여러분의 사이트에서 가장 중요한 부분 중 하나이기도 하죠.

사용자 입력이 여러분의 디자인에서 가장 중요한 곳 중 하나가 아니라면, 대체 왜 폼을 쓰려는 겁니까? 사용자들이 폼에서 혼란을 겪고, 실수하고, 관둔다는 얘기, 제가 했었나요?

****

* 긴 페이지 하나 vs 짧은 페이지 여럿?

폼에 관한한 UX 디자이너든 마케터든 똑같이 던지는 질문이 있습니다. “얼마나 길면 너무 긴 걸까?”

폼을 되도록 짧게 만들자는 게 일반론이긴 하지만, 말이 된다면 여러 페이지로 나누는 것도 주저하지 마세요. 사용자가 중간에 그만두더라도 단계별로 정보를 저장하고 싶을 때에도 괜찮거든요.

중요한 건 폼이 단순하게 느껴지도록 만드는 것입니다. 연관 질문들은 같이 묶어두세요. 정말 필요한 질문이 아니면 빼버리세요. 딱 필요한 만큼만 페이지를 쓰세요. 더 많아도 안 되고, 더 적어도 안 됩니다.

****

* 입력 유형

폼의 목적은 입력을 받는 것, 즉 사용자한테 정보를 받는 것입니다. 정보를 모으는 방법엔 꽤 여러가지가 있습니다. 표준 텍스트 필드를 사용하든, 엄청나게 변형시킨 슬라이더를 사용하든, 가장 양질의 응답을 받을 수 있는 입력 유형을 골라야 합니다.

표준 입력 유형 모음입니다.
새롭고 예쁜 HTML5 입력 모음입니다.
염소 품종 모음입니다.

예를 들어, 사용자가 가장 좋아하는 염소 색깔을 고르게 하는 상황을 생각해봅시다. 체크 박스나 라디오 버튼, 둘 모두 선택지 목록에서 사용자가 원하는 것을 고르게 하는 방식입니다. 하지만 체크 박스는 복수 응답이 가능한 반면, 라디오 버튼은 하나만 골라야 하죠.

좀 더 온전한 응답을 받고 싶다면 체크 박스를 쓰세요. 좀 더 엄선한 응답을 받고 싶으면 라디오 버튼이 좋을 겁니다.

****

* 라벨과 보조 설명(instruction)

라벨과 보조 설명을 실제로 어떻게 적는지는 다음 글에서 다룰 거에요. 지금은 라벨의 기능에 대해 얘기해봅시다.

입력에 라벨을 붙일 때는 (안 그러면 사용자가 뭘 입력하라는 건지 어떻게 알겠어요?) 짧고 명확하고 알아보기 쉽고 입력 받는 곳에 가깝게 두세요. 그럼 라벨 관련 문제의 99%가 해결될 겁니다.

질문이 낯설거나 복잡하면 보조 설명을 적어줘야 할 때도 있습니다. 그럴 땐 설명을 좀 더 붙여주면 도움이 돼요. 몇 글자 안 된다면 라벨과 입력 영역 부근에 두세요. 글자 수가 제법 된다면 폼 안에 넣지 말고 폼 옆에 두세요. 지금 뭘 하고 있느지 알고 있는 사용자의 흐름을 방해하지 않을 수 있게요.

Luke W.가 쓴 Web Form Design이라는 책을 강력 추천합니다.

****

* 사용자 실수 예방/조치

폼이 있으면 실수가 생기기 마련입니다. 실수가 되도록 안 일어나게, 이미 생긴 실수는 되도록 우아하게 다루는 게 우리가 할 일입니다.

입력 받는 곳을 약간 똑똑하게 만들어두면 실수를 막을 수 있습니다. 예를 들어 전화 번호를 입력하는 텍스트 필드라면, “(OOO) OOO-OOOO”, “OOO OOO OOOO”, “OOOOOOOOOO”, “OOO.OOO.OOOO” 등을 모두 처리할 수 있도록 해주세요. (이 문제는 개발자에게 얘기하세요.)

입력 예시를 보여줘도 실수가 줄어들 수 있습니다. 텍스트 필드에 미리 써놔도 되고 보조 설명으로 적어도 됩니다.

사용자가 질문을 건너 뛰거나 실수할 때, 이를 알려줘서 고칠 수 있게 해야 합니다. 입력값이 올바른지 확인할 수 있는 종류의 질문이라면, 입력값이 올바른지 틀린지에 따라 체크 마크나 “X”표를 띄울 수 있습니다. 이를 인라인 에러 핸들링이라고 부릅니다.

비밀번호 입력칸도 인라인 방법을 써서 타이핑하자마자 “약한지”, “강한지”를 보여주죠.

사람들의 이름처럼 입력값이 올바른지 확인할 수 없을 때는 인라인 에러 핸들링을 쓰지 마세요.

사용자가 “다음”이나 “완료”를 클릭하면, 폼에서 빠뜨린 질문이나 실수가 없는지 확인할 수 있습니다. 문제가 있으면, 해당 부분을 시각적으로 아주 명확하게 표시해주세요. 어디를 빠뜨렸는지, 왜 틀렸는지 말이죠.

유용한 팁: 에러는 입력 폼의 가장 아래에서 확인할 수 있게 해요! 뭐가 잘못된 건지 스크롤을 올려봐야 한다면, 안 할 거에요.

****

* 속도 vs 실수

조금 어려운 얘기일 수 있겠지만, 완전 쓸모있을 거에요.

“이름”, “이메일”처럼 정말 흔한 걸 물어보나요, 아님 “벨벳 아트 중 어떤 걸 가장 좋아하시나요?”처럼 좀 덜 흔한 걸 물어보나요?

흔한 질문의 경우, 왼쪽 정렬로 입력 폼의 위에 라벨을 붙이면 사용자가 아주 빠르게 볼 수 있습니다. 모든 게 인터랙션의 축에 있거든요.

흔치 않거나 복잡한 질문의 경우, 입력 폼의 왼쪽(같은 줄)에 라벨을 붙이면 사용자가 좀 더 천천히 보게 되지만 실수도 조금 줄어듭니다.

대부분의 경우 입력 폼의 “완료” 버튼은 왼쪽, 즉 인터랙션의 축에 놓으세요.

뭔가 정말 파괴적이거나 치명적인 행위에 대한 입력 폼이라면, 버튼을 오른쪽에 놓으세요. 그럼 반사적으로 버튼을 누르는 대신 버튼이 어디있는지 찾느라 잠시 멈추게 됩니다.

****

휴, 한 회 분량 치곤 정말 많았네요. 잘했어요!

다음 글에서는 라벨, 보조 설명, 지시문를 어떻게 쓰는지 배울 거에요. UX 카피라이팅. 기대해주세요.

---

 

#23

겉보기엔 같은 카피라이팅이지만, UX 사람들과 진짜 카피라이터들은 서로 중요하게 생각하는 게 달라요. 우리의 관심사는 특별한 종류의 글쓰기이고, 감수성 같은 건 생각하지 않아요. 오늘 배울 것은…

지시문, 보조 설명, 라벨

****

사용자와 소통하기 위해 쓰이는 글에 UX 디자이너가 끼어들어야 할 곳이 네 군데가 있습니다. 그 때가 아니라면 콘텐츠 작가가 쓰게 두는 게 좋아요. 그 네 곳이란…

지시문
보조 설명
라벨
좀 더 긴 설득문

이 글에서는 앞의 세 개를 다룹니다. 네 번째 건 나중에 글을 하나 따로 쓸게요.

****

* 지시문

지시문은 제목이나 버튼 위에 또는 주변의 텍스트로서 사람들에게 무엇을 할 지 알려주는 텍스트에요. “바로 다운로드하세요!”, “무료로 계정을 업그레이드하세요!” 같은 것 말이죠. 이런 상황에서 UX 문구를 잘 쓰면 얼마나 효과 있는지 알면 깜짝 놀랄 겁니다.

좋은 지시문을 만드는 공식은 이렇습니다. (역주: 영어 기준의 원문을 한글 어순에 맞게 다소 수정합니다.)

긴급한 시간 또는 장소 + 이득 + 동사

긴급: “바로” 같은 시간을 얘기할 수도 있고 “여기에서” 같은 장소일 수도 있습니다. 상황에 맞다면 “무료”라는 표현도 긴급한 분위기를 만들어낼 수 있습니다.

이득: 사용자가 행위 결과 얻을 것입니다. (동사에 포함되어 있지 않다면)

동사: 사용자들이 하게 될 행위입니다.

이 공식에 대해 좀 더 자세하게 설명한 글입니다. 여기에서 지시문 작성법을 보세요.

****

* 보조 설명

사용자가 뭘 해야 하는지 100% 확실하지 않다면(또는 확실하다 해도), 사용자를 도와야 합니다. 이전 글에서 입력 폼 얘기하면서도 좀 다뤘는데요. 폼이 보조 설명이 가장 필요한 곳이기 때문이에요.

보조 설명은 짧고 의미 분명하고 직설적이어야 합니다. 어려운 용어 안 돼요. 업계 용어 안 돼요. 살짝 꼰 농담이나, 풍자, 웃기는 것도 안 돼요. 너무 장황하거나 부드럽지 않게 하세요.

해야 하는 걸 정확히 얘기하세요. 가장 단순한 표현을 쓰세요. 똑똑한 애든, 언어를 막 배우기 시작한 사람도 알 수 있게 쓰세요. 괜히 멍청하게 쓰지 말고, 그냥 명확하게 쓰세요.

나쁜 예: “다 됐으면 조기 클릭할 수 있는데 눌러보셔!”

나쁜 예2: “데이터 요구 영역에 모두 입력하세요. 성공적으로 제출하시면 계정 생성 과정을 시작합니다.”

멍청한 예: “와! 입력 참 잘 하시네요! 뛰어난 데이터 입력가처럼 모든 걸 다 타이핑했다면, 앞으로 가서 저 아래의 예쁜 노란 버튼을 클릭하세요! 거의 다 됐답니다. 짜잔!”

좋은 예: “모든 질문에 답해주세요. 다 끝나면 이 페이지 가장 아래의 “완료”라고 쓰인 노란 버튼을 눌러주세요.”

****

* 라벨

라벨을 멋드러지게 쓰거나 독특하게 만들고 싶은 욕구가 들겠지만, 항상 참도록 노력하세요. 생각할 수 있는 가장 일반적이고 쉽고 기본적인 라벨을 쓰세요. 라벨에 대해 답이 여러 종류 나올 수 있다면, 아직 뜻이 분명하지 않은 거에요.

나쁜 예: “당신의 마음이 머무는 곳…”

안 좋은 예: “당신이 사는 곳”

좀 더 좋은 예: “주소”

최고의 예: “집 주소”

버튼 라벨도 마찬가지에요. 디자이너들이 많이 놓치는 부분이지만요.

제목과 보조 설명을 읽지 않아도, 무슨 버튼인지 이해할 수 있나요? 그렇지 않다면 라벨에 좀 더 신경쓰세요.

나쁜 버튼 라벨: “확인”, “네”

좋은 버튼 라벨: “계정 삭제”, “바뀐 내용 저장”

****

하지만, 이런 텍스트 얘기는 방법은 꽤 쉬운데, 실제 상황에서는 좀 더 정치적으로 복잡해지는 부분이기도 해요. 크리에이티브 디렉터나 카피라이터, 클라이언트가 여러분이 써놓은 텍스트를 보고 “좀 더 멋지게 써야겠어.”라고 말하면 “아니오“라고 답하셔야 합니다.

꼭 그래야 한다면 A/B 테스트로 증명하세요. 하지만 실제 사용하는 곳이고 동작에 관련된 텍스트라면 절대로 물러서지 마세요. 사용자가 필요한 “경험”이 멋지고 재미있는 게 아니라 단순하고 명확한 것일 때도 있답니다.

****

다음 글은 페이지 디자인 실무의 마지막이에요. 1순위 버튼과 2순위 버튼. 기대해주세요.

---

 

#24

와이어프레임 관련 마지막 글입니다. 인터랙티브 디자인에서 가장 중요한 편이기도 하죠.

1순위 버튼, 2순위 버튼

위에 버튼 두 개를 예로 들었습니다. (아, 클릭하지 마세요.) 일반적인 얘기지만 버튼 스타일은 이 두 가지면 됩니다. 사용자 행위 대부분이 다음 두 가지 중 하나거든요.

1) 1순위 액션: 우리 목표에 도움이 되는 것
2) 2순위 액션: 그렇지 않은 것

****

* 1순위 버튼

사용자가 할 수 있는 액션 중 생산적인 것들이 있습니다. 회원 가입, 구매, 콘텐츠 작성, 저장, 보내기, 공유 등등 말예요. 이전에는 없던 것을 생산하는 겁니다. 이런 건 1순위 액션이고, 우리 입장에선 사용자가 되도록 많이 하길 바라는 것입니다.

1순위 액션을 실행하는 버튼, 즉 1순위 버튼은 되도록 잘 보여야 합니다. 이전 글들에서 다룬 원리를 사용하면 됩니다.

1순위 스타일: 배경과 대비가 높게 합니다. (아주 다른 색이나 그림자)

레이아웃에서 위치: 인터랙션의 축 위나 부근에 놓아, 사용자들이 반사적으로 먼저 볼 수 있게 합니다.

****

* 2순위 버튼

사용자가 할 수 있는 액션 중 비생산적인 것들이 있습니다. 취소, 건너뛰기, 재설정, 제안 거절 등등 말예요. 이런 액션들은 뭔가를 없애거나 새로운 걸 만들지 못하게 합니다. 이런 건 2순위 액션이고, 우리 입장에선 사용자가 하지 않기를 바라지만, 사용성 때문에 선택할 수 있게 합니다.

그러므로 2순위 액션을 실행하는 버튼, 즉 2순위 버튼은 덜 눈에 띄게 만들어 우연히 또는 “반사적으로” 클릭하지 않도록 해야 합니다.

2순위 스타일: 배경과 대비가 낮게 합니다. (비슷한 색이나 그림자)

레이아웃에서 위치: 인터랙션 축에서 멀리 떨어뜨려, 사용자들이 애써 찾을 때만 발견할 수 있게 합니다.

****

* 중요도가 높으면 예외!

비생산적인 액션이라도 중요할 때가 있습니다. 계정 삭제 같은 것 말예요.

이런 액션은 스타일을 1순위 스타일로 하되, 레이아웃에서는 2순위 위치에 놓으세요. 사용자가 이 버튼을 찾기를 바라는 동시에 실제 액션을 하기 전에 어떤 액션인지 생각해보기를 바라기 때문이에요.

이런 버튼에는 해당 행위의 중요도를 나타내는 색깔(빨강, 주황, 노랑, 등등)을 주는 것도 좋습니다.

****

* 특별한 버튼

여러분 사이트나 앱에 대표격인 액션이 하나 있고, 해당 액션의 주목도를 높여야 할 떄가 있습니다. 이런 액션에 맞춰서 특별한 버튼을 디자인하세요. 그래서 전체 디자인에서 두드러져 보일 수 있도록 말이죠. (패턴 파괴)

아마존의 “장바구니에 담기 (Add to Basket)” 버튼, 핀터레스트의 “핀하기 (Pin it)” 버튼, 페이스북의 예전 “좋아요 (Like)” 버튼이 모두 이런 식으로 디자인됐죠.

****

다음 글에서는 방향을 바꿔서, UX 디자인에서 가장 강력한 부분으로 들어가볼게요. ‘사용자 심리 – 조건 형성’ 기대해주세요.

---

 

#25

디자인 기술은 UX의 너트와 볼트겠지만, UX를 잘 하려면 사람들이 어떻게 사고하는지도 이해해야 합니다. 지금까지는 디자인에 집중했었는데요. 이번 글부터는 사용자 심리를 세 번에 나눠 보려고 해요.

조건 형성 (Conditioning)

****

* 조건 형성이란 무엇인가?

영어로 컨디셔닝이지만 달리기와는 전혀 상관 없어요. 여러분이 무엇을 기대하고 무엇을 바라는가와 관련있는 얘기에요.

파블로프의 침 흘리는 개에 대해 들어보셨다면, 과학에서 얘기하는 “조건 형성”이 어떤 건지 익숙하실 지도 모르겠네요.

개를 키우신다면 예전에 조건 형성을 써보셨을 지도 몰라요. 앉거나, 앞발로 악수하거나, 연말정산법 같은 것 훈련시키면서요.

그게 사람한테도 잘 통한답니다.

조건 형성이란 (사람을 포함한) 동물은 보상을 받는 행위는 다시 하고, 벌 받은 행위는 피하려고 한다는 아주 근본적인 원리에요.

당연해보이지만 제가 만나본 UX 디자이너 중 99%가 무시하고 있더라고요. 여러분의 디자인을 중독적으로 만드는 유일한 방법인데 말예요.

****

* 보상과 처벌은 실체가 아닌 감정이에요.

사용자에게 보상을 준다고 하면 열 중 아홉은 자동적으로 아이폰, 영화표, 기타 마찬가지로 멍청한 뭔가를 경품으로 거는 걸 생각할 거에요.

지금 사용자 수백만 명을 놓고 얘기하고 있어요. 정신 좀 차려요.

가장 효과적인 보상과 처벌은 무료입니다. 보상과 처벌은 그냥 이런저런 물건이 아니라 감정이거든요.

제가 여러분을 무대 위로 올린 다음, 5만 명의 사람들에게 여러분이 사람이 맺을 수 있는 가장 좋은 친구 중 하나이며, 여러분이 있기 때문에 세상이 더 좋은 곳이라고 말한다면 어떨까요?

그런 경험 여러 번 하고 싶을까요? 아마 그렇겠죠.

그럼 다음으로 제가 여러분을 무대 위로 올리곤, 여러분이 가장 친한 친구와 가족들 대상의 “가장 쓸모없는 놈” 투표에서 1등이 되었다고 말한다면 어떨까요?

그런 경험 또 하고 싶을까요? 아마도 아닐 거에요.

리얼리티 TV 쇼에 나가는 게 아니라면 좀 극단적인 예겠죠. 하지만 제가 여러분에게 뭔가를 주지도, 그렇다고 뺏어가지도 않았다는 걸 보세요. 전부 인식에 대한 얘기입니다. 하지만 그런 인식에 대한 감정은 정말 강력할 수 있죠!

****

* 피드백 고리를 만드세요.

여러분의 디자인에 조건 형성을 실제로 쓰려면 어떻게 해야 할까요?

절대 끝나지 않는 감정과 행동의 고리를 만들어, 여러분의 디자인을 사용하는 것이 끝없이 보상받는 느낌이 들도록 하는 것이 핵심입니다. 기본적인 피드백 고리 모델은 다음과 같아요.

동기 > 액션 > 피드백 > 동기

예를 들어 귀여운 아기 사진을 찍었다고 칩시다. 페이스북에 올려 아기가 얼마나 귀여운지 다른 사람들이 볼 수 있게 하고픈 동기가 있습니다. 그래서 액션을 취해 페이스북에 올립니다.

페이스북은 그 액션을 할 수 있게 디자인되어 있습니다.

그러고 나면 “좋아요”나 좋은 답글을 주는 사람들을 통해 피드백을 받습니다. 이메일을 받을 수도 있겠죠.

페이스북은 그런 피드백을 줄 수 있게 디자인되어 있습니다… 이럼 또 다른 사진을 올려 또 같은 일을 겪고 싶은 동기가 생겨나죠.

이 “고리”는 계속됩니다. 사람들이 더 이상 좋은 피드백을 주지 않거나, 그 작은 괴물의 x같은 사진을 더 이상 참을 수 없는 사람들이 “벌을 내리기” 전까지 말예요.

아, 어디까지나 가상의 예에요.

트릭: 좋은 느낌을 받을 수 있는 기능을 디자인하면, 사용자들은 몇 번이고 다시 돌아와서 좋은 느낌을 받으려 합니다! 그 기능이 여러분의 사업 목표를 달성한다면, 성공적인 제품을 만든 것이죠!

벌은 조심하세요. 사용자는 벌을 피하려고 해야 합니다. 기능을 그렇게 디자인하세요. 사용자를 일부러 기분 나쁘게 만들지 마세요. 사용자를 잃는 훌륭한 방법입니다. 기분 좋게 만드는 걸 하지 않으면  사용자가 바라는 점수나 집중도, 생산성도 줄어드는 게 이상적입니다.

예를 들어 “농장 게임”이라는 게 있었죠. (무슨 게임인지 말은 안 할게요.) 이 게임에 시간을 들이면 농장이 크고 훌륭해집니다(보상). 너무 오래 이 게임을 안 하면 농작물이 죽습니다(벌). 하지만… 돈을 쓰면 시간도 줄일 수 있고 농장에 새로운 물건도 놓을 수 있죠(큰 보상!).

역사상 가장 성공한 게임 중 하나가 된 것이 놀랍지 않아요.

****

* 여러분 자신의 조건 형성에도 주의하세요.

조건 형성은 어디에서나 사람들을 훈련시킵니다. 하지만 우리 모두가 다른 방식으로 조건 형성되어 있기도 하죠. 여러분이 제일 좋아하는 색깔이라는 게 있는 것도, 특별히 더 좋아하는 디자인이라는 게 있는 것도, 제가 맥도널드 냄새를 마약처럼 느끼는 것도 그 때문이죠.

여러분이 특별한 뭔가를 아주 좋아한다고 해서, 다른 모든 사람들도 그럴 거라고 가정하지 마세요.

****

다음 글에서는 모든 사람들에게 동기를 일으키는 것에 대해 배워볼게요. 그럼 조건 형성을 위해 써먹을 수 있겠죠. ‘설득’ 기대해주세요.

---

 

#26

이번 글에서는 UX의 심리학적 면을 계속 볼게요. 제가 UX에서 주로 연구한 부분인데요. ‘설득’ 봅시다.

설득

****

설득은 복잡합니다. 제 책 Composite Persuasion (종합 설득)은 뭔가를 설득적으로 만드는 것에 대해, “특강” 형식으로만 쓴 건데 270쪽에 달합니다.

이 글에서는 #23 UX 카피라이팅에 대해서도 마무리짓겠습니다. 좀 더 길고 설득적인 텍스트나 글을 쓰는 것도 오늘 다루니까요.

****

* 핵심 아이디어 두 가지

1) 설득에는 8가지 공통 재료가 들어갑니다. 서로 맞물려 만들어지기 때문에 순서대로 쓰는 게 가장 효과가 좋은 편입니다.

2) 사람들은 14가지에 동기 부여가 됩니다. 디지털 쪽에서 가장 흔한 네 가지 동기 부여에 대해 설명드릴게요.

****

* 설득의 공식

40 명의 설득자들을 비교해본 결과, 그들이 쓰는 방법 모두에 8가지 공통 요소가 있다는 걸 알았습니다. 아래에 적어볼게요.

* 인터랙션 전

신뢰성 – 신뢰가 없으면 전부 소용없습니다. 여러분의 신뢰성을 진짜로 만드는 것이 제일 좋지만, 중요한 건 높은 가치의 방식으로 타인과 소통하는 겁니다. UX에서는 브랜드 신뢰도, 가격 투명성, 고객 평가에 이르는 모든 것에 적용됩니다. 여러분이 가치있다고 말하지 마세요. 보여주세요.

청중을 파악하라 – UX에서는 사용자를 연구해서 설득 대상은 누구인지, 그 대상이 신경쓰는 건 어떤 거지 파악하라는 뜻입니다.

* 인터랙션 중

공개하고 무장해제하라 – 사용자의 관심을 바로 사로잡아야 합니다. 그리고 사용자들이 명확히 반대하는 것은 제거해야 합니다. UX에서는 폴드 위쪽의 제목을 잘 짓거나 시선을 잡아끄는 이미지를 준비하는 것이겠죠. 예를 들어 가격이 관심사라면 사용자가 볼 수 있는 첫번째 정보에 적혀야 합니다. 사용자들이 뒤의 내용을 볼만큼 더 내려볼 거라고 가정하지 마세요.

친밀감(rapport)을 만들어라 – 친밀감은 어떤 이와 함께 하는 감정인데, 사람들의 비슷한 점을 통해 만들어집니다. UX에서는 친근한 말을 쓰거나, 사용자가 여러분의 고객과 어떤 점에서 일치하는지 보여주고, 글에서 독자들이 자신과 연관지을 수 있는 주요 인물을 묘사하는 식으로 만들 수 있습니다.

고립시켜라 – 사용자가 자신의 관심사가 명확해질 때까지 충분히 살펴봤다면, 이와 경쟁적인(이를 방해하는) 정보를 제거하고 싶을 겁니다. UX에서는 결제 과정 중에는 메뉴나 배너를 제거해서 사용자가 구매하는 동안 아무 것도 주의를 흐트러뜨리지 않게 하는 예를 들 수 있겠네요.

확신시켜라 – 좀 더 복잡하게 설득하려면, 고객이 기본부터 세부까지 단계별로 알 수 있게 정보를 “웨이브” 형태로 제공할 필요가 있습니다. 이렇게 하는 방법에는 여러 가지가 있는데요. 정보를 좀 더 받아들이기 쉽게, 좀 더 소비하기 쉽게 프레임하는 데에는 인지 편향이 유용할 때도 있습니다.

협상을 마무리하라 – 행위를 완료하도록 해주세요. 그걸 너무 복잡하게 만들진 마시고요. UX에선 “쓰기 완료”, “구매 확인”, “공유하기” 버튼에 해당하겠네요.

* 인터랙션 후

편향으로 요약하라 – 일이 끝났다고 설득 작업을 끝내지 마세요. 사람들은 원하는 걸 줄 때만 여러분이 자신을 가치있게 여긴다고 생각하게 됩니다. UX에선 추후 메일을 보내는 게 해당될 듯합니다. 새로운 맥북으로 할 수 있는 모든 것, 좀 더 읽을만한 글 추천, 올린 글에 대한 사람들의 긍정적인 반응이 얼마나 되는지 말이죠.

****

* 공통의 동기 부여

매슬로우의 인간 욕구 단계를 보신 적 있나요? 잊어버리세요. 마케터들은 여전히 학교에서 배우지만, 심리학자들은 오래 전에 버렸답니다.

인간이 항상 얻거나 지키려고 동기부여하는 14가지가 있습니다. 죽지 않기, 아프지 않기, 공기, 물, 음식, (신체 기능의) 항상성, 잠, 섹스, 사랑, 아이 보호, 지위, 소속감, 정의, 그리고 이들 각각을 좀 더 잘 이해하기.

이 모든 것에는 대상이 있고 각기 다른 정도로 정서적인 반응을 이끌어냅니다. 하지만 인터넷에서는 지위, 소속감, 정의, 이해가 특히 유용한데요. 이건 그냥 ‘생각’이기 때문이죠. 생각이라 무한하기도 하고, 그래서 맨땅에서 공짜로 만들어낼 수도 있습니다.

지위 – 지위는 게이미피케이션의 주 재료입니다. 여러분 자신을 다른 사람들에 상대적으로 비교하는 방식이라면 뭐든지 지위가 될 수 있습니다. 포인트/트로피, 또는 힘과 권력의 상징이 있는 시스템을 디자인한다면, 사용자들이 지위를 인식하는 방식을 제어하는 겁니다. 뱃지일 수도, ‘좋아요’일 수도, 캔디 크러시 사가의 레벨일 수도 있습니다. 사용자들은 다른이보다 우월하다는 것에 끌립니다. 이런 우월감 성취를 사업 목표에 붙인다면, 말 그대로 감정 만으로 돈을 벌어들이게 됩니다.

소속감 – 스포츠 팀이나 밴드의 팬이라면, 또는 훌륭한 단체나 특별한 이익 단체의 일원임이 자랑스럽다면, 그게 바로 소속감입니다.사람들이 페이스북 그룹에 가입하고, 특정한 방식으로 옷을 입고, “당신은 그레이 아나토미의 어떤 캐릭터일까요?” 테스트에 참여하는 게 모두 사람들이 어딘가에 속하고 싶기 때문입니다. 사람들이 속할 수 있는 어딘가를 디자인하세요. 사용자들이 그룹이나 분류 자체를 자신과 동일화하는 걸 보게 될 겁니다.

정의 – 정의란 공정함 또는 보상이나 벌이 “받을 사람이 받았다”라는 의미입니다. 존중 받지 못하다가 브리튼 갓 탤런트에서 끝내주는 오페라 목소리를 보여주는 사람을 보며 울고, 저스틴 비버 싫어하는 사람들이 그가 체포되는 걸 보며 즐거워 하는 게 그 때문이죠. 약자가 눈에 띌 수 있게 도와주세요. 안 그러면 대중이 악을 찾아 부술 수 있도록 해주세요. 그렇게 할 겁니다.

이해 – 사람들은 위에 얘기한 동기들에 대한 거라면 뭐라도 더 배우고 싶어합니다(더 알 자격이 있다고도 느낍니다). 하지만 그것보단 훨씬 더 실용적일 수 있어요. 여러분의 인터페이스 디자인 같은 걸 배우는 데에 시간이 걸리게 바꾼다면 사람들은 아마 분노할 겁니다. 페이스북이 디자인을 꽤 갈아엎은 다음에 쇠스랑과 횃불을 들고 일어선 사람들 봤죠? 정확합니다.

****

유용한 팁: 사람들의 동기 목록에 돈이 없다는 걸 알아채셨나요? 돈 자체로는 동기가 될 수 없거든요. 돈 자체가 동기가 될 수 있다면 돈을 더 쓸 수 없는 지경이 되어도 돈을 더 갖길 바라겠죠. 하지만 그렇지 않잖아요. 하지만 우리는 돈이 만들어내는 지위에는 분명 동기가 부여됩니다. 세상에서 기본적으로 쓸모없는 포인트 같은 형태의 지위라도 말예요.

****

우와. 엄청 많이 썼네요. 찬찬히 생각해보세요. 실제 세계에 어떤 예가 있을지 생각해보면 더 좋고요.

****

다음 글에서는 초보자와 “파워 유저”사이의 차이점에 대해 배워볼게요. ‘경험은 어떻게 경험을 바꾸는가’ 기대해주세요.

---

 

#27

이번 특강 사용자 심리 부분의 마무리입니다. 새로운 사용자와 숙련된 사용자가 여러분의 디자인을 어떻게 다르게 보는지 알아보죠.

경험은 어떻게 경험을 바꾸는가

****

* 파워 유저는 소수입니다.

통계적으로 말해서, 고급 사용자나 파워 유저가 여러분 디자인을 사용하는 사람 중 “대부분“인 일은 불가능합니다. 그렇게 믿고 싶은 유혹이 크긴 하겠지만요.

여러분의 제품/서비스가 굉장히 기술적인 것이 아니라면, 사용자의 절대 다수는 다른 거 쥐뿔도 할 거 없는 보통의 사람들일 것입니다.여러분이나 여러분 동료처럼 집중력이 엄청나게 좋거나 최신 기술을 꿰고 다니는 사람들이 아니에요.

믿기 어려운 진실: 수백만 명의 행복한 사용자들을 원한다면, 강박증에 걸린 천재가 아니라 주의산만한 바보 천치에 맞춰 디자인하세요.

****

* 감출까 표시할까: 선택의 역설

대부분의 프로젝트에서 레이아웃을 얼마나 “깔끔하게” 만들지 결정해야만 하는 상황이 옵니다.

디자이너들은 보통 모든 걸 감추는 쪽을 택합니다. 그렇게 하는 게 보기에 더 좋거든요.

비디자이너들은 좋아하는 기능 전부가 항상 표시되어 있기를 바랍니다. (사람마다 좋아하는 기능이 제각각이지만요.)

이런 상황에서 여러분은 어떻게 선택하시겠습니까?

표시된 기능은 감춰진 기능에 비해 언제나 더 많이 사용되고 더 많이 발견됩니다. 눈에 보일 때마다 그 기능들이 있다는 걸 다시 알게 됩니다.

하지만 “선택의 역설”을 말하자면, 선택지가 많이 보일수록 아무 것도 선택하지 않을 확률이 높아집니다. 보통의 사용자들에게 너무 많은 선택지를 보여줘버리면, 겁에 질려 비명을 지르며 도망을 가버리죠.

초보자들이 핵심 기능을 쉽게 찾을 수 있도록 확실히 해두세요. 아무 것도 클릭하지 않고 그럴 수 있는 게 이상적입니다. 그리고는 파워 유저들에게 항상 보이지는 않더라도 고급 기능을 쉽게 찾을 수 있도록 하세요.

****

* 유용한 팁: “공유하기” 버튼 하나에 20개의 소셜 미디어를 숨겨보신 적 있나요? 보기에 훨씬 깔끔해져서 좋았나요? 불행히도 그건 “단순한” 인터페이스가 아닙니다. 여러분은 지금 공유 기능을 망쳐버린 겁니다. 너무 많은 선택지를 만들었고 아무도 그걸 볼 수 없거든요. 직관과는 안 맞죠?

선택지를 몇 개 추려서 항상 보이게 해두세요. 나중에 제게 감사하게 될 겁니다.

****

* 인지 VS 기억

당장 아이콘 이름들을 말해보라면 몇 개나 얘기할 수 있습니까?

제가 목록을 드린다면 몇 개나 알아보시겠습니까?

보통의 사람이라면 두 번째 질문에 훨씬 더 답할 것이 많습니다.

인터페이스를 마치 검색하는 것처럼 사람들이 묻는 것만 사용할 수 있게 디자인한다면, 사람들은 기억할 수 있는 기능만 사용할 겁니다.즉 시간이 흐를 수록 더 적은 기능을 사용하게 될 거라는 말입니다. 더 늘어나지는 않아요.

많은 양의 정보를 한 번에 다뤄야 하는 상황이 온다면, 사용자에게 분류를 제안하거나 어디를 봐야 하는지 다시 떠올릴 수 있게 도와주세요!

****

* 배우는 건 느립니다. 습관은 빨라요.

새로운 인터페이스에 대해 단계별로 가르치거나 아주 간단한 인트로를 만드는 걸 “온보딩”이라고 부릅니다. 신규 사용자가 메인 기능을 쉽게 찾고 혼란에 빠지지 않게 돕는 것이죠.

하지만, 여러분의 인터페이스를 2년 동안 사용자라면 어떤 일이 일어날까요?

습관은 사용자의 머리 속에서 굉장한 속도로 생겨납니다. 그러니 핵심 기능을 하는 “빠른 방법”을 디자인해야 합니다. 그렇게 명확히 보이지 않을 수도 있어요. 파워 유저들은 생산성을 좀 더 올리기 위해 시간을 들일 겁니다. 키보드 단축키, 오른쪽 클릭 옵션, 트위터의 자잘한 “.@” 팁 같은 것들이 예입니다.

****

다음 글에서는 이번 특강 최고의 부분으로 넘어갑니다. ‘데이터란 무엇인가’ 기대해주세요.

---

 

#28

지금까지 사용자 연구, 목표 설정, 정보 설계 계획, 사용자 시선 유도, 와이어프레임 만들기, 사용자 심리 이해하기를 배웠습니다. 이제 출시할 시간입니다! 출시한다는 얘기는 뭔가 측정할 게 생긴단 얘기죠. 그러니 이걸 알아봅시다.

데이터란 무엇인가

****

* 데이터는 객관적입니다.

초반 글에서 사용자 연구에 대해 다룬 바 있습니다.

데이터는 달라요.

데이터는 사용자의 행동을 측정합니다. 뭘 하는지. 몇 번이나 했는지. 얼마나 걸렸는지 등등이요.

컴퓨터가 이런 데이터를 수집하기 때문에 사용자에게는 영향을 끼치지 않습니다. 측정 기준이 잘 정의되어 있기 때문에 에러도 굉장히 낮습니다. 여러분이 따로 노력하지 않아도 수백 만명을 측정합니다. 그리고 사용자가 어떤 브라우저를 사용하는지, 어느 나라에 있는지 등을 알려주죠.

그리고 데이터는 절대로 거짓말을 하지 않아요. 이건 과학입니다. x팔!

하지만 여러분에게 맥락에 대해선 아무 것도 알려주지 않으니 조심하세요. 불행히도 우리 디자이너들은 데이터를 해석해야 하고, 거기에서 실수가 일어납니다.

****

* 데이터는 사람들로 구성됩니다.

데이터를 “그냥 숫자”로 취급해서 원하는 어디에나 갖다 쓰고 싶을 겁니다. 하지만 그 숫자들은 복잡한 삶을 사는 실제 사람들의 행동을 나타내고 있다는 걸 기억하세요.

수백 만명을 단 하나의 숫자로 만들고, 그게 어떤 상황에도 믿을만한 것이라 생각하지 마세요.

여러분이 옳다는 걸 “증명”해줄 수 있는 숫자를 찾으려는 유혹도 있을 겁니다. 그러지 마세요. 그렇게 해달라는 사람한테도 ‘아니오’라고 답해주세요.

****

* 데이터는 많으면 좋습니다.

다섯 명의 클릭을 측정했다면, 그 다섯 명이 전부 취해있었을 지도 모릅니다. 여러분은 그걸 알 길이 없어요. 5백만 명의 클릭을 측정했다면 이들 모두가 취했을 가능성은 굉장히 희박합니다. 봄방학 때 멕시코 칸쿤에 있는 사람들만 잰 게 아니라면 말예요.

데이터로 내리려는 결정이 중대할수록, 결정하기 전에 더 많은 데이터가 필요합니다. 하지만 일단 데이터가 어떤 방향으로 얘기했다면, 데이터가 이미 얘기한 거에요!

****

* 사용자의 객관적 데이터를 수집하는 몇 가지 방법

사용자의 객관적 데이터를 수집하는 방법은 사용자를 주관적으로 연구하는 방법만큼이나 많습니다.

분석 – 구글 등 많은 회사들이 여러분의 사용자가 무엇을 하는지 익명으로 추적하는 방법을 제공하고 있습니다. 싸거나 무료로요. 사용자가 페이지를 로드하거나 뭔가를 클릭할 때마다 알 수 있어요. 커스텀 측정 방식을 만들 수도 있기 때문에 하늘만이 한계가 되겠죠.

A/B 테스트 – 똑같은 걸 두 가지 버전으로 디자인한 다음 동시에 출시합니다! 실시간으로 실제 사람을 대상으로 테스트하기 때문에 어떤 쪽이 효과적인지 알 수 있습니다. 그런 소프트웨어는 테스트를 언제 멈춰야 할 지도 알려줍니다. 어느 정도를 넘으면 테스트 대상이 늘어나도 결과가 크게 바뀌지 않게 되거든요.

눈 추적 – 실험실에서 진행되지만 사용자가 제어할 수 없기 때문에 객관적이라고 봅니다. 특별한 소프트웨어와 장비를 통해 사용자가 여러분의 디자인을 하면서 어디를 보는지 측정합니다. 그 결과로 디자인이 사용자를 제대로 안내했는지 아닌지를 알 수 있죠.

클릭테일 (ClickTale) – 히트맵을 이용해서 클릭과 스크롤, 흐름을 측정해주는 회사입니다. 다른 곳도 있어요. 클릭테일의 소프트웨어는 실제 사용자가 사용하는 것을 익명으로 녹화할 수 있게 해줍니다. 사용자의 입력값을 가려지지만, 어디를 클릭하는지, 마우스가 어디로 가는지, 스크롤을 얼마나 내리는지, 어떤 페이지들을 옮겨다니는지 등을 볼 수 있습니다. 완전 유용해요.

검색 기록 – 여러분 사이트의 검색 칸에 타이핑한 모든 단어를 따로 저장할 수 있다는 걸 모르는 분들이 많더라고요. 사용자들이 뭔가를 검색한다면, 사용자들이 그 뭔가를 찾지 못했단 뜻이죠. 이런 기록은 여러분의 정보 설계와 레이아웃을 개선하는 데에 완전 소중합니다!

****

이건 시작에 불과합니다. 다음 글에서는 어느 웹사이트에나 의미있는 기본적인 숫자들을 볼게요. ‘요약 통계’ 기대해주세요.

---

 

#29

웹사이트를 분석하려고 계획 중이라면, 곧 구글 어낼리틱스로 가서 사이트의 건강도를 바라보게 될 겁니다. UX 디자이너는 이 작업을 마케터와는 좀 다른 방식으로 하게 되는데요. 이번 글에서는 기본을 배워보죠.

데이터로 디자인하기 – 요약 통계

****

웹사이트에서 뭔가를 하고 싶다면 이해해야 할 기초 통계가 7종 있습니다. 어떤 걸 측정하는지만 알면 되는 게 아니라, 어떤 의미인지도 알아야 해요.

숫자 자체는 좋지도 나쁘지도 않습니다. 사용자 1백만 명이라고 해도 지난 달보다 늘었을 때에만 좋은 겁니다. 여러분이 페이스북인데 이번 달 사용자가 1백만 명이라면 문제가 생긴 거죠.

뭔가를 분석하기 전에 여러분의 사이트는 어떤 행동을 하는 곳인지 잠시 생각해보세요. 그런 행동을 나타내는 숫자들은 어떤 걸까요?

****

1) & 2) 총 방문자수(Total visits) & 순 방문자수(Unique visits)

약간 놀랄지도 모르겠지만 총 방문자수는 사이트가 몇 번 방문됐는지 전체 회수를 측정합니다.

순 방문자수는 조금 달라요. 제가 여러분의 사이트를 50번 들어가도, 저는 순 방문자 수로 따지면 1명인 거죠. 기술적으로 이 숫자는 “사람”이 아닌 기기를 기준으로 집계합니다.

의미: 이 숫자들을 비교하면 사이트 트래픽에 대해 다음을 알 수 있습니다.

질이 높다 – 총 방문자수가 순 방문자수보다 훨씬 많다.

양이 많다 – 총 방문자 수가 순 방문자수와 엇비슷하고, 순 방문자수가 지난 달보다 많다.

둘다 – 순 방문자수가 지난 달보다 많고, 총 방문자수가 순 방문자수보다 훨씬 많다.

둘다 아님 – 순 방문자수가 지난 달보다 적고, 총 방문자수가 순 방문자수와 엇비슷하다.

“순 방문자수”가 트래픽을 좀 더 제대로 나타내긴 합니다만, 저는 10,000명이 한 달에 한 번 방문하는 것보단 1,000명이 매일 방문하는 쪽이 더 좋아요. 마찬가지지만, 1명이 제 사이트를 수백만 번 들어온다면, 그것도 쓸모없긴 마찬가지에요. 그 친구한테 뭔가 문제가 있는 거죠.

3) 페이지 조회수 (Pageviews)

측정 대상: 어떤 방문자가 어떤 페이지를 하나 로딩할 때마다 페이지 조회수가 1 올라갑니다.

의미: 페이지 조회수를 트래픽의 “일반적인 안내 숫자”라고 봐도 좋습니다. 콘텐츠가 모두 통틀어서 얼마나 보여졌는지 나타내는 숫자거든요. 그외 모든 요소들은 무시하고요.

여러분의 사이트에서 배너 광고를 돌리고 있다면, 중요하게 지켜볼 숫자입니다.

여러분의 사이트가 뉴스같은 콘텐츠 기반이라, 전체 페이지 조회수가 많다는 게 더욱 더 중요하고요.

4) 방문당 페이지 조회수 (Pager-per-Visit)

측정 대상: 각 방문자가 방문할 때마다 보는 페이지 수의 평균입니다. 필요하다면 방문당 “클릭” 수로 생각해도 돼요. (기술적으로 정확하지는 않지만요.)

의미: 여러분의 사이트가 좀 더 할 일이나 소셜 인터랙션에 집중한다면, 페이지 조회수보다 방문당 페이지 조회수를 지켜보는 게 낫습니다.

반면, 구글 검색이라면 이 숫자를 되도록 낮추고 싶을 겁니다. 검색 엔진이 훌륭하다면 검색 결과 첫 페이지에 원하는 게 뜨는 게 좋으니까요.

5) 방문당 시간 (Time-per-Visit)

측정 대상: 방문할 때마다 얼마나 머무르는지 평균값입니다. 방문당 시간과 방문당 페이지 조회수를 비교해보는 게 아주 중요합니다.

의미: 완전한 세상에선, 콘텐츠 기반 사이트는 방문자들이 기사 전체를 읽고, 다른 기사도 아주 많이 읽기를 바랄 것입니다. 그렇게 된다면 방문당 시간도 길고, 방문당 페이지 조회수도 많겠죠.

방문당 페이지 조회수는 많은데, 방문당 시간은 짧다면, 사용자들이 뭔가를 찾고 있는데 못 찾은 것이거나(나쁘죠), 자기가 하려던 일을 굉장히 빨리 끝낸 거죠(좋죠.). 상황에 따라 달라요!

하지만 방문당 시간은 긴데, 방문당 페이지 조회수가 적으면, 사이트의 내비게이션이 구리거나(나쁘죠), 기사가 긴데 사용자들이 거의 끝까지 다 읽는다(좋죠)는 얘기죠. 상황에 따라 달라요!

방문당 시간도 짧고, 방문당 페이지 조회수도 적으면, 안 좋은 징후일 수 있습니다. 여러분의 사이트가 구글처럼 빨리 들어갔다가 빨리 나오는 게 목적이라면야 얘기가 다르겠지만요.

6) 반송률 (Bounce Rate)

측정 대상: 한 페이지만 본 다음 아무 것도 클릭하지 않고 나가버리는 사람

의미: 보통 이런 사람들은 여러분 사이트가 ‘싫어’라고 말한 거라고 보면 되죠. 하지만 예외가 있는데요.

블로그는 반송률이 높은 편입니다. 글 하나를 보게 디자인된 것이니까요. 최근 글 목록을 훑든 아니면 특정 글을 보러 왔든지 간에 상관없이요.

사이트 구조와 트래픽 소스가 반송률에 큰 영향을 끼칩니다. 그러니 단순해 보여도 반송률은 복잡한 숫자에요.

7) 신규 vs 복귀 방문자 (New vs Return Visitors)

측정 대상: 특정 사람(정확히는 특정 기기)이 이전에 사이트를 방문한 적이 있으면 “복귀 방문자”입니다. 아니라면 “신규 방문자”고요.

의미: 복귀 방문자는 여러분의 사이트에 대해 좀 더 많이 압니다. 그래서 반송률도 낮고 페이지도 더 많이 봅니다. 복귀 방문자라면 여러분의 작업도 좋아하는 사람일 테고, 그래서 사이트에서 체류 시간도 긴 편입니다.

하지만 “신규” 방문자도 좋습니다. 여러분의 사이트가 좀 더 많은 사람들에게 노출되고 있단 얘기니까요.

중요한 건 신규/복귀의 비율입니다. 복귀 방문자가 없다면, 사이트가 새로 만든 것이거나 엄청나게 구리다는 뜻입니다. 아무도 다시 돌아오지 않았으니까요. 복귀 사용자만 있다면, 여러분의 사용자가 충성도가 높은 것일 수도 있지만, 사이트는 죽어가는 중입니다. 새로운 사람들은 누구도 찾지 않으니까요.

대개 사이트가 성숙할 수록, 백분율로 봤을 때 복귀 방문자가 늘어납니다. 복귀 사용자의 수가 많다면, 검색이나 광고로 들어오는 신규 사용자로는 이길 수가 없거든요.

****

다음 글에서는 행동 데이터를 시각화하면 어떻게 보이는지 알아보죠. ‘데이터로 디자인하기 – 그래프 모양’ 기대해주세요.

---

 

#30

통계를 깊이 알지 못해도 그래프에서 흥미로운 건 볼 수 있답니다. 인간의 행동은 꽤 예측가능한 모양을 만들거든요! 그러니 오늘은 이걸 좀 배워봅시다.

데이터로 디자인하기: 그래프 모양

****

인간 행동이 꽤 자주 만들어내는 그래프 모양에는 두 가지가 있습니다. 트래픽과 구조화된 행동입니다.

****

한 마디 더: 예시에는 전부 막대 그래프를 썼어요. 더 빨리 그릴 수 있거든요. 여러분이 분석할 땐 다른 그래프를 써도 돼요.

당황하지 마세요. 기본적으로는 다 똑같은 일을 하는 거에요. 그래프 종류가 아닌 그래프 모양을 공부하는 것도 그때문이에요.

****

* 트래픽 그래프

이런 그래프들은 시간 흐름에 따라 뭔가를 한 사람들의 숫자를 보여줍니다. 일방문자수 같은 거요. 그걸 “트래픽”이라고 부릅니다.

트래픽은 항상 조금씩 오르락 내리락해요. 세상엔 매일같이 뭔가 알 수 없는 일이 벌어지니까요. 여러분의 사이트가 전혀 바뀌지 않아도 그래요.

따라서 트래픽에 약간 변화가 생겼다고 해도 절대로 그게 새로운 기능이나 디자인 변화 때문이라고 가정하지는 않아요.

자, 그럼 모양 좀 봅시다!

****

그래프를 가로 질러 걷는 게 쉬웠다면, 꾸준한 “상승”이나 “하락”은 경향이 될 가능성이 높습니다. 여러분이 사이트를 바꾸지 않는다면 말이죠.

주말에 광고라도 돌렸나요? 아니면 페이지 중 하나에 기술적인 문제를 일으킬만한 뭔가가 있나요? 아니면 여러분의 섹스 동영상이 유출되었나요? 그래프에서 “치솟는 부분” 또는 갑작스레 “뚝 떨어지는 부분”을 보게 되면 어떤 게 원인인지 알아보세요. 여러분이 자연스레 멋져졌다고 믿고 싶은 것만큼이나 치솟는 부분에는 항상 이유가 있기 마련입니다. 좋을 때도 있고, 나쁠 때도 있죠.

패턴이 어떻게 반복되는지 보이나요?

“사무직 노동자”에 인기 많은 사이트들은 평일에 트래픽이 더 많곤 합니다. 사용자들이 모두 평일에는 학교에 가는 어린이라면, 주말이 대목이겠죠. 아주 흔하고 정상입니다.

하지만…

건강한 패턴이라면 보통 느릿하게 성장하는 경향도 있어야 합니다. 패턴이 정말 뻔하게 예측가능해지고, 숫자가 조금씩줄어들고 있다면 사용자들이 지루해서 죽어가는 거에요. 판을 좀 흔들어보세요!

****

* 구조화된 행동 그래프

다른 중요한 그래프 유형은 사람들이 무엇을 하고 있는지 보여줍니다. 사람들이 몇 일 몇 시에 그 행동을 했는지는 상관없어요. 정보 설계를 통해 이런 행동 유형에 큰 영향을 끼칠 수 있습니다.

노트: “구조화된 행동”이란 제가 이 글 때문에 만들어낸 표현입니다. 직장에서 이런 표현을 꺼내면 똑똑해보이긴 하겠지만, 무슨 말을 하는지 아무도 못 알아들을 거에요.

위의 그래프는 미끄럼틀 같은 모양인데요. 더 많은 사람들이 두번째 것보단 첫번째 것을 더 클릭하고, 세번째 것보단 두 번째 것을 더 클릭하고 그런 거죠. 메뉴처럼 시각적인 순서가 있거나 자연적인 순서가 있는 곳에서는 이런 그래프가 나타납니다.

검색 결과 목록이 보통 이렇게 보입니다. 1페이지를 열지 않고선 2페이지로 갈 수 없으니까요. 방문당 시간, 방문당 페이지 조회수를 자세히 보면 대체로 이렇게 보이기도 합니다. 사이트에서 10초 이상 머무르는 게 그렇게나 x라 어렵거든요.

이 그래프는 좀 더 흥미롭습니다. 여러분의 데이터가 이렇게 보인다면, 여러분의 사이트가 모든 조각을 제대로 갖고 있는데 몇 곳에서 순서가 잘못됐다는 뜻입니다. 즉 사용자들은 우선 순위에 대해 여러분과는 다르게 생각한다는 거죠. 첫번째 놓은 것 대신에 두번째 것을 누르곤 한다는 건데요. 아오, 정말 @$#%때문에 돌아버리겠어요.

데이터가 알려주는 것에 맞게 여러분의 디자인이나 정보 설계를 바꿔보세요. 하지만 사용자를 바꾸려 들지는 마세요. 사용자들은 그거 정말 싫어하거든요.

이 그래프는 처음의 “미끄럼틀 모양”과 비슷하지만 살짝 튀어나온 부분이 있습니다. 그래프가 임신했다고 생각하는 사람들은 멍청이고요. 이런 그래프는 충성도가 높거나, 굉장히 활동을 열심히 하거나, 사이트에서 정말 시간을 오래 보내는 사람들이 소수 있을 때 나타납니다. 평균 사용자들보다 뭔가를 훨씬 더 많이 하고, 그래서 저렇게 튀어나오는 거죠.

어떤 것이 저런 사용자들을 동기 부여시키는지 알아내서, 좀 더 많은 사람들이 저렇게 되도록 만드세요!

“미끄럼틀”이 완만하고 매끈하기를 바랄 겁니다. 미친 듯이 뚝 떨어지거나 울퉁불퉁한 부분이 있으면, 문제가 있다는 겁니다. 사이트의 홈페이지가 정말 혼란스러우면 두번째 페이지로 가는 사람이 적어 이런 그래프가 나타날 수 있습니다.

뭐가 문제인지 확실치 않다면, A/B 테스트가 문제를 찾는 데에 큰 도움이 될 수 있습니다.

****

A/B 테스트는 이번 특강의 마지막 편이기도 하죠. 다음 글에선 한 번에 어떻게 두 군데에 동시에 있을 수 있는지 배워볼게요. ‘A/B 테스트’ 기대해주세요!

---

 

#31

아아아… 특강의 끝이로군요. 이제 진짜 시작이에요. 지금까지 30편의 글을 다 따라왔다면 새로 써먹어볼 도구가 엄청 생겼을 테니까요. 프로페셔녈 DX 디자이너가 되기 전에 하나만 더 배워봅시다. 뭐가 실제로 “더 나은지” 알 수 있을 거에요.

데이터로 디자인하기: A/B 테스트

****

제가 그림을 하나 먼저 그려볼게요. 

신발을 파는 페이지를 하나 디자인하고 싶다고 칩시다. 당연히 되도록 신발을 많이 팔고 싶겠죠. 신발을 더 많이 사게 하려면 어떻게 해야 될까요?

신발 동영상?
“구매” 누르기 전에 배송 정보 완성시키기?
신발 브랜드의 로고?
환불 보장?

여러분이라면 어떻게 고르시겠어요?

“사용자에게 물어보자!”라는 생각부터 들었다면, 뭐 나쁘지 않습니다. 하지만 이렇게 선택지가 모두 주관적일 때는 사람들에게 물어봐도 답도 중구난방이라는 것만 확인할 수 있을 뿐입니다.

그렇다면 이런 주관적인 것들을 놓고 어떻게 결정을 내려야 할까요? 마치 사장님처럼요?!

* 대답은.

죄다 디자인해버리세요! 그리곤 선택지 전부를 동시에 출시해버리는 겁니다. A/B 테스트로 말예요.

****

* A/B 테스트가 뭘까요?

A/B 테스트란 수천, 수백 만명의 방문자에게 어떤 선택지가 더 나은지 물어보는 방법이랍니다. 비교하고 싶은 선택지 전부를 디자인해서 모두 다 출시해버려요!

이 테스트는 각각의 순 방문자는 선택지 하나만 보도록 설계합니다. 테스트 결과가 충분히 모이고 나면, 어느 버전이 클릭 수가 많은지 확인할 수 있습니다. 물론 통계적으로 “신뢰도”도 측정해야 돼요. 그래야 언제 끝낼 지 아니까요. (너무 금방 멈추지 마세요!)

두 가지 버전으로도 할 수 있고 20가지 버전으로도 할 수 있습니다. 하지만 기억하세요. 전체 트래픽 중 일부만 버전 하나를 볼 수 있습니다. 그러니 동시 테스트할 버전이 많으면 트래픽이나 시간이 더 많이 필요해져요.

****

몇 가지 세부사항

1) A/B 테스트는 보통 무료에요. 테스트할 디자인과 페이지를 만드는 시간을 빼면요. 크게 보자면 그 결과는 엄청나게 가치있습니다. 그래서 A/B 테스트를 하는 데에 조금 드는 비용은 그 가치가 아주 충분하다 할 수 있어요.

2) 새로 만든 페이지를 출시하고 기존 페이지보다 나은지 살펴보는 것과는 같지 않아요. 두 가지 버전을 비교하는 유일한 방법은 둘을 동시에 돌려서, 각각 (거의) 같은 수의 사람들이 사용하게 하는 거에요.

3) A/B 테스트는 세부 사항 하나만 바꿨을 때 좀 더 신뢰도가 높아요. 다른 건 모두 똑같은데, 한 페이지는 링크가 빨간색이고 다른 페이지는 링크가 파란색이라면 좋아요. 그런데 이 둘이 메뉴 구성도 다르다면, 둘의 차이가 링크 색깔 때문인지 메뉴 구성 때문인지 알 방법이 없어요.

4) 완전히 다른 두 개의 페이지, 이를 테면 홈페이지와 결제 폼 같은 걸 테스트해봐야 전혀 소용 없어요. 그건 제대로 된 A/B 테스트가 아니죠.

****

이게 다에요! 31편 글 다 보셨다면 축하드립니다! 이제 여러분은 좀 더 다방면에서 디자인을 생각할 수 있게 됐고, 이번 특강에서 배운 걸 연습하면 기술 업계에서 굉장히 높게 찾고 있는 재능을 가진 사람이 될 거에요.

(끝)