[BOOK] Don't Make Me Think!

예전에 추천받아서 구매했던 책인데, 한 장도 읽지 않고 구매와 동시에 빳빳한 상태로 책장에 바로 꽂아 두었다가
최근에 진행하는 프로젝트의 리팩터링과 사용성을 생각해 보니, 해당 책이 떠올라서 읽게 되었음.

(사용자를) 생각하게 하지 마!
웹과 모바일 사용성 원칙으로 디자인하는 UX
스티브 크룩 지음, 이미령 옮김

---

스티브 크룩의 사용성 제1원칙 : 사용자를 고민에 빠뜨리지 마라!

• 사용자가 사이트를 보며 고민하지 않고 명확하게 해결할 수 있어야 된다.
• 즉, 자명하게 이해되는 페이지, 아니면 최소한 설명이 없어도 이해할 수 있는 페이지를 만들어야 한다.
  

---

 

우리가 실제 웹을 사용하는 방법

1. 사용자는 웹 페이지를 읽지 않는다, 훑어본다.
   • 웹은 도구에 불과하다, 필요 이상의 것을 읽을 시간이 없다.
   • 모든 것을 읽을 필요가 없다. 관련 있는 요소를 찾기 위해 훑어보는 것.
   • 사용자는 훑어보기에 익숙하다.
2. 사용자는 최선의 선택을 하지 않는다, 최소 조건만 충족되면 만족한다.
   • 사용자는 보통 시간에 쫓긴다.
   • 추측이 틀렸을 때 발생하는 불이익이 별로 없다.
     • 사이트 상에서는 잘못된 추측을 하더라도 뒤로 가기 버튼을 한 두 번 누르는 불편만 감소하면 된다.
   • 선택지를 비교하더라도 결과가 나아지리라는 보장이 없다.
     • 마찬가지로 예상이 틀렸다 하더라도 뒤로 가기 버튼을 누르면 그만.
   • 추측하는 게 더 재미있다.
3. 사용자는 작동방식까지 이해하려 하지 않는다, 적당히 임기응변한다.
   • 사용자에게 별로 중요하지 않다.
     • 물건을 사용하는 데 지장만 없다면 작동 방식을 이해하지 못한다 해도 아무런 문제가 없다.
   • 사용자는 물건이 작동하기만 한다면 그 물건을 계속해서 사용하는 경향이 있다.
     • 작동에 문제가 없는 물건이라면 작동 상태가 아무리 나쁘다 해도 굳이 더 좋은 방법을 "일부러"  찾지는 않는다.

---

훑어보기 좋은 디자인

1. 관례를 이용하라
   • 관례 : 널리 사용되거나 표준화된 디자인 패턴
   • 페이지상 항목의 위치 : ex) 로고는 페이지 상단 왼쪽 모서리
   • 작동 방식 : ex) 판매 페이지의 쇼핑카트, 지불 방법, 배송 주소 등 특정 항목에 매우 비슷한 형태를 적용함.
   • 보이는 형태 : ex) 동영상 링크 아이콘, 검색 아이콘, SNS 공유 옵션 등
   • 웹 관례를 활용하지 않으려면
     • 사람들이 별도로 익히는 수고를 하지 않아도 될 정도로 명확하거나 설명 없이도 이해할 수 있어야 한다.
     • 아니면 익히는 수고를 약간 들이더라도 그만큼의 가치가 있는 것으로 대체해야 한다.
2. 시각적 계층구조를 효과적으로 구성하라
   • 더 중요한 부분이 더 눈에 띈다.
   • 논리적으로 연관된 요소가 시각적으로 연결되어 있다.
     • 비슷한 요소는 하나의 제목 아래 그룹으로 묶거나 동일한 시각적 스타일을 적용하거나 명확히 구분된 하나의 구역에 모아 두라.
   • 두 요소 간 상, 하위 관계가 형성되어 있다면 이를 시각적으로도 보여준다.
     • ex) 신문
3. 페이지의 구역을 또렷하게 구분하라
4. 클릭할 수 있는 요소를 명확히 표시하라
   • 단서는 보통 형태(버튼, 탭), 위치(메뉴 표시줄 안), 서식(색상, 밑줄)을 통해 드러난다.
   • 일반적으로는 모든 텍스트 링크에 한 가지 색상을 입히거나 클릭해도 된다는 걸 형태나 위치로 구분할 수 있게 하는 정도면 충분하다.
5. 주의를 흩뜨릴 만한 요소를 없애라
   • 시끄러움
     • 가장 중요한 요소가 무엇인지를 생각하라.
   • 무질서
     • 온갖 요소가 사방에 흩어져 있는 페이지
     • 페이지 요소를 기준선에 따라서 배열하지 않았을 때
   • 어수선함
     • 너무 많은 내용을 담은 페이지.
6. 내용을 훑어보기 좋은 방식으로 구성하라
   • 제목을 많이 넣어라.
     • 제목이 여러 수준으로 나뉜다면 수준 간에 누구나 명확히 알아볼 수 있는 차이를 두라.
     • 제목이 둥둥 떠다니게 하지 마라, 앞에 나온 섹션보다 그 제목이 속하는 섹션에 더 가까이 위치하게 하라.
   • 단락의 길이를 짧게 유지하라.
   • 불릿 목록을 사용하라.
     • 읽기 좋은 최적의 상태를 만들려면 항목 사이에 추가 공간을 약간 넣어야 한다.
   • 주요 용어를 강조하라.

