UIUX 스쿨 33기/팀스터디

[팀스터디] 북스터디 - 사용자를 생각하게 하지마

kaontti809 2025. 1. 31. 08:15
728x90

두 번째 주 팀스터디에서는 팀원들이 같은 책을 읽고 각자 맡은 부분을 설명하며 토론하는 시간을 가졌다.
 
총 2번의 스터디가 예정되어 있고, 첫 번째 스터디는 이미 완료되었다.
 
함께 읽을 책은 '사용자를 생각하게 하지마'라는 책이다. 이 책은 UIUX를 배우는 사람들은 모두 한 번쯤 읽어보거나 들어봤을 정도로 유명하다. 첫 번째 스터디에서는 1장부터 7장까지의 내용을 다루기로 했고, 나는 6장과 7장을 맡았다. 
 

1장. 사용자를 고민에 빠뜨리지 마라!

 
1. 사용자가 고민하지 않도록 해야 한다.

  • 가장 중요한 원칙은 사용자가 즉각적으로 이해하고 행동할 수 있도록 만들어야함
  • 두 번 이상 클릭하게 만들거나, 불필요한 고민을 유발하면 안 됨.
  • 고민을 유발하는 웹사이트는 사용자 경험 악화시킴

2. 자명한 인터페이스가 중요

  • 설명 없이도 사용자가 직관적으로 어디를 클릭해야 하는지, 어떻게 작동하는지 바로 알 수 있게 디자인
    • 메뉴 이름이나 버튼 텍스트는 되도록 직관적으로, 애매한 마케팅 용어 or 장식 지양할 것
    • 사용자한테 너무 많은 선택지를 주지 말고 필요한 정보만 제공할 것
    • 링크랑 버튼은 명확히 클릭하도록 디자인할 것
  • 불편한 UI는 곧바로 경쟁사로 사용자가 이탈하는 원인

 

결론

 
사용자가 고민 없이 사용할 수 있는 UX를 목표로 해야 한다.
👉 사용자에게 즉각적인 피드백을 제공하며, 고민할 필요 없이 자연스럽게 사용할 수 있도록 해야 함.
👉 웹사이트나 앱을 사용할 때 한 번이라도 "이게 뭐지?"라고 생각하는 순간 실패한 것.
 

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

 
1. 사용자는 웹페이지를 읽지 않고 훑어본다.

  • 사용자는 페이지를 대충 훑어보고, 자신에게 관련 있는 부분만 선택적으로 읽음.
  • 키워드, 제목, 링크 같은 눈에 띄는 요소만 빠르게 찾아봄.
    • 웹은 하나의 도구일 뿐이고, 빠르게 필요한 정보를 찾으려 하기 때문. → 모든 내용을 읽을 필요가 없음
    • 검색 엔진이나 SNS에서 익숙해진 스캔 방식이 자연스럽게 적용됨.

2. 사용자는 최선의 선택을 하지 않고, 최소 조건만 충족하면 만족한다.

  • 만족하기(satisficing) : 사용자가 최상의 옵션을 신중하게 선택할 거라 기대하지만, 실제는 첫 번째로 괜찮아 보이는 선택지를 고름.
  • 논리적인 선택보다는 빠르고 편한 선택을 선호
  • 최선이 아닌 첫 선택을 고르는 이유
    • 깊이 비교하는 것보다 빠르게 선택하는 것이 더 효율적.
    • 웹에서는 '뒤로 가기' 버튼으로 쉽게 복구 가능.
    • 어차피 큰 차이가 없을 거라는 생각.
    • 직관적으로 선택하고 맞아떨어지는 경험을 선호함.
  • 사용자는 작동 방식을 이해하려 하지 않고 적당히 대충 사용한다.
    • 웹사이트나 소프트웨어의 작동 방식에 대한 관심이 적은 이유
      • 사용자는 작동 방식을 완전히 이해하지 않아도 작동만 되면 됨.
      • 기존에 사용하던 방식이 익숙하면, 더 나은 방법을 찾아보려 하지 않음.
      • 시간이 지나면 적응하면서 자연스럽게 문제를 해결하게 됨.

 

결론

 
사용자가 찾고 싶은 정보를 빠르게 찾을 수 있도록 설계되어야 함.
👉 사용자는 웹을 훑어보고, 이해하려는 행동 보단 일단 작동하고 사용하는 경향이 강함
👉 명확하고 직관적인 디자인을 통해 사용자의 인지 부담을 줄여야 함
 

