brunch

매거진 PM까지 한 걸음

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jieon Aug 15. 2022

사용자를 생각하게 하지 말라니, 어떻게?

[PM 북클럽] (사용자를) 생각하게 하지 마!

우당탕탕
북클럽의 시작

1. 북클럽에 가입하며

코드스테이츠 부트캠프인 PMB는 끝났지만, 사실 PM으로서의 내가 완성되었냐고 하면 그것은 단연코 '아니다'라고 말을 할 수 있다. 하지만, 아무래도 부트캠프가 끝나니 자연스럽게 헤이해지기 시작했는데 (사실 이것도 처음에나 그랬지, 이후에 취업 챌린지를 진행하고 여러 인터뷰를 진행하면서 어마무시하게 바빠졌다..)

그 과정에서, '나의 성장'을 이룰 수 있는 모임이 없을까 생각하던 중 PMB 10기 동기분들이 운영하시는 북클럽에 눈독이 가기 시작했다. 이미 원년 멤버들이 모임을 이루어 진행하고 있던 와중이었지만, 조심스럽게 모임장이셨던 ㅇㅁ님께 연락을 드렸고 다행스럽게도 흔쾌하게 맞아주셨다!

처음부터 사과드리기..

모든 멤버분들이 환영해주신 만큼, 또 열심히 해야했는데.. 현재 진행 중인 과제로 인해 난 처음부터 사과의 말씀을 드릴 수 밖에 없었다. (진행 중인 과제에 관해서는 이후에 다시 포스팅을 작성할 예정이다!) 전환형 과제에 정신이 팔려서 집중을 하지 않은 내가 불러온 재앙이다..

하지만 다행스럽게도, 월에 한번은 면제가 된다는 말에 또 감사하다는 말씀과 함께 이렇게 포스팅을 작성하게 되었다!

그래서 이번 포스팅에서는 PM의 필독서, 스티브 크룩의 <(사용자를) 생각하게 하지 마!>를 리뷰해보고자 한다.

2. 웹페이지는 자명해야 할 것

사용자의 물음표에,

자명한 조명을

스티브 크룩은 사용성 제 1원칙으로 '사용자를 고민에 빠뜨리게 하지 마라!' 라고 말한다. 이 말은 곧 사용자로 하여금 '고민'에 빠지지 않게 하는 것이다.

고민에 대한 예시를 들자면 다음과 같은 것들이라 할 수 있다.

ꞏ 내가 지금 어디 있는 거지?

ꞏ 어디서 시작해야 하지?

ꞏ _____를 어디에 입력해야 하지?

ꞏ 이 페이지에서 무엇이 가장 중요하지?

ꞏ 왜 여기에 이런 이름을 붙였지?

ꞏ 이건 사이트에서 올린 거야? 광고야?

즉, 사용자가 처음 웹페이지를 보았을 때에도 바로 어떻게 해야 할 지 확실히 알 수 있도록 만들어야 한다는 것이다.

이와 관련하여 공유하고 싶은 한 가지 경험이 있는데, 바로 웹에이전시 뉴리버에서 근무할 중의 경험이다. 당시의 나는 GC지놈의 기획 제안서를 작성하는 일에 인턴으로서 투입되어 기획서를 제작하고 있었다.

그 중, 개발현황에서 GC지놈의 클라이언트는 어떤 질환을 치료할 수 있는 치료제를 개발하고 있는지에 대한 정보를 단순히 줄글로 나열하는 것 이외에 다른 방법으로 나타내고자 했다. 이에 여러 사이트들을 레퍼런스로 삼은 결과 팝업 또는 호버를 이용하여 작성하기로 했는데, 그 중 팝업으로 만든 기획서를 다음과 같이 제출했다.

작성한 기획서 (feat. 피드백)

이때 받았던 피드백이 바로 '지언씨, 오른쪽 상단에 X 박스를 바로 만들어두지 않으면 사용자들이 팝업을 닫고 싶을 때 어디를 눌러야 할 지 몰라서 불편함을 겪을 거에요.' 였다. (처음에는 오른쪽 상단에 x박스를 만들지 않았다.)

