CTA 버튼 및주의 영역
1) CTA와 원칙의 역할
1. 화면 당 하나의 주요 단계. 1 차 CTA는 분명하고 독특해야합니다.
2. 맥락 → 행동. CTA에 대한 간단한 "다음에 일어날 일" 설명이 항상 있습니다.
3. 침략이없는 가시성. 화려한 효과 대신 충분한 크기의 텍스트와 읽을 수있는 텍스트를 대조하십시오.
4. 일관성. 모든 화면에서 동일한 CTA가 동일하게 동작합니다.
5. 보안. 위험한 CTA에는 확인 또는 취소가 수반됩니다.
2) CTA 계층 구조
기본-핵심 페이지 동작 ("내기 배치", "탑업", "확인"). 1 pc.
이차 - 대체 또는 보조 단계 ("세부 사항", "변경 방법").
3 차-시각적 무게가 가장 낮은 텍스트/유령 버튼.
파괴적-별도의 스타일 (색상/경고 아이콘) + 확인/실행 취소.
규칙: 화면에 하나 이상의 "강력한" CTA가있는 경우 목표가없는 선택이 가능합니다. 흐름을 재 설계하십시오.
3) 카피 라이팅 CTA
동사 + 객체, 2-4 단어: "내기 배치", "균형을 보충", "한계 설정".
구체적으로: "출력 2,000 °" 은 "보내기" 보다 낫습니다.
이중 부정 ("취소하지 마십시오") 및 모호한 은유를 피하십시오.
위험한 조치의 경우-1 줄 제목: "확인없이 5 초를 취소 할 수 있습니다".
4) 치수, 모양, 대비
최소 클릭 영역: 44 × 44 px (터치), 32 × 32 px (데스크탑).
단추 높이: 40-48 px; 반경 10-12 px; 인터넷. 수평 들여 쓰기 16-20 px.
텍스트 대 배경 대비: WCAG AA; 색상에만 의존하지 마십시오-아이콘/라벨을 사용하십시오.
양/계수에 대한 표 숫자: '글꼴 변형 숫자: 표-수치; '.
5) 상태 및 피드백
호버/포커스/액티브-가시적이고 구별 가능합니다 (포커스 링은 숨기지 않습니다).
바쁜 (로딩): 즉각적인 응답은 100 ms이며 "침묵" 대신 스피너/스켈레톤입니다.
비활성화: "회색" 뿐만 아니라 사용 가능한 이유를 설명하십시오 (툴팁/인라인 힌트).
실행 취소/확인: 파괴적인 CTA의 경우-확인 모달 또는 실행 취소 5-10 초가있는 패널.
html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>6) 주의 영역 (데스크톱) 및 엄지 영역 (모바일)
시선 패턴: F 패턴/Z- 패턴, 핫스팟: 왼쪽 상단 (제목), 오른쪽 상단 (보조), 화면 하단 (마무리).
기본 CTA 호스트:- 짧은 화면의 굽힘 위나 시선의 형태 하단에서
- 모바일 하단의 "끈적 끈적한" 패널 (엄지 영역).
- 모바일 "엄지 손가락": 화면의 하단 1/3이 더 편리하고 오른쪽/왼쪽 가장자리가 지배적 인 손에 따라 다릅니다 (기본적으로 하단 중앙/오른쪽).
html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>
<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>7) 배치 및 침입
공백 공간 (16-24 px) 을 가진 보조 요소와 1 차 CTA를 분리하십시오.
서로 옆에 두 개의 기본을 두지 마십시오. 하나는 "거짓" 선택입니다.
형태: 마지막 필드 후 CTA; 2 차 - 왼쪽/아래 CTA ("뒤로", "취소").
카드/타일: 오른쪽 하단 CTA; 긴 목록-각 카드의 인라인 CTA.
8) 애니메이션 및 모션 패턴
입력/출력: 120-180ms, '불투명도/변환' (레이아웃 쉐이크 없음).
보도 효과: 96-98% + 그림자로 축소 → "클릭이 느껴집니다".
"성공" 의 경우: 짧은 체크-마이크로 애니메이션 감소 운동-정적 아이콘.
끝없는 깜박임 효과 (책임있는 플레이를위한 패턴 방지) 를 피하십시오.
9) A11y 및 키보드
네이티브 '<단추>' 에서는 'role = "button"' 이 필요하지 않습니다.
초점 링이 보입니다. 탭 순서는 논리적입니다. 입력/공간은 CTA를 활성화합니다.
'아리아 바쁜' 부츠; 상태에 대해서는 라이브 지역 'role = "상태" 를 사용하십시오.
단추 텍스트는 SR입니다. 아이콘 - 'aria-hidden = "참" 과 함께 유일한 의미의 캐리어는 아닙니다.
10) 측정 및 실험
CTR CTA, 클릭 후 변환, 클릭마다 타임 투 클릭.
스크롤 깊이 → 클릭: "굽힘 위 "/" 굽힘 아래" 에서 발생한 클릭 비율.
히트 맵 영역 (데스크톱/mob); 엄지 손가락 (mob).
위험한 CTA의 실행 취소/취소 속도.
A/B: 텍스트, 색상/대비, 크기, 위치, 끈적 끈적한 패널 대 정적 배치.
11) 디자인 시스템 토큰 (예)
json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}12) iGaming 패턴
베팅 (1 차): 양과 계수를 나란히 표시하십시오. 지연> 3 초- "확인을 기다리는 중"... + 안전 재시도.
예금: 끈적 끈적한 CTA 하단 모바일 화면 ("보충"), 2 차- "변경 방법"; 근처에 눈에 띄는 수수료/마감일.
현금 인출: CTA는 경기/쿠폰 화면에서 캡처됩니다. 항상 현재 현금 금액을 보여줍니다. 실행 전 확인.
한도 설정: CTA는 공격적이지 않습니다. 근처- "효력을 발휘할 것입니다".... AAA 대비, 깜박임이 없습니다.
토너먼트: 토너먼트 카드의 CTA "가입" + 2 차 "규칙/상".
13) 안티 패턴
근처의 2 차 CTA (Bet and Buy Bonus) 는인지 경쟁입니다.
"회색" 은 설명없이 비활성화되었습
끝없는 관심 애니메이션과 윙크.
마크 업을 변경하고 초점을 맞추는 버튼.
CTA는 굽힘 아래에있는 큰 "장식" 보다 낮습니다.
중요한 장소에서 텍스트 대신 (레이블없이) 아이콘.
14) 분석 스 니펫
js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});15) QA 체크리스트
의미와 계층 구조
- 화면에 정확히 하나의 기본 CTA가 있습니다. 이차는 무게가 충돌하지 않습니다.
- CTA의 텍스트는 이중 부정없이 명확합니다. 근처-다음에 일어날 일.
가용성
- 포커스 링 참조; 입력/공간 작업; 부팅시 '아리아 바쁜'.
- 텍스트/배경 대비 아이콘 만이 의미를 갖는 것은 아닙니다.
행동
- 인스턴트 응답 실패에 대한 바쁜 상태 및 재시도.
- 위험한 사람들의 경우 확인 또는 취소.
- Sticky-CTA는 모바일에서 올바르게 스틱되며 컨텐츠와 겹치지 않습니다.
숙박
- 엄지 손가락 영역 (mob) 또는 가시선 (데스크탑) 의 CTA.
- 인접한 요소에서 충분한 들여 쓰기 (16-24 px).
측정 항목
- CTR, 클릭 후 변환, 클릭 시간, 실행 취소율이 제거됩니다.
- 텍스트/색상/크기/위치 실험이 있습니다.
16) 설계 시스템의 문서
"ButtonPrimary", 'ButtonSecondary', 'ButtonGhost', 'StickyCTA', 'UndoBar'.
크기/대비/애니메이션 토큰, 카피 라이팅 예.
패턴: "화면 당 하나의 기본", "모바일의 끈적 끈적한", "위험 확인/실행 취소".
실제 화면과 열지도가있는 갤러리를하지 마십시오.
간략한 요약
CTA는 목적, 장소 및 의미가있을 때 작동합니다. 하나의 주요 단계, 명확한 텍스트, 충분한 대비, 주의/엄지 영역의 올바른 위치 및 정직한 피드백. 디자인 시스템에서이를 캡처하고 동작을 측정하며 클릭은 실수와 자극없이 자신감 있고 고의적 인 동작으로 바뀝니다.