Popularny wynik. Mały detal UX, o który warto było zawalczyć
W typerze piłkarskim wynik jest tylko dwiema cyframi. Dla użytkownika te dwie cyfry są jednak decyzją, porównaniem z innymi i – po meczu – krótką odpowiedzią na pytanie: „czy tylko ja tak typowałem?”.
Przy nowej odsłonie konkursu typerskiego na Mistrzostwa Świata 2026 zależało mi, żeby interfejs nie kończył się na poprawnym wpisaniu wyniku. Chciałem dodać dwa niewielkie elementy: „popularny wynik” przed rozpoczęciem meczu oraz informację, ile osób trafiło, gdy wynik był już znany.
Stary widok robił swoje, ale nie budował emocji
Poprzednia wersja pozwalała wybrać wynik i zapisać typ. Funkcjonalnie wszystko się zgadzało. Ekran był jednak przede wszystkim formularzem – mecze tworzyły zwartą siatkę, a reakcja społeczności pozostawała niewidoczna.
Użytkownik wpisywał wynik w izolacji. Nie wiedział, jaki rezultat wybierają inni, a po zakończeniu spotkania nie dostawał informacji, czy jego trafienie było częste, czy wyjątkowe.
Mały detal, o który trzeba było zawalczyć
Pomysł wyglądał niepozornie, ale wymagał uzgodnienia z PM-em, redaktorem i developerem. Każda dodatkowa informacja oznacza pytania o dane, miejsce w komponencie, zachowanie przed i po meczu oraz koszt wdrożenia.
Broniłem tego rozwiązania nie jako dekoracji, lecz jako elementu pętli zaangażowania. Typowanie sportowe jest społeczne: chcemy porównywać swoje przeczucia z grupą, nawet jeśli robimy to bez rozmowy z innymi użytkownikami.
„Popularny wynik” przed meczem
Pod polem typowania pojawił się najczęściej wybierany rezultat. To krótka podpowiedź i punkt odniesienia – nie odbiera użytkownikowi decyzji, ale pokazuje, jak myśli społeczność.
Moja rekomendacjaDodawaj kontekst społeczny tam, gdzie użytkownik podejmuje decyzję.
Wystarczy jedna spokojna linia tekstu. Ważne, aby nie sugerowała poprawnej odpowiedzi i nie konkurowała wizualnie z główną akcją.
„Ile osób trafiło” po meczu
Po zakończeniu spotkania potrzeba użytkownika się zmienia. Nie wybiera już wyniku, tylko ocenia swój typ. Dlatego w finalnym widoku MŚ2026 przy kartach pojawia się liczba osób, które trafiły rezultat.
To drobna nagroda informacyjna. Wynik „+3 pkt” mówi, co zdobyłem. Informacja „26 trafiło” mówi, jak moje trafienie wygląda na tle innych. Razem budują pełniejszą odpowiedź.
Przed meczem pokazujemy najpopularniejszy typ, a po meczu liczbę trafień. Ten sam obszar komponentu odpowiada na inną potrzebę zależnie od etapu wydarzenia.
Dlaczego użytkownicy to docenili?
- Dostali natychmiastowy punkt odniesienia dla swojego typu.
- Po meczu mogli porównać trafienie z zachowaniem całej grupy.
- Karty przestały być wyłącznie formularzem i zaczęły opowiadać historię turnieju.
- Dodatkowe dane nie wymagały nauki nowej funkcji ani kolejnego kliknięcia.
Najważniejsza lekcja z projektu
UX często nie wygrywa jednym dużym ekranem. Wygrywa serią małych decyzji, które pojawiają się dokładnie wtedy, gdy użytkownik ich potrzebuje. Czasem najwięcej pracy wymaga nie narysowanie elementu, ale przekonanie zespołu, że jedna linia danych naprawdę zmienia odbiór produktu.
WniosekProjektant powinien być adwokatem drobnych informacji zwrotnych.
Jeśli element pomaga użytkownikowi zrozumieć swoją decyzję, porównać ją lub poczuć rezultat działania, warto o niego zawalczyć – nawet gdy na makiecie zajmuje kilkanaście pikseli.
Discover Polish: od oficjalnej strony do marki bliższej młodszym odbiorcom
Strona szkoły językowej może być wiarygodna bez wyglądania jak urzędowy folder. W redesignie Discover Polish chciałem zachować doświadczenie i międzynarodowy charakter instytutu, ale opowiedzieć o nich językiem bliższym młodszym odbiorcom.
Punkt wyjścia: oficjalnie, ale bez jasnej drogi dalej
Poprzedni hero opierał się na długiej, instytucjonalnej nazwie oraz galerii zdjęć. Taki układ informował, czym jest organizacja, ale słabiej odpowiadał na podstawowe pytania nowego użytkownika: czego mogę się tu nauczyć, dlaczego warto i co mam zrobić teraz?
Wiarygodność była budowana głównie oficjalnym tonem. Brakowało szybkiej obietnicy wartości, widocznego działania i dowodów zaufania dostępnych bez przewijania.
Nowy kierunek: mniej instytucji, więcej możliwości
Nagłówek skróciłem do komunikatu „Odkryj język polski. Otwórz się na nowe możliwości.” Zamiast zaczynać od pełnej nazwy organizacji, nowa wersja zaczyna od korzyści dla odbiorcy. Instytucjonalny charakter nadal jest obecny, ale schodzi na drugi plan.
Hero zyskał asymetryczny układ, wyraźną hierarchię oraz ilustrację budynku jako element charakterystyczny dla miejsca. Formy i akcenty kolorystyczne nawiązują do identyfikacji Discover Polish, a dalszym kierunkiem systemu są miękkie ikony 3D inspirowane bryłą i charakterem logo.
Moja rekomendacjaNie usuwaj wiarygodności – zmień sposób, w jaki ją pokazujesz.
Młodszy odbiorca nadal chce wiedzieć, że trafia do doświadczonej organizacji. Lepiej podać mu konkret: 15+ lat, studenci z ponad 5 krajów i ocena 5.0, zamiast budować autorytet samą oficjalną nazwą.
Więcej elementów w hero, ale każdy ma zadanie
Nowy pierwszy ekran jest bogatszy, jednak nie chodziło o dekorowanie. Każdy element odpowiada na inne pytanie użytkownika:
- Nagłówek mówi, jaka zmiana czeka odbiorcę.
- Krótki opis wyjaśnia formę nauki – stacjonarnie i online.
- Przycisk „Formularz kontaktowy” daje bezpośrednią drogę do rozmowy.
- Trzy karty pokazują doświadczenie, międzynarodową społeczność i efekty.
- Ocena Google wzmacnia przekaz opinią innych osób.
- Ilustracja i kierunek ikon 3D pomagają odejść od urzędowego charakteru.
CTA nie może być nagrodą za cierpliwe przewijanie
W poprzednim widoku użytkownik oglądał opis oraz galerię, ale nie dostawał wyraźnej sugestii kolejnego kroku. W redesignie kontakt jest dostępny w menu i powtórzony bezpośrednio w hero.
To szczególnie istotne na stronie usługowej. Osoba zainteresowana kursem nie powinna analizować całej architektury witryny, żeby zapytać o poziom, termin lub formę zajęć.
Hero łączy emocjonalną obietnicę, konkretną ofertę, dowody zaufania i następny krok. Dzięki temu młodsza forma nie oznacza utraty profesjonalizmu.
Co naprawdę zmieniło charakter strony?
Największą różnicę zrobiła nie jedna ilustracja ani jeden kolor, ale zmiana kolejności komunikacji. Najpierw odbiorca i jego możliwości, później instytut. Najpierw proste działanie, później szczegóły. Najpierw konkretne dowody, później rozbudowana opowieść o marce.
WniosekRedesign dla młodszej grupy nie powinien polegać wyłącznie na „młodszym stylu”.
Potrzebuje krótszych komunikatów, szybszej ścieżki do działania, współczesnych form wizualnych i konkretów, które można zrozumieć w kilka sekund.