나는 팝업에 대한 기획안을 짤 때, '당연하게도' 그저 빈 여백을 누르면 팝업이 닫힐 것이라고 생각을 했고 이를 사용자들도 '당연히' 알 것이라고 생각을 했다. 하지만 세상에 당연한 것은 없듯, 사용자들 역시 기획자가 생각한 바대로 움직여 주지 않는다.

기획자는 이 사실을 항상 염두에 두고 지속적으로, 사용자의 모든 use case를 파악하려 노력해야 한다.

3. 웹페이지는 그저 '도구'일 뿐

도구를 대하는 사용자의 자세

스티브 크룩에 의하면 사용자가 웹을 사용하는 방법은 기획자가 예상하는 것과 크게 차이난다고 한다. 그리고 고 이 사용하는 방식에는 3가지의 진실이 있다고 한다.

첫째. 사용자는 웹페이지를 읽지 않는다.

흔히들 기획자는 사용자가 페이지의 모든 내용을 살펴보며 구석구석 꼼꼼히 볼 것이라 생각하지만,

사실 사용자는 각 페이지를 대충대충 보고 본문 일부를 훑다가 흥미를 끄는 부분이나 애초에 찾던 내용과 조금이라도 비슷한 내용이 눈에 띄는 즉시 클릭한다.

즉, 사용자에게 있어 웹페이지는 그저 자신이 필요한 것을 찾게 해주는 '도구'일 뿐이다.

둘째. 사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다.

웹페이지 디자이너는 사용자가 페이지를 훑은 후에 가능한 모든 선택지를 두고 고민한 끝에 최선의 안을 고를 것이라 생각을 하지만, 최선의 안을 고르는 사용자는 거의 없다.

그들은 원하는 것을 바로 찾으려 하고, 굳이 비교를 하려 들지 않으며 최소한의 조건만 만족한다면 선택한다. 그리고 의외로 이러한 이들의 의사결정 방식은 위험성이 높고 극한의 시간적 압박을 받는 상황의 소방대장과 비슷했다고 한다.

소방대장은 머리에 떠오른 첫번재 합리적인 계획을 채택한 후, 그 계획에서 발생할 가능성이 있는 문제에 대해 빠르게 검토하였다. 그리고 문제가 발견되지 않으면, 바로 행동으로 옮겼다.

그러면 이렇게 최고의 선택지를 찾지 않는 이유가 무엇인가에 대해 크룩씨는 '사용자가 바쁘기 때문에' 라고 말한다. 그들은 바쁘기 때문에 최적의 선택을 찾는데 시간을 낭비하지 않으며, 추측을 통해 결정한다 하더라도 그에 대한 불이익은 또 없다. 사용자가 잘못 선택했을 때는, 그저 '뒤로가기 버튼'을 누르면 되는 것이다.

또한 선택지를 굳이 여러개 비교를 하더라도 결과가 나아지리라는 보장은 없으며, 오히려 그 추측하는 것에 대해 재미를 느끼는 사용자도 있다고 한다.

셋째. 사용자는 작동방식까지 이해하려 하지 않는다. 적당히 임기응변한다.

마지막으로, 사용자는 굳이 웹페이지의 작동방식을 생각하려 하지 않는다. 앞서 말했듯, 그들에게 웹페이지란 그저 그들의 니즈를 충족시키기 위한 '도구'일 뿐이다.

작동방식은 일절 중요하지 않으며, 그저 그 물건이 자신의 니즈를 충족시키는 방향으로 작동만 한다면 사용자들은 아무런 불만도 제기하지 않는다.

실제로, 현재 근무하고 있는 회사에서 UX Researching 강의를 들었을 때도 이와 같은 이야기를 들은 바가 있다. 그래서 UX Researcher가 UT (Usability Testing)에 대한 인터뷰를 진행할 때도 구체적으로 무언가를 물어보지 않고 두루뭉실하게 질문을 한다고 한다.

