Dlaczego tworzenie stron internetowych mobile first to błąd.

Przeglądając stronę w pracy, na swoim wielkim 12” ekranie starasz się zrozumieć niekończące się przewijane treści przecinane grubymi segmentami koloru tła, bo przecież treść musi oddychać. Przewijasz rekordowe ilości, tylko po to aby w kolejnych wierszach przeczytać po jednym zdaniu i przejść do następnego, zapominając co było w poprzednim.

Całość jest okraszona wspaniałomyślnością ogromnych zdjęć z podpisem, elementami rozwijającymi – tylko po to, aby po ich kliknięciu dowiedzieć się jakie dany produkt ma wymiary, a kolejne żeby sprawdzić, ile waży. Po całości czujesz się jak po przebiegnięciu maratonu ale palcami po kółku przewijania myszką.

Mobile first brzmi jak złoty standard, ale w praktyce często zamienia strony w pustynię treści. Zamiast tworzyć doświadczenia dopasowane do użytkownika, projektanci ślepo gonią za modą. W efekcie na desktopie dostajemy powiększoną wersję strony na telefon – z ogromnymi odstępami, schowanym menu i treściami, których nie da się połączyć w logiczną całość.

Dlaczego tak się dzieje?

Bo ktoś kiedyś stwierdził, że świat kończy się na ekranie telefonu i trzeba wszystko projektować „mobile first”. Efekt? Strona na komputerze wygląda jakby była na siłę rozciągniętą wersją aplikacji mobilnej – mnóstwo pustego miejsca, treści rozbite na maleńkie porcje, wielkie zdjęcia „dla efektu” i zero logiki w układzie.

W połączeniu z trendem minimalizmu dostajemy pustynię z przypadkowymi drogowskazami: co kilka ekranów znajdziesz fragment treści, ale nim dotrzesz do następnego, już nie pamiętasz, co było wcześniej.

Mobile first to podejście, które dobrze brzmi na konferencjach, ale w praktyce często prowadzi do takich właśnie absurdów. W imię zasad sku… „lekkości” i „czytelności” na małym ekranie dostajemy na desktopie doświadczenie jak z przedszkola: duże litery, gigantyczne odstępy, a treści tyle, co ulg podatkowych.

Co to jest mobile first?

Skąd się to właściwie bierze, dlaczego niektóre strony tak właśnie wyglądają i dlaczego te ogromne przestrzenie pojawiają się tam, gdzie ich być nie powinno?

Mobile first
To pojęcie w projektowaniu, kodowaniu i architekturze informacji, w którym priorytetem stają się ekrany mobilne. Idea brzmi rozsądnie: skoro ludzie coraz częściej korzystają z telefonów, to projektujemy stronę najpierw dla małego ekranu, a dopiero później „rozciągamy” ją na większe.

Brzmi pięknie w teorii, ale w praktyce wygląda to tak:

• gimnastykujesz się, żeby zmieścić treść na małej szerokości,
• ograniczasz ilość danych, żeby było „lżej”,
• zmniejszasz zdjęcia lub tniesz je w pionowe prostokąty,
• likwidujesz interakcje, np. efekty hover czy rozbudowane menu, bo na telefonie i tak nie zadziałają.

Ta mniejsza ilość pikseli powoduje nie tylko ograniczenia dotyczące treści, zdjęć i elementów graficznych. Ona narzuca całą filozofię strony – żeby zmieścić wszystko na ekranie telefonu, projektujesz minimalistycznie, warstwowo, z dużymi odstępami. A kiedy później próbujesz tę filozofię przenieść na desktop… wychodzi pustynia treści z ogromnymi blokami „oddechu”, w której użytkownik gubi wątek szybciej niż Ty rachunki na koniec roku.

Dlaczego uważam, że mobile first to błąd?

Podejście mobile first to dziś niemal dogmat. Projektanci, marketerzy i prelegenci na konferencjach potrafią zaczynać każdą prezentację od magicznego hasła:
 „189% ruchu to mobile i ta liczba ciągle rośnie!” ;)

