27P by neo 2일전 | ★ favorite | 댓글 1개
  • Material UI 같은 컴포넌트 라이브러리 사용하는게 쉬운 길이겠지만, 기초 빌딩 블록은 제공하나 전체 사용자 흐름 설계는 별도 작업 필요
  • 제품을 독특하게 만드는 데 시간을 투자해야 한다면, 가능한 한 빨리 좋은 사용자 경험을 정의하려면 어떻게 해야 할까?

빈 페이지는 함정이다

  • 빈 캔버스를 보며 "이메일 입력 필드는 어떻게 생겨야 할까?" 고민 금지
  • 대기업에서 이미 검증된 패턴 활용 가능
    • 시간 절약 및 사용자 경험 개선 가능
  • 피해야 할 접근 방식

    • 디자인 어워드 사이트 – 독창성은 있지만 사용성 보장은 없음
    • Dribbble – 미적 요소에 초점, 기능성과는 무관
  • 참고해야 할 접근 방식

    • 경쟁사 사이트 – 계정을 만들고 스크린샷으로 기록
    • 패턴 모음 사이트PageFlows, Mobbin 등에서 빠르게 참고 가능
  • 일반적인 UI 패턴 메모하기

    • 이메일, 비밀번호 필드, 확인 플로우 같은 공통 UI 요소
    • 시각적 및 레이아웃 규칙:
      • 중앙 정렬된 폼
      • 반응형 디자인
      • 명확한 버튼
      • 상단 로고
  • 의도된 마찰(Friction)

    • 일부 기업은 신용카드 정보를 요구함 → 진지한 사용자 확보 전략
    • 빠른 경험이 항상 좋은 것은 아님

목표를 명확히 정의하기

  • 목표는 단순히 "가입 페이지 만들기"가 아니라 → "가입을 최대한 쉽게 만들기"
  • 질문으로 변환:

    "어떻게 하면 사용자가 가입을 쉽게 할 수 있을까?"

  • 해결책 예시

    • 비밀번호 강도를 입력 시점에 표시
    • 가입 양식을 채우는 이유 제공
  • 추가 질문

    • 가입 후 바로 로그인 vs 이메일 확인 후 로그인
    • 가입 후 확인 페이지 표시 vs 성공 메시지 표시

엣지 케이스(예외 상황) 고려하기

  • 실제 사용자는 예상대로 행동하지 않음 → 서두르고, 지침을 무시하고, 실수함
  • 질문으로 문제 발생 가능성 점검:
    • 사용자가 빠르게 입력하다가 실수하면 어떻게 될까?
    • 입력 필드에서 발생한 오류가 사용자에게 명확히 전달되는가?
  • 문제 발생 시 수정 방안

    • 비밀번호 생성 시 부주의 → 나중에 계정 잠금 가능성
      • → "비밀번호 확인 필드" 추가해 재입력 요구
    • 비밀번호 불일치 발생 시 → 오류 메시지 표시
      • → 두 번째 비밀번호 입력 시 즉시 경고 표시

AI를 사용해 UX 문제 발견하기

  • ChatGPT 같은 도구를 사용해 UX 문제 확인 가능
  • 완벽하지는 않지만 빠르고 효과적인 확인 가능
  • 유용한 프롬프트 예제

    • Red Team vs Blue Team:

      "이 가입 플로우에서 사용자가 막힐 수 있는 지점은 어디인가?"
      "이 디자인이 직관적인 이유는 무엇인가?"

    • 업계 표준:

      "상위 SaaS 회사들은 가입 플로우를 어떻게 설계하는가?"

    • 엣지 케이스:

      "사용자가 이메일을 잘못 입력했는데 알아차리지 못하면 어떻게 되는가?"

기타 UX 개선 팁

  • 측정 지표 설정
    • 전환율, 사용자 유지율, 사용자 만족도 등 → 객관적 지표로 성과 평가
  • 단순한 색상 사용
    • 기본 색상, 보조 색상, 포인트 색상 → Coolors 추천
  • 친숙한 언어 사용
    • "데이터베이스 오류" 대신 → "변경 사항을 저장할 수 없습니다"

결론

  • 스타트업에서는 속도가 중요 → 완벽주의는 금물
  • UX에서 독창성보다 사용성이 우선
    • 복잡하고 독창적인 디자인보다 직관적이고 명확한 사용자 흐름이 더 효과적
  • 핵심 가치에서만 혁신 → 나머지는 검증된 패턴 사용
  • 사용자가 이미 알고 있는 패턴을 따르면 학습 부담 감소
