Widget meczu - BartoszRobi.pro

01 · Problem

Obecny widget myli, co jest klikalne

W widgecie są cztery linki: przycisk „Obstaw” i trzy kafle kursów. Element, który najbardziej wygląda na przycisk, linkiem nie jest.

Obecny widget, light — Obecnie · light, okno 724 px

Obecny widget, dark — Obecnie · dark, okno 724 px

„Kurs: 2.05” wygląda jak przycisk, a nim nie jestTa sama ciemna pigułka co przycisk pod spodem. W kodzie to zwykły blok bez linku.88 × 34 px · brak linku · kursor domyślny

Jedyne CTA jest najsłabszym elementem sekcji„Obstaw w Superbet” ma kolor pigułki kursu i jest niższe niż kafle pod spodem.196 × 37 px · zalecane minimum 44 px

Kafle 1 / X / 2 obiecują wybór zakładuWyglądają jak dodanie typu do kuponu, a wszystkie trzy prowadzą na tę samą stronę rejestracji co CTA.41 px wysokości · 4 linki, 1 adres

Trzy tła dzielą kartę na trzy osobne kartyBiałe, kremowe i granatowe tło w jednym widgecie. Nie widać, czy klikalna jest cała sekcja, czy element w środku.

W dark nazwy drużyn i godzina znikająCiemny tekst stoi na ciemnym bloku, a sam blok wygląda jak baner do kliknięcia.kontrast 1,04:1 · wymagane 4,5:1

W dark data i „VS” są poniżej normyTekst pomocniczy ma 11-12 px i za niski kontrast, więc przegrywa z tłem.3,88:1 i 3,68:1

02 · Druga wersja na stronie

Wersja Hiszpania - Czechy poprawia dark, ale nie klikalność

Nowsza wersja widgetu ma czytelne nazwy drużyn (kontrast 16,96:1) i jedną ciemną powierzchnię. Problem z tym, co wygląda na przycisk, został.

Widget Hiszpania - Czechy, dark — Obecnie · Hiszpania - Czechy, desktop, dark

„Kurs: 2.00” nadal wygląda jak przyciskPigułka dostała żółtą ramkę, więc czyta się jak przycisk drugorzędny nad głównym. W kodzie to dalej blok bez linku.108 × 30 px · brak linku

CTA ma własny kolor, ale tekst jest za słabyBiały napis na pomarańczu nie spełnia normy kontrastu, a przycisk wciąż jest niższy niż 44 px.240 × 42 px · tekst 13 px · kontrast 3,19:1

Kafle kursów zmalały, a kurs jest najmniejszym tekstemNajważniejsza liczba ma mniejszy font niż oznaczenie 1 / X / 2. Wszystkie linki prowadzą pod jeden adres.78 × 36 px · kurs 11 px, etykieta 13 px

Hierarchia w bloku meczu jest odwróconaNajwiększym tekstem jest stadion, potem drużyny, a godzina jest najmniejsza.stadion 16 px · drużyny 14 px · godzina 12 px

Długi typ ze skrótem zajmuje trzy linieSkrót „rz.rożnych” bez spacji utrudnia szybkie przeczytanie typu.15 px · 3 linie · 280 px

03 · Propozycja

Jedna reguła: kształt przycisku ma tylko link

Wypełnienie, ramkę i zaokrąglenie 12 px dostaje wyłącznie to, co da się kliknąć. Informacje o meczu to płaski tekst bez kształtu.

Propozycja widgetu: karta meczu, typ z CTA, kafle kursów i widok na telefonie

AKurs stoi na przycisku„Obstaw w Superbet · kurs 2.05 →” to jeden cel kliknięcia zamiast pigułki i przycisku.Znika fałszywy przycisk, a kurs trafia tam, gdzie się klika.

BJedna reguła kształtuWypełnienie, ramka i zaokrąglenie 12 px oznaczają link. Reszta to tekst.Wzorzec czyta się jednym spojrzeniem w obu motywach.

CWiększe cele dotykuCTA ma 52 px i pełną szerokość na mobile, kafle 56-58 px.Obecne 37 i 41 px są poniżej zalecanych 44-48 px.

DKafle mówią, co oznaczają„1 · Anglia”, „X · Remis”, „2 · Czechy”, na desktopie ze strzałką.Nie trzeba znać zapisu 1X2, a strzałka zapowiada przejście.

ELogo Superbet raz, w nagłówku kursówZamiast powtarzać je w każdym kaflu.Marka jest widoczna, ale nie konkuruje z kursami. Karta mobile o 28 px niższa.

FDark ma własną paletęCiemne tło karty, jasne teksty, żółte kursy.Każdy tekst ma kontrast co najmniej 5,7:1. Dziś drużyny mają 1,04:1.

GGodzina zamiast „VS”Między flagami stoi godzina, pod nią data z dniem tygodnia.Godzina jest informacją, „VS” nie. Środek karty czyta się szybciej.

HFont strony: RobotoWidget używa tego samego fontu co artykuł, w wagach 500-800.Karta czyta się jako część strony, nie wklejony baner.

04 · Liczby

Przed i po

Wartości „dziś” są zmierzone na stronie, wartości propozycji pochodzą z projektu.

Co mierzymyDziśPropozycja

Elementy wyglądające jak przycisk bez linku1w obu wersjach0

Wysokość CTA „Obstaw”37 px42 px w wersji Hiszpania - Czechy52 px

Wysokość kafli kursów41 px36 px w wersji Hiszpania - Czechy56-58 px

Najniższy kontrast tekstu1,04:1nazwy drużyn w dark5,7:1tekst pomocniczy w light

Wysokość karty, mobile496 px488 pxo 8 px niższa

Wysokość karty, desktop koszt308 px335 pxo 27 px wyższa

Na mobile karta jest niższa mimo większych przycisków, bo znikają pigułka kursu i „VS”. Na desktopie rośnie o 27 px - to cena większych celów dotyku.

05 · Na co uważać

Długie nazwy drużyn Kafel na mobile mieści około 10 znaków nazwy. Przy dłuższych trzeba sprawdzić, czy się mieszczą, i w razie potrzeby skrócić, np. „Bośnia i Herc.”.

06 · Jak sprawdzimy efekt

CTR przycisku „Obstaw”: kliknięcia do wyświetleń widgetu, przed i po.CTR kafli 1X2, osobno dla każdego kafla.Kliknięcia w elementy bez linku na heatmapie - po zmianie powinny zniknąć.Udział kliknięć z mobile, gdzie cele dotyku rosną najbardziej.Test A/B obecnej i nowej wersji na artykułach z typami.

Wszystkie projekty→