예를 들어, '이 버튼을 누르면 친구에게 선물을 할 수 있습니다. 해당 기능을 알고 사용하셨나요?' 가 아닌 ' 이 버튼을 누르면 무엇을 할 수 있을거라 예상하시나요?' 의 방향으로 질문을 한다고 한다.

즉, 하나의 버튼에 대해서도 사용자들이 다양한 생각을 할 수 있는 만큼 그들이 어떤 생각을 가지고 해당 버튼을 누르는지를 알고자 하는 것이다.

'도구'는 편리하게

그리고 위의 내용, 특히 첫번째와 관련해서도 크게 불편을 겪었던 적이 있어 공유하고자 한다. 그 시기는 바로, 얼마전 yes24에서 영어 교재 정기구독을 하려고 할 때였다. 현재 다니고 있는 회사에서 일을 하면서 영어에 대한 니즈를 크게 느꼈고, 이에 지속적인 영어 공부를 하고자 ebs easy writing과 입트영을 주문하였다.

하지만, 아무리 기다려도 책은 오지 않았고 도대체 뭐가 문제였나 다시 확인을 해보니 정말 중요한 내용을 잊은 것을 확인할 수 있었다.

바로 몇 월호부터 시작할 것인지를 '택배사 직원에게'란 문구에 적지 않았던 것..!

왜 그랬어 yes24..

단순히 다른 사람에게 해당 책을 추천받았기 때문에 굳이 책소개를 읽어볼 필요성을 느끼지 못했고, 바로 '카트에 넣기'라는 버튼을 클릭하면 첫 월호를 적어야 하는지의 유무를 확인할 수 없다.

하지만 문제는 이것이 월간 구독으로 정기 구독으로 운영되는 점이었고, 동아출판은 고객이 언제부터 구독을 할 것인지 확인을 해야 했던 것이다. (개별 구매를 한다면, 해당 부분을 기입할 필요가 없다.)

이런 점에서 yes24 또는 동아출판은 소비자의 불편성을 덜기 위하여 웹페이지 상에서 노력을 해야 했다.

yes24의 웹페이지 기획자라면?

yes24의 기획자로서 개선을 해본다면, 사용자가 바로 확인할 수 있도록 수량 밑에 언제부터 구독을 할 것인지에 대한 드롭박스를 추가할 것이다.

수량의 바로 밑에 추가를 한다면, 책 소개를 읽고 첫 월호를 기입해야 한다는 사실을 확인을 한 사용자 뿐만이 아니라 다른 사람에게 추천을 받고서 바로 구매를 하고자 하는 사용자 역시 바로 인지를 하도록 만들 수 있기 때문이다.

기획자인 우리는 항상 사용자가 자신에게 필요한 정보만 얻고 넘어간다는 사실을 염두에 두어야 한다. 그래야 웹페이지를 그저 훑고 넘어가는 사용자라 하더라도 불편함 없이 사용할 수 있도록 만들 수 있으니까!

4. 사용자의 눈길을 사로잡는 6가지 방법

앞선 내용들에서 우리는 충분히 사용자가 웹페이지는 그저 '도구'라 여기며 휙- 하고 스쳐지나간다는 사실을 알았다. 그럼 이들의 눈길을 한번이라도 더 끌고, 우리들이 원하는 바를 사용자들이 한눈에 볼 수 있게 하려면 어떻게 해야 할까?

나쁜 UX때문에 보지도 않고 가버리면 슬프자나..⭐

첫째. 관례(=널리 사용되거나 표준화된 디자인 패턴)를 이용할 것

둘째. 시각적 계층구조를 효과적으로 구성할 것

셋째. 페이지의 구역을 또렷하게 구분할 것

넷째. 클릭할 수 있는 요소를 명확히 표시할 것

다섯째. 주의를 흩뜨릴 만한 요소를 없앨 것

여섯째. 내용을 훑어보기 좋은 방식으로 구성할 것