3장. 광고판 디자인 첫 걸음

 
1. 관례(Convention)를 따르자

  • 널리 사용되는 디자인 패턴(관례)을 따르면 사용자가 즉시 이해할 수 있다.
  • 새로운 UI를 학습하는 부담을 줄여 사용자 경험을 향상한다. 새 것을 만드려면 새 아이디어가 원래보다 나은 경우에만 만들자.
  • 시각적 계층 구조를 효과적으로 구성하자
    • 중요한 정보가 더 눈에 띄도록 크기, 색상, 배치를 조정해야 한다. → 사용자는 자연스럽게 중요한 정보를 먼저 보니까
      ✔ 관련된 요소는 그룹화: 논리적 관계가 있는 요소는 같은 스타일을 적용하거나 가까이 배치.
    • ✔ 연관된 요소 간 상·하위 관계를 시각적으로 표현: 섹션별 제목과 콘텐츠를 구분.
    • ✔ 더 중요한 요소를 더 눈에 띄게: 크기, 색상, 여백 등을 활용해 중요도를 강조.
  • 페이지의 구역을 뚜렷하게 나누자
    • 사용자가 필요한 정보를 쉽게 찾도록 유도 → 훑어볼 때 중요한 부분과 아닌 부분 구별
    • ✔ 불필요한 정보 제거: 중요한 정보에 집중할 수 있도록 단순화.
    • ✔ 광고처럼 보이는 요소 주의: 배너 블라인드니스 현상(사용자가 광고를 무시하는 경향) 고려.
    • ✔ 섹션별 구획을 명확하게: 배경색, 테두리, 여백을 활용해 시각적으로 구분.
  • 클릭할 수 있는 요소를 명확히 표시
    • 사용자가 뭘 클릭할 수 있는지 명확히 알아야함 → 클릭 여부가 불분명하면 이탈 요소가 됨
    • ✔ 클릭 가능한 영역을 넓게 확보: 모바일 환경에서는 특히 중요.
    • ✔ 버튼과 텍스트 링크 차별화: 버튼은 명확하게, 링크는 읽기 흐름을 방해하지 않도록.
    • ✔ 링크는 시각적으로 구별: 색상, 밑줄, 버튼 형태 활용.
  • 주의를 흩뜨릴 만한 요소를 제거
    • 불필요한 시각적인 요소는 집중 방해 → 핵심 정보 인지가 매우 중요
    • ❌ 무질서(Disorder): 정돈되지 않은 배치는 가독성을 떨어뜨림.
    • ❌ 어수선함(Busyness): 한 페이지에 너무 많은 내용이 있으면 사용자 피로도 증가.
    • ❌ 시끄러움(Clutter): 너무 많은 요소가 강조되면 오히려 혼란을 초래.
  • 내용을 훑어보기 쉽게 구성하자
    • 사용자는 훑어보니까 정보를 빨리 찾게 적절한 구조를 주어야함
    • ✔ 단락을 짧게 유지: 긴 문장은 가독성을 해치므로 적절한 길이로 나눈다.
    • ✔ 주요 용어 강조: 사용자가 중요한 정보를 빠르게 찾을 수 있도록 텍스트 스타일 적용.
    • ✔ 불릿 목록 사용: 리스트를 활용하면 정보를 한눈에 파악하기 쉽다.
    • ✔ 제목을 적극 활용: 섹션을 나누고, 핵심 내용을 요약하는 역할 수행.
  • 명료성 >>>> 일관성 (명료성이 매우 중요)
    • 사용자가 직관적으로 이해해야하므로
    • ✔ 명확성을 최우선으로 고려: 내비게이션, 버튼, 텍스트 스타일 등을 사용자가 쉽게 이해할 수 있도록 조정.
    • ✔ 일관성을 유지하되, 필요할 경우 유연하게 조정: 기존 디자인 패턴을 따르지만, 가독성을 높이기 위해 변화를 줄 수도 있음.

 

결론

 
광고판처럼 핵심 정보를 직관적으로 전달해야 하며, 불필요한 요소를 제거하고 중요한 정보가 강조되도록 디자인
👉 사용자가 쉽게 이해하고, 빠르게 원하는 정보를 찾을 수 있도록 디자인해야 한다.
👉 관례를 따르고, 시각적 계층 구조를 활용하며, 불필요한 요소를 제거하면 사용자 경험이 향상된다.
👉 가장 중요한 것은 명확성(Clarity)! 복잡한 디자인보다 직관적인 인터페이스가 더 효과적이다.
 

4장. 동물입니까, 식물입니까, 무생물입니까?

사용자는 고민 없이 선택하길 좋아한다.

 
원하는 결과에 도달하기까지 좌절하지 않고 클릭 혹은 탭 할 수 있는 횟수에 대한 논쟁
 
1. 아무 고민 없이 할 수 있는 클릭 3번 = 고민해야 하는 클릭 1번과 같다

  • 페이지에 도달하기 위한 클릭 수보다 클릭 한 번에 얼마나 수고가 드느냐에 있다. 이는 내가 하는 선택이 옳은지 판단하기 위해 고민해야 하는 양인 불확실성의 정도로 측정할 수 있다.
  • 별 고민 없이 클릭할 수 있고 본인이 옳은 방향으로 가고 있다는 확신만 줄 수 있다면? → 클릭을 많이 하더라도 사용자는 크게 개의치 않음

 
2. 사용자에게 고민이 필요한 선택지를 줄 수밖에 없다면 딱 필요로 할 만큼의 적절한 안내를 함께 제공하라.

  • 적절한 안내는 다음과 같은 특징을 지님 (지나쳐도 안됨)
    • 간결성 : 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남기라.
    • 적시성 : 사용자가 딱 필요로 할 순간에 마주칠 위치에 두라.
    • 불가피성 : 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라.
5장. 불필요한 단어를 덜어내라

각 페이지에 담긴 단어의 절반을 덜어내라. 그리고 남은 부분에서 또 절반을 덜어내라

1. 불필요한 단어는 생략하라.

  • 단순히 자리만 차지하는 단어로 가득한 페이지 많음 → 절반을 날려도 페이지 가치 손상되지 않는 경우 많음
    • 아무도 읽지 않은 불필요한 단어를 제거 했을 때 얻는 유익햔 효과
      • 페이지의 소음 수준이 낮아진다.
      • 유용한 부분이 더욱 도드라진다.
      • 페이지 길이가 짧아지므로 사용자는 스크롤을 내리지 않고도 한눈에 전체를 훑어볼 수 있다.

2. 불필요한 인사말을 빼라

  • “환영합니다…”라는 말과 함께 첫 페이지에서 등장하는 인사말 = 잡담이나 다름없음
  • 형편없는 글솜씨로 자기만족을 위해 쓴 홍보용 글인 경우가 많음.
  • 사용자들은 잡담할 시간이 없다. 그들은 바로 본론으로 들어가길 원한다.

 
3. 설명을 없애라

  • 설명을 읽는 사람은 거의 없음
    • 탐색하며 실패를 반복하지 않는 한 설명을 자세히 읽는 사용자는 없음
    • 설사 읽는다 해도 설명이 장황하면 필요로 하는 정보를 찾을 확률이 매우 낮음
  • 항상 모든 내용이 자명해서 설명이 없어도 이해가 되는 수준을 목표로 디자인하라.
    • 설명이 꼭 필요하다면 양을 최소로 줄여라
6장. 표지판과 빵부스러기
→ 내비게이션과 정보 구조에 대해 다룬다.

요약 : 스트리트 사이닝으로 안내하기
  1. 좋은 내비게이션은 사용자에게 방향 감각을 제공해야 한다.
    • 사용자는 웹사이트를 방문하면 길을 찾으려 하고, 길을 잃으면 혼란을 느낀다.
    • 효과적인 내비게이션은 사용자가 현재 어디에 있는지, 어디로 갈 수 있는지를 쉽게 알 수 있도록 도와줘야 한다.
  2. 웹사이트 내비게이션은 물리적인 표지판과 비슷해야 한다.
    • 오프라인에서 거리 표지판이 잘 정리되어 있으면 길을 찾기 쉽듯, 웹사이트도 명확한 구조와 직관적인 내비게이션을 가져야 한다.
    • 예를 들어, 일관된 메뉴 배치와 명확한 링크 텍스트가 중요하다.
  3. 내비게이션 구성 요소
    • 웹사이트의 내비게이션은 여러 요소로 이루어지는데, 대표적으로 다음이 있다.
      • 사이트 ID: 로고나 브랜드명을 통해 사용자가 어디에 있는지 알게 한다.
      • 섹션 헤더: 주요 카테고리를 표시하여 사용자가 쉽게 탐색할 수 있도록 한다.
      • 로컬 내비게이션: 특정 섹션 내에서의 세부 탐색을 제공한다.
      • "당신은 여기 있습니다(You Are Here)" 표시: 현재 위치를 강조하여 사용자가 길을 잃지 않도록 한다.
      • 검색 기능: 사용자가 직접 원하는 정보를 찾을 수 있도록 제공해야 한다.
  4. 홈페이지가 지도 역할을 해야 한다.
    • 사용자는 항상 처음 방문하는 페이지가 홈페이지가 아닐 수도 있기 때문에, 어디에서든 사이트 구조를 쉽게 파악할 수 있도록 해야 한다.
    • 빵부스러기 내비게이션(Breadcrumbs) 같은 기능이 유용할 수 있다.
      • 빵부스러기 유래: 헨젤이 숲 속에 빵부스러기를 뿌려서 그레텔과 함께 집으로 돌아오는 길을 찾을 수 있었던 것에서 유래됨
  5. 내비게이션을 잘못 설계하면 사용자가 떠난다.
    • 사용자가 길을 찾기 어렵다면, 웹사이트를 이용하는 대신 떠나버릴 가능성이 높다.
    • 따라서 내비게이션을 직관적으로 설계하고, 사용자가 고민하지 않도록 하는 것이 중요하다.
결론
  • 6장은 웹사이트 내비게이션이 물리적인 거리 표지판처럼 명확해야 한다는 점을 강조한다.
  • 사용자가 현재 위치와 다음 이동 경로를 직관적으로 이해할 수 있도록, 사이트 ID, 섹션 헤더, 빵부스러기 내비게이션 등을 잘 활용해야 한다.
  • 이 내용을 UX 디자인에 적용하면, 사용자가 헤매지 않고 원하는 정보를 쉽게 찾을 수 있도록 도와줄 수 있다.
7장. 웹 디자인의 빅뱅이론
→ 웹사이트에서 불필요한 단어를 제거하여 사용자 경험을 개선하는 방법을 다룬다.
  1. 웹사이트의 불필요한 텍스트가 문제인 이유
    • 사용자는 웹사이트에서 읽기보다 훑어보는 경향이 강하다.
    • 쓸데없는 단어가 많으면 정보가 묻히고, 핵심 내용을 파악하기 어려워진다.
    • 텍스트가 많을수록 사용자는 방해받고 피로감을 느낀다.
  2. 불필요한 단어를 없애는 방법
    • 태그라인 : 한 기업의 특징을 설명하는 함축적인 한 구절
    • 설명용 텍스트 줄이기
      • 많은 웹사이트가 "환영합니다!" 같은 인사말이나 불필요한 설명을 사용하지만, 실제로는 사용자에게 도움이 되지 않는다.
      • 나쁜 예: "우리 웹사이트에 방문해 주셔서 감사합니다. 이곳에서는 여러분이 필요로 하는 모든 정보를 찾을 수 있습니다. 아래 메뉴를 사용하여 원하는 페이지로 이동하세요!"
      • 좋은 예: "필요한 정보를 바로 찾아보세요."
    • 자연스러운 문장으로 간결하게 쓰기
      • 웹사이트의 가이드를 너무 길게 쓰면 사용자가 읽지 않는다.
      • 버튼, 메뉴, 설명 텍스트도 최대한 간결하게 작성해야 한다.
      • 나쁜 예: "이 버튼을 클릭하시면 회원가입 페이지로 이동할 수 있습니다."
      • 좋은 예: "회원가입”
    • 마케팅용 불필요한 문구 줄이기
      • 웹페이지에는 종종 과장된 마케팅 문구가 포함되는데, 사용자는 이를 신뢰하지 않는다.
      • 핵심 정보만 전달하는 것이 더 효과적.
      • 나쁜 예: "저희 제품은 최첨단 기술로 만들어져 고객님의 모든 요구를 충족시킬 수 있습니다!"
      • 좋은 예: "더 빠르고 강력한 성능."
  3. 웹사이트의 주요 콘텐츠가 눈에 띄도록 해야 함
    • 불필요한 텍스트를 제거하면 중요한 정보가 강조됨.
    • 사용자에게 핵심 정보만 전달하면 빠른 의사 결정을 도울 수 있음.
결론
  • 7장의 핵심은 웹사이트에서 불필요한 단어를 없애는 것만으로도 UX가 크게 개선될 수 있다는 것이다.
  • 사용자는 긴 문장을 읽지 않고, 핵심 정보만 원하므로 ‘필요한 말만 남기고 나머지는 삭제하라’는 것이 가장 중요한 포인트이다.
728x90