ТОП-10 интерфейси үчүн визуалдык ыкмалар
Миссиялардын интерфейсинде үч нерсе маанилүү: максаттын ачыктыгы, прогресстин сезими жана кичинекей жеңиштердин ритми. Төмөндө - participation/completion жогорулатуу жана экран ашыкча эмес, даттанууларды азайтат он ыкмалары.
1) Прогресс-тепкич ордуна "чексиз" тилкесин
Бул эмне: T1 → T2 → Акыркы ачык босоголор жана сыйлык пункттары менен сегменттелген шкала.
Эмне үчүн: мээ үчүн үзгүлтүксүз "прогресс 63%" караганда дискреттик кадамдарды түшүнүү оңой.
Кантип тартуу керек
3-5 бөлүү, ар бир кол коюу: "T1 100 упай", "T2 300", "Final 600".
Алган сыйлыктарды түздөн-түз бөлүкчөлөрдө көрсөтүү (FS/кэш/бейдж иконалары).
бөлүү боюнча Click → "берилген/качан күйүп жатат".
A/B-идея: сөлөкөттөр менен тепкич vs кургак шкала. күтүү: + 3-5 p.p. үчүн completion T1.
2) "Канча калды" түшүнүктүү бирдикте
Бул эмне: прогресске жакын күч эквивалентин көрсөтүү: көз айнек → раунд → мүнөт.
Капоттун астындагы формула (болжол менен)
"€0,5 ≈ 6-8 мүнөттөн 120 упай ≈ 8 раунд калды".
Эрежелер
Алгач убакыт, андан кийин раунддар жана акча.
Акыркы 10-20 колдонуучунун иш-аракеттеринин медианасы боюнча эсептелинет (адаптивдик кеңештер).
Ар бир 2-3 сек, "секирик" жок.
A/B-идея: "көз айнек калган" vs "мүнөт калган". күтүү: − 10-15% эрте чыгаруу.
3) Кадам карталар (Step Cards) менен "экранда бир максат"
Бул эмне: миссиянын ар бир кадамы - чоң максаты бар өзүнчө карточка жана "Кантип эсептелет? ».
Карта курамы
Аталышы: "2-кадам 3".
Максаты: 1-сапта ("300 упай же 150 спинди чогултуу").
Прогресс: мини-тепкич/чип "180/300".
"?" баскычы → киргизилген/чыгарылган оюндарды, каптарды, мисалдарды тизмектөө.
Do: чоң шрифт, визуалдык иерархиялык контраст.
Don 't: чакан шарттар жана жылдыздар менен ашыкча.
4) OR-максаттар: үч жолдон турган визуалдык "вилка"
Бул эмне: тексттин ордуна "же/же" - үч бирдей жол баскычы (Тез Конкурс сюжет менен).
Эрежелер
Бардык үч жол бир эле учурда көрүнүп турат; активдүү жарык.
Ар бир баскычтын астында - мини ETA: "~ 8-10 мин", "1 жолу × 20", "100 спин".
Микро текст
"Ыңгайлуу жолду тандаңыз. Сиз каалаган убакта которо аласыз - прогресс сакталат".
A/B-идея: табалар vs баскычтар плиткалар. Күтүү: + 4-7 p.p. participation_net.
5) Лидборддо жана миссияларда сыйлык зоналары
Бул эмне: региондордо таблицаны/торлорду бөлүү (Top-3 / 4-10 / 11-50 / 51 +), ар бир зонанын минималдуу кепилденген сыйлыгын көрсөтүү.
Визуал
Зоналардын түс формалары; "4-10 зонасына 2400 упай калды".
Плашка "Кепилденген: FS × 10" зонада, "эрежелерди издебестен".
Пайда: "айнек шып" алып, реалдуу максатты түзөт.
6) "дем терезе" менен Таймбокс модулу
Бул эмне: активдүү фазанын визуалдык таймери (15-20 мин) + "айып пулсуз тыныгуу" картасы.
Экран
"Терезе 20:00" деген жазуу менен шакек таймер.
Аяктаганда: жумшак анимация + "Кийинчерээк келем "/" Узартуу" тандоосу (уруксат берилсе).
Билдирүү: "Тыныгуу стрикти үзгүлтүккө учуратпайт".
Таасири: Sessions/DAU өсөт, чарчоону азайтат.
7) Микро-анимация "учкундар" жана жүктөө скелеттери
Бул эмне: жылыш жана сыйлыктар менен жарык жарк/конфетти; скелеттер + маалыматтар менен жерлерде шимер.
Кыймылдар боюнча гайддар
Узундугу 200-350 мс, ease-out/ease-in-out ийри.
негизги мазмунду жаап эмес, "жарык".
Скелетондор картанын геометриясын кайталайт; 1. 2–1. 6 сек.
A/B-идея: анимация менен vs жок. күтүү: − 8-12% эрте чыгаруу, + CTR боюнча "улантуу".
8) Контекст толгон: "Кантип эсептелет?" жана "Эмне үчүн жок?"
Бул эмне: "?" сөлөкөтү формулалар, мисалдар жана көп каталар менен мини-гидди ачат.
Блок үлгүсү
"Биз ойлогондой": формула + 1 мисал.
"Капалар": ставка/мин/күн (сандар).
"Прогресс жок?" 3 себептер + оюндар/режимдер алынып шилтемелер.
Plus: кескин саппортко билеттерди азайтат.
9) Түс, контраст жана иконография (WCAG + кара тема)
Негизги эрежелер
Тексттин карама-каршылыгы минималдуу WCAG AA (4. 5:1), ири - 3:1.
түс ≠ гана маани алып жүрүүчү: сөлөкөттөрдү/үлгүлөрдү кошуу.
иконалар: 2-3 негизги түрлөрү (жылдыз - сыйлыктар, максаты - кадам/миссия, чагылган - "учкундар").
Кара тема: фон # 0F/12, "учкундар" уулуу RGB жок жаркырап турат.
Микро-көчүрмө
"Сыйлык 12 сааттан кийин күйүп кетет" - дайыма "Алуу" баскычынын жанында.
10) Бош шарттар, каталар, этикеткалар "күйүп"
Бул эмне: маалыматтар/миссиялар жок болгондо ойлонулган экрандар, жана бир нерсе туура эмес болгондо.
Бош
Иллюстрация + "Бүгүн эркин. "Күндүн менюсун" сынап көргүңүз келеби?"
"Миссияны тандоо →" баскычы (тандоого алып келет).
Каталар
"Прогрессти жаңыртуу мүмкүн болгон жок. кайталап"... + spinner ≤ 3 сек → "Дагы аракет "/" чат".
"X аркылуу күйүп" статусу картада жана сыйлыктардын тизмесинде көрсөтүлөт.
Кошумча интерфейс элементтери
"Капка жеткен" чип: "200/200 упай/саат - лимит. 00:00 өзгөртүлгөн".
Бейдж "дээрлик жетти": босогого чейин 150 упай ≤ менен сары көрсөткүч.
Өтүү оюндар: "Оюнду өзгөртүү - прогресс уланат" (анти-жашыл).
Локализация: ажырагыс боштуктары бар сандар "€1000", 24 сааттык убакыт форматы, жергиликтүү күндөрдүн аталышы.
Микро-тексттер (Сиз эле киргизе аласыз)
"€0,5 (6-8 мин) 120 упай ≈ 8 раунд калды."
"Сен зонада 11-50. Кепилденген: FS × 10. 4-10 чейин - 2400 упай"
"Cap жетти: 200 упай/саат. 00:00 өзгөртүлгөн (Europe/Kyiv)"
"Жолду тандаңыз: Тез/Мелдеш/Сюжет менен - каалаган убакта өзгөртүүгө болот."
UI эксперименттер үчүн Metrics
CTR "баштоо", participation_net, T1/T2 completion.
Behavioral: Early-exit (≤ 5 мин), time-to-T1/T2, switch-rate жолдору, тулу көрүү "?".
Сапаты: даттануулар/1k, прогрессти жаңылоо каталары, latency p95.
Баалуулугу: Δ ARPPU (net), сыйлык & бонус/активдүү, Net Uplift.
A/B-кадр (кыска)
Бирдиги: колдонуучу; sticky-assignment; стратификация (платформа/geo/payer-flag).
Гипотезалар: тепкич vs тилке; "мүнөт" vs "көз айнек"; баскычтар-жолдор vs табалар; анимация менен "учкун" vs жок.
CUPED: ковариат катары алдын ала сессия-убакыт; терезе ≥ фазалары менен 2 жума D0-D2/D3-D7.
Чек тизмеси дизайнер миссиясы
- тепкич T1 → T2 → сыйлык сөлөкөттөрү менен акыркы.
- "Канча калды" блогу мүнөт/раунддарда.
- Карталар кадам, экранда бир максат.
- OR жолдору - ETA менен үч көзгө көрүнгөн баскычтар.
- Сыйлык зоналары жана плашка "кепилденет".
- Таймбокс-таймер + "дем алуу терезеси".
- Микро-анимация "учкун", скелет/шимер.
- Тула "кантип эсептелет?" + себептери "эмне үчүн келбейт".
- Контраст/иконалар/караңгы тема; "X аркылуу күйүп кетет".
- Бош шарттар жана жакшы каталар.
Mini Case (синтетикалык)
Чейин: босогосуз прогресс тилкеси, "120 упай калды" тексти, жашыруун капкалар, жылуу бош шарттар жок.
Андан кийин: сыйлыктар менен тепкичтер, "8 раунд/6-8 мин", OR-жол баскычтары, таймбокс модулу, толук "?", "капка жетишилди", учкундар + скелеттер, сыйлык зоналары.
натыйжасы 4 жума vs башкаруу: participation_net + 6. 4 p.p., completion + 10. 8 p.p., Early-exit − 18%, даттануулар/1k − 31%, Δ ARPPU (net) + €1. 7 при Prize&Bonus/Active +€0. 5.
Миссиялардын жакшы интерфейси - бул визуалдык тартип: "саз пайыздарынын" ордуна тепкичтер, конкреттүү ишараттар, көзгө көрүнгөн сыйлыктар жана жумшак динамика. Буга жеткиликтүүлүктү, ачык толдорду, таймбокстарды жана тыкан анимацияларды кошуңуз - миссиялар узак жана кызыксыз прогресс тилкеси катары эмес, "кичинекей жеңиштердин ритми" катары иштей баштайт.