이러한 여섯가지 방법을 충족시켰는지는, 당장 브런치의 홈페이지만 봐도 확인할 수 있다.

첫째로, 관례의 경우 검색 아이콘을 이용하여 사용자가 검색을 하고 싶을 때는 무엇을 클릭해야 하는지 알려주고 있다.

검색 아이콘 이외에도, 햄버거바를 통한 메뉴 아이콘 역시 관례의 표현이다.

시각적 계층구조는 특히 브런치를 설명하고자 하는 문구에서 확인할 수 있다. 문구의 색을 점점 옅어지게 하면서 사용자가 편히 글을 읽을 수 있도록 배려하였고, 특히 많은 것들을 읽기 싫어하는 사용자들을 위해 브런치가 표방하는 문구 '글이 작품이 되는 공간, 브런치' 이 하나만 또렷하게 표현하여 하나의 내용만 전달하고자 한다.

페이지 구역은 브런치를 소개하는 문구 바로 밑에 클릭할 수 있는 글들을 배치함으로써, 작품으로 취급하는 글들이 어떤 것이 있는지를 보여주고 있다. 특히, 각 글들을 마우스 호버하였을 때에는 그림이 줌인되는 효과를 추가하여 해당 버튼을 클릭하면 연결된 글로 이동할 수 있음을 자연스레 나타낸다.

글들 이외에도, 사용자로 하여금 클릭하게 유도하고자 하는 '글쓰기'는 둥근 사각형 내에 배치하여 확실한 버튼 모양으로 배치하였다. 아무래도 브런치에서 사용자들에게 유도하고자 하는 바는 '글 쓰는 행위' 일 것이므로 좀 더 명확하게 표현한 것으로 보인다.

브런치에서 주의를 흩뜨릴 만한 요소를 없애기 위해 '메뉴바'라는 방식을 선택한 것으로 보인다. 위의 사진처럼 메뉴바를 선택하지 않았을 때는 사용자가 할 행동은 명확하다. '글을 쓰는 것' 아니면 '글을 읽는 것'

주의를 흩뜨릴 요소가 전혀 없을 뿐더러 각각의 카테고리들이 여백과 함께 배치되어 있기 때문에 훨씬 명확하게 보이고 있다.

마지막으로 훑어보기 좋은 방식으로 구성할 것은 다섯번째인 주의를 흩뜨릴만한 요소를 없앨 것에 이어지는 방식으로 보인다. 긴 글로 구성되어 있거나 난잡하게 어지럽혀져 있는 홈페이지의 경우에는 무엇부터 해야 하는지 몰라 사용자들에게 혼란을 주기 쉽다.

하지만 브런치의 경우에는 사용자들에게 전달하고자 하는 바가 매우 명확한 것을 확인할 수 있다.

1. 사용자들의 인터렉션을 불러일으킬 '글쓰기', '검색'

2. 브런치를 소개하고자 하는 문구

3. 실제로 작품이 된 글을 내용들

사용자들을 그저 위에서부터 아래로 시선을 이동시키며, 글을 쓸것인지 아니면 글을 읽을 것인지를 선택하면 된다.

5. 불필요한 것은 덜어낼 것

간결한 사용성을 위하여

건강한 문체는 간결하다. 문장에 불필요한 단어가 없어야 하고 문단에는 불필요한 문장이 없어야 한다. 그림에 불필요한 선이 없어야 하고 기계에 불필요한 부품이 없어야 하는 거소가 같은 이치다.

- <The Elements of Style>, E.B White

이 문구는 E.B 화이트가 <The Elements of Style>에서 언급한 일곱가지 글쓰기 원칙 중 하나로, 불필요한 단어는 과감히 생략하라는 조언을 담고 있다.

우리는 앞서서도 지속적으로 확인한 바가 바로 '사용자는 읽지 않는다.' 이다. 사용자는 그저 모든 웹페이지를 훑으며 자신에게 필요한 정보만을 얻길 원한다. (이런 욕심쟁이들)