No i fajnie, tylko że ta liczba to marketingowa bajka (prawdziwy wynik to jakieś 64%), 

Ale to dopiero początek manipulacji. Bo w tym zestawieniu nikt nie mówi o jakości ruchu.

• Większość „mobilnego ruchu” generują aplikacje społecznościowe – TikTok, Instagram, Facebook. Kliknięcie w link z reklamy czy posta to często szybki impuls, a nie świadoma decyzja zakupowa. Efekt? Mnóstwo wejść, ale ile konwersji?
• Z kolei ruch, który faktycznie przynosi biznes, to często desktop. To ludzie w biurach, przed laptopami, porównujący oferty, czytający szczegóły i… klikający „kup teraz” albo wysyłający zapytanie ofertowe.

Gdy uwzględnić te różnice, statystyka „większość to mobile” nagle wygląda dużo mniej imponująco. Owszem – użytkownik mobilny istnieje i jest ważny, ale nie jest źródłem największej wartości. Projektowanie wyłącznie pod niego to jak inwestowanie całej kasy w kampanię TikTokową, bo „wszyscy tam siedzą”.

Jakie są konsekwencje biznesowe?

Skupienie się na mobile first ma realne konsekwencje biznesowe, ponieważ założenie, że ruch pochodzi z mobile to przygotowanie na telefony to no brainer… Jednak - wiedza na temat tego jak się zachowują twoi klienci to podstawa co zrobić i w jaki sposób także…

Sprawdzaj dane - co z tego, że większość ruchu pochodzi z urządzeń mobilnych? Czy jednak te dane są jednoznaczne z tym, że koniecznie pierwsze powinny zostać zaprojektowane ekrany mobilne?

Ale ja nie mam danych… no ale masz internet i dostęp do informacji, możesz na podstawie danych z miejsc, do których chcesz dojść zobaczyć na co zwrócić uwagę.  Opcją jest też je zignorować, skupić się na celu jaki chcesz osiągnąć i pod niego dobrać podejście. 

Np jeśli tworzysz aplikację, która ma być głównie odtwarzana na telefonach, to wybór jest oczywisty. Jeśli jednak twoi klienci to pracownicy biurowi, pracujący na komputerach to znów - wybór jest oczywisty. 

Content dispersion – czyli jak zgubić użytkownika w pustyni treści.

Jednym z największych skutków ubocznych podejścia mobile first jest tzw. content dispersion – zjawisko świetnie opisane m.in przez Nielsen Norman Group. Co to takiego?

To sytuacja, w której treść jest rozbita na malutkie kawałki, każdy osobno upchnięty w oddzielnym bloku, karuzeli albo sekcji. Projektanci zachwyceni minimalizmem mówią wtedy: „treść musi oddychać”. Efekt?

• Użytkownik przewija i przewija,
• dostaje po jednym zdaniu tu, jednym tam,
• a po kilkunastu ekranach kompletnie nie pamięta, co przeczytał na początku.

Brzmi znajomo? To właśnie ten maraton palcami po kółku przewijania, o którym pisałem na początku.

Problem polega na tym, że content dispersion zabija ciągłość narracji. Użytkownik nie widzi pełnego obrazu – dostaje fragmenty, które nie składają się w całość. Zamiast logicznej ścieżki prowadzącej do konwersji, mamy serię mikro-przystanków bez mapy.

Przykład użycia projektu mobile first na dekstop:

Ten sam projekt z użyciem projektu dostosowanego pod duże ekrany:

I zgadnij, co najczęściej prowadzi do content dispersion? Właśnie filozofia mobile first. Bo skoro na telefonie trzeba „odchudzić” treść i podzielić ją na małe porcje, to potem projekt przeniesiony na desktop wygląda jak wielki rozciągnięty akordeon.

Kiedy przeglądasz stronę na dużym ekranie widzisz slajdy zamiast ciągłości informacji, nie potrafisz powiązać jednego z drugim, bo za duża ilość przestrzeni na to nie pozwala (a dodatkowo skupienie rozwalone przez media społecznościowe nie pomaga). Wtedy jest duża szansa na to, że ta właśnie strona została zaprojektowana z myślą o mobile first, a następnie na siłę przełożona na wersję desktop.

