인터페이스 프롬프트 및 도우
1) 왜 필요한가
단서와 도우미는 다음과 같은 경우인지 부하 및 오류율을 줄입니다
실제로 필요할 때 문맥에 나타납니다
짧고 구체적이며 마케팅없이
주요 시나리오를 차단하지 않고 가용성을 존중하지 마십시
2) 도구 맵 및 사용시기
규칙: 중요한 내용-힌트뿐만 아니라 시야와 인터페이스 텍스트에서.
3) 배치 패턴 및 트리거
동작 전에: 도우미 텍스트/인라인 힌트 ("비밀번호는 8 자리").
행동 순간: 초점/호버/롱 프레스가있는 툴팁/코치 마크.
조치 후: 결과와 링크 "More" 에 대한 설명이있는 토스트/배너.
의도적으로: '?', 'i', "details", "소 +/" (명령 팔레트) 로 표시합니다.
4) 카피 라이팅
하나의 생각, 하나의 문장. 동사로 시작하십시오 ("Choose"..., "Fill"...).
오류 없음: "필터는 모든 항목을 제외했습니다. 필터를 재설정하시겠습니까?
추정치 대신 숫자와 사실: "위원회 1. 5–2%».
중요: 보장되지 않는 한 정확한 시간을 약속하지 마십시오.
5) 가용성 (A11y)
툴팁: 'role = "tultip"', 트리거와 'aria-describby' 를 통한 통신; 키보드를 통해 사용 가능합니
알림 블록: 'role = "state"' (polite), 오류- 'role = "경고"'.
Coachmark/Tour: 'Esc' 순서대로 초점이 닫히고 다시 소스에 집중하십시오.
텍스트 대비, AA; 힌트는 의미의 유일한 운반자가 아닙니다.
html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>6) 관리 및 "위생" 표시
중복 제거-세션 당 동일한 메시지를 N 번 이상 표시하지 마십시오.
주파수 제어: 코치 마크/투어의 경우 냉각 24 시간; 사용자에게는 알림이 없습니다.
도구는 경쟁하지 않습니다. 코치 마크를 통해 툴팁을 열지 말고 그 반대도 마찬가지입니다.
진행 상황의 기억: 투어의 완료된 단계는 더 이상 제공되지 않습니다.
7) 양식에 도움말 텍스트
"당신이 잘못한 것" 이 아니라 규칙을 "통과하는 방법" 을 쓰십시오.
옆에있는 형식의 예: 'DD. MM. YYYY ',' user @ domain. tld '.
복잡한 필드의 경우 - "예" 버튼 (작은 스 니펫/마스크를 엽니 다).
검증 및 도우미는 충돌하지 않습니다. 오류로 인해 도우미는 짧은 "수정 방법" 으로 바뀝니다.
html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>8) 명령 팔레트 및 작업 별 검색
방아쇠: '
팔레트에서: 아이콘과 핫키가있는 동작 ("Bet... — ⏎»).
상태 머신: 즉시 탐색/실행, "취소" - 'Esc' 동작을 선택할 때.
9) AI 도우미/부조종사
양식/용어 힌트 ("베이거 란 무엇입니까? "), 적용하기 전에 변경 사항 목록이있는 드래프트 필 필드.
민감한 시나리오 (지불/요율) 의 경우 설명 및 확인 목록 만 사용자에게 결정이 남아 있습니다.
자신의 문서/FAQ를 가르치십시오. 정적 개선을 위해 질문을 기록하십시오.
10) iGaming의 세부 사항
규칙 및 한계: 버튼 옆에 눈에 띄는 도우미 "베팅 배치", "캐쉬 아웃", "제한을 설정하십시오. "명확한 언어와 예.
KYC/AML: 단계별 팁 (문서, 확인 날짜, 다음에 일어날 일).
토너먼트: 카드- "포인트 부여 방법" (툴팁/인라인 힌트) 에서 "규칙" 을 링크하십시오.
지불: 수수료/마감일 및 "검증이 필요한 이유" 에 대한 도우미.
책임감있는 플레이: 눈에 띄지 않지만 눈에 띄는 "일일 한도 설정" 프롬프트 (AAA 대비, 깜박임 없음).
11) 성능 및 포지셔닝
가벼운 애니메이션 '불투명도/변환' 180ms, 더 빠릅니다.
소스에 위치하면 가장자리에서 4-8 px, 자동 플립이 이동합니다.
수백 개의 프롬프트에서 DOM 트리를 만들지 마십시오. 초점/호버로 게으르게 마운트하십
'선호 감소 운동' 을 고려하십시오: 반짝이는 대신 정적 프롬프트.
12) 측정 및 실험
CTR 팁 (인상 → STA/" More "클릭).
도우미 대 제어를 통한 형태의 오류/실패 감소.
빈/투어 후 첫 성공 시간.
프롬프트 숨기기/거부 (음수 신호-텍스트/표시 모멘트를 덮어 쓰기).
명령 팔레트/AI 도우미에서 인기있는 쿼리 로그.
13) 디자인 시스템 토큰 (예)
json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }14) 실현: 코치 마크와 "생각 나지 않음"
html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>15) 반 패턴
CTA를 닫거나 초점이 겹치는 힌트.
툴팁/호버에서만 중요한 정보.
나중에 건너 뛰지 않고 10 단계 이동.
특히 어두운 모드에서 반짝이는/점프 단서.
"농담" 과 실수와 한계에 대한 문화적 은유.
책임있는 연주를위한 공격적인 색상과 사운드.
16) QA 체크리스트
가용성
- 키보드에서 사용 가능한 툴팁/코치 마크, 'Esc' 닫힘, 포커스 리턴.
- AA를 대조하면 텍스트는 색상 만 무관합니다.
행동
- 힌트는 중요한 요소와 겹치지 않으며 소스에 배치됩니다.
- 인상 중복이 있고 알림하지 마십시오.
- 애니메이션은 180ms, 더 빠릅니다.
의미
- 텍스트가 구체적이고 짧으며 CTA가 적절합니다.
- 예는 공식/제한으로 제공됩니다.
측정 항목
- CTR, 성공 시간, 가죽의 비율이 제거됩니다.
17) 설계 시스템의 문서
차이나: '헬퍼 텍스트', '인라인 힌트', '툴팁', '코치 마크', 'ProductTour', 'DocsLink', 'CommandPalette', 'AiHelper'.
크기/시간/톤 토큰, ARIA 가이드 및 카피 라이팅 예.
빈번한 시나리오를위한 템플릿 (KYC, 한도, 지불, 토너먼트, 베팅).
실제 화면으로 갤러리를하지 마십시오.
간략한 요약
도우미는 정시, 상황 및 불필요한 드라마가 없을 때 좋습니다. 짧고 접근 가능하며 검증 가능한 힌트를 제공하고 인상의 초점과 빈도를 존중하며 설계 시스템의 토큰과 패턴을 수정하십시오. 따라서 사용자는 특히 민감한 iGaming 시나리오에서 실수를 저지르고 결과를 더 빨리 얻을 가능성이 적습니다.