빈 상태 및 UX 힌트

1) 빈 상태가 필요한 이유

• 왜 비어 있는지 설명합니다
• 다음에해야 할 일을 보여줍니다
• 안전한 첫 단계를 제공합니다
• 불안을 줄이고 지원 시간을 절약하십시오.

2) 빈 상태의 타이폴로지

1. 처음-사용자는 아직 아무것도하지 않았습니다.
2. 제로 데이터-엔터티가 생성되지 않거나 목록이 비어 있습니다.
3. 필터/검색 (결과 없음) -조건은 모두 제외되었습니다.
4. 오류/임시 사용할 수 없음-네트워크/서버이지만 데이터는 원칙적입니다.
5. 권리/제한 없음-액세스가 거부되고 QAS/역할/제한이 필요합니다.
6. 유지 보수-계획된 작업, 대기.

3) 빈 카드 구조

아이콘/일러스트레이션 (과부하 금지; 대비 AA).
한 줄 제목: "여기 비어 있습니다".

이유/문맥: "아직 추가하지 않았습니다... "/" 필터가 일치하지 않습니다. "

1-2 작업 (CTA): 1 차 (주요 시나리오), 2 차 (대체).
구조에 연결하십시오 (선택 사항).
페이지 레벨: 일반적인 탐색 및 필터를 유지하십시오-화면을 막 다른 골목으로 바꾸지 마십시오.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) 톤과 텍스트 (UX 카피 라이팅)

분명하고 친절합니다. "오류 0x"... 를 피하십시오

이유 → 행동. "VIP 필터는 모든 항목을 제외했습니다. 필터를 재설정하시겠습니까?
죄책감이 없습니다. 공허함에 대해 사용자를 비난하지 마십시오.
하나의 생각, 하나의 문장.
현지화: 문화적 은유를 피하십시오. 텍스트 길이의 책갈피 + 20-30%.

5) 삽화 및 비주얼

중립, 눈에 거슬리지 않는; 어두운 주제에서 그림의 가벼움을 증가시킵니다.
그림을 의미의 유일한 매체로 사용하지 마십시오.
스케일이 수정되었습니다. 그리드 나 기준선을 끊지 마십시오.

6) CTA 및 대안

기본 CTA는 다음 단계입니다 (생성/입금/구독).
이차- "데모", "가져 오기", "재설정 필터" 참조.
선택 한계: 최대 2 CTA; 나머지는 "More" 에 있습니다.
위험/지불로-결과 및 취소에 대한 투명한 텍스트.

7) 시나리오 별 빈 상태

7. 1 첫 실행

3-5 단계의 하이드 체크리스트: "결제 방법 추가", "공급자 선택".
버튼 + 가이드 링크를 건너 뛰십시오.

7. 2 데이터 없음

비어있는 + CTA 생성/가져 오기 이유에 대한 간단한 설명.
힌트: "CSV를로드 할 수 있습니다" (템플릿에 링크).

7. 필터/검색 3 개

활성화된 필터와 "재설정" 단추를 보여줍니다.
근접 경기 또는 대체 쿼리를 제안하십시오.

7. 4 오류/사용할 수 없음

"우리는 문제에 직면했다. 나중에 "+" 재시도 "/" 시스템 상태 "를 다시 시도하십시오.