빈 상태의 UX 피드백
1) 빈 상태와 필요한 이유
빈 상태는 기본 컨텐츠가없는 화면/위젯입니다. 첫 번째 작업 전에, 청소 후, 결과가 없거나, 다운로드 오류가 있거나, 권한/액세스가없는 상태입니다.
빈 상태 대상:- "왜 여기가 비어 있는지" 설명;
- 섹션의 값을 보여줍니다.
- 다음 단계를 명확하게 제안하십시오 (또는 선택할 수있는 것 이상)
- 불안을 줄이고 손질을 예방하십시오.
좋은 빈 상태 = 컨텍스트 + 혜택 + 동작.
2) 빈 상태 유형학
1. 처음 비어 있음-사용자는 아직 아무것도 만들거나 구성하지 않았습니다.
2. 제로 검색/필터: 쿼리는 결과를 반환하지 않았습니다.
3. 임시 공허: 데이터가로드되거나 대기열이 실행 중입니다.
4. 제한/오른쪽: 액세스 금지, 불충분 한 검증 수준.
5. 사용자 클리어: 재활용 빈/히스토리 클리어.
6. 기술적 문제: 네트워크/서비스 장애, 재 트레이.
3) 디자인 원칙
상황성: 우리는 공허함의 특정 이유에 대해 이야기하고 있습니다.
가치 → 행동: 먼저이 섹션에서 무엇을해야합니까?
하나의 주요 CTA: 필요한 경우-보조 (자세한 내용/FAQ).
간결성과 특이성: 1-2 문장 + 명확한 버튼.
시각적 지원: 아이콘/일러스트레이션은 의미를 지원하지만주의를 산만하게하
막 다른 골목을 피하기: 항상 앞으로 나아갈 길이 있습니다.
톤 일관성: 친절하고 차분한; 중요한 단계 (지불, 보안) 에 농담이 없습니다.
A11y 및 현지화: 화면 판독기에서 읽을 수 있으며 올바르게 기울어 져 있으며 회선의 길이를 고려합니다.
4) 빈 상태 프레임 (템플릿)
제목 (선택 사항, 1 줄) -청구 값 또는 이유.
텍스트 (1-2 문장) - "왜 비어 있습니까?" + "다음 단계".
기본 CTA가 주요 목표 조치입니다.
이차 ACS/링크-도움말/규칙/문서.
비주얼 (선택 사항) -24-96 px의 쉬운 그림으로 과부하가 걸리지 않습니다.
5) 스크립트 패턴
5. 1 온보드/첫 번째 0
목표: 첫 번째 성공적인 행동으로 이어집니다.
텍스트: "개인화 된 권장 사항을 보려면 프로필을 작성하고 리드를 선택하십시오".
CTA: 포퓰레이션 프로필/셀렉트 리드.
팁: 마이크로 포스/시간 표시기 추가: "~ 1 분이 걸립니다".
5. 2 검색/필터 = 결과 제로
목적: 요청 조정에 도움이됩니다.
텍스트: "아무것도 찾을 수 없음" 라이브 블랙 잭. "블랙 잭" 을 시도하거나 "공급자: X" 필터를 제거하십시오 "
CTA: "재설정 필터" 보조: "열린 디렉토리".
5. 3 지불/지갑 비워
목표: 방법 추가/첫 번째 보충을 자극합니다.
텍스트: "결제 방법 저장-리필 및 인출이 더 빨라집니다".
CTA: "지불 방법 추가" 보조: "규칙 및 수수료".
5. 4 검증/액세스
목적: 제한 및 철수 경로를 투명하게 설명하십시오.
텍스트: "이 섹션은 신원 확인 후 사용할 수 있습니다. 일반적으로 최대 2 분이 걸립니다. "
CTA: "확인" 보조: "왜 필요합니까?"
5. 운송 중 5 데이터/임시 공허
목표: 불안 대기를 줄이는 것.
텍스트: "데이터 수집. 일반적으로 최대 30 초가 걸립니다. 페이지를 남길 수 있습니다-모든 것이 준비되면 알려 드리겠습니다. "
CTA: "이해할 수있는" 보조: "다음은 어떻게됩니까?"
5. 청소/제거 후 6
목표는 행동을 확인하고 다음 단계를 제안하는 것입니다.
텍스트: "역사가 지워졌습니다 다음 리필 후에 새로운 거래가 나타날 것입니다. "
CTA: "탑업".
5. 7 오류/재 트레이
목표: 명확한 회복 경로.
텍스트: "데이터를로드하지 못했습니다. 네트워크를 확인하거나 다시 시도하십
CTA: "반복" 보조: "시스템 상태".
6) 마이크로 텍스트: 기성품 템플릿
첫 번째 0 (디렉토리/즐겨 찾기):- "첫 번째 게임을 추가하면 선택된 게임이 여기에 나타납니다. [즐겨 찾기에 추가] "
- "{query}" 에 대해서는 아무것도 발견되지 않았습니다. 요청을 허가하거나 필터를 재설정하십시오. [재설정 필터] "
- "아직 저장된 방법이 없습니다. 결제 속도를 높이기 위해 카드 나 지갑을 추가하십시오. [방법 추가] "
- "연령 확인 없이는이 기능을 사용할 수 없습니다. 내가 어떻게 해야할지 모르겠어 [확인 연령] [왜?] "
- "우리는 지난 24 시간 동안 통계를 세고 있습니다... 일반적으로 최대 30 초입니다. 완료되면 알림이 표시됩니다. "
- "서비스를 사용할 수 없습니다. 우리는 이미 수리 중입니다. 나중에 시도하거나 상태를 확인하십시오. [반복] [시스템 상태] "
7) 시각 언어 및 삽화
CTA와의 논쟁을 피하기 위해 가벼운 흑백/투톤 일러스트레이션을 사용하십시오.
콘텐츠 카드 (시각적 일관성) 와 같은 차원 및 들여 쓰기.
스트레스가 많은 시나리오 (지불/보안) 에서 유머러스 한 장면을 묘사하지 마십
8) 현지화 및 가용성
라인 길이 (DE/TR 이상) 의 재고를 넣으십시오.
숫자 형식, 통화, 로컬 날짜.
스크린 리더의 경우: 역할 = "상태", aria-live = 역학에 대한 "정치/주장".
이미지에만 의미를 두지 마십시오: 텍스트와 함께 중복하십시오.
320 px 가독성 및 WCAG 대비를 확인하십시오.
9) 측정 및 실험
주요 지표:- 메인 빈 CTA의 CTR;
- "첫 번째 성공" (활성화 이벤트) 으로의 전환;
- 첫 번째 행동의 시간
- 진행없이 화면으로 돌아 오는 빈도;
- 검색 결과 0의 백분율
- 시나리오 지원을 요구합니다.
- 구체적인 대 공통 헤더;
- CTA 동사 대 중립;
- 시간 견적 추가
- 보조 CTA (FAQ) 의 존재 및 버튼의 순서;
- 시각적 인 그림 대 아이콘 vs.
10) 반 패턴
설명이나 단계없이 "여기에 비어 있습니다".
중요한 단계 (지불, 보안) 에서 농담.
문맥없이 더 많은 CTA를 배우십시오.
패시브 리엔: "추가해야합니다. "적극적으로 쓰기:" 추가 "....
긴 단락: 최대 1-2 문장.
형태의 라벨 대신 장소 보유자-A11y와 이해를 악화시킵니다.
숨겨진 제약 조건 (지연이 가능하지만 "즉시").
11) 시험판 점검표
- 왜 비어 있는지 분명합니까?
- 한 문장의 섹션에 가치가 있습니까?
- 하나의 주요 CTA가 있고 필요한 경우 2 차 CTA가 있습니까?
- 텍스트가 짧고 (약 140 자) 구체적입니까?
- 적절한 경우 추가 시간/노력 추정치?
- 톤 일치 스크립트 (고정/지원)?
- 현지화 및 A11y 확인 (aria 속성, 대비)?
- 이미지가 CTA를 지배하지 않습니까?
12) 예 전/후
게임 카탈로그 (First Zero)
이전: "아직 아무것도 없습니다"
후에: "테이프를 수집하십시오. 좋아하는 장르 3 개를 선택하십시오-추천을 시작합시다. [장르 선택] "
제로 검색
이전: "아무것도 찾지 못했습니
"" 고제한 룰렛 "으로 결과가 없습니다. "고제한" 필터를 제거하거나 룰렛을 사용해보십시오. "[재설정 필터]"
지불
이전: "지불 방법 없음"
이후: "카드 나 지갑을 저장하십시오-보충 및 인출이 더 빨라집니다. [방법 추가] [수수료 및 용어] "
검증
이전: "액세스 없음"
이후: "이 섹션은 신원 확인 후 제공됩니다. 내가 어떻게 해야할지 모르겠어 [검증] [왜 중요한가] "
13) 디자인 시스템에 포함
UI 키트에 소품이 포함 된 EmptyState 구성 요소를 추가하십시오
'제목' (문자열, 선택 사항)
'본문' (짧은 텍스트 1-2 문장)
'프라이 머 액션 {레이블, 온클릭}'
'secondaryAction {레이블, href/onck}'
'아이콘/일러스트레이션' (선택 사항)
구성 요소 옆에 i18n 파일로 텍스트를 저장하고 키와 설명을 유지 관리하며 톤 맵 (상황에 대한 톤 및 어휘) 을 연결합니다.
14) 빠른 생성자 (복사 및 사용)
패턴 1 - 첫 번째 0:- 헤드 라인: "첫 단계로 시작"
- 텍스트: "관심사를 선택하자마자 권장 사항이 있습니다".
- CTA: "리드 선택"
- 이차: "어떻게 작동합니까?"
- 텍스트: "{query}" 에서 찾은 것이 없습니다. 필터를 초기화하거나 쿼리를 개선하십시오. "
- CTA: "재설정 필터"
- 이차: "카탈로그"
- 텍스트: "연령 확인 후 사용 가능한 기능. 보통 최대 2 분입니다. "
- CTA: '확인 연령'
- 이차: "왜 필요합니까?"
- 텍스트: "우리는 하루 동안 데이터를 수집합니다. 일반적으로 최대 30 초입니다. 언제 끝났는지 알려 드리겠습니다. "
- CTA: "좋은"
최종 치트 시트
컨텍스트 + 값 + 동작-하나의 "스택".
시각적 무게에 경쟁이없는 하나의 주요 CTA.
짧고 구체적인: 1-2 문장.
항상 곤경에서 벗어나는 길: 막 다른 골목 화면이 없습니다.
현지화 및 A11y는 구성 요소 수준에 있습니다.