미션 인터페이스를위한 TOP-10 시각적 기술
미션 인터페이스에서 세 가지 중요한 것은 목적의 명확성, 진보 감 및 작은 승리의 리듬입니다. 다음은 화면 과부하없이 참여/완료를 늘리고 불만을 줄이는 10 가지 트릭입니다.
1) "끝없는" 스트립 대신 진행 사다리
그것이 무엇인지: 명시 적 임계 값과 보너스 포인트가있는 세그먼트 된 T1 → T2 → 최종 스케일.
이유: 뇌가 지속적인 "63% 진행" 보다 이산 단계를 이해하는 것이 더 쉽습니다.
그리는 방법
3-5 부서, 각각 "T1 100 포인트", "T2 300", "Final 600".
수신 된 보상을 틱 마크 (FS/캐시/배지 아이콘) 에 직접 표시하십시오.
분할 → 팝업을 클릭하십시오. "그들이 준 것/화상을 입었을 때".
A/B-idea: 아이콘과 드라이 스케일이있는 사다리. 대기: + 3-5 p.p. 완료하려면 T1입니다.
2) 이해할 수있는 단위로 "남은 금액"
무엇입니까: 진행 상황 옆에 우리는 노력과 동등한 것을 보여줍니다: 포인트 → 라운드 → 분.
후드 언더 포뮬러 (약)
"120 포인트는 €0의 8 라운드를 남겼습니다. 5 약 6-8 분 ".
규칙
처음으로 라운드와 돈.
마지막 10-20 명의 사용자 동작의 중앙값을 읽으십시오 (적응 프롬프트).
"점프" 없이 2-3 초마다 업데이트하십시오.
A/B 아이디어: "안경에 남음" 대 "몇 분 안에 남았습니다. "대기: 초기 출구의 -10-15%.
3) "화면 당 하나의 대상" 이있는 스텝 카드
그것이 무엇인지: 각 임무 단계는 큰 목표와 버튼이 "어떻게 계산됩니까?" ».
카드 구성
제목: "2 단계 3".
목표: 1 줄 ("300 포인트 또는 150 스핀 수집").
진행 상황: 미니 래더/" 180/300 "칩.
버튼 "?" → 포함/제외 게임, 캡, 예의 목록.
큰 글꼴, 시각적 계층 적 대비.
하지 말아야 할 것: 작은 조건과 별표가있는 과부하.
4) 또는 대상: 세 경로의 시각적 "포크"
텍스트 "또는/또는" 대신 3 개의 동일한 경로 버튼 (플롯과의 빠른 경쟁).
규칙
세 경로 모두 동시에 표시됩니다. 활성 강조.
각 버튼 아래 - mini-ETA: "~ 8-10 분", "1 시간 × 20", "100 스핀".
마이크로 텍스트
"편리한 길을 선택하십시오. 언제든지 전환 할 수 있습니다. 진행이 계속됩니다. "
A/B 아이디어: 탭 대 버튼 타일. 대기: + 4-7 p.p. 참여 _ net.
5) 리더 보드 및 미션의 보상 영역
무엇입니까: 테이블/그리드를 영역 (Top-3/4-10/11-50/51 +) 으로 나누고 각 영역의 최소 보상 보상을 표시하십시오.
비주얼 학습자
영역의 컬러 플레이트; 플레이어의 위치 근처- "2400 포인트가 존 4-10으로 남았습니다".
"규칙을 보지 않고" 영역에서 "보장: FS × 10" 플레이트.
혜택: "유리 천장" 을 제거하고 현실적인 목표를 형성합니다.
6) "호흡 창" 이있는 Timebox 모듈
무엇입니까: 활성 단계 (15-20 분) 의 시각적 타이머 + "페널티없이 일시 정지" 카드.
화면
링 타이머는 "창 20:00" 에 서명했습니다.
결국: 소프트 애니메이션 + "나중에 다시 오십시오 "/" 확장" (허용되는 경우) 을 선택하십시오.
메시지: "일시 정지는 행진을 방해하지 않습니다".
효과: 세션/DAU를 올리면 피로가 줄어 듭니다.
7) 마이크로 애니메이션 "스파크" 및 스켈레톤 로딩
이것들은 무엇입니까: 진보와 보상이있는 가벼운 섬광/색종이; 데이터가있는 곳에서 골격 + 빛납니다.
운동 가이드
200-350ms 기간 동안 곡선은 쉽게 벗어날 수 있습니다.
기본 컨텐츠와 겹치지 말고 "하이라이트" 하십시오.
해골은 카드의 형상을 반복합니다. 쉬머 1. 2–1. 6 초
A/B 아이디어: 애니메이션과없는. 기다림: 초기 출구의 -8-12%, + CTR이 "계속"
8) 컨텍스트 툴라: "어떻게 계산됩니까?" "왜 오지 않습니까?"
무엇입니까: "?" 대상 옆의 아이콘은 공식, 예 및 빈번한 오류가있는 미니 가이드를 엽니 다.
템플릿 차단
"우리는 어떻게 계산합니까?": formula + 1 예.
"캡": 요율/분/일 (숫자).
"진행하지 않습니까?" 제외 된 게임/모드에 대한 3 가지 이유 + 링크.
또한 지원할 티켓이 크게 줄어 듭니다.
9) 색상, 대비 및 도상 (WCAG + 다크 테마)
기본 규칙
텍스트 대비 최소 WCAG AA (4. 5:1), 큰 - 3:1.
색상 www의미의 유일한 매체: 아이콘/패턴 추가.
아이콘: 2-3 기본 형태 (별-보상, 목표-단계/임무, 번개- "스파크").
어두운 테마: 배경 # 0F/12, 유독 한 RGB없이 "스파크" 가 빛납니다.
마이크로 저작권
"보상은 12 시간 안에 타게됩니다" -항상 "Get" 버튼 옆에 있습니다.
10) 빈 상태, 오류, 라벨 "화상"
그것이 무엇인지: 데이터/미션이없고 상황이 잘못되었을 때 사려 깊은 화면.
비어 있습니다
일러스트 + "오늘은 무료입니다. 오늘의 메뉴를 사용해보고 싶습니까? "
→ 미션 버튼을 선택하십시오 (선택으로 이어짐).
실수
"진행 상황을 업데이트하지 못했습니 우리는 "... + 스피너를 반복합니다. 3 초 →" 더 많은 것을 시도하십시오 "/" 채팅 ".
"Burn through X" 상태는 수상 카드 및 수상 목록에 표시됩니다.
추가 인터페이스 요
모자가 칩에 도달했습니다: "200/200 포인트/시간-제한. 00: 00에 재설정하십시오. "
배지는 "거의 도달" 했습니다.
게임 전환: "게임 변경-진행이 계속됩니다" (갈기 방지).
현지화: 깨지지 않는 공간 "€1,000", 24 시간 시간 형식, 로케일 별 요일 이름이있는 번호.
마이크로 텍스트 (그대로 삽입 할 수 있음)
"120 포인트는 €0의 8 라운드를 남겼습니다. 5 (6-8 분) ".
"당신은 11-50 구역에 있습니다. 보장: FS × 10. 최대 4-10-2,400 포인트 "
"모자에 도달했습니다: 시간당 200 포인트. 00:00 (유럽/키예프) "
"경로를 선택하십시오: 빠른/경쟁/줄거리로-언제든지 변경할 수 있습니다".
UI 실험을위한 메트릭
깔때기에 대한 UI 영향: CTR "시작", 참여 _ net, T1/T2 완료.
행동: 조기 종료 (λ5 분), 타임 투 T1/T2, 스위치 속도 경로, "?" 도구.
품질: 불만/1k, 진행 상황 업데이트 오류, 대기 시간 p95.
가치: 차지 ARPPU (순), 상 및 보너스/활성, 순 향상.
A/B 프레임 (짧음)
단위: 사용자; 끈적 끈적한 할당; 층화 (플랫폼/geo/payer-flag).
가설: 사다리 대 차선; "분" vs "포인트"; 버튼 경로 대 탭; "스파크" 애니메이션과 없음.
CUPED: 공변량으로서의 세션 전 시간; D0-D2/D3-D7 단계를 갖는 2 주 이상의 창.
미션 디자이너 점검표
- 사다리 T1 → T2 → 수상 아이콘이있는 최종.
- 분/라운드에서 "얼마나 남아 있는지" 블록.
- 스텝 카드, 화면 당 하나의 대상.
- 또는 경로-ETA가있는 3 개의 가시적 인 버튼.
- 보상 구역과 "보증" 으로 죽습니다.
- 타임 박스 타이머 + 호흡 창.
- 마이크로 애니메이션 "스파크", 스켈레톤/쉬머.
- "어떻게 계산됩니까?" + 이유 "왜 가지 않는가".
- 대조/아이콘/어두운 테마; "X를 통해 화상을 입을 것이다".
- 빈 상태와 자비로운 실수.
미니 케이스 (합성)
이전: 임계 값이없는 진행 표시 줄, 텍스트 "120 포인트 남음", 숨겨진 마우스 가드, 따뜻한 빈 상태가 없습니다.
이후: 상을받은 계단, "8 라운드/6-8 분", OR 경로 버튼, 타임 박스 모듈 ",?", "캡에 도달했습니다", 스파크 + 스켈레톤, 수상 구역.
4 주간의 결과 대 통제: 참여 _ net + 6. 4 pp, 완료 + 10. 8 pp, 조기 종료 -18%, 불만/1k-31%, 차량 ARPPU (순) + €1. 7 보너스 & 보너스/액티브 + €0. 5.
좋은 미션 인터페이스는 시각적 훈련입니다. "백분율 늪" 대신 단계, 특정 노력 단서, 눈에 띄는 보상 및 부드러운 역학. 접근성, 투명한 툴라, 타임 박스 및 깔끔한 애니메이션을 추가하면 미션이 길고 지루한 진보가 아닌 "작은 승리의 리듬" 으로 작동하기 시작합니다.