[도서] UX 디자인의 모든 것

1. UI 구성 요소와 디자인 패턴

• 어포던스 : 행동 유도성, 사용자가 행동을 이해할 수 있도록
• 버튼
  • 구성 요소 : 컨테이너(버튼을 구성하는 영역), 레이블, 아이콘, 그림자, 아웃라인
  • 상태
    • 디폴트 default/normal/enabled : 기본 상태, 누를 수 있는 상태
    • 호버 hover : 데스크톱에서, 마우스나 팬 포인터가 위에 올라간 상태
    • 프레스드 pressed : 누른 상태
    • 포커스 focus : 입력장치를 통해 선택된 상태
    • 비활성 disabled/inactive : 비활성화 상태. 선택이 불가능한 상태
    • 로딩 loading/progress : 버튼을 누른 후 로딩이 진행 중인 상태
  • 고스트 버튼 : 배경색이 없고, 버튼의 레이블과 아웃라인 색을 일치시킨 버튼
  • 텍스트 버튼 : 누를 수 있는 텍스트, 본문의 텍스트와 다른 색상을 사용하여 구분해 주는 것이 좋음
  • CTA call to action : 행동을 유도하기 위한 버튼
  • 파괴적 버튼 destructive button : 되돌리기 어렵거나 불가능한 경우에 사용하는 버튼. 삭제/취소 등
  • 방어적 버튼 위치 : 의도하지 않은 최종 결정/반영을 방지하기 위해 중요한 버튼을 빈도가 적은 곳에 배치(실수방지)
  • 토글 버튼 toggle button, toggle switch : 상태가 2가지로 구분될 때 사용하는 버튼, 디폴트 상태 존재
  • 라디오 버튼 radio button : 여러 개의 선택지 중 하나를 택할 때 , 3개 이상일 경우 사용. 레이블은 짧고, 명료하게
  • 체크박스 버튼 : 여러 항목 중 1개 이상 선택 가능, 레이블 영역이 터치 영역에 포함돼야 함
  • 플로팅 버튼 floating action button : 보통 우측 하단에 오버레이 형태로 보임
• 팝업 : 화면 위에 뜨는 ui 구성 요소
  • 모달 : 경고창이나 프롬프트 등의 알림 창, 사용자의 행동을 반드시 요구함
  • 모달리스 : 다른 구성 요소와 상호작용을 막지는 않음
• 토스트 : 경고/알림/상태 변경 등을 알리기 위해 사용. 사용자의 행동이 시스템에 반영되었다는 것을 알려줌
• 캐러셀 carousel
  • 사용자가 좌우로 스와이프/인덱스 버튼/화살표 버튼을 눌러 슬라이드처럼 콘텐츠를 전환할 수 있는 구성요소
  • 구조 : 콘텐츠, 탐색 버튼, 인덱스
  • 예시 : 상단 이벤트 배너에서 주로 이미지 콘텐츠에 활용
• 네비게이션 navigation
  • 웹
    • GNB global navigation bar : 브라우저 상단
    • SNB side navigation bar : 브라우저 좌우측
    • FNB foot navigation bar : 브라우저 하단
  • 안드로이드
    • Top App Bar : 앱 스크린 상단
    • Bottom Toolbar : 앱 스크린 하단
  • ios
    • navigation bar : 앱 스크린 상단
    • side bar : 좌측
    • tap bar : 앱 스크린 하단
• 푸터 footer : 페이지 하단에 정적으로 표시된 비즈니스 정보, 링크 등
• 툴팁 tooltip : 특정 구성 요소를 설명하기 위해 나타나는 구성요소
• 페이지네이션 pagination : 게시판 형태의 구조에서 콘텐츠 탐색을 위해 사용
• 스켈레톤 skeleton : 콘텐츠 로딩 표시
• 텍스트필드
  • 구조 : 1줄만 입력가능한 형태=input field, text field, 여러 줄 입력가능한 형태=textarea
  • 상태
    • 디폴트 : 기본 상태
    • 호버 : 마우스 등을 위에 위치시킨 상태
    • 포커스 : 입력 장치로 선택된 상태
    • 타이프 : 입력이 활성화된 상태
    • 채워짐 : 입력된 상태
    • 에러 : 규칙에 어긋난 값/형태로 입력된 상태
    • 성공 : 적절하게 입력된 상태
• 검색바
  • 동의어 사전
  • 연관 검색어
  • 검색 가중치 : 형태소(의미 최소 단위) 별로 분리하여 가중치에 따라 검색
  • 인기 검색어

 

2. 페이지

• 스플래시 : 모바일 앱에서의 첫 로딩 화면
• 랜딩 : 서비스를 이해하고 참여할 수 있도록 (소개)하는 페이지
• 로그인
  • 구성 요소 : 아이디, 비밀번호, 로그인 버튼, 회원가입 버튼, 아이디 및 비밀번호 찾기
  • 소셜 로그인
  • 에러표시, 로봇 감지(captcha), 상태 기억
• 회원가입
  • 필수값과 옵션값
  • 입력값 보존
• 찾을 수 없는 페이지 = 404에러

 

3. 사용성 검증과 평가

1) A/B 테스트

• 준비
  • 사용자를 두 집단으로 분류
  • 그룹 분류, 동질성, 동일 시간, 하나의 변수, 반복 강화 고려
• 핵심 지표 : CTA 클릭률, 적절한 세션 시간, 재방문율, 사용자 참여도, 기간 내 방문자, 방문자 당 세션 수

2) 린 UX : 작은 테스트를 하면서 점진적으로 개선, 발전시키는 전략

3) 휴리스틱 평가 heuristic evaluation

• 제한적인 정보만을 가지고 빠르게 추론하는 방법
• 제이콥 닐슨의 10가지 휴리스틱 평가
  • 시스템 상태를 표시
  • 시스템과 현실의 일치
  • 사용자의 제어와 자유
  • 일관성과 기준
  • 오류 방지
  • 회상보다는 인식
  • 사용의 유연성과 효율성
  • 미적이고 미니멀한 디자인
  • 에러를 인식하고 진단, 복구하도록 지원
  • 도움말과 문서

4) 행동 흐름 : 사용자가 핵심 활동으로 가는 여정 살피기

 

4. 그밖에

• 표현 : 사용자와 상호작용 시 표현 일관성 필요함. 구어체, 문어체
• 에러 표시 : 사용자의 실수인지, 시스템에 문제인지, 에러가 무엇인지 알려줘야 함
• 색상 팔레트 : 적절한 수의 색상 활용이 바람직함
• 빈 화면 대응 : 리스트에서 데이터가 없는 경우에 대비하여 디자인이 필요함
• 뒤로 가기 반응 : 필요에 따라서 상태를 일부 저장하는 것이 필요할 때가 있음
• 엣지 케이스 edge case : 사용자들의 다양한 입장/상황을 고려해야 함
• 기타 : 오프라인 대응, 브릭포인트(디바이스 화면 크기 별 대응), 화면 회전, 접근성 가이드라인

 

 

 

 

 

 

출처 :