ミッションインターフェイスのビジュアルテクニックをTOP-10する
ミッションインターフェイスでは、目的の明確さ、進歩感、小さな勝利のリズムという3つのことが重要です。以下は、参加/完了を増やし、画面を過負荷にすることなく苦情を軽減する10のトリックです。
1)「無限」のストリップの代りの進歩梯子
それは何ですか:明示的なしきい値とアワードポイントを持つセグメント化されたT1→T2→最終スケール。
理由:継続的な「63%進行」よりも、脳が離散的なステップを理解する方が簡単です。
どのように描画するか
3-5部門、それぞれに署名:「T1 100ポイント」、「T2 300」、「ファイナル600」。
受け取った報酬をティックマーク(FS/cache/badgeアイコン)に直接表示します。
ディビジョン→ポップアップをクリックします「彼らが与えたもの/それが燃えるとき」。
A/Bアイデア:アイコン付きラダーとドライスケール。待機中:+3-5 p。p。完了T1。
2)わかりやすい単位で「どれくらい残っているか」
それは何ですか:進捗状況の横には、努力と同等のものが表示されます:ポイント→ラウンド→分。
フードの下の方式(およそ)- "残り120ポイント≈ €0の8ラウンド。5 ≈ 6-8分"
[ルール]
初めて、次にラウンドとお金。
最後の10-20ユーザーアクションの中央値(アダプティブプロンプト)を読んでください。
「ジャンプ」なしで、2〜3秒ごとに更新します。
A/Bアイデア:"眼鏡で左"対"分で左。"待っています:早期出口の10-15%を−します。
3)「画面ごとに1つのターゲット」を持つステップカード"
それは何ですか: 各ミッションステップは、大きな目標とボタンを備えた個別のカードです?».
カードコンポジション
タイトル:「Step 2 of 3」。
目標:1ライン(「300ポイントまたは150スピンを集める」)。
進行状況:ミニラダー/」180/300「チップ。
ボタン「?」→含まれている/除外されたゲームのリスト、キャップ、例。
Do:大きなフォント、視覚的な階層的なコントラスト。
Don 't:小さな条件とアスタリスクでオーバーロード。
4)またはターゲット: 3つのパスの視覚的な「フォーク」
それは何ですか:テキストの代わりに「or/or」-3つの等しいパスボタン(プロットとのクイック競争)。
[ルール]
3つのパスはすべて同時に表示されます。アクティブにハイライトされています。
各ボタンの下-mini-ETA: 「~ 8-10分」、「1回× 20」、「100スピン」。
マイクロテキスト
"便利な道を選びなさい。いつでも切り替えることができます-進捗状況は継続されます"
A/Bアイデア:タブとボタンタイル。待機中:+4-7 p。p。 participation_net。
5)リーダーボードとミッションの報酬ゾーン
それは何ですか:テーブル/グリッドをゾーン(Top-3/4-10/11-50/51+)に分割し、各ゾーンの最低保証報酬を表示します。
ビジュアル学習者
ゾーンのカラープレート;プレイヤーの位置の近く-「ゾーン4-10に左2400ポイント」。
Plate 「Guaranteed: FS × 10」ゾーンの右、「look in the rules」。
利点:「ガラス天井」を取り除き、現実的な目標を形成します。
6)「呼吸窓」が付いているTimeboxモジュール"
それは何ですか:アクティブ相の視覚タイマー(15-20分)+「ペナルティなしの一時停止」カード。
[スクリーン]
リングタイマーは「ウィンドウ20:00」に署名しました。
最後に:ソフトアニメーション+「後で戻ってきてください「/」拡張」(許可されている場合)を選択します。
メッセージ: 「一時停止はストリークを中断しません。」
効果:セッション/DAUを上げ、疲労を軽減します。
7)マイクロアニメーション「火花」およびスケルトンのローディング
これらは何であるか:進歩および報酬の軽い点滅/confetti;スケルトン+データのある場所でのシマー。
モーションによるガイド
デュレーション200-350ミリ秒、カーブの容易さ/容易さ。
メインコンテンツをオーバーラップせず「、ハイライト」してください。
スケルトンはカードのジオメトリを繰り返します。シマー1。2–1.6秒。
A/Bアイデア:アニメーション対なし。待機:早期出口の− 8-12%、+CTRは「続行」する。
8)文脈的トゥーラ: 「それはどのようにカウントされますか?」「どうして来ないの?」
それは何ですか:ターゲットの横にある「?」アイコンは、数式、例、頻繁なエラーを含むミニガイドを開きます。
ブロックテンプレート
"How do we count':数式+1の例。
「キャップ」:レート/分/日(数字)ごとに。
「進歩していませんか?」3理由+除外されたゲーム/モードへのリンク。
プラス:サポートするチケットを大幅に削減します。
9)カラー、コントラスト、アイコノグラフィー(WCAG+ダークテーマ)
基本的なルール
テキストコントラスト最小WCAG AA (4。5:1)、大-3:1。
色≠意味の唯一の媒体です:アイコン/パターンを追加します。
アイコン:2-3基本的なフォーム(星-報酬、目標-ステップ/ミッション、雷-「火花」)。
暗いテーマ:背景#0F/12、有毒なRGBのない「火花」輝き。
マイクロ著作権
「報酬は12時間で燃えます」-常に「取得」ボタンの横にあります。
10)空の状態、エラー、ラベル「書き込み」
それは何ですか:データ/ミッションがないとき、および物事が間違っているときに思慮深い画面。
それは空です
イラスト+"今日は無料です。今日のメニューを試してみたいですか?"
[ミッション]ボタンを選択します(選択につながります)。
Misses(ミス)
"進捗状況の更新に失敗しました。"……+spinner ≤ 3 sec→"Try more"/"Chat"を繰り返します"
ステータス「Burn through X」がアワードカードとアワードリストに表示されます。
その他のインターフェイス要素
帽子は破片に達しました: "200/200ポイント/時間-限界。00:00にリセットします"
バッジ「ほぼ到達」:150 ≤がしきい値を指すときに黄色のインジケータ。
ゲームのトランジション:「ゲームを変更する-進捗状況は継続されます」(アンチグラインド)。
ローカライズ:非破壊空間を持つ数字「€1,000」,24時間形式、ロケール別の日の名前。
マイクロテキスト(そのまま挿入可能)
"残り120ポイント≈ €0の8ラウンド。5(6-8分)
"あなたは11-50ゾーンにいる。保証: FS × 10。アップ4-10-2,400ポイント"
"キャップに達しました: 200ポイント/時間。00:00(ヨーロッパ/キエフ)にリセット"
「パスを選択してください: 高速/競争/プロットで-いつでも変更できます。」
UI実験のメトリック
ファネルへのUIの影響:CTR「開始」、participation_net、 T1/T2完了。
行動:早期終了(≤ 5分)、time-to-T1/T2、スイッチレートパス、表示「?」ツール。
品質:苦情/1k、進捗アップデートエラー、レイテンシーp 95。
Value: Δ ARPPU (net)、 Prize&Bonus/Active、 Net Uplift。
A/Bフレーム(ショート)
単位: ユーザー;sticky-assignment;stratification (platform/geo/payer-flag)
仮説:はしご対レーン;「分」と「点」;button-paths vsタブ;「火花」アニメーション対なしで。
CUPED:共有としてのプレセッション時間;≥のフェーズで2週間のウィンドウをD0-D2/D3-D7します。
ミッションデザイナーのチェックリスト
- はしごT1→T2→賞品アイコンで決勝。
- 「どれくらい残っているか」ブロックを数分/ラウンドでブロックします。
- ステップカード、1画面につき1つのターゲット。
- ORパス-ETAを使用した3つの可視ボタン。
- 報酬ゾーンと死ぬ「保証」。
- タイムボックスタイマー+呼吸ウィンドウ。
- マイクロアニメーション「スパーク」、スケルトン/シマー。
- 「それはどのように数えますか?」+理由「なぜ行かない」。
- コントラスト/アイコン/暗いテーマ;「Xを通して燃える」
- 空の状態と慈悲深い間違い。
ミニケース(合成)
前に:しきい値のないプログレスバー、テキスト「120ポイント左」、隠されたマウスガード、暖かい空の状態。
After: 「8ラウンド/6-8分」、OR-paths-buttons、 timebox module「、?」,「キャップに達しました」、火花+スケルトン、アワードゾーン。
4週間対制御の結果: participation_net+6。4 pp、完了+10。8 pp、早期終了− 18%、 苦情/1k − 31%、 Δ ARPPU (net)+€1。7賞金&ボーナス/アクティブ+€0。5.
良いミッションインターフェイスは視覚的な規律です。「パーセンテージ沼」の代わりにステップ、特定の努力の手がかり、目に見える報酬、およびソフトダイナミクス。アクセシビリティ、明確なチュラ、タイムボックス、きちんとしたアニメーションが追加され、ミッションは「小さな勝利のリズム」として機能し始めます。