Jak zapobiec content dispersion – i czy to zawsze jest złe?

Content dispersion nie zawsze jest dramatem. Czasem dzielenie treści na mniejsze porcje pomaga w czytelności – szczególnie na mobile, gdzie ściana tekstu wygląda jak kara za złe uczynki. Problem zaczyna się wtedy, gdy rozbijanie treści staje się celem samym w sobie.

Jak temu zapobiec?

• Zacznij od przekazu w pełnej formie. Zamiast zastanawiać się, jak pociąć treść na mikro-bloki, najpierw odpowiedz sobie: co dokładnie chcę przekazać?
• Projekt wzmacnia treść, nie odwrotnie. Układ, kolory, zdjęcia – to wszystko powinno pomagać zrozumieć komunikat, a nie rozpraszać go na kilkanaście ekranów.
• Testuj ciągłość narracji. Użytkownik powinien być w stanie płynnie przejść od jednego punktu do drugiego i wciąż pamiętać, o co chodziło wcześniej. Jeśli po trzeciej sekcji zapomina, co było w pierwszej – masz content dispersion pełną gębą.

W skrócie: zamiast projektować „pod kawałki”, projektuj pod pełny przekaz, a dopiero później dostosuj go do różnych ekranów.

Chowanie menu - bo na mobile nie ma miejsca.

Pewnie widziałeś wiele razy świetnie schowane menu, za tajemniczymi trzema kreskami kryje się dodatkowa treść - nie taka znów mało ważna, choć przez umiejscowienie mogłoby się tak wydawać. 

Ale na mobile, przecież wygląda to świetnie i patrz ile miejsca zaoszczędziliśmy! I nie zagłębiając się czy ukrycie całego menu za przyciskiem to nawet na mobile dobre rozwiązanie, przenosząc to na desktop znów tracimy użyteczność. Może ktoś nie chce klikać, aby dowiedzieć się co tam się chowa, a może nie kojarzy czegoś takiego jak hamburger menu?

Jak więc zaprojektować menu?

Niby prosta rzecz, ale dobrze zaprojektowane menu powinno być częścią całej interakcji użytkownika ze stroną i prowadzić go do celu – tego samego, który ma firma: sprzedaży, kontaktu, konwersji. A nie być zagadką logiczną w stylu „znajdź trzy kreski i kliknij”.

1. Widoczne menu główne
   Na desktopie nie chowaj najważniejszych elementów. Strona ma wystarczająco miejsca, żeby pokazać kilka głównych kategorii w topie. Dzięki temu użytkownik od razu wie, gdzie jest i dokąd może pójść. To jak tablica informacyjna na dworcu – nikt nie chce jej szukać pod klapką.
2. Sticky navigation (menu przyklejone do góry)
   Użytkownik scrolluje, gubi się w treściach, a Ty mu mówisz: „wracaj na górę, żeby kliknąć menu”? Serio? Sticky top nav rozwiązuje ten problem – menu zawsze pod ręką, nie trzeba kombinować. Popularne rozwiązanie to pokazanie menu przy przewijaniu do góry. Rozwiązanie to często stosuję bo zajmuje mniej miejsca na ekranie a dodatkowo jest łatwo “odnajdywane”.
3. Mega menu
   W wielu branżach gdzie jest duże zaplecze produktów bądź usług pakietowych do wyboru jak e-commerce, turystyka czy B2B mega menu to dobre rozwiązanie. Zamiast chować wszystko w drzewkach, rozwijasz elegancki panel, w którym od razu widać kategorie, podkategorie, a nawet grafiki czy CTA. Można w nim zawrzeć też promocje lub polecany produkt.
4. Podejście hybrydowe
   Na mobile – jasne, hamburger może zostać, ale warto dodać szybkie skróty do najważniejszych sekcji (np. „Oferta”, „Kontakt”, „Sklep”). Dzięki temu nie każesz każdemu użytkownikowi przechodzić przez dodatkowy krok.