Hacker News 의견
  • 25년 전의 사용성 정점은 대부분의 애플리케이션이 표준 패턴을 따르는 툴바와 메뉴를 가졌을 때였음

    • 빈번한 비전문 사용자는 툴바를 사용하고, 드문 비전문 사용자는 메뉴를 통해 작업을 수행했음
    • 전문 사용자는 메뉴 레이블의 밑줄이 그어진 글자를 통해 단축키를 기억했음
    • 설정을 변경하려면 설정 대화 상자를 열고, "일반", "글꼴 및 색상" 등의 탭이 있었음
    • 당시 대부분의 사람들은 컴퓨터에 대한 지식이 적었지만, 대부분의 애플리케이션을 거의 도움 없이 사용할 수 있었음
    • 당시 목표는 사용자가 애플리케이션에 소요하는 시간을 최소화하여 작업을 효율적으로 완료하는 것이었음
    • 현대 UX는 사용자를 가능한 한 많이 "참여"시키는 것을 목표로 하며, 이는 소비자 앱에는 괜찮을 수 있지만 기업 애플리케이션에도 적용되어 문제가 됨
    • Fortune 100 회사의 비기술 직원들이 새로운 SPA가 작업 속도를 늦춘다고 불평하며 구형 터미널을 다시 요청한 사례가 있음
  • 그래픽 디자이너를 고용한 후 가장 눈에 띄는 변화는 앱/웹사이트가 더 보기 좋게 변하는 것임

    • UX는 상호작용 흐름부터 단일 기능 위젯까지 포괄하는 더 넓은 범위임
    • 대부분의 사람들은 시스템의 전체적인 UX를 예측하는 데 서투름
    • UX는 기존 솔루션을 복사하거나 새로운 것을 시도하는 방식으로 개발됨
    • 상상으로 시스템을 평가하는 것은 구현보다 훨씬 어려움
    • 백엔드 시스템 설계는 기본 원칙과 추론을 통해 오류를 예측하고 피할 수 있음
    • UX에 대한 뛰어난 직감을 가진 디자이너나 엔지니어는 매우 귀중하지만, 그런 사람을 찾기 위해 기다릴 수는 없음
  • 사용성 문제를 찾는 최고의 도구는 Gemini와 화면을 공유하고 음성으로 원하는 작업을 설명하는 것임

    • Gemini가 UI를 보고 작업을 수행하는 방법을 찾아 음성으로 클릭할 것을 알려줌
    • Gemini가 해결하지 못하면 사용성 문제가 있는 것임
  • "Jakob's Law"에 따르면 사용자는 대부분의 시간을 다른 사이트에서 보내므로, 사용자는 이미 알고 있는 다른 사이트와 동일한 방식으로 작동하기를 선호함

    • 사용자는 익숙한 제품에 대한 기대를 유사한 다른 제품으로 전이함
    • 기존의 정신 모델을 활용하여 사용자가 새로운 모델을 배우는 것보다 작업에 집중할 수 있는 우수한 사용자 경험을 창출할 수 있음
    • 변경 시 사용자가 익숙한 버전을 제한된 시간 동안 계속 사용할 수 있도록 하여 불일치를 최소화해야 함
  • 모든 제품이 동일한 방식으로 작동하는 데는 이유가 있으며, 다른 방식으로 작동하는 경우 의도적인 것인지 실수인지 자문해야 함

    • 사용자에게 익숙한 패턴과 새로운 아이디어 사이의 균형을 맞춰야 함
    • 예를 들어, Amazon의 결제 경험을 개선하려고 할 때, 익숙함의 이점을 잃을 수 있음
    • 체크박스, 라디오 버튼, 드롭다운 및 텍스트 필드를 선호하면 사용자에게 익숙한 상태 읽기 및 상태 변경 방법을 무료로 얻을 수 있음
    • "비직관적"이라는 것은 종종 "이 패턴에 익숙하지 않다"는 의미일 수 있음
  • AI를 사용하여 UX 문제를 식별할 수 있으며, ChatGPT와 같은 도구는 놓칠 수 있는 UX 문제를 강조할 수 있음

    • 완벽하지는 않지만 추측보다 나음
  • 일반적인 디자인 원칙과 사고방식에 집중할 것을 권장함

    • Donald Norman의 "The Design of Everyday Things"를 읽으면 좋은 디자인과 나쁜 디자인의 차이를 이해할 수 있음
    • Jesse Schell의 "The Art of Game Design"은 몰입감 있는 경험을 만드는 방법을 논의하며, 게임은 특히 용서받지 못함
  • 대기업들이 하는 것을 따라 하는 것은 화물 숭배 사고방식으로 이어질 수 있음

    • 시스템의 모든 부분을 왜 구축하는지 정확히 알아야 함
    • Google이 사용한 캡차가 짜증난다고 해서 따라 할 필요는 없음
    • 자신감을 가지고 개선할 수 있는 부분을 생각해야 함
  • 부트스트랩 상태에서도 UX 디자이너를 고용할 수 있으며, 이는 매우 가치 있는 투자임

    • 전임으로 고용할 필요는 없으며, 디자인 스프린트를 통해 몇 가지 개념을 설계하고 UX 워크숍을 진행한 후 선택한 옵션을 클릭 가능한 프로토타입으로 발전시키는 것이 가능함
    • 이는 프론트엔드 개발 예산에서 $5k를 절감하는 가치가 있으며, 첫 해에 사용자 유지율 증가로 $5k 이상의 이익을 가져올 것임
  • 전담 디자이너와 함께 일한 마지막 기억이 없음

    • DevOps도 비슷한 경로를 따르고 있으며, 코더들이 코드 컴파일 중에 이를 수행할 것으로 기대하는 것 같음
    • 다음은 코더들임
    • 전문가를 고용하는 것은 매우 불편함