Skip to content

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

Find similar titles

1회 업데이트 됨.

Edit

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

사용자를 고민에 빠뜨리지 마라! #

사용자가 고민하는 목적성 없는 이름 #

  • 귀엽고 참신한 이름, 마케팅에서 비롯한 이름, 특정 회사에서만 사용하는 이름, 익숙하지 않은 기술적 이름

고민하는 디자인 #

  • 클릭 가능 여부를 알아보기 어려운 링크와 이름,

자명하게 만드는 체크리스트 #

  1. 내가 지금 어디에 있는 거지?
  2. 어디서 시작해야 하지?
  3. __을 어디에 입력해야 하지?
  4. 이 페이지에서 가장 무엇이 중요하지?
  5. 왜 여기에 이런 이름을 붙였지?
  6. 이건 사이트에서 올린 건가? 광고인가?

사이트를 명확하게 만들어야 하는 이유 #

Image

Image

Image

  1. 보기만 해도 평균 사용자가 그것이 무엇인지, 어떻게 사용하는지 알아야 인터넷 분야라는 치열한 공간에서 살아남을 수 있음.
  2. 사용자는 생각보다 사이트에 머무르거나 소비하는 에너지가 적음.
  3. 사용자는 대충 보고 본문 일부를 훑다가 필요한 부분에 클릭함. 즉 ‘95km’ 속도로 달리는 자동차에서 바라보는 광고판과 같음.

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

훑어보기 #

  • 웹은 도구에 불과함. 업무 중에는 특히 속도가 중요하여 최대한 빨리 내용에 접근해야 함. 필요 이상의 것을 읽을 시간이 없음.
  • 모든 것을 다 읽을 필요가 없다. 사용자는 자신이 필요한 내용이나 연관된 내용만 찾음. 관련 요소를 찾기 위해 시간을 할애함.

사용자는 최선을 선택하지 하지 않음. 최소 조건만 충족되면 만족함. #

  1. 사용자는 시간에 쫓김. 최선의 결정을 내리는 일은 시간이 오래 걸림. 만족하기가 효율성이 더 높음.
  2. 추측이 틀렸을 때 발생하는 불이익이 별로 없음. 웹사이트에 잘못된 추측을 내려도 뒤로가기 두 번이면 해결됨.
  3. 선택지를 비교해도 나은 결과가 나아진다는 보장이 없음.
  4. 추측하는 게 더 재미있음. 추측이 여러 사이트를 비교하는 것보다 더 시간이 절약되고 내 추측이 맞을 경우 운으로 작용하여 사용자에게 좋은 기분을 선사함.

사용자는 작동 방식까지 이해하려 하지 않음. 임기응변으로 대응함. #

  1. 새로운 기술을 접할 때 사용서를 읽어보는 사람은 별로 없음. 본인이 선택한 이유에 합당성을 스스로 부여하며 임기응변으로 새로운 기술을 대처함.
  2. 사용자가 작동 방식을 이해하지 않아도 전혀 지장이 없음. 관심이 딱히 없기 때문에 이해하려고 하지 않음.
  3. 물건이 작동만 되면 그 물건을 그냥 사용하려는 경향이 있음. 작동 상태가 나쁘다고 해도 더 나은 사용 방법을 딱히 찾지 않음.
  4. 사용자는 스스로 똑똑하다고 느끼게 되는 사이트, 막힘없이 척척 쓸 수 있는 사이트에 단골이 됨.

광고판 디자인 첫걸음: 훑어보기 좋은 디자인 #

관례를 이용하기 #

  • 정지 표시판, 자동차 제어 장치(페달의 위치), 페이지당 항목의 위치(로고는 항상 왼쪽), 쇼핑카트 담그기 같은 작동 방식. 명료성이 일관성보다 중요함.

시각적 계층구조를 효과적으로 구성하기. #

Image

Image

  • 더 중요한 부분은 크고 두꺼운 폰트 사용, 주변에 넓은 공간에 두어 왼쪽 위에 둠.
  • 논리적으로 연관된 요소는 시각적으로 이어져 있음. 따라서 하나의 제목 아래 그룹으로 묶거나 동일한 시각적 스타일 적용, 명확하게 구분된 하나의 구역에 모아둠.
  • 두 요소 사이에 상-하 관계가 형성되어 있다면 시각적으로 명시함. 큰 범위부터 위에 두고 아래로 향하게 함.

페이지의 구역을 확실하고 또렷하게 구분하기. #

  • 사용자가 이 부분을 무시할지 더 훑어볼지 확실하고 빠르게 정할 수 있음. 클릭할 수 있는 요소를 확실하게 하는 것도 도움이 됨.

주의를 흩뜨릴 만한 요소를 없애기. #

  • 시각적 잡음은 시끄러움, 무질서, 어수선함으로 나누어짐. 사용자를 안내할 시각적 기준이 될만한 가장 중요한 요소가 무엇인지 모를 때 시끄러운 웹이 생김. 또한 페이지를 기준선에 따라서 배열하지 않으면 무질서해 보임.

내용을 훑어보기 좋은 방식으로 구성하기. #

Image

  • 제목을 많이 넣으면 페이지 내용의 개요나 표시를 대신하는 역할을 하여 사용자가 뛰어넘을지 읽을지 빠르게 결정하게 함. 단락의 길이를 짧게 유지함. 약간 공간을 둔 블릿 목록을 사용함. 너무 많지 않은 선에서 주어 단어에 중요한 것을 배치하고 강조 표시를 둠.

사용자가 고민 없이 선택하길 좋아하는 이유 #

원칙 #

  • 클릭 수가 늘어나는 것은 괜찮음. 클릭할 때 사용되는 ‘고민'이 중요함. 클릭 한 번에 얼마나 많은 ‘수고'가 드는가가 중요한 요소임. 별 고민 없이 클릭할 수 있고 본인의 방향이 옳다고 확신만 꾸준히 든다면 클릭을 많이 해도 사용자는 개의치 않음.

사용자에게 고민이 드는 선택지를 줄 때 요령 #

  1. 간결성: 사용자에게 고민이 필요한 선택지를 줄 때에는 그들이 딱 필요로 할 만큼 선택지를 주어야 함. 적절한 안내와 함께 지나치지 않은 선에서 제공해야 함. 사용자에게 도움이 될 만한 정보를 선별해서 최소한 양만 남겨야 함.
  2. 간결성: 사용자가 딱 설명이 필요한 순간에 마주칠 위치에 둠.
  3. 불가피성: 반드시 놓치지 않고 볼 수 있는 포맷 사용.

불필요한 단어 덜어내기 #

원칙 #

  1. 각 페이지에서 담은 단어 반을 걷어내고 남은 반의 반을 걷어낸다. 그러면 페이지 소음이 덜어지고 유용한 부분이 강조되고 스크롤을 내리지 않아도 한 눈에 내용이 전달된다.
  2. 불필요한 인사말 제거
  3. 설명을 없애기. 모든 내용이 자명해서 설명이 필요 없을 정도로 목표를 두고 디자인해야 함.

내비게이션 디자인하기 #

특징 #

  1. 사용자는 사용법을 스스로 알아낼 수 없는 웹사이트를 사용하지 않음.
  2. 대부분 웹사이트는 무언가를 찾기 위해 들어감. 들어가서 먼저 검색 상자를 찾는 사람을 ‘검색 중심' 사용자로 명칭하고 훑어보는 사용자를 ‘링크 중심' 사용자라고 명시함.
  3. 훑어보기를 할 때 사이트의 계층 구조를 살펴볼 것이고 찾는 항목이 없으면 떠남.

고정 네비게이션 #

Image

Image

Image

Image

  • 상대에게 지금 어느 위치에 있는지 알려줌. 한 눈에 보여줄 수 있고 일관적인 네비게이션 디자인과 구조는 사용법을 한 번만 학습하면 되기 때문에 유용함.
  • 제외되어야 할 곳: 회원가입 페이지, 결제 페이지, 등록 페이지, 설문 페이지
  • 섹션 , 세부 항목, 유틸리티(가장 필요한 4~5개만 놓고 나머지는 하단에 둠)

Image

  • 검색: 상자와 버튼, ‘검색’ 단어(검색이란 단어 이외에는 쓰지 않기), 돋보기, 설명 넣지 않기

Image

  • 페이지 이름은 해당 페이지가 도달하기 위해 클릭한 단어와 일치해야 함.

Image

  • 빵부스러기: 내가 어디 있는지 알려주는 계층 구조. 맨 꼭대기에 넣고 ‘>’로 계층을 분리하고 마지막 항목의 서체를 볼드로 구성

평가표 #

  • 이 사이트는 무슨 사이트인가? (사이트의 정체성)
  • 내가 무슨 페이지에 있는가? (페이지 이름 명시성)
  • 이 사이트의 메인 섹션은 무엇인가?
  • 현재 페이지의 네비게이션 상태는 어떻다고 생각하는가?
  • 전체 사이트 구조에서 현재 페이지가 잘 명시되어 있는가?
  • 검색은 어떻게 하는가?

평가방식 #

  1. 1단계: 사이트 중 아무 페이지에 들어간다. 그리고 그 페이지를 인쇄한다.
  2. 2단계: 인쇄한 페이지를 거리를 두고 보고나 실눈으로 본다.
  3. 3단계 최대한 빠른 속도로 해당 항목(사이트 이름, 페이지 이름, 섹션(고정 네비게이션), ‘현재 위치' 표시, 검색) 이 제대로 위치하고 있는지 확인한다.

웹 디자인의 빅뱅 이론 #

홈페이지에 들어가야 할 요소 #

Image

  1. 사이트 정체성과 임무: 사이트에 들어가는 즉시 이 사이트가 뭘 하는 곳이고 왜 존재해야 하는지 알아야 함. 가능하면 왜 다른 사이트가 아닌 이 사이트를 써야 하는지 알려줘야 함.
  2. 사이트 계층 구조: 내용의 개요를 보여줄 때 ‘이 사이트에서 내가 어떤 내용을 보여줘야 할 것인가?’와 ‘내가 할 수 있는 것은 무엇인가?’에 답해야 함.
  3. 검색: 검색 상자의 위치
  4. 관심을 끌 만한 요소, 콘텐츠 홍보, 특집 홍보, 신규 콘텐츠, 제휴 광고, 바로가기, 등록(회원가입 여부)

페이지 필수 평가 요소 #

Image

  • 이게 무슨 사이트인가?
  • 이 사이트에는 무슨 내용이 있지?
  • 이 사이트에서 무엇을 할 수 있지?
  • 비슷한 다른 사이트가 있음에도 불구하고 내가 이 사이트를 이용해야 할 이유는 뭐지?

중요한 요소 전달 시 주의점 #

Image

  1. 기업 강령을 환영 문구로 넣지 말기
  2. 필요한 정도 이상 공간을 사용하지 말기
  3. 홈페이지는 반드시 평가를 거쳐야 하는 요소임.
  4. 태그라인은 명확하고 유익하며 몸담은 조직을 잘 표현해야 함. 6~8 단어 정도가 충분함. 포괄적이지 않게 작성하기

사용자 평가 #

DIY 평가 #

Image

  • 한 달에 한 번 정규적으로 실시
  • 3명 정도 참여하고 어떤 도메인에 속한 사람이든 상관없고 상대 평가로 진행
  • 무언가를 증명하는 평가가 아니기 때문에 정량적일 필요가 없음. 정성적 평가로 진행하고 페이지를 사용해 보고 무엇이 문제인지 판단하고 관찰하는 것이 목표
  • 평가 프로그램으로는 모두가 볼 수 있도록 ‘고투미팅', ‘웹액스' 처럼 화면 공유 프로그램 사용.
  • 참을성 있고 차분하고 상대방 감정에 잘 공감하며 이야기를 잘 들어주고 불평불만이 없는 사람 선택.
  • 사용자 반응을 최대한 많은 사람들이 관찰해야 함. 그래야 사용자가 본인과 다르다는 것을 모두가 직감적으로 깨달을 수 있음.
  • 관찰자는 쉬는 시간마다 자신이 발견한 심각한 사용자 문제 3개를 적어두어야 함.
  • 사이트를 만들기 전에 사용자 평가를 하려면 경쟁 상대 페이지를 평가 혹은 만들 페이지와 비슷한 페이지를 평가하여 어떤 요소가 효과 있고 없을지 평가
  • 평가 요소: 계정 만들기, 기존 ID와 비밀번호로 로그인하기, 비밀번호 찾기, ID 찾기, 보안 질문 답변 바꾸기

평가 후 종합 #

  • 공동 목록 만들기. 모든 관찰자에게 가장 심각한 사용성 문제 3가지를 답하게 함. 순서대로 3가지를 말하게 하면서 똑같은 문제를 가진 것은 중복 표시하기.
  • 가장 심각한 10가지 선정하기
  • 목록을 정리하기. 어떻게 고칠지, 담당자는 누구로 할지, 필요한 자원은 무엇이 있는지 적기. 매우 쉽게 고칠 수 있는 문제는 따로 두기, 새로운 기능 추가에 대한 문제는 획기적인 것이 아니면 가려듣기

참고문헌 #

  • 스티브 크록 저자 / 이미령 옮김 / 인사이트
0.0.1_20240214_1_v81