---

사용성 제2원칙 : 클릭 수가 늘어나는 건 괜찮다. 클릭할 때 고민할 필요만 없다면.

• 사용자가 고민 없이 선택하길 좋아하는 이유
  • 사용자에게 고민이 필요한 선택지를 줄 수밖에 없다면 그들이 딱 필요로 할 만큼의 적절한 안내를 함께 제공하라.
    
    • 간결성 : 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남겨라.
    • 적시성 : 사용자가 딱 필요로 할 순간에 마주칠 위치에 두어라.
    • 불가피성 : 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라.

---

사용성 제3원칙 : 각 페이지에 담긴 단어의 절반을 덜어내라. 그리고 남은 부분에서 또 절반을 덜어내라.

• 불필요한 단어를 덜어내라, 웹에 글 쓰는 방법
  • 불필요한 인사말을 빼라
  • 설명을 없애라
    • 항상 모든 내용이 자명해서 설명이 없어도 이해가 되는 수준을 목표로 하고 디자인하라.
    • 정 어려울 때는 적어도 그러한 이상에 가능한 한 가까워지게 하라.

---

내비게이션 디자인하기

• 웹 내비게이션 첫걸음
  • 웹 사이트에는 보통 무언가를 찾기 위해 들어간다.
  • 다른 사람(검색 상자)에게 물어볼지 직접 찾아볼지 선택한다.
  • 훑어보기로 했다면 안내에 따라서 사이트의 계층구조를 찾아볼 것이다.
  • 찾던 항목이 눈에 띄지 않으면 그 사이트를 떠난다.
• 참을 수 없는 브라우징의 가벼움
  • 규모에 대한 감각이 없다.
  • 방향 감각이 없다.
  • 위치 감각이 없다.
• 내비게이션의 숨은 용도
  • 사이트에 어떤 내용이 있는지 알려준다.
  • 사이트 이용 방법을 알려준다.
  • 사이트를 만든 사람에 대한 신뢰도를 높인다.
• 1,2 단계 이후의 내비게이션에 대해서도 고민하라
  • 웹 디자인 시 상위 단계에 비해 하위 단계에 적은 관심을 기울이는 일은 무척 흔하게 접한다.
  • 이런 문제는 사이트가 클수록 더욱 자주 발생한다.
  • 두 번째 단계만 가도 내비게이션 시스템이 무너져서 임시방편 수준이 되는 경우가 많다.
• 현재 위치를 표시하라
  • 페이지 내비게이션 바나 목록, 메뉴 어디에든 사용자의 현재 위치를 강조해서 보여주면 된다.

---

사용자와 처음부터 좋은 관계를 맺는 게 중요하다.

1. 홈페이지에 포함되어야 하는 구체적인 요소
   • 사이트 정체성과 임무
     • 이 사이트가 뭘 하는 곳이고, 왜 존재하는지
   • 사이트 계층구조
     • 사이트가 제공하는 내용의 개요를 보여주어야 한다.
     • 이 역할은 고정 내비게이션이 담당하는 경우가 많다.
   • 검색
     • 검색 상자는 홈페이지에서 쉽게 눈에 띄어야 한다.
   • 관심을 끌 만한 요소
     • 홈페이지는 잡지 표지처럼 안에 '좋은 내용'이 들어있다고 사용자를 유혹할 수 있어야 한다.
   • 콘텐츠 홍보
     • 머리기사나 할인 폭이 큰 제품처럼 최신 콘텐츠나 가장 인기 있는 콘텐츠를 강조해서 보여주는 데 쓰인다.
   • 특집 홍보
     • 사이트의 추가 섹션이나 특별한 내용을 확인해보라고 사용자를 불러들이는 역할을 한다.
   • 신규 콘텐츠
     • 사이트의 성패가 사용자가 다시 방문하는 데 달려 있다면 홈페이지 콘텐츠를 자주 업데이트 해야 한다.
     • 정기적인 방문객이 별로 필요 없는 사이트라고 해도 사용자의 눈에 방치된 사이트라는 느낌을 주지 않으려면 살아있다는 신호 정도는 주어야 한다.
     • 최신 보도 자료 링크 업데이트를 통해서라도 이러한 신호를 주면 좋다.
   • 제휴광고
     • 광고나 상호 판촉 광고, 제휴 브랜드 광고를 기재할 공간이 필요하다.
   • 바로가기
     • 가장 많이 읽히는 콘텐츠를 사용자들이 찾아 헤매지 않도록 홈페이지에서 바로 이어지는 링크가 있으면 좋다.
   • 등록
     • 등록할 수 있는 사이트라면 처음 방문한 사용자에게는 등록 안내용 링크나 텍스트 상자를,
       기존 사용자에게는 로그인했다는 사실을 알려줄 "환영합니다, 스티브 크룩 님" 같은 인사를 표시하면 좋다.
2. 홈페이지에 포함되어야 하는 추상적인 목표
   • 사용자가 찾는 내용 보여주기
     • 사용자가 원하는 내용이 그 사이트에 있다면 사용자가 그 내용을 찾을 방법을 홈페이지에서 명확히 보여주어야 한다.
   • 사용자가 찾지 않는 내용도 보여주기
     • 홈페이지는 사용자가 적극적으로 찾던 것은 아니지만, 혹시 관심이 있을지 모르는 훌륭한 콘텐츠를 사용자에게 노출할 필요가 있음.
   • 어디서 시작할지 보여주기
     • 처음 방문한 사용자에게 어디서부터 봐야 할지 반드시 알려주어야 한다.
   • 신뢰 쌓기
     • 어떤 방문자는 홈페이지만 보고 나갈 수 있기에 좋은 인상을 남겨야 한다.