5. Ikony i etykiety
   Jeśli już musisz coś schować, pamiętaj: nie każdy zna hamburgera. Dodanie podpisu „Menu” obok trzech kresek to drobiazg, który robi ogromną różnicę w użyteczności.

Menu to nie pole do popisu dla minimalizmu rodem z Dribbble, tylko narzędzie biznesowe. Użytkownik ma znaleźć to, czego szuka, w jak najmniejszej liczbie kliknięć. Jeśli musi zgadywać, co kryje się pod trzema kreskami, to właśnie straciłeś klienta.

Ograniczenie użycia etykiet. 

Patrząc na same ikony, czy naprawdę jesteś w stanie określić, co one oznaczają? Projektanci często zakładają, że użytkownik „się domyśli”. Owszem – czasem symbol jest oczywisty, ale bardzo często zamiast ułatwiać życie, wprowadza tylko zamieszanie.

Przykład? Pole wyszukiwania. Wpisujesz zapytanie, a potem pojawia się pytanie: kliknąć ikonę lupy czy wcisnąć Enter? Teoretycznie jedno i drugie działa, ale użytkownik nie powinien w ogóle zastanawiać się nad takim detalem. Ikona bez etykiety to zgadywanka, a nie nawigacja.

Najprostsze rozwiązanie? Ikona + podpis. Trzy kreski z dopiskiem „Menu”, lupa z napisem „Szukaj” – niby banał, a nagle wszystko staje się oczywiste.

Jak to wygląda w DEPCORE?

Większość naszych projektów zaczyna się od dużych ekranów. Powód jest prosty: większa przestrzeń to większe możliwości i więcej swobody dla kreatywności. To samo dotyczy przepływu informacji – łatwiej zaplanować spójną narrację, kiedy nie musisz ciąć jej na kawałki.

Co robimy pod kątem projektowania?

Oczywiście nie ignorujemy mobilnych użytkowników – ich liczba rośnie i trzeba to brać pod uwagę. Ale projektując najpierw na desktop, możemy w pełni wykorzystać potencjał treści, zdjęć i interakcji, a dopiero później dostosować je do mobile, ograniczając tam elementy mniej istotne.

Kiedy mamy dane o ruchu, sprawa jest jeszcze prostsza – możemy przeanalizować, jak użytkownicy naprawdę korzystają ze strony i gdzie warto położyć nacisk.

Jak unikać pułapek mobile first?

• Sprawdzaj widok desktopowy. Jeśli treści na dużym ekranie wyglądają jak rozciągnięte gumy do żucia – zaprojektuj je tak, żeby użytkownik nie musiał szukać sensu w pustce.
• Analizuj wartość obrazów. Duże zdjęcia są świetne, jeśli naprawdę wspierają przekaz. Jeśli tylko rozpraszają – lepiej je odchudzić albo zamienić na coś bardziej treściwego.
• Pogrupuj powiązane treści. Krytyczne informacje powinny być w jednym oknie widoku, tak aby użytkownik nie musiał skakać góra-dół, żeby poskładać całość w głowie.
• Unikaj mobilnych sztuczek na desktopie. Akordeony, ukryte sekcje, hamburger menu – fajnie na telefonie, męczą na dużym ekranie. Lepiej zastosować projekty adaptacyjne, które dostosowują się do kontekstu.

Podsumowanie.

Mobile first nie powinno znaczyć mobile only. Strona internetowa musi być użyteczna i spójna na każdym urządzeniu, a nie tylko na ekranie smartfona.

W DEPCORE stawiam na podejście całościowe – projektujemy tak, aby strona była atrakcyjna wizualnie i skuteczna biznesowo zarówno na desktopie, jak i na mobile. Bo strona ma nie tylko „ładnie wyglądać”, ale przede wszystkim działać i sprzedawać.

O autorze.

Od lat związany z szeroko rozumianą informatyką. Pierwszą stronę stworzyłem w liceum, za co otrzymałem wyróżnienie.

Ciągle uczę się, aby dorównać tempu rozwoju nowoczesnych technologii łącząc je z wiedzą o psychologii aby zwiększać skuteczność stron i aplikacji internetowych.