그렇기 때문에 불필요한 부분들을 없앴을 때, 페이지는 더욱 간결해지며 유용한 부분이 더욱 도드라지게 된다. 즉, 페이지의 길이가 짧아지므로 사용자들은 길게 스크롤을 내릴 필요 없이 한눈에 전체를 알아볼 수 있는 것이다.

교보eBook, 너무 불편해!

그리고 이런 조언을 너무너무 해주고 싶은 웹사이트가 하나 있다.

바로, 교보문고 eBook 설치 페이지이다.

이번에 (사용자를) 생각하게 하지 마! 라는 책을 구매하게 되면서 교보문고의 ebook 설치 페이지를 처음 이용해보게 되었다.

원래 아이패드에서 교보문고 ebook을 사용하고 있었지만, 책의 내용 중 캡처를 하고 싶은 부분이 있어 부득이하게 컴퓨터에 설치하게 되었다. (패드는 현재 잠금버튼이 고장났고, 휴대폰은 무슨 일인지 깔리지 않았다..)

하지만 eBook 설치 페이지가 너무너무너무 난잡하였다! (중요하니 세번 강조하고자 한다)

처음 eBook을 설치하고자, '뷰어 설치'를 누르게 되면 바로 뷰어 설치페이지가 나타나는 것이 아니라 교보 eBook에 대한 홍보글이 나오게 된다.

여기서부터 처음 살짝 화가 났다. 왜냐하면 사용자로서 나는 뷰어를 바로 설치하고 싶은 것이지, 교보 eBook에 대한 설명을 듣고 싶은 것이 아니기 때문에!

그래도 한번 스크롤을 내리면 바로 설치 페이지가 나올 줄 알았는데, 웬걸- 또다시 교보eBook에 대한 홍보를 하며 무엇을 할 수 있는지 설명을 한다. 정-말- 불필요한 설명이었다!

게다가 페이지 스크롤도 부드럽게 내려가는 것이 아니라, 한 화면씩 탁탁 끊기는 느낌이었기 때문에 더더욱 사용성 측면에서 불편함을 겪었다.

그래도 위의 내용을 또 내리니 이제 PC, Android, iOS, eBook 단말기 코너가 나와 이제 바로 설치를 할 수 있는가 싶어 심장 두근거렸다. 하지만 이번에도!

교보eBook 이용하기라는 설명으로 스토어에서 eBook을 구매하면 PC뷰어를 설치하여 이용할 수 있다는 정말 불필요한 설명만 나왔다.

그래도 몇번째인지 모를 설명을 지나면 드디어 PC뷰어 다운로드 페이지를 확인할 수 있는데, 처음 들어가게 되면 저 필수 프로그램 수동설치라는 페이지가 먼저 보이기 때문에 나는 'e서재 다운로드' 버튼이 보이지 않았다.

사실 이 부분은 내가 개발이라는 독특한 커리어패스를 지나왔기 때문일 수도 있다. 개발을 하기 위한 프로그램을 설치할 때에는 위의 필수 프로그램 수동설치처럼 각 컴퓨터의 사양 밑에 다운로드 받고자 하는 프로그램의 이름과 다운로드 버튼이 표시되기 때문이다.

eclipse.exe 다운로드 페이지

일례로, eclipse 다운로드 페이지를 예시로 들 수 있다. 물론 처음 eclipse 다운로드라고 구글에 검색하면 바로 다운로드를 할 수 있는 페이지가 뜨지만, 각 버전별로 할 수 있는 것들이 다르기 때문에 위의 사진처럼 사양과 다운로드 표시가 보이는 페이지를 주로 이용하였다.

지속적으로 저런 페이지를 보다보니, 교보eBook 다운로드 페이지 역시 처음 볼 때에는 컴퓨터의 사양과 옆의 다운로드 표시밖에 보이지 않았던 것이다!

이런 점에서도 나는 다시 한번, 사용자는 정말 웹페이지를 훑어보는구나를 확인할 수 있었다.