3. 흔히 홈페이지에 가해지는 제약
   • 홈페이지 공간은 누구나 원한다.
     • 상대적으로 분량이 적고 눈에 잘 띄는 홈페이지 윗부분은 경쟁이 더 치열할 수밖에 없음.
   • 사공이 많다
     • 홈페이지는 누구나 의견을 내려고 할 만큼 중요한 단 하나의 페이지.
   • 모두의 취향에 두루 맞아야 한다.
     • 홈페이지는 하위 페이지와 달리 사이트에 방문한 모든 사람을 유혹할 수 있을 정도로 매력이 있어야 한다.
4. 중요한 메시지를 전달하는 방법
   • 태그라인
     • 사이트 ID 바로 옆 공간은 몸값이 가장 비싼 곳 중 하나, 사이트 전체를 설명한다.
   • 환영 문구
     • 사이트를 간단하게 설명하는 문구.
     • 홈페이지 상단 왼쪽이나 중앙의 콘텐츠 부분처럼 홈페이지에서 눈에 잘 띄는 자리에 놓이므로 방문자의 시선을 처음에 사로잡는다.
   • 필요한 만큼 공간을 마음껏 사용하라
   • 필요한 정도 이상의 공간을 사용하지 마라.
     • 기본적인 내용을 전달하는데 굳이 넓은 공간을 쓰지 않아도 되는 사이트가 대부분이다.
     • 그리고 홈페이지 전체를 메시지 전달에 할애하면 사용자의 몰입도가 떨어지기 쉽다.
     • 메시지는 간결하게 전달하라.
     • 중요한 특징 몇 가지만 언급하라.
   • 기업 강령을 환영 문구로 사용하지 마라.
   • 홈페이지는 반드시 평가를 거쳐야 할 아주 중요한 요소다.
     • 스스로 내린 판단을 믿지 마라.
     • 조직 외부 사람에게 보여주고 평가해달라고 하라.
5. 태그라인을 선택할 때 고려해야 할 몇 가지 특성
   • 명확하고 유익해야 한다.
   • 충분한 내용을 담고 있되 과하게 길지 않아야 한다. (6-8 단어 정도의 분량이 적당하다)
   • 차이점을 전달하고 명확한 이득을 보여준다.
   • 매력 있고 생생하며 때론 기발하다.
   • 나쁜 태그라인
     • 포괄적이다.
     • ex) 생활에 편리함을 더합니다.
     • 훌륭한 선택을 하셨습니다 등의 기업 모토와 태그라인을 혼동하지 마라.

---

여러 번 해도 부담 없는 간단한 사용성 평가 방법

• 포커스 그룹 테스트
  • 5-10명 정도의 인원이 함께 둘러앉아서 특정 제품에 대한 대화를 나눈다.
  • 대화 주제는 그 제품과 관련된 자신의 과거 경험이나 새로운 콘셉트에 대한 의견이 주를 이룸.
  • 포커스 그룹 테스트는 물건에 대한 사용자의 감정이나 의견 표본을 빠르게 추출해야 할 때 유용하다.
• 사용성 평가
  • 한 사람이 어떤 물건을 가지고 일반적인 과제를 수행하는 과정을 지켜보는 것.
  • 대상은 웹 사이트, 제품 프로토타입, 새 디자인을 담은 스케치 등
  • 그 과정에서 사용자가 혼란스럽다거나 답답하다는 느낌이 드는 지점을 찾아서 고치는 것이 사용성 평가의 목표.
• 포커스 그룹 테스트와 사용성 평가의 차이
  • 사람들이 그 물건에 대해 나누는 대화를 듣는 데 그치지 않고 그 물건을 실제 사용하는 모습을 보는 데 있다.
• 포커스 그룹 테스트의 장점
  • 포커스 그룹은 사용자가 원하는 것, 필요로 하는 것, 좋아하는 것이 무엇인지 추상적으로 알아내고자 할 때 활용하기 좋은 방법이다.
  • 사이트의 근간을 이루는 아이디어가 타당한지, 사이트가 제공하는 가치에 매력이 있는지 확인하기 좋다.
  • 사이트를 통해 해결하려고 하는 문제를 사람들이 현재 어떻게 해결하고 있는지, 해당 회사의 직원 또는 경쟁자를 사람들이 어떻게 생각하는지 알아낼 수 있다.
• 포커스 그룹 테스트의 단점
  • 만든 사이트의 작동 여부나 개선 방법을 알려주지 못한다.
  • 포커스 그룹을 통해 배우는 내용은 디자인이나 제작 이전에 알고 있어야 하는 사항이므로 프로젝트 기획 단계에서 수행해야 가장 유용한 결과를 얻는다.
• 사용성 평가의 장점
  • 제작 프로세스 전반에 걸쳐 만든 사이트의 작동 여부나 개선 방법을 알려 줄 수 있어서 유용하다.
• 사용성 평가에 대한 몇 가지 주요 사항
  • 훌륭한 사이트를 만들려면 반드시 평가해야 한다.
    • 사이트 제작에 참여한 사람은 제작에 착수한 지 몇 주만 지나도 그 사이트를 새로운 관점으로 보지 못한다.
    • 실제 잘 작동하는지 확인하는 유일한 방법은 다른 사람들이 사용하는 모습을 관찰하는 것
  • 평가 참가자가 한 명뿐이어도 좋다. 그렇게라도 평가를 하는 편이 아예 하지 않는 것보다 100% 낫다.
  • 프로젝트 초기에 진행한 평가가 프로젝트 후반에 진행한 평가보다 낫다.
    설사 초기 평사 대상자가 1명뿐이고, 후기 평가 대상자는 50명이 된다고 하더라도.
• 평가 또는 테스트 후 고칠 내용 정하기
  1. 공동 목록을 만들어라
     • 평가에 참여한 사람에게 본인이 관찰한 문제 중 가장 심각한 것을 세 가지씩 말할 기회를 준다.
     • 예를 들어 참가자가 3명일 경우 1명당 세 가지씩 찾으면 총 9개의 문제가 모인다.
     • 말한 내용을 칠판 위에 적어 내려간다. 보통은 "나도!"라고 공감을 표시하는 항목들도 등장한다.
       그럴 때는 중복되는 수를 표시해 둔다.
  2. 가장 심각한 문제 10가지를 고른다.
     • 가장 많은 사람이 똑같이 지적한 의견부터
  3. 순위를 매겨라
     • 1-10위까지 순위를 매겨라. 가장 심각한 문제가 1위가 된다.
       가장 심각한 문제를 꼭대기에 두고 목록을 새로 적고 항목 간에 공간을 두라.
  4. 목록을 정돈하라
     • 1위부터 어떻게 고칠지, 담당자는 누구로 할지, 필요한 자원은 무엇인지 의견을 차례로 적어나간다.
     • 모든 문제를 완벽하게 혹은 완전하게 고칠 필요는 없다. 대신 작은 조치라도 꼭 취한다는 게 중요하다.
     • 적어도 '심각한 문제'의 수준에 그대로 머물러 있지 않게 하라.
  5. 매우 쉽게 고칠 수 있는 문제는 따로 목록을 만들어라.
  6. 새로운 문제를 더하려는 충동을 자제하라.
  7. '새로운 기능'에 대한 요청을 가려서 들어라.
• 웹 사이트 평가를 미룰 때 내세우는 그럴싸한 변명 TOP 5
  1. 시간이 없다
     • 사용성 평가는 제대로만 진행된다면 사실 시간을 아끼는 데 도움이 된다.
     • 끝없이 이어지는 토론을 예방하고,
       프로젝트 막바지에 재작 업할 부분이 나타나지 않게 막아주기 때문이다.
  2. 예산이 없다
     • 평가할 때마다 많은 금액이 나가진 않는다.
     • 참가자를 자원 봉사자로 모집하면 그보다 더 줄일 수 있다.
  3. 전문 지식이 부족하다.
     • 사용성 평가는 수행하기 어렵다는 오해를 흔히 산다.
       물론 평가 진행에 탁월한 재능을 보이는 이도 있을 수 있다.
     • 하지만 진행자의 실력이 부족하다는 이유로 평가가 유용하지 않은 결과를 내는 경우는 거의 보지 못했다.
  4. 사용성 연구실이 없다.
     • 연구실은 없어도 된다.
     • 평가 시 실제 필요로 하는 것은 책상, 컴퓨터, 의자 2개와 다른 이들의 방해를 받지 않는 공간 하나,
       그리고 관찰자들이 커다란 화면으로 평가 진행 과정을 볼 수 있는 다른 공간 하나.
  5. 어차피 결과를 어떻게 반영해야 할지도 모를 거다.
     • 사용성 평가의 가장 큰 장점은 중요한 교훈이 관찰한 모든 이에게 명확히 드러난다는 점이다.
     • 따라서, 심각한 문제들을 놓치지 않고 파악할 수 있을 것이다.

---

모바일 앱 사용성

모바일 기기용 디자인 시 사용성은 어떻게 달라지는가?
어떻게 보면 별다른 차이가 없다. 기본 원칙은 여전하고, 다른 점이 있다면 모바일에서는 사람들이 더 빨리 움직이고 더 적게 읽는다. 그러나 새로운 사용성 문제를 제기하는 모바일 환경의 몇 가지 특수성도 존재한다.

• 트레이드오프를 고려해라
  • 분야를 막론하고 어떤 종류의 디자인에서든 제약과 트레이드오프를 잘 다루는 게 관건이라는 말이 있다.
  • 제약이란 내가 해야만 하는 일과 할 수 없는 일을 가리키고
  • 트레이드오프란 제약 때문에 이상을 버리고 선택하는 현실적인 대안을 가리킨다.
• 공간이 좁아서 생기는 문제들
  • 모바일 화면이 갖는 가장 눈에 띄는 특징은 작다는 것이다.
  • 덜어내기는 작아진 공간에 대처하는 하나의 방법이다. 그러면 모바일사이트가 웹 사이트의 부분 집합이 된다.
    여기에는 까다로운 문제가 존재한다. 어떤 부분을 제외시켜야 하는가?
    • 이를 위해 모바일 퍼스트 방식을 적용할 수 있다.
      
      • 콘텐츠로 빵빵하게 채워진 웹 사이트를 먼저 만들고 모바일 버전으로 축소하는 게 아니라
        사용자에게 가장 중요한 기능이나 콘텐츠로 채운 모바일 버전을 먼저 디자인한 후 데스크톱/ 풀 버전에 그 외의 기능과 콘텐츠를 더하는 방법.
  • 모바일 퍼스트 방식은 좋은 방법이다.
    • 모바일 버전을 먼저 만들면 필수적인 부분, 사람들이 가장 필요로 하는 부분이 무엇인지 알아내기 위해 열심히 노력하게 된다. 그리고 이런 노력은 항상 도움이 된다.
    • 하지만 모바일 버전을 먼저 만들어야 한다고 하니 사람들이 모바일 기기를 사용할 때 하고 싶어 하는 활동을 찾아내서 모바일 버전에 넣을 내용을 결정해야 한다는 뜻으로 해석하는 사람도 있다.
      이런 해석의 바탕에는 모바일 버전에 접속한 사람들이 책상에 앉아 있지 않고 '이동 중'일 것이고,
      그래서 이동 중에 사용할 법한 기능만 넣으면 된다는 가정이 존재한다
      
      • 이런 가정은 쇼핑하던 사람이 은행 잔고는 확인하고 싶을 수 있지만, 새로운 계좌를 개설하고 싶어 하지는 않을 거라는 결론으로 이어진다.
      • 해당 가정은 틀렸다. 사람들은 소파에서도 모바일 기기를 즐겨 사용한다.
        사용자는 소파에서도 모바일로 모든 작업을 할 수 있기를 원하고 기대한다.
    • 우선순위를 매겨 기능을 넣을 때 더욱 주의를 기울여야 한다.
      • 급하게 혹은 자주 사용하고자 하는 것은 가까이에 있어야 한다.
        그 외의 요소라면 몇 번의 탭을 더 거쳐도 된다. 다만, 그럴 때도 원하는 요소에 접근할 경로는 명확히 드러나야 한다.
      • 화면 공간 부족 때문에 사용성이 희생되면 안 된다.
• 스케일러블 디자인 (다이내믹 레이아웃, 플루이드 디자인, 적응형 디자인, 반응형 디자인이라고 불린다.)
  • 많은 수고를 기울여야 하고, 잘하기가 무척 어렵다.
  • 결론이 나기까지 사용할 수 있는 세 가지 방법
    • 확대해서 볼 수 있게 만들라.
      • 사이트를 '모바일화'할 만한 자원이 전혀 없고 반응형 디자인도 적용되어 있지 않더라도 모바일 기기에서 보려는 시도는 최소한 막지 않는 게 좋다.
    • 홈페이지로 데려가지 마라.
      
      • 뉴스를 보려고 이메일이나 소셜 미디어 사이트에 있는 링크를 탭 하거나 클릭했을 때,
        보고 싶은 기사 대신에 모바일 버전 홈페이지로 데려가서 그 기사를 내가 다시 찾아야 하는 경우는 정말 성가신 일이다.
    • '풀 버전' 웹 사이트로 가는 링크를 항상 제공하라.
      • 모바일 사이트가 아무리 멋지고 완벽하더라도 사용자에게는 웹용 버전으로 갈 수 있는 선택권을 주어야 한다.
        모바일 버전에서 제공하는 기능이나 정보가 제한적이라면 더욱 필요한 기능이다.
        최근에는 모든 페이지 하단에 모바일 버전/ PC 버전 토글 버튼을 넣는 것이 관례로 정착했다.
• 어포던스를 감추지 마라
  • 어포던스란 제품 디자인에 내포된, 사용자가 어떻게 사용하면 될지 알려주는 시각적인 힌트를 가리킨다.
  • 어포던스는 시각적 사용자 인터페이스의 핵심이다.
    • 버튼을 예로 들면, 입체적인 형태의 버튼은 클릭해야 한다는 느낌이 명확히 든다.
    • 또한, 경계가 그려진 네모난 칸을 보면 클릭해서 글자를 입력할 수 있으리라는 생각이 든다.
  • 어포던스는 눈에 띄어야 제 기능을 한다.
    하지만 모바일 기기의 특성 때문에 어포던스가 눈에 잘 띄지 않거나, 최악의 경우 눈에 전혀 띄지 않는 때도 있다.
    모든 어포던스가 한눈에 들어와야 한다는 뜻은 아니지만, 사용자가 작업을 진행하는 데 필요한 부분은 눈에 잘 띄어야 한다.
• 커서 없음 = 호버 없음 = 힌트 없음
  • 터치 스크린이 등장하기 전 웹 디자인은 호버 기능에 크게 의존했었다.
  • 모바일 기기에 많이 사용되는 정전식 터치스크린은 손가락이 닿았을 때만 감지한다.
    손가락이 유리 위로 맴돌 때 감지하는 호버 기능은 없다.
    그래서 모바일 기기에는 커서가 없는 것이다.
• 모바일 앱 사용성 속성
  • 유효성
    • 평균 수준 (심지어는 평균 이하)의 능력이나 경험을 가진 사람이 무언가를 성취할 수 있어야 한다.
  • 효율성
    • 단, 얻는 가치에 비해 수고를 적게 들여야 한다.
  • 재미
    • 앱 시장의 경쟁이 치열해지면서 사용자가 재미를 느끼게 하는 것이 중요해졌다.
    • 기능이 좋은 것만으로 큰 인기를 얻을 수 없다.
      기능만으로 인기를 끌려면 기능이 엄청나게 뛰어난 수준이어야 한다.
    • 앱을 재미있게 만들겠다는 건 좋은 목표다.
      그 목표에 집중하느라 편의성을 깜박하는 일만 벌어지지 않게 하라.
  • 학습 용이성
    • 보통 앱에서 제공하는 설명은 앱을 처음 켰을 때 앱의 작동 방법에 대한 필수적인 정보를 담은 화면 한두 페이지 정도에 그친다.
      하지만 나중에 읽어보려고 하면 찾기가 매우 어렵거나 아예 불가능한 경우가 많다.
      기능이 매우 적은 앱이라면 위의 방식을 사용해도 된다.
  • 기억 용이성
    • 어떤 앱을 처음 접했을 때 사용법을 이해했다면 다음에 그 앱을 다시 쓰려고 할 때 지난번에 익힌 사용법이 잘 기억나는가? 아니면 처음부터 다시 시작해야만 하는가?
    • 기억 용이성은 사용자가 정기적으로 사용할 앱에 적응할 때 중요한 역할을 한다.
    • 누구나 앱을 구매한 직후에는 기꺼이 시간을 들여서 사용법을 익힌다.
      하지만 다시 사용할 때도 같은 노력을 또 들여야 한다면 그 제품의 사용자 경험이 만족스러울 리 없다.
  • 사용성 평가
    • 미러링 말고 화면 방향으로 둔 카메라를 활용하라.
      • 화면에 있는 내용을 보지 말고, 평가 참가자의 손짓이나 탭을 볼 수 있도록.
    • 사용자가 기기를 자연스럽게 들 수 있도록 기기에 카메라를 부착하라.
    • 참가자를 찍을 카메라를 준비할 필요는 없다.
      • 얼굴을 촬영하면 주의만 분산되므로 화면에서 어떤 일이 일어나고 있는지에 초첨을 맞추고 관찰하는 게 좋다.

---

웹 사이트가 예절을 지켜야 하는 이유

사용성을 구성하는 또 다른 주요 요소가 있다.
그것은 바로 사용자에 대한 배려심을 갖추고 옳은 행동을 하느냐 하는 부분이다.
"내 사이트가 이해하기 쉬운가?"라는 질문뿐 아니라 "내 사이트가 예의 바르게 작동하고 있는가?"라는 질문도 해야 한다.

• 호감이 줄어드는 요인들
  사이트를 만든 사람들이 사용자가 어디에 관심이 있는지 신경 써서 웹 사이트를 만들지 않았다는 느낌이 들게 하는 몇 가지 예.
  
  • 사용자가 원하는 정보 숨겨두기
    • 고객 지원센터 전화번호, 배송비, 가격 등
  • 자신이 원하는 방식대로 하지 않는다고 사용자 귀찮게 하기
    • 전화번호 사이의 줄표(-), 신용카드 번호 사이의 공백처럼 사소한 사항
  • 필요하지도 않은 정보 물어보기
    • 현재 하던 작업에 필요하지도 않은 정보들을 묻는 것.
  • 가식적인 표현으로 사용자 기만하기
  • 홍보용 장치로 작업 방해하기
  • 사이트가 아마추어 수준으로 보인다.
• 호감을 키우는 요인들
  • 사용자가 여러분의 사이트에서 가장 많이 하는 활동을 알아내서 그 부분을 명확히 드러내고, 쉽게 사용할 수 있게 하라
  • 사용자가 알고자 하는 정보를 공개하라
    • 배송비, 호텔 1일 주차요금, 서비스 이용 가능 시간 등
  • 사용자의 수고를 최대한 줄여주어라
    • 구매한 제품의 택배 송장 번호를 알려주는 대신 클릭했을 때 택배사 사이트에서 배송 상황을 바로 조회할 수 있게 해주는 링크들
  • 노력을 쏟아부어라
    1. 문제 해결에 필요한 정보를 생산하고
    2. 정확하고 유용한 정보를 제공하며
    3. 해결책을 명확하게 전달하고
    4. 찾기 쉽도록 잘 정리하기 위해 엄청난 양의 작업을 쏟아붓기
  • 궁금해할 만한 사항을 예측하고 그에 대한 답을 제시하라
    • FAQ 목록
  • 인쇄용 페이지처럼 편의성을 높여주는 요소를 제공하라
  • 오류가 발생했을 때 쉽게 회복할 수 있게 하라
  • 해결하지 못한 문제가 있을 때는 사과하라

---

웹 접근성

• 웹 접근성을 갖춘 사이트를 만들어야 할 이유
  • 누구나 정보에 접근할 기회를 똑같이 누려야 한다.
  • 사업상 도움이 된다.
    장애인들도 웹 사용자인 동시에 돈을 많이 쓰는 소비자이다.
  • 접근성을 갖추면 장애인뿐 아니라 모두에게 좋다.
  • 대단한 잠재력을 가진 시장이다.
    장애를 가진 인구 비율은 전체 인구 65%에 달한다.
  • 재활법 508조: 접근성은 단순히 좋은 생각이 아니다. 준수해야 할 법률이다.
• 맞는 말이지만, 이 시대의 개발자나 디자이너를 설득하기 어려운 말이기도 하다.
  그들을 회의론자로 만드는 주요 근거 두 가지
  • 인구의 __%가 장애인이다.
    • 그들이 접하는 세계는 장애가 없는 친구들로 구성되어 있을 것이다.
      그러므로 전체 인구 중 그렇게 많은 사람이 웹에 접근하는 데 도움이 필요하다는 사실을 믿기란 어려운 일.
  • 접근성을 높이면 모두에게 유익하다.
    • 적용한 내용 중 일부가 실제 모두에게 도움이 된다는 사실은 그들도 잘 알고 있다.
      하지만 일반적으로 끌어들이는 예가 이거 하나밖에 없으므로 접근성을 높여서 사용자가 편해진 사례보다
      접근성을 적용하기 위해 개발팀 전원이 고생했던 경험부터 떠오를 가능성이 크다.
  • 접근성을 고려하는 것은 우리가 마땅히 해야 할 일이다.
    • 접근성이 어떤 이들의 생활에 얼마나 엄청난 도움을 주는지를 간과하곤 하지만,
      이것은 단순히 해야 할 일이 아니라 반드시 해야 할, 의미 깊은 일이다.
    • 컴퓨터를 사용할 수 있는 시각 장애인 대부분이 접근성 덕분에 뉴스나 잡지를 혼자 읽을 수 있게 되었다는 상상을 해보라.
      우리가 하는 일을 조금 더 제대로 하는 것만으로 타인의 삶을 극적으로 개선할 기회가 우리에게 얼마나 자주 오겠는가?
• 개발자와 디자이너가 두려워하는 것
  • 늘어나는 업무
    • 개발자에게 접근성이란 안 그래도 거의 불가능에 가깝게 느껴지는 프로젝트 일정에 추가해야 할 또 다른 복잡한 항목일 뿐이라고 느껴질 수 있다.
  • 디자인 타협
    • 디자이너들은 장애인에게 좋은 디자인과 비장애인에게 좋은 디자인이 서로 배치되는 상태가 된다.
      사용자 다수에게 매력이 없는 데다 유용성도 떨어지는 사이트가 완성될까 두려운 것.
• 지금 당장 할 수 있는 네 가지 사항
  • 모두가 혼란스러워하는 사용성 문제부터 고쳐라
    • 비장애인을 위해 사이트의 사용성을 개선하는 건 장애인도 그 사이트를 더욱 편리하게 사용하게 만드는 매우 효과적인 방법이다.
    • 사이트 사용자 대부분이 혼란스러워하는 부분이라면 장애인도 접근성 문제를 겪을 소지가 다분하다.
  • 논문을 한 편 추천한다
    • 사용성을 개선할 가장 좋은 방법은 사람들이 실제 사용하는 모습을 관찰하는 것이라는 사실
    • [Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers] (접근성과 사용성을 갖춘 웹 사이트를 위한 가이드라인: 스크린 리더를 활용하는 사용자 관찰)이라는 제목의 논문에 시각 장애인 16명이 스크린 리더를 사용해서 다양한 사이트에서 여러 작업을 하는 모습을 관찰했다.
      • 스크린 리더 사용자는 귀로 사이트를 훑어본다.
        시각 장애인 대부분은 정상 시력을 가진 사용자 대부분과 마찬가지로 인내심이 적기 때문에 자신이 원하는 정보를 최대한 빠르게 찾기 원한다.
      • 그들은 페이지에 나와 있는 모든 단어를 듣지 않는다.
        그들은 '귀로 훑어본다'. 더 들을지 판단할 수 있을 정도까지만 듣는다.
      • 그들은 링크 맨 앞에 나오는 단어 몇 개나 텍스트의 첫 줄을 듣는다.
        만약 관련이 없다고 느껴지면 다음 링크, 다음 줄, 다음 제목, 다음 단락으로 빠르게 넘어간다.
        정상 시력을 가진 사용자는 전체 페이지를 훑어보면서 키워드를 찾을 수 있지만,
        시력 장애인 사용자는 키워드가 링크의 앞부분이나 텍스트의 첫 줄에 없으면 놓치기 쉽다.
  • 책 한 권을 추천한다
    • [A Web for Everyone: Designing Accessible User Experiences]
    • [Web Accessibility: Web Standards and Regulatory Compliance]
  • 쉬운 문제부터 해결하라
    • 모든 페이지에 적절한 대체 텍스트를 추가하라
      • 스크린 리더가 무시할만한 이미지에는 빈(혹은 "null") alt 속성 (<alt="">)을 추가하라.
    • 올바른 헤딩을 사용하라
      • 페이지 제목이나 메인 콘텐츠에는 <h1>을, 주요 섹션 헤딩에는 <h2>를, 부제목에는 <h3>를 사용하라.
        그리고 CSS를 사용해서 각 단계를 시각적으로 구분할 수 있게 하라.
    • 폼이 스크린 리더에서도 잘 동작하도록 작성하라
      • HTML <label> 엘리먼트를 사용하기만 하면 된다.
        그러면 필드와 텍스트 라벨이 연결되어 사용자가 무엇을 입력하면 되는지 알게 된다.
    • 각 페이지를 시작할 때 '메인 콘텐츠로 넘어가라'는 링크를 넣어라
      • 페이지마다 실제 콘텐츠를 보기 전에 페이지 위에 있는 글로벌 내비게이션을 20초 동안 들어야 하는 장애인의 입장을 상상해보면 이 부분이 왜 중요한지 알 수 있을 것이다.
    • 키보드로 모든 콘텐츠에 접근할 수 있게 하라
      • 모든 사람이 마우스를 사용하지 않는다는 사실을 기억하라.
    • 텍스트와 배경 간에 눈에 띄는 차이를 두라
      • 예를 들자면 진한 회색 배경 위에 흐린 회색 텍스트를 쓰지 말라는 것.
    • 접근성 있는 템플릿을 사용하라

---

사용성을 실제로 적용하기

• 사용성이란 분야에 대해 먼저 알아야 한다
  • 사용성과 사용자 중심 디자인(User Centered Design, UCD)은 1990년대 후반 사용자를 염두에 두고 디자인하려는 모든 시도를 설명할 때 사용한 용어이다.
  • 당시 웹 사이트를 사용하기 더 편리하게 만드는 데 집중하던 '전문직'은 기본적으로 두 부류가 존재했다.
    사용자 경험 디자인(User Experience Design, UXD 또는 UX)에 속하는 관련 전문 분야로는 인터랙션 디자인, 인터페이스 디자인, 시각 디자인, 콘텐츠 관리를 비롯한 열 가지 이상의 분야가 존재한다.
  • 사용자 중심 디자인과 사용자 경험은 각기 담당하는 영역이 다르다.
    • UCD는 적절한 제품을 디자인하고 그 제품을 사용하기 편리하게 만드는데 초점을 맞춘다.
    • UX는 제품 라이프 사이클 전반에 걸쳐 사용자의 욕구를 생각하는 것에 초점을 맞춘다.
• 사용성 업무를 지원해달라고 경영진을 설득해야 할 때 활용하기 좋은 방법
• 투자 대비 수익률 ROI(return on investment)을 보여주라.
  • 사용성에 변화를 주어서 절감한 비용이나 추가된 수익을 증명하는 데이터를 모으고 분석하는 접근법.
  • [Cost-justifying Usability: An Update for the Internet Age]는 이에 대한 내용을 담은 책
• 경영진의 언어로 이야기하라.
  • 우리가 노력하는 부분이 사용자에게 유용하다는 이야기보다 현재 회사가 골머리를 앓고 있는 문제가 무엇인지 알아내서 그 문제를 해결하는 데 기여한다는 사실을 명확히 보여주라.
  • 페인 포인트, 터치 포인트, KPI(Key Performance Indicators), CSI(Customer Satisfaction Index) 등 재직 중인 회사의 경영진 사이에서 유행하는 용어로 말하라.
• 글쓴이가 우리였다면 어떻게 했을까
  • 우리의 상사, 그리고 상사의 상사가 사용성 평가를 직접 보게 하라
    • 먹이사슬 상위에 있는 사람들에게 가장 큰 효과를 본 방법은 그들이 단 한 번이라도 사용성 평가를 직접 관찰하게 하는 것.
  • 첫 평가는 업무시간이 아닐 때 진행하라
    • 첫 번째 평가를 할 때는 허가를 구하지 말고 격식 없이 아주 간단하게 진행하라.
    • 자원봉사 참가자를 찾으면 비용도 들지 않는다.
    • 그리고 평가를 통해 구체적으로 개선되는 사항이 있게 하라.
      • 이상한 라벨이 붙은 버튼을 고치는 것처럼 쉬운 목표를 골라라.
      • 심각한 사용성 문제가 최소 하나 이상 숨겨져 있는 것으로.
      • 그 대신 많은 승인을 거치지 않고도 빠르게 고칠 수 있는 문제여야 한다.
    • 그리고 평가하고 고치고 널리 알려라
    • 개선 사항을 간단히 수치화할 방법이 있다면 사용하라.
  • 경쟁 상대를 평가하라
    • 평가에 대한 지원을 얻기에도 좋은 방법.
  • 경영진과 공감하라
    • 그들이 처한 위치에 대해 이해하는 관점에서.
  • 큰 그림에서 우리가 어디쯤 있는지 파악하라
    • 비즈니스 세계에서 개인은 거대한 톱니바퀴 속 아주 작은 톱니에 지나지 않는 것이 현실이기에
      사용성에 대한 열정이 다른 이들에게 전염되길 바라겠지만, 사실 별 효과는 없을 것이기에 겸손한 태도를 갖자.
    • [It's Our Research: Getting Stakeholder Buy-In for User Experience Research Projects]
      구글의 UX 연구원.
    • [The User Experience Team of One: A Research and Design Survival Guide]
      '현재 회사에서 사용자 중심 디자인 관련 업무를 맡은 유일한 직원이거나 장래에 사용성 전문가를 꿈꾸는 사람' 혹은 '사용성 전문가가 아님에도 어쩔 수 없이 가끔 UX 담당자 역할을 맡아야 하는 사람'을 대상으로 쓴 글.
• 사용성 질문에 대한 몇 가지 확실한 대답
  • 작고 대비가 약한 서체는 쓰지 마라.
  • 필드 안에 라벨을 넣지 마라
  • 방문한 텍스트 링크와 방문하지 않은 링크를 다르게 표시하라
  • 헤딩이 단락 사이에서 떠다니게 하지 마라

 

---

[ 웹 접근성 참고 링크 : https://webaim.org/  ]

[ 웹 접근성 관련 참고 서적 : 
- A Web for Everyone: Designing Accessible User Experiences
- Web Accessibility: Web Standards and Regulatory Compliance ]

[ UX 관련 참고 서적 :  
- It's Our Research: Getting Stakeholder Buy-In for User Experience Research Projects
- The User Experience Team of One: A Research and Design Survival Guide ]

---