101 UX Principles

1. 사용자 공감과 객관성을 위한 디자인

공감과 객관성은 UX에서 필수적인 기술입니다.

공감은 이해를 촉진합니다. 사용자의 입장에서 생각함으로써 그들의 필요, 좌절, 목표를 예측할 수 있습니다. 이러한 통찰력은 기술적 요구사항을 충족시키는 것뿐만 아니라, 진정으로 사용자를 위한 인터페이스를 설계할 수 있게 합니다.

객관성은 명확성을 보장합니다. 개인적인 편견이나 조직의 압력에서 벗어나 비판적으로 디자인 결정을 평가할 수 있게 합니다. 이 관점은 다른 방법으로는 간과될 수 있는 결함과 개선 영역을 식별하는 데 도움이 됩니다.

공감적이고 객관적인 디자인의 주요 측면:

• 다양한 사용자 요구를 이해하기 위해 사용자 조사를 실시
• 실제 사용자와 함께 디자인을 테스트하고 피드백 반영
• 가정을 도전하고 디자인을 수정할 준비가 되어 있음
• 화려한 기능을 자랑하는 것이 아니라 사용자 문제 해결에 집중
• 내부 조직의 선호도보다 사용성을 우선시

2. 타이포그래피와 시각적 계층 구조 단순화

정보 계층 구조를 나타내기 위해 글자 크기를 사용하세요.

가독성이 최우선입니다. 제목과 본문 텍스트에 각각 하나씩 최대 두 개의 글꼴을 선택하세요. 이는 시각적 일관성을 만들고 사용자의 인지 부하를 줄여줍니다. 가능한 경우 시스템 글꼴을 사용하여 빠른 로딩과 장치 간 친숙한 외관을 보장하세요.

크기는 계층 구조에 중요합니다. 더 중요한 정보에는 더 큰 글자 크기를 사용하여 사용자의 주의를 주요 요소로 유도하세요. 이는 사용자가 인터페이스의 구조를 빠르게 스캔하고 이해하는 데 도움이 됩니다. 명확한 계층 구조를 유지하면서 사용자를 압도하지 않도록 두 개에서 세 개의 글자 크기를 목표로 하세요.

타이포그래피 모범 사례:

• 본문 텍스트의 기본 크기로 16px 사용
• 최적의 가독성을 위해 줄 간격 1.5 유지
• 텍스트와 배경 간 충분한 대비 보장 (최소 4.5:1 비율)
• 새로운 글꼴을 도입하는 대신 강조를 위해 굵게 또는 기울임 사용
• 다양한 장치 크기에서 타이포그래피가 어떻게 확장되는지 고려

3. 직관적이고 기능적인 UI 컨트롤 만들기

버튼을 버튼처럼 보이게 만드세요.

어포던스는 상호작용을 안내합니다. 기능을 시각적으로 전달하는 컨트롤을 디자인하세요. 버튼은 미묘한 그림자, 텍스처 또는 색상 차이를 통해 "클릭 가능"하게 보여야 합니다. 이는 사용자가 추측하거나 실험하지 않고도 즉시 상호작용 요소를 인식하는 데 도움이 됩니다.

일관성은 친숙함을 만듭니다. 검색 필드, 날짜 선택기, 내비게이션 메뉴와 같은 일반적인 컨트롤에 대해 확립된 패턴을 사용하세요. 이는 사용자의 기존 정신 모델을 활용하여 인터페이스의 학습 곡선을 줄여줍니다. 사용자가 익숙하지 않은 상호작용 패턴을 배우도록 강요하는 새로운 임의의 컨트롤을 발명하지 마세요.

UI 컨트롤 모범 사례:

• 쉽게 탭/클릭할 수 있도록 적절한 크기의 버튼 만들기
• 관련된 컨트롤을 논리적으로 그룹화
• 가능한 경우 시스템 네이티브 입력 컨트롤 사용 (예: 날짜 선택기)
• 사용자 상호작용에 대한 명확한 시각적 피드백 제공 (호버 상태, 활성 상태)
• 텍스트 레이블과 함께 인식 가능한 아이콘 사용

4. 양식 및 데이터 입력 최적화

좋은 양식 경험을 제공하면 사용자는 제품을 사랑하게 될 것입니다.

마찰을 최소화하세요. 양식은 종종 필요악이지만 고통스러울 필요는 없습니다. 필수 정보만 요청하여 데이터 입력을 간소화하세요. 적절한 입력 유형을 사용하고 (예: 전화번호에 숫자 키패드) 가능한 경우 자동 완성과 같은 장치 기능을 활용하세요.

신중하게 검증하세요. 사용자가 필드를 완료할 때 실시간 피드백을 제공하되, 사소한 형식 문제 (예: 신용카드 번호의 공백)에 대해 관대하게 대하세요. 사용자가 실수를 수정하는 방법을 안내하는 명확한 오류 메시지를 표시하세요. 검증 오류가 있더라도 사용자가 입력한 데이터를 항상 보존하세요.

양식 최적화 전략:

• 대부분의 양식에 단일 열 레이아웃 사용
• 관련 필드를 논리적으로 그룹화
• 각 필드에 명확하고 구체적인 레이블 제공
• 비밀번호 요구 사항을 미리 표시
• 사용자가 마스킹된 비밀번호를 일시적으로 볼 수 있도록 허용
• 전자 상거래 흐름에서 "게스트 체크아웃" 옵션 제공

5. 내비게이션 및 사용자 여정 향상

사용자는 주어진 여정의 어느 단계에 있는지 항상 알아야 합니다.

사용자를 안내하세요. 제품 내에서 현재 위치를 이해할 수 있도록 명확한 시각적 및 텍스트 단서를 제공하세요. 브레드크럼 내비게이션, 진행 표시기, 인터페이스의 다른 섹션에 대한 명확한 시각적 디자인을 사용하세요.

탈출 경로를 제공하세요. 사용자가 프로세스의 선택적 단계를 쉽게 되돌아가거나 건너뛸 수 있도록 하세요. 이는 사용자가 갇힌 느낌을 받지 않도록 하고 제품을 더 유연하게 탐색할 수 있게 합니다. 항상 '홈' 또는 시작 지점으로 돌아가는 명확한 방법을 제공하세요.

내비게이션 모범 사례:

• 제품 전반에 걸쳐 일관된 메뉴 배치 사용
• 접근성을 위해 "콘텐츠로 건너뛰기" 링크 구현
• 더 큰 사이트/앱에 대한 검색 기능 제공
• 내비게이션 항목에 대해 설명적이고 행동 지향적인 레이블 사용
• 여러 내비게이션 옵션 제공 고려 (예: 상단 메뉴 및 하단 링크)

6. 접근성과 포용성 우선

정보를 전달하는 데 색상만 사용하지 마세요.

모든 사용자를 위해 디자인하세요. 다양한 능력을 가진 사람들과 다양한 장치를 사용하는 사람들이 제품을 사용할 수 있도록 하세요. 여기에는 시각, 청각, 운동, 인지 접근성에 대한 고려가 포함됩니다. 많은 접근성 개선 사항은 더 명확하고 견고한 인터페이스를 만들어 모든 사용자에게 이익이 됩니다.

보조 기술로 테스트하세요. 스크린 리더, 키보드 내비게이션 및 기타 보조 도구를 사용하여 정기적으로 제품을 평가하세요. 이는 접근성을 개선할 수 있는 영역을 식별하고 모든 사용자를 위한 더 포용적인 경험을 보장하는 데 도움이 됩니다.

주요 접근성 고려 사항:

• 충분한 색상 대비 유지 (최소 4.5:1 비율)
• 이미지 및 아이콘에 대한 텍스트 대체 제공
• 모든 상호작용 요소에 대한 키보드 탐색 가능성 보장
• 스크린 리더 호환성을 향상시키기 위해 ARIA 레이블 및 역할 사용
• 레이아웃을 깨지 않고 텍스트 크기 조정 허용
• 의미를 전달하는 데 색상만 의존하지 않기

7. 명확하고 일관된 카피 작성

인간처럼 쓰세요.

사용자의 언어로 말하세요. 인터페이스 카피에서 전문 용어, 기술 용어, "기업어"를 피하세요. 대상 사용자가 쉽게 이해할 수 있는 명확하고 간결한 언어를 사용하세요. 이는 인지 부하를 줄이고 제품을 더 친근하게 만듭니다.

일관성을 유지하세요. 유사한 개념이나 행동을 설명할 때 제품 전반에 걸쳐 동일한 용어를 사용하세요. 이는 사용자가 인터페이스가 어떻게 작동하는지에 대한 일관된 정신 모델을 구축하는 데 도움이 됩니다. 스타일 가이드를 작성하여 제품의 다른 부분과 팀원 간의 일관성을 보장하세요.

카피 작성 모범 사례:

• 더 명확하고 직접적인 지침을 위해 능동태 사용
• 긴 텍스트 블록을 스캔 가능한 글머리 기호 또는 짧은 단락으로 나누기
• 중요한 정보를 헤드라인과 버튼 레이블에 앞부분에 배치
• "로그인"과 "회원가입" 대신 "로그인"과 "가입" 사용
• 사용자가 실수를 수정하는 방법을 안내하는 유용한 오류 메시지 제공

8. 검색 및 전자 상거래 경험 간소화

검색 결과 페이지는 가장 관련성 높은 결과를 페이지 상단에 표시해야 합니다.

관련성이 핵심입니다. 가장 관련성 높은 결과를 우선시하는 강력한 검색 기능에 투자하세요. 사용자가 찾고 있는 것을 빠르게 찾을 수 있도록 결과를 논리적인 섹션으로 분류하세요. 사용자가 검색을 세분화할 수 있도록 명확한 필터링 및 정렬 옵션을 제공하세요.

구매를 간소화하세요. 친숙함을 위해 확립된 전자 상거래 패턴을 따르세요. 구매를 완료하는 데 필요한 단계를 최소화하세요. 명확한 제품 정보, 투명한 가격, 다양한 결제 옵션을 제공하여 신뢰를 구축하고 이탈을 줄이세요.

검색 및 전자 상거래 최적화:

• 검색 쿼리에 대한 자동 완성/제안 기능 구현
• 사용자가 검색을 쉽게 수정하거나 세분화할 수 있도록 허용
• 각 카테고리의 결과 수 표시
• 게스트 체크아웃 옵션 제공
• 결제 과정에서 양식 필드 최소화
• 배송 비용 및 예상 배송 날짜를 명확하게 표시

9. 확립된 패턴과 기본값 활용

확립된 은유를 기반으로 구축하세요 – 이는 도용이 아닙니다.

친숙함은 사용성을 높입니다. 사용자는 대부분의 시간을 다른 웹사이트와 앱에서 보냅니다. 일반적인 디자인 패턴을 채택함으로써 사용자의 기존 지식을 활용하고 제품의 학습 곡선을 줄일 수 있습니다. 설득력 있는 이유가 없는 한 바퀴를 재발명하지 마세요.

스마트한 기본값을 선택하세요. 제품의 기본 설정과 옵션을 신중하게 고려하세요. 좋은 기본값은 사용자가 내려야 할 결정 수를 크게 줄여 경험을 간소화할 수 있습니다. 필요할 경우 사용자가 이러한 기본값을 쉽게 수정할 수 있도록 항상 허용하세요.

확립된 패턴 활용:

• 영감을 얻기 위해 성공적인 경쟁자와 업계 리더 연구
• 인식 가능한 아이콘 및 UI 요소 사용 (예: 햄버거 메뉴, 쇼핑 카트)
• 플랫폼별 가이드라인 따르기 (iOS Human Interface Guidelines, Material Design)
• 일반적인 제스처 및 상호작용 구현 (줌 확대/축소, 새로 고침 당기기)
• 파괴적인 작업에 대해 쉽게 접근할 수 있는 "실행 취소" 옵션 제공

10. 사용자 시간과 노력을 존중

사용자 입력 데이터를 명시적으로 요청하지 않는 한 절대 지우지 마세요.

사용자 입력을 소중히 여기세요. 사용자가 생성한 데이터나 콘텐츠를 최대한 존중하세요. 명시적인 확인 없이 사용자 입력 정보를 절대 삭제하지 마세요. 적절한 경우 자동 저장 기능을 구현하여 실수로 인한 데이터 손실을 방지하세요.

효율성을 최적화하세요. 사용자가 목표를 빠르고 최소한의 노력으로 달성할 수 있도록 인터페이스를 설계하세요. 여기에는 키보드 단축키 제공, 일괄 작업 제공, 사용자 선호도를 기억하여 반복 작업을 줄이는 것이 포함됩니다.

사용자 시간과 노력을 존중하는 전략:

• 피드 스타일 콘텐츠에 대해 "무한 스크롤" 구현, 그러나 위치로 돌아가는 방법 제공
• 다단계 프로세스에 대한 명확한 진행 표시기 제공
• 복잡한 작업을 저장하고 재개할 수 있도록 허용
• 반복 작업에 대한 일괄 작업 제공
• 비동기 로딩 및 낙관적 UI 업데이트를 사용하여 속도감을 제공
• 키보드 사용자를 위한 "콘텐츠로 건너뛰기" 링크 구현

마지막 업데이트 날짜: August 22, 2024