Jak stosować podejście „mobile first”? Wady, zalety i przykłady praktyczne

Dlaczego w pierwszej kolejności warto skupić się na wersji mobilnej? Poznaj zalety podejścia mobile first design.

15 marca 2019

Anita Steć

UX Designer

Przez ostatnie kilka lat powtarzano, że „ten rok jest rokiem mobile”. Słyszeliśmy to na konferencjach, czytaliśmy w licznych artykułach. Prawdą jest, że podejście mobile first można uznać już za standard w projektowaniu. Ma to sens, ponieważ wizyty ze smartfonów i innych urządzeń mobilnych stanowią już znaczący odsetek odwiedzin stron. Mimo, że koncepcja zyskała powszechną aprobatę, posiada także swoje wady. Przygotowaliśmy więc use case-y, które pokazują potencjalne zagrożenia wynikające ze stosowania tego podejścia oraz sposoby, jak ich uniknąć.

Z tego artykułu dowiesz się:
Co oznacza mobile first?
Dlaczego warto stosować takie podejście?
Zagrożenia przy wykorzystaniu tej filozofii
Jak firmy wykorzystują podejście mobile first? (+ przykłady użycia)

Co zakłada podejście mobile first?

Mobile first to taka filozofia w projektowaniu, która zakłada tworzenie wersji mobilnych aplikacji, stron lub produktów jako pierwszych, a następnie dostosowywanie ich do większych ekranów.

Niestety, w tym całym szumie projektanci często zapominają o strategii progresywnego ulepszania (progressive enhancement) produktu. Polega ona na tym, że w pierwszej kolejności zajmujemy się wariantem sprawiającym najwięcej trudności i ograniczeń w projektowaniu. Okazuje się, że najczęściej jest to właśnie wersja mobilna. Na ten wybór wpływają rozmiary urządzeń oraz zróżnicowane sposoby interakcji z nimi. I tak w mobile’u zawieramy wszystkie podstawowe, kluczowe dla projektu funkcjonalności. W kolejnych krokach tworzymy wersje na większe urządzenia. W teorii na tym etapie należy rozszerzać podstawowe funkcjonalności. A przynajmniej tak to powinno wyglądać.

Chcesz poprawić UX w swoich produktach?

Dlaczego stosować mobile first?

Rozmiar ekranu to najważniejszy powód do projektowania w myśl mobile first. Narzuca on wiele ograniczeń, ponieważ na urządzeniach mobilnych można zmieścić znacznie mniej informacji niż w wersji desktopowej. Dlatego projektując taki interfejs, musimy zwracać szczególną uwagę na to, aby uniknąć “zatłoczenia” i przepełnienia go danymi.
Co ważniejsze, musimy pamiętać, w jaki sposób wchodzimy z nim w interakcję. W tym przypadku nie dysponujemy przecież precyzyjnym kursorem, lecz znacznie większych rozmiarów palcami – szczególnie kciukiem.

W związku z tym wszystkie klikalne elementy muszą:
– posiadać odpowiednią wielkość (o minimalnych wymiarach 44 pt x 44 pt),
– znajdować się w łatwo dostępnych za pomocą kciuka miejscach,
– znajdować się w wystarczająco dużych odległościach od siebie.

Zastosowanie tych zasad pozwala uniknąć przypadkowych kliknięć w pola, w które wcale kliknąć nie chcemy.

Jak to wygląda w praktyce?

Niewielkich rozmiarów checkbox może świetnie się sprawdzić przy kliknięciu na niego myszą. Wykonanie tej samej akcji przy pomocy kciuka może stanowić jednak nie lada wyzwanie. Dlatego też warto rozważyć alternatywne opcje, pozwalające na zaznaczenie tej opcji poprzez kliknięcie na większy obszar ekranu. Świetny przykład takiej alternatywy stanowi rozwiązanie wdrożone w aplikacji Duolingo. Co ważne, to rozwiązanie sprawdza się równie dobrze po przeniesieniu go na większy ekran. W tym przypadku mobile first zadziałało:

Dlaczego nie stosować mobile first?

Podejście mobile first ma jedną zasadniczą wadę. Stosując je, łatwo zapomnieć o możliwościach, jakie dają nam wersje desktopowe. A przecież też chcemy je w pełni wykorzystać.
Dlatego bezpośrednie przenoszenie designu mobilnego na większy ekran może skutkować rozwiązaniami, które nie będą już tak przyjazne użytkownikowi.

Popularnym przykładem takiego błędu może być stosowanie na desktopie hamburger menu. Jest to menu ukryte pod dobrze nam znaną ikonką, składająca się z równoległych, poziomych linii.

To rozwiązanie okazuje się użyteczne na małym ekranie, ponieważ stanowi świetny sposób na “zaoszczędzenie” miejsca.

Często jednak nie ma uzasadnienia w przypadku wersji desktopowej. I tak za cenę spójności obu wariantów, rezygnujemy z ułatwień, które moglibyśmy zaoferować użytkownikowi na większym ekranie. W tym przypadku jest to bezpośredni dostęp do nawigacji.

Aplikacja Blablacar to przykład, w którym możemy mówić właściwie o podejściu mobile only. Wersja desktopowa jest tutaj niemal bliźniacza z mobilną.

Na pierwszy rzut oka widać, że projektanci nie wykorzystali miejsca oferowanego przez większy ekran. A różnica w rozmiarach jest przecież kilkukrotna!

Można ją tutaj śmiało wykorzystać do przekazania użytkownikowi bardziej szczegółowych informacji – chociażby wytłumaczyć co oznaczają nie zawsze zrozumiałe ikony.

Takiego podejścia nie można nazwać progresywnym ulepszaniem, a jedynie bezpośrednim przeniesieniem danych z ekranu telefonu na ten komputerowy.

Zresztą zobaczcie sami:

Skoncentrujmy się na użytkowniku

Czy da się wyeliminować wady podejścia mobile first? Oczywiście! Wystarczy zamienić je na filozofię user first.

Projektowanie na różne urządzenia to przecież nie tylko dodatkowe ograniczenia, ale też możliwości. Dzięki nim możemy ułatwić użytkownikowi wykonanie określonych zadań.

Zwróćmy uwagę na różne sposoby korzystania z klawiatury w komputerze i na telefonie. W pierwszym przypadku, używamy jej chętnie. Stanowi wtedy szybki i wygodny sposób na wypełnienie pola. W przypadku urządzeń mobilnych, wpisywanie danych ze znacznie mniejszej, dotykowej klawiatury jest nie tylko powolne i wymaga dodatkowego wysiłku, ale też zwiększa szanse popełnienia błędu. Zadaniem projektanta jest natomiast zminimalizowanie tego ryzyka. Co można zrobić w takiej sytuacji? To zależy od kontekstu. Wyobraźmy sobie, że użytkownik chce wprowadzić metodę płatności do aplikacji. Możemy “zmusić go” do mozolnego przepisywania danych z karty kredytowej i gubienia się w gąszczu cyferek.

Może zamiast tego pozwolimy mu po prostu skorzystać z aparatu w telefonie i dodać kartę za pomocą jednego czy dwóch kliknięć? Takie rozwiązanie wykorzystują przykładowo aplikacje Uber czy Taxify:

Prostota = wygoda

W projektowaniu użyteczności starajmy się zawsze jak najbardziej upraszczać aktywności użytkowników. Nie każmy im wpisywać skomplikowanych haseł w celu zalogowania się do aplikacji. Istnieją dużo szybsze rozwiązania, takie jak logowanie się za pomocą czytnika linii papilarnych. Takie rozwiązanie stosuje już wiele aplikacji bankowych. Nigdy nie zapominajmy, że w podejście mobile first obejmuje też progresywne ulepszanie. Nie pominiemy wtedy możliwości, które niesie ze sobą dodatkowe miejsce w wersji desktopowej. Działa to też w drugą stronę. Projektując mobilną wersję strony desktopowej, nie skupiajmy się na ograniczeniach, ale korzystajmy też z dodatkowych funkcji, jakie oferują smartfon czy tablet.