(사용자를) 생각하게 하지 마!

# (사용자를) 생각하게 하지 마! 이 책의 키워드는 **사용성**이며, 아래 내용을 다룬다. 1. 스스로 사용성을 평가해볼 방법 2. 자주 마주친 문제에 대한 해결책 3. 이를 구현하는 과정에서 발생할 만한 정치적, 윤리적 문제 해결 방법 ## 본문에 앞서 - 이 책은 사람들이 이미 알고 있는 사실을 이야기하는데 많은 시간을 들인다. - 이 책은 분량이 적다. - 모든 것을 알아야 할 필요는 없다. *전문가 사용성 리뷰*란 아래 내용을 기록하는 것을 말한다. ``` - 사용자가 하고 싶어 할 만한 것 - 사용자의 작업이 막힐 법한 부분 - 사용자가 헷갈릴 수 있는 부분 ``` *사용성 평가*란 아래 내용을 기록하는 것을 말한다. ``` - 다른 사람이 사용하는 모습을 관찰하며 막히는 부분 - 다른 사람이 사용하는 모습을 관찰하며 혼란스러워 하는 부분 ``` ## 1. 사용자를 고민에 빠뜨리지 마라! (사용성 제1원칙) 최우선 원칙이며, 디자인이 적절했는지 결정하는 최종 승부가 나는 지점이다. 다시 말해, - 설명이 없어도 보자마자 알 수 있게끔 최대한 자명해야 한다. - 어디에 쓰이는 제품인지, 사용 방법은 어떠한지 고민하지 않고도 딱 보면 눈치 챌 수 있어야 한다. 자명하다는 것은 어느 정도 수준인가? 웹사이트에 담긴 내용에 전혀 관심이 없고, 브라우저의 뒤로 가기 버튼이 어떻게 동작하는 지 아는 정도의 사람이 봤을 때도 고민하지 않고 `이게 ___구나.`라고 할 수 있는 수준을 말한다. ### 사용자는 이럴 때 고민한다 - 귀엽고 참신한 이름 - 마케팅에서 비릇된 이름 - 특정 회사에서만 사용하는 이름 - 익숙하지 않은 기술적인 이름 - 클릭 가능 여부를 알아보기 어려운 링크와 버튼 자주 하는 행위에 매번 주의가 분산된다면 모여서 커다란 결함이 될 수 있다. ### 모든 것을 자명하게 만들 수는 없다 각 페이지나 화면을 자명하게 만드는 것을 목표로 하고, 보기만 해도 `평균 사용자`가 그것이 무엇인지 그리고 어떻게 사용하는지 알 수 있어야 한다. 하지만 획기적이고 독창적인 작업을 한다거나 태생적으로 복잡한 작업을 할 때에는 **설명이 필요 없는 수준** 정도로 만족해야 할 수도 있다. ## 2. 우리가 *실제* 웹을 사용하는 방법 훑어보기, 만족하기, 임기응변하기 - 진실 1. - 사용자는 웹 페이지를 읽지 않는다 - 훑어본다 - 진실 2. - 사용자는 최선의 선택을 하지 않는다 - 최소 조건만 충족되면 만족한다 - 진실 3. - 사용자는 작동방식까지 이해하려 하지 않는다 - 적당히 임기응변한다 사용자는 우리가 만든 웹페이지를 `시속 95km로 달리는 차 안에서 보는 광고판`으로 인식한다. 따라서 우리는 광고판을 훌륭하게 디자인하면 된다. ## 3. 광고판 디자인 첫걸음 훑어보기 좋은 디자인 ### 관례(널리 사용되거나 표준화된 디자인 패턴)를 이용하라 - 새로운 아이디어가 더 낫다는 것을 **확신할 때만** 혁신하라 - 창의적이고 혁신적인 방법을 얼마든지 사용해도 되지만, **사용자의 편의성을 확실히 보장한 상태에서 해야 한다** - 경우에 따라 일관성을 **약간** 벗어나야 전체적인 내용이 더 명확해질 때도 있다 - **명료성이 일관성보다 더 중요하다** ### 시각적 계층구조를 효과적으로 구성하라 - 더 중요한 부분이 더 눈에 띄어야 한다 - 논리적으로 연관된 요소가 시각적으로 연결되어 있어야 한다 - 두 요소 간 상/하위 관계가 형성되어 있다면 이를 시각적으로도 보여줘야 한다 ### 페이지의 구역을 또렷하게 구분하라 페이지의 구역이 명확히 나뉘어 있어야 사용자가 페이지의 어떤 부분에 초점을 맞출지 어떤 부분은 마음 편히 무시할지 빠르게 결정할 수 있다. ### 클릭할 수 있는 요소를 명확히 표시하라 일반적으로는 모든 텍스트 링크에 한 가지 색상을 입히거나 클릭해도 된다는 걸 형태나 위치로 구분할 수 있게 하는 정도면 충분하다. 클릭할 수 없는 제목을 링크와 같은 색상으로 칠하는 어이없는 실수만 하지 않도록 주의하라. ### 주의를 흩뜨릴 만한 요소를 없애라 - 시끄러움 - 사용자를 안내할 시각적 계층 구조의 기준이 될 만한 가장 중요한 요소가 무엇인지 파악하라 - 무질서 - 페이지 요소를 기준선에 따라 배열하라 - 어수선함 - 진짜 도움이 되는 부분만 남기고 나머지는 모두 없애라 ### 내용을 훑어보기 좋은 방식으로 구성하라 - 제목을 많이 넣어라 - 어떤 부분을 읽고, 훑어보고, 건너뛰어야 할지 결정하는 데 도움이 된다 - 제목이 여러 수준으로 나뉜다면 수준 간에 누구나 명확히 알아볼 수 있는 서식을 사용하라 - 제목이 둥둥 떠다니게 하지 마라 (제목과 섹션을 가까이 위치하게 하라) - 단락의 길이를 짧게 유지하라 - 많은 정보가 빽빽하게 채워져 있으면 즉시 이해하기 어렵다 - 온라인에서는 문단이 문장 하나로 구성되어도 괜찮다 - 불릿 목록(개조식 표현)을 사용하라 - 읽기 좋은 최적의 상태를 만들려면 항목 사이에 추가 공간을 약간 넣어라 - 주요 용어를 강조하라 - 가장 중요한 단어가 본문에 처음 등장할 때 굵게 표기하면 찾기 쉽다 - 텍스트 링크라면 서식에 차이가 생기므로 별도로 조처하지 않아도 된다 - 너무 자주 사용하면 효과가 떨어진다 ## 4. 동물입니까, 식물입니까, 무생물입니까? 사용자가 고민 없이 선택하길 좋아하는 이유 클릭 수가 늘어나는 건 괜찮다. 클릭할 때 고민할 필요만 없다면 말이다. 사용성 제2원칙 **별 고민 없이 클릭할 수 있고 본인이 옳은 방향으로 가고 있다는 확신만 꾸준히 든다면** 클릭을 많이 하더라도 사용자는 크게 개의치 않아한다. 사용자에게 고민이 필요한 선택지를 줄 수밖에 없다면 그들이 딱 필요로 할 만큼의 적절한 안내를 함께 제공하라. 지나쳐도 안 된다. - 간결성 - 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남기라 - 적시성 - 사용자가 딱 필요로 할 순간에 마주칠 위치에 두라 - 불가피성 - 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라 ## 5. ~~불필요한~~ 단어를 덜어내라 웹에 글 쓰는 방법 각 페이지에 담긴 단어의 덜반을 덜어내라. 그리고 남은 부분에서 또 절반을 덜어내라. 사용성 제3원칙 아무도 읽지 않을 단어를 없앴을 때 얻는 몇 가지 유익한 효과가 있다. - 페이지의 소음 수준이 낮아진다 - 유용한 부분이 더욱 도드라진다 - 페이지 길이가 짧아지므로 사용자는 스크롤을 내리지 않고도 한눈에 전체를 훑어볼 수 있다 ### 불필요한 인사말을 빼라 - 그 사이트가 얼마나 훌륭한지 혹은 그 사이트에서 무엇을 보게 될지 알려주는 부분 - 첫 번째 페이지에 "환영합니다..." 라는 말과 함께 나타나는 인사말 이런 인사말은 잡담이나 다름없으므로 삭제해도 무방할 뿐 아니라 그러는 편이 더 좋다. ### 설명을 없애라 '임기응변' 방식으로 탐색하며 실패를 반복하지 않는 한 설명을 읽는 사람이 없다는 것을 명심하라. 항상 모든 내용이 자명해서 설명이 없어도 이해가 되는 수준을 목표로 하고 디자인하라. 정 어려울 때는 적어도 그러한 이상에 가능한 한 가까워지게 하라. 설명이 꼭 필요할 때는 양을 최소로 줄이도록 하라. #### before > 이 설문지는 여러분에게 필요한 내용을 이해하고 본 사이트를 개선하는 데 도움이 될 만한 정보를 얻기 위해 만들었습니다. > > 아래 드롭다운 메뉴나 라디오버튼에서 원하는 답변을 고르세요. > > 설문조사에 응하는 데 드는 시간은 2-3분 정도밖에 되지 않습니다. > > 설문지의 마지막 부분에 여러분의 이름, 주소, 전화번호를 남기실 수 있습니다. 이름과 전화번호를 남긴 분에게는 사이트 개선용 설문조사를 위해 향후 연락을 드릴 수 있습니다. > > 지적할 사항이나 문의할 내용이 있는 분은 고객센터로 연락 주십시오. #### after > 사이트를 개선할 수 있도록 도와주세요. 설문을 마치는 데 드는 시간은 2-3분 정도입니다. > > 주의: 지적할 사항이나 문의할 내용이 있는 분은 이 폼을 사용하지 마십시오. 답변이 필요할 때는 고객센터로 연락 주시면 감사하겠습니다. ## 6. 표지판과 빵부스러기 내비게이션 디자인하기 **사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다** 웹이 지닌 특이성은 다음과 같다. - 규모에 대한 감각이 없다 - 방향 감각이 없다 - 위치 감각이 없다 물리적 공간에 비해 웹에서는 본인이 어디에 있는지 알아내야 하는 상황이 훨씬 더 자주 발생한다. 우리는 웹상에서 길을 잃을 수밖에 없다. 내비게이션을 단순히 웹 사이트의 한 가지 **기능**으로 보면 안 된다. 내비게이션은 웹 사이트 그 자체다. 쇼핑몰의 건물, 진열대, 계산대가 쇼핑몰 그 자체인 것처럼 말이다. 내비게이션이 없으면 '어디'에 있다는 감각도 없다. ### 내비게이션의 숨은 용도 - 사이트에 어떤 내용이 있는지 알려준다 - 사이트 이용 방법을 알려준다 - 사이트를 만든 사람에 대한 신뢰도를 높인다 ### 어딜 가든 따라온다 사이트 모든 페이지에 드러나는 내비게이션 요소 세트를 **고정 내비게이션** 또는 **글로벌 내비게이션**이라고 부른다. 모든 페이지에서 내비게이션이 같은 위치에 일관성 있는 형태로 나타나면 사용자는 자신이 동일한 사이트에 머무르고 있다는 사실을 한눈에 확인할 수 있다. 고정 내비게이션에는 사용자가 가장 자주 사용하는 네 가지 요소가 포함되어야 한다. 1. 사이트 ID - e.g., Kakao Corp. 2. 유틸리티 - e.g, 로그인, 연락처 3. 검색 4. 섹션 - e.g., 제품, 뉴스, 지원, ...에 대하여 ### 내가 방금 '어딜 가든'이라고 했던가? 폼은 예외다. 채워야 할 폼이 있는 페이지에서는 고정 내비게이션이 주의력을 분산시키는 불필요한 요소에 지나지 않으므로, 이런 페이지에서는 고정 내비게이션을 최소 버전으로 유지하는 편이 좋다. ### LA에서 드라이브하기 즐거운 데는 이유가 있다 - 도로 표지판이 크다 - 도로 표지판을 적절한 위치에 두었다 웹 페이지 이름은 거리에 있는 도로 표지판에 해당한다. 페이지 이름에 대해 다음 네 가지 사항을 알아둘 필요가 있다. #### 모든 페이지에는 이름이 필요하다 '내비게이션에서 페이지 이름을 강조했으니 그 정도면 충분하겠지'라고 생각할 수도 있지만 그 정도로 충분하지 않다. 페이지 이름은 꼭 있어야 한다. #### 이름이 있는 위치가 적절해야 한다 페이지 계층구조를 고려할 때 페이지 이름은 그 페이지에만 해당하는 콘텐츠 전체를 아우르는 역할을 해야한다. #### 이름은 눈에 띄어야 한다 위치, 크기, 색상, 서체를 조합해서 "이것이 이 페이지 전체의 제목입니다."라는 사실이 드러나야 한다. #### 이름은 내가 클릭한 것과 일치해야 한다 페이지 이름은 해당 페이지에 도달하기 위해 클릭한 단어와 일치해야 한다. 클릭한 단어와 페이지 이름을 정확히 일치시키지 못할 때는 (a) 가능한 한 비슷하게 해야 하고 (b) 차이가 있을 수밖에 없는 이유가 명확해야 한다. ### 현재 위치를 표시하라 사용자는 사이트에서 '길을 잃은 듯한' 느낌을 자주 받으므로 페이지 내비게이션 바나 목록, 메뉴 어디에든 사용자의 현재 위치를 강조해서 보여줘야 한다. 차이를 너무 미묘하게 둔다면 시각적 단서로서의 가치가 떨어지고 시각적 잡음만 더하는 꼴이 된다. 여러분의 눈에 과하게 보이는 그 상태보다도 2배 더 강조하면 된다고 생각하라. ### 빵부스러기 (breadcrumb) 빵부스러기도 '현재 위치' 표시처럼 여러분이 어디 있는지 알려준다. 빵부스러기만 잘 만들어두면 설명이 필요없다. - 맨 꼭대기에 두어라 - 각 단계 사이게 `>` 기호를 넣어라 - 마지막 항목의 서체를 볼드체로 표기하라 ### 내가 탭을 여전히 사랑하는 세 가지 이유 - 탭의 사용법은 자명하다 - 아무리 심한 컴맹이라도 탭 인터페이스를 사용할 수 있다 - 탭은 눈에 잘 띈다 - 탭의 형태는 시각적으로 도드라지므로 사람들이 잘 놓치지 않고, 다른 용도가 있다는 착각도 잘 일으키지 않는다 - 탭은 보기 좋다 ### 트렁크 평가를 하라 웹 내비게이션이 잘 완성되었는지 확인하는 진짜 방법은, 눈가리개를 한 상태로 트렁크에 갇혀서 끌려다닌 후에 어떤 웹 사이트의 깊숙한 곳에 있는 페이지에 던져졌다고 상상하는 것이다. 도착한 페이지가 잘 설계되어 있다면 다음 질문에 망설임 없이 명확한 답을 낼 수 있어야 한다. - 이 사이트는 무슨 사이트인가? (사이트 ID) - 내가 지금 무슨 페이지에 있는가? (페이지 이름) - 이 사이트의 메인 섹션은 무엇인가? (섹션) - 현재 페이지의 내비게이션 상태는 어떠하다고 생각하는가? (로컬 내비게이션) - 전체 사이트 구성에서 현재 위치는 어디에 해당하는가? ('현재 위치' 표시) - 검색은 어떻게 하는가? ## 7. 웹 디자인의 빅뱅이론 사용자와 처음부터 좋은 관계를 맺는 게 중요하다 새로운 웹 사이트에 처음 들어가면 홈페이지는 아래 4가지 질문에 최대한 빠르고 명확하게 답해야 한다. 1. 이게 무슨 사이트지? 2. 이 사이트에서 무엇을 할 수 있지? 3. 이 사이트에는 무슨 내용이 담겨 있는 거지? 4. 비슷한 다른 사이트가 있음에도 내가 이 사이트를 이용해야 할 이유가 뭐지? 만약 몇 초안에 원하는 답을 얻지 못한다면 페이지에 있는 모든 것을 해석하기가 더 어려워지고 다른 부분을 잘못 해석하거나 답답함을 느끼게 될 가능성이 커진다. 나는 바로 이것을 웹 디자인의 빅뱅이론이라고 부른다. **우리가 알고 있는 그** 빅뱅이론처럼 새로운 웹 사이트나 웹 페이지에 처음 접속한 몇 초가 매우 중요하다는 아이디어다. ### 홈페이지에 전체적인 그림을 설명하지 않을 때 갖다 붙이는 그럴듯한 변명 TOP 4 1. 누구에게나 뻔히 보이므로 필요 없다 - 사이트를 만드는 사람에게는 자신의 사이트가 제공하는 콘텐츠가 무엇인지, 그 내용이 왜 대단히 훌륭한지 명확히 보이므로 모든 사람이 이러한 사실을 분명히 보지 못한다는 사실을 이해하기 어렵다. 2. 설명은 한번 보고 나면 귀찮은 존재가 된다 - 사이트에 방문할 때마다 똑같은 설명이 눈에 띈다는 이유만으로 그 사이트에 다시 방문하지 않는 사용자의 수는 매우 소수에 불과하다. 설명이 페이지의 절반 이상을 차지하고 있지 않다면 말이다. 3. 우리 사이트가 꼭 필요한 사람이라면 스스로 알아낼 것이다 - 여러분이 만든 사이트를 바로 '이해하지' 못하는 사람은 진짜 우리가 찾는 사용자가 아닐 거로 생각하고 싶을 것이다. 하지만 진실은 그렇지 않다. - "아, 이게 이럴 때 쓰는 거였어요? 늘 쓰는 건데 뭔지도 몰랐네요." 사이트를 평가할 때 이런 말은 흔하게 들을 수 있다. 4. 광고에서 설명했으니 필요 없다 - 어떤 사용자가 TV, 라디오, 웹, 지면 광고를 이해했다고 치자. 그 사용자가 여러분의 사이트에 왔을 때 자신이 봤던 내용을 정확히 기억할 수 있으리라 생각하는가? ### 태그라인 태그라인은 한 기업의 특징을 설명하는 함축적인 한 구절을 가리킨다. 좋은 태그라인은, - **명확하고 유익하며** 여러분이 만든 사이트나 여러분이 몸담은 조직이 하는 일을 정확하게 설명한다. - "필요할 때 여러분 곁에 있습니다" (카 셰어링 서비스) - "식당 예약 - 무료 즉시 확정" - **충분한 내용을 담고 있되 과하게 길지 않다.** - "열 소비율 정보를 제공하는 미국 정보 공식 사이트" - **차이점을 전달하고** 명확한 이득을 보여준다. - 해당 서비스에만 적합한 문구가 좋은 태그라인이다. - **매력 있고 생생하며 때론 기발하다.** - 기발한 표현 때문에 가치가 불투명하게 전달된다면 기발하다는 것은 아무 의미가 없다. 나쁜 태그라인은, - 포괄적이다 - 기업의 모토와 태그라인을 혼동하지 마라. ## 8. "농부와 카우보이는 친구가 되어야 한다" 사용성에 대한 토론이 시간만 낭비하고 끝나는 이유와 방지 대책 웹 사이트 작업을 하는 모든 이들은 웹 사이트 구성 요소에 대해 강한 호불호가 있고, 서로 다른 호불호를 가진 사람들이 '풀 다운 메뉴를 추가할 지 말 지' 따위에 대해 끝없이 토론하는 것을 "종교적인 논쟁"이라고 부른다. "사용자 대부분이 풀다운 메뉴를 좋아할까?" 같은 질문은 비생산적이다. "이 풀다운 메뉴, 이 항목, 이 페이지, 이 맥락에서 이 단어를 선택하면 이 사이트를 사용하는 사용자 대부분에게 좋은 경험을 제공할 수 있을까?"가 좋은 질문이다. 이 질문에 답하는 방법은 **사용성 평가를 해보는 것 밖에 없다.** ## 9. 적은 비용으로 사용성 평가하기 여러 번 해도 부담 없는 간단한 사용성 평가 방법 ### 포커스 그룹 테스트 5~10명 정도의 인원이 함께 둘러앉아서 특정 제품에 대한 대화를 나눈다. 대화 주제는 그 제품과 관련된 자신의 과거 경험이나 새로운 콘셉트에 대한 의견이 주를 이룬다. 포커스 그룹 테스트는 물건에 대한 사용자의 감정이나 의견 표본을 빠르게 추출해야 할 때 유용하다. 사용자가 원하는 것, 필요로 하는 것, 좋아하는 것이 무엇인지 추상적으로 알아내고자 할 때 활용하기 좋은 방법이다. 포커스 그룹을 통해 배우는 내용은 디자인이나 제작 **이전에** 알고 있어야 하는 사항이므로 프로젝트 기획 단계에서 수행해야 가장 유용한 결과를 얻는다. ### 사용성 평가 한 사람이 어떤 물건을 가지고 일반적인 과제를 수행하는 과정을 지켜보는 것이다. 대상은 웹 사이트, 제품 프로토타입, 새 디자인을 담은 스케치 등이 될 수 있다. 그 과정에서 사용자가 혼란스럽다거나 답답하다는 느낌이 드는 지점을 찾아서 고치는 것이 사용성 평가의 목표다. 사이트의 작동 여부나 개선 방법을 알 수 있으며, 제작 프로세스 전반에 걸쳐 유용하게 사용된다. #### 사용성 평가에 대한 몇 가지 진실 - 훌륭한 사이트를 만들려면 반드시 평가해야 한다. - 사이트 제작에 참여한 사람은 제작에 착수한 지 몇 주만 지나도 그 사이트를 새로운 관점으로 보지 못한다. 이미 너무 많은 것을 알고 있기 때문이다. 실제 잘 작동하는지 확인하는 유일한 방법은 다른 사람들이 사용하는 모습을 관찰하는 것이다. - 평가 참가자가 한 명뿐이어도 좋다. 그렇게라도 평가를 하는 편이 아예 하지 않는 것보다 100% 낫다. - 실시간 사용성 평가를 워크숍 초반에 넣고, 지원을 받아서 사이트에서 과제를 해보게 한다. - 평가를 하는데 드는 시간은 대략 15분 미만이지만, 사이트를 만든 사람들이 남기는 메모의 양은 여러 페이지에 달한다. - 평가 녹화본을 함께 일하는 팀원들에게 보여주어도 되는지도 꼭 묻는다. - 프로젝트 초기에 진행한 평가가 프로젝트 후반에 진행한 평가보다 낫다. 설사 초기 평가 대상자가 1명뿐이고 후기 평가 대상자가 50명이 된다고 하더라도 말이다. - 평가를 대단한 일로 여기지 마라. 그럴 수록 평가가 늦어지고 평가 결과를 충분히 활용할 수 없게 된다. - 프로세스 초반에 바로 잡은 작은 실수가 나중에 발생할 문제를 줄여준다. ### DIY 사용성 평가 사용성 평가 방식이 등장한 초기에는 평가 진행 비용이 무척 비쌌는데, 여러분들에게 DIY 평가라는 저렴하고 단순한 방법을 추천한다. | | 전통적인 평가 방법 ([Silicon Valley - Hooli Phone Usability Test](https://www.youtube.com/watch?v=ELYVpikRNEE) | DIY 평가 방법 | | -------- | -------- | -------- | | 회당 소요 시간 | 평가에 1~2일, 브리핑이나 보고서 준비에 1주일 정도 필요하다. 그 뒤 고칠 내용을 정하기 위해 몇 가지 절차가 이어진다. | 한 달에 하루 오전 시간을 내서 평가하고 브리핑하고 고칠 부분을 결정한다. 오후가 시작될 무렵에는 그달 치 사용성 평가가 끝나 있을 것이다. | | 평가 시기 | 사이트가 거의 완성될 무렵 | 개발 프로세스 전체에 걸쳐 꾸준히 | | 평가 횟수 | 시간이나 비용의 부담 때문에 보통 프로젝트당 1~2회 | 한 달에 한 번 | | 회당 참가자 수 | 8명 이상 | 3명 | | 참가자 선택 방법 | 대상 사용자와 비슷한 사람으로 신중하게 모집한다. | 필요한 경우 되는대로 모집한다. '실제' 사용자를 대상으로 평가한다는 점보다 평가를 자주 한다는 점이 더 중요하다. | | 평가 장소 | 외부 시설에서, 한쪽에서만 보이는 거울이 설치된 관찰실이 있는 장소를 빌려서 한다. | 사무실에서, 화면 공유 소프트웨어를 사용해서 회의실에서 관찰한다. | | 누가 관찰하는가? | 외부에서 종일 하는 평가라면 직접 볼 수 있는 인원이 제한적일 수밖에 없다. | 사무실에서 오전 시간 동안 진행한다면 평가를 '직접' 볼 수 있는 인원이 늘어난다. | | 보고 | 두꺼운 보고서(25~50페이지)를 작성하려면 누군가 1주일 정도 수고해야 한다. | 브리핑에서 결정한 사항을 1~2쪽짜리 이메일에 요약한다. | | 누가 문제를 구별하는가? | 평가를 진행한 사람이 결과를 분석하고 수정할 내용을 추천한다. | 개발팀과 관심 있는 이해관계자가 평가 당일 점심을 함께하며 평가 중에 기록한 내용을 비교하고 고칠 내용을 결정한다. | | 주목적 | 가능한 한 많은 문제를 찾아낸다. 경우에 따라 수백 개가 될 수도 있다. 이를 분류한 후 중요도에 따라서 우선순위를 정한다. | 가장 시급한 문제를 구별하고 다음 평가가 진행되기 전에 수정되도록 업무를 할당한다. | | 지출 원가 | 전문가를 고용했을 때 회당 $5,000~$10,000 | 회당 수백 달러 미만 | 1. **방해 요소가 없는 조용한 장소**에서, 관찰자들에게 **화면을 공유**하면서 **화면, 진행자, 참가자가 말하는 내용을 녹화한다.** 2. 진행자는 **참을성이 있고 차분하고 다른 사람의 감정에 잘 공감하며 이야기를 잘 들어주는 사람**을 선택하라. 3. 진행자는 참가자가 편안하게 해야 할 뿐 아니라 **생각하고 있는 내용을 최대한 많이 소리 내어 말하게 해야 한다.** 4. **최대한 많은 인원이 관찰**에 참여해야 하며, 보통 회의실에 모여서 관찰한다. 5. 모든 관찰자는 평가를 마친 후 쉬는 시간마다 **각자 자신이 발견한 가장 심각한 사용성 문제 세 개를 적어두어야 한다.** 6. 메모는 길어도 좋지만, 메모한 내용을 바탕으로 **목록을 만들 때는 짧게 만드는 게 중요하다.** #### 평가할 과제는 어떻게 선택하는가? 과제 구성은 평가 당시 평가할 만한 내용이 얼마나 만들어졌느냐에 영향을 받는다. 프로젝트의 현재 상태에서 사용자가 할 수 있는 일의 목록부터 만들라. 평가 시간이 1시간이라면, 과제를 진행하는 데 35분 정도 걸리도록 넉넉한 양의 과제를 준비하라. 여러분이 원하는 내용을 참가자가 정확히 이해할 수 있도록 과제 설명은 단어를 신중하게 골라서 작성하라. 과제 세부사항 일부를 참가자 스스로 선택하게 했을 때 흥미로운 결과가 많이 도출되는 경향이 있다. '14달러 미만의 요리책을 찾으시오'라는 과제보다 '구매하고 싶은 책이나 최근에 구매한 책을 찾으시오'라고 하는 과제가 더 낫다는 이야기다. #### 평가 중에 어떤 일이 일어나는가? 1시간짜리 평가는 일반적으로 다음과 같이 구성된다. 1. 인사(4분) - 참가자가 진행 과정을 이해한 상태에서 평가에 임할 수 있도록 진행 방법을 설명하면서 시작한다. 2. 배경 질문(2분) - 참가자에 대해 몇 가지 질문을 던진다. 참가자의 긴장을 풀어주는 동시에 그들의 컴퓨터나 웹 관련 지식 수준이 어느 정도인지 가늠하는 데 도움이 된다. 3. 홈페이지 둘러보기(3분) - 평가할 사이트의 홈페이지를 열어서 둘러보고 그 사이트에서 무엇을 할 수 있을 거라 생각하는지 참가자에게 물어보라. 홈페이지가 이해하기 쉬운지, 해당 분야에 대한 참가자의 지식 수준은 어느 정도인지 알 수 있다. 4. 과제(35분) - 참가자가 일련의 과제를 수행하는 모습을 관찰하는 이 부분이 사용성 평가의 핵심이다. 시간이 오래 걸리는 과제라면 하나로만 구성해도 무방하다. 다시 한 번 이야기하지만, 여러분은 참가자가 과제에 집중하되 본인이 생각하는 내용을 소리 내어 말하게 해야 한다. - 참가자가 본인의 생각을 말하지 않고 있을 때는 그들이 소리 내어 말하도록 유도하라. 그리고 대답을 기다리라. "지금 어떤 생각을 하시나요?" ("지금 어디를 보고 계시나요?", "지금은 무엇을 하시나요?" 등의 다양한 질문으로 변형할 수 있다.) - 이 과정은 참가자 스스로 과제를 수행하게 하는 것이 중요하다. 그들에게 영향을 줄 만한 말이나 행동을 하지 마라. 유도신문도 하지 말고 그들의 작업이 완벽히 막혔거나 극도의 답답함에 시달리고 있는 게 아니라면 힌트나 도움을 주어서도 안 된다. 참가자가 도움을 요청한다면 "제가 없었다면 어떻게 하셨을 것 같은가요?" 같은 말로 답하라. 5. 심층 질문(5분) - 과제를 마치면 참가자에게 평가 중에 일어났던 일에 대해 묻거나 관찰실에 있던 이들이 묻고 싶었던 질문을 던질 수 있다. 6. 마무리(5분) - 도와주어 고맙다는 인사를 하고 수고비를 지급한 후에 나가는 문을 안내한다. #### 브리핑: 고칠 내용 정하기 **가장 중요한 문제를 먼저 고치는데 가차 없이 집중하라** - 공동 목록을 만들어라. - 각자 본인이 관찰한 문제 중 가장 심각한 것을 세 가지씩 말하고, 중복 의견이 있는 경우 표시한다. - 가장 심각한 문제 10가지를 고른다. - 투표를 하거나, 가장 많은 사람이 똑같이 지적한 의견부터 시작한다. - 순위를 매겨라. - 가장 심각한 문제가 1위가 된다. - 목록을 정돈하라. - 1위부터 다음 한 달 동안 어떻게 고칠지, 담당자는 누구로 할지, 필요한 자원은 무엇인지 의견을 차례로 적어나간다. - 모든 문제를 완벽하게 혹은 완전하게 고칠 필요는 없다. 대신 작은 조치라도 꼭 취한다는 게 중요하다. 적어도 '심각한 문제'의 수준에 그대로 머물러 있지 않게 하라. - 다음 달에 쓸 수 있는 시간과 자원을 사용성 문제 수정에 전부 할당할 필요는 없다. - 매우 쉽게 고칠 수 있는 문제는 따로 목록을 만들어라. - 브리핑에 참석하지 않은 사람의 허가를 받을 필요가 없고, 한 사람이 한 시간 이하의 시간을 들여서 고칠 수 있는 문제를 말한다. - 새로운 문제를 더하려는 충동을 자제하라. - 평가에서 사용자가 이해하지 못하는 내용이 있다는 사실을 알게 되면 설명이나 안내처럼 무언가를 일단 더하려고 한다. 하지만 무언가를 더해서 주의를 흩뜨리는 것보다 의미를 흐리고 있는 무언가를 뺐을 때 문제가 해결되는 경우가 많다. - '새로운 기능'에 대한 요청은 가려서 들어라. - '내가 왜 그 생각을 못했지?!'라는 생각이 들지 않는다면 좋은 아이디어가 아니다. - '카약' 문제를 무시하라. - 참가자가 일시적으로 길을 잃었다가 아무 도움 없이 곧바로 정상궤도로 돌아오는 때가 가끔 있다. 보통 사용자가 한 번 정도 실수를 거친 후에 자신이 원하는 것을 바로 찾을 수 있다면 괜찮다고 보면 된다. ## 10. 모바일 앱 사용성 21세기에 온 것을 환영합니다 - 약간의 현기증을 느끼실지도 모릅니다 생략 ## 11. 기본예절로서의 사용성 웹 사이트가 예의를 지켜야 하는 이유 ### 호감이 줄어드는 요인들 #### 사용자가 원하는 정보 숨겨두기 가장 흔히 숨겨두는 정보에는 고객 지원센터 전화번호, 배송비, 가격 등이 있다. 업체가 전화번호를 숨겨두는 의도는 사용자가 전화를 걸지 않게 하는 데 있다. 전화가 올 때마다 비용이 들기 때문이다. 이를 발견하면 보통 사용자의 호감이 줄어든다. 전화번호를 찾아서 전화를 걸 때쯤에는 짜증이 더 나 있을 것이다. 이와 반대로 전화번호가 한눈에 들어오다 못해 모든 페이지에 적혀 있다면 사용자는 원하면 아무 때나 전화**할 수 있다**는 사실을 안다. 그러면 오히려 필요한 정보를 사이트에서 더 오래 찾아보고 스스로 문제를 해결할 가능성도 커진다. #### 자신이 원하는 방식대로 하지 않는다고 사용자 귀찮게 하기 사회보장번호나 전화번호 사이의 줄표(`-`), 신용카드 번호 사이의 공백처럼 사소한 사항을 넣느냐 마느냐 하는 것처럼 사용자가 데이터를 어떤 형식으로 입력할지 **절대** 고민하게 해서는 안 된다. 코드 몇 줄 쓰기 귀찮다고 해서 사용자가 번거로운 작업을 떠맡아야 하는 상황은 만들지 마라. #### 필요하지도 않은 정보 물어보기 생략 #### 가식적인 표현으로 사용자 기만하기 생략 #### 홍보용 장치로 작업 방해하기 생략 #### 사이트가 아마추어 수준으로 보인다 사이트에 체계나 전문적인 느낌이 없고 엉성해서 밖에 내놓을 정도로 보기 좋게 만들려고 노력하지 않았다는 느낌이 들면 호감이 줄어들 수 있다. 사이트의 외양, 특히 색상에 대해서 왈가왈부하는 걸 좋아하는 사람이 많기는 하지만, 나는 사용자가 사용성 평가 중에 색상에 대해 한 말은 무시하라고 말하곤 한다. 색상 배합에 대해 참가자 75% 이상의 사람들이 정말 비호감이라고 강한 불만을 터뜨리지 않는 한 말이다. ### 호감을 키우는 요인들 #### 사용자가 여러분의 사이트에서 가장 많이 하는 활동을 알아내서 그 부분을 명확히 드러내고, 쉽게 사용할 수 있게 하라 사용자 대부분이 대출을 받으러 오는 사이트라면 대출 신청을 쉽게 하는데 방해 요소가 있어서는 안 된다. 하지만 이를 실행하는 게 말처럼 쉽지는 않다는게 늘 문제다. #### 사용자가 알고자 하는 정보를 공개하라 배송비, 호텔 1일 주차요금, 서비스 이용 가능 시간을 비롯해 솔직하게 이야기하고 싶지 않은 모든 것을 솔직하게 이야기하라. 배송비가 생각보다 비싸서 점수를 잃을 수도 있지만 가격 차이를 보충할 수 있을 정도로 편하게 해준 솔직함 덕분에 점수를 얻을 수도 있다. #### 사용자의 수고를 최대한 줄여주어라 예를 들자면 내가 구매한 제품의 택배 송장 번호를 알려주는 대신 클릭했을 때 택배사 사이트에서 배송 상황을 바로 조회할 수 있게 해주는 링크를 이메일 영수증에 넣어주라. #### 노력을 쏟아부어라 HP 기술지원 사이트를 예로 들자면 (a) 문제 해결에 필요한 정보를 생산하고 (b) 정확하고 유용한 정볼르 제공하며 (c) 해결책을 명확하게 전달하고 (d) 찾기 쉽도록 잘 정리하기 위해 엄청난 양의 작업을 쏟아부은 티가 난다. #### 궁금해할 만한 사항을 예측하고 그에 대한 답을 제시하라 FAQ 목록은 다음과 같은 경우에 특히 대단한 가치를 지닌다. - FAQ를 가장해 사용자들이 물어봐 주었으면 하는 질문을 모아둔 홍보용 문구가 아닐 때. - 목록을 최신 정보로 채워둘 때. - 솔직할 때. #### 인쇄용 페이지처럼 편의성을 높여주는 요소를 제공하라 몇 장짜리 이야기를 클릭 한 번으로 인쇄해주는 것을 좋아하는 사람들도 있다. #### 오류가 발생했을 때 쉽게 회복할 수 있게 하라 사용성 평가를 했음에도 오류 발생 가능성을 완벽히 배제할 수 없을 때는 항상 편하고 쉽게 되돌아올 방법을 제공하라. #### 해결하지 못한 문제가 있을 때는 사과하라 만약 그들이 원하는 결과를 제공할 수 없다면 여러분이 그들에게 불편을 초래할 수밖에 없었던 사살을 여러분도 인식하고 있다는 걸 알리는 편이 좋다. ## 12. 웹 접근성과 여러분 여러분이 마쳤다고 생각할 때 고양이가 등에 묶인 버터 토스트 때문에 공중부양한다 - 모든 페이지에 적절한 대체 텍스트를 추가하라. - 올바른 헤딩을 사용하라. - 폼이 스크린 리더에서도 잘 동작하도록 작성하라. - 각 페이지를 시작할 때 '메인 콘텐츠로 넘어가라'는 링크를 넣어라. - 키보드로 모든 콘텐츠에 접근할 수 있게 하라. - 텍스트와 배경 간에 눈에 띄는 차이를 두라. - 접근성 있는 템플릿을 사용하라. ## 13. 회의론자를 위한 안내서 사용성을 실제로 적용하기 '사용성을 구현하고 싶다.'는 여러분의 소망이 지원받지 못하는 환경에서 여러분이 **할 수 있는** 일은 무엇일까? ### 흔한 조언 경영진을 설득해야 할 때 활용하라고 사람들이 입을 모아 알려주는 두 가지 방법이다. - ROI(return on investment, 투자 대비 수익률)를 보여주라. - 경영진의 언어로 이야기하라. 해낼 능력만 있다면 이 두 가지는 여러분에게 도움이 될 것이다. 하지만 ROI를 분석하는 데에는 큰 수고가 들고, 철저히 검증하지 못하면 오히려 독이 될 것이다. ### 만약 내가 여러분이라면... #### 여러분의 상사, 그리고 상사의 상사가 사용성 평가를 직접 보게 하라. 먹이사슬 상위에 있는 사람들에게 가장 큰 효과를 본 방법은 그들이 단 한 번이라도 사용성 평가를 직접 관찰하게 하는 것이었다. #### 첫 평가는 업무시간이 아닐 때 진행하라. 첫 번째 평가를 할 때는 허가를 구하지 말고 격식 없이 아주 간단하게 진행하라. 그리고 평가를 통해 구체적으록 개선되는 사항이 있게 하라. 개선 사항을 간단히 수치화할 방법이 있다면 사용하라. #### 경쟁 상대를 평가하라. 9장에서 프로젝트 초반에 경쟁 사이트를 평가하는 것이 좋은 아이디어라고 언급한 바 있는데, 이 방법은 평가에 대한 지원을 얻기에도 좋은 방법이다. 경쟁 상대에 대해 연구하는 건 누구나 좋아한다. #### 경졍긴과 공감하라. '내가 원하는 일들을 이들이 하게 하려면 이 사람들에게 어떻게 동기 부여해야 할지 어떻게 알아내지?'같은 문제 말고 '그들이 처한 위치에 대해 이해하는' 관점에서 진짜 감정적으로 공감할 수 있으면 좋다. #### 큰 그림에서 여러분이 어디쯤 있는지 파악하라. 그리고 거기에 약간의 겸손까지 갖추면 큰 도움이 된다. 비즈니스 세계에서 개인은 거대한 톱니바퀴 속 아주 작은 톱니에 지나지 않는 것이 현실이다. 사용성에 대한 여러분의 열정이 다른 이들에게 전염되길 바라겠지만 '우매한 대중에게 진리를 전한다'는 태도로 돌아다녀 봐야 별 효과는 없을 것이다. ### 몇 가지 확실한 대답 옳고 그름이 언제나 확실한 몇 가지를 모아 보았다. - 작고 대비가 약한 서체는 쓰지 마라. - 필드(폼) 안에 라벨을 넣지 마라. - 방문한 텍스트 링크와 방문하지 않은 링크를 다르게 표시하라. - 헤딩이 단락 사이에서 떠다니게 하지 마라.