Mobile-first – podejście do projektowania

Dlaczego warto skupić się na wersji mobilnej?

Przez ostatnie kilka lat nieustannie słyszeliśmy, że “ten rok będzie rokiem mobile”. Prawdą jest, że podejście mobile-first można już uznać za standard w projektowaniu stron internetowych. Ma to swój głęboki sens, ponieważ wizyty ze smartfonów i innych urządzeń mobilnych stanowią już znaczący odsetek odwiedzin na stronach internetowych.

Mimo że koncepcja mobile-first zyskała powszechną aprobatę, posiada ona również swoje wady. W tym artykule chciałbym przybliżyć Ci zalety i zagrożenia wynikające ze stosowania tego podejścia, a także pokazać, jak firmy wykorzystują filozofię mobile-first w praktyce.

Co oznacza mobile-first?

Mobile-first to taka filozofia w projektowaniu, która zakłada tworzenie wersji mobilnych aplikacji, stron czy 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” 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ć.

Dlaczego warto stosować podejście 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ć zdecydowanie 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ę sprawdzać 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.

Zagrożenia przy wykorzystaniu podejścia mobile-first

Podejście mobile-first ma jednak 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ącą 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.

Jak się pozbyć wad podejścia mobile-first?

Oczywiście, można 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. A 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.

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 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.

Przykłady firm wykorzystujących podejście mobile-first

Doskonałym przykładem firmy, która świadomie przyjęła filozofię mobile-first, jest Duolingo. Ta aplikacja do nauki języków obcych od samego początku była projektowana z myślą o użytkownikach mobilnych. Jej główną funkcjonalnością jest możliwość nauki w krótkich, intensywnych sesjach – idealnie dopasowanych do specyfiki wykorzystania smartfona.

Duolingo doskonale wykorzystuje ograniczenia wynikające z małych ekranów, prezentując użytkownikom tylko najbardziej kluczowe elementy interfejsu. Czytelne, duże przyciski pozwalają na intuicyjną interakcję, a minimalistyczny design skupia uwagę na samej treści nauczania.

Innym interesującym przykładem jest aplikacja Airbnb. Ta platforma rezerwacji noclegów również zastosowała podejście mobile-first w projektowaniu swojego interfejsu. Kluczowe funkcjonalności, takie jak wyszukiwanie i rezerwacja, są niezwykle intuicyjne i dostępne z poziomu smartfona.

Co ciekawe, Airbnb nie ogranicza się wyłącznie do wersji mobilnej. Deweloperzy zadbali również o responsywność serwisu, aby użytkownicy komputerów stacjonarnych mogli w pełni korzystać z wszystkich funkcji. Dzięki temu firma zapewnia spójne i płynne doświadczenie niezależnie od urządzenia.

Podejście mobile-first przyniosło Airbnb wymierne korzyści – aż 50% rezerwacji dokonywanych jest za pośrednictwem urządzeń mobilnych. Świadczy to o trafności obranej strategii, która doskonale odpowiada na potrzeby dzisiejszych użytkowników internetu.

Podsumowanie

Liczba osób korzystających z internetu na urządzeniach mobilnych stale rośnie. Obecnie jest to już ponad połowa światowej populacji. Powszechne korzystanie z smartfonów i tabletów w celu uzyskania dostępu do sieci doprowadziło do powstania nowych metod rozwoju, takich jak mobile-first design.

Podejście to zachęca do projektowania stron internetowych przyjaznych dla urządzeń mobilnych. Kluczowe zalety mobile-first to m.in. priorytetyzacja treści, prosty i minimalistyczny design oraz czytelne i widoczne przyciski CTA.

Mimo że mobile-first brzmi jak idealne rozwiązanie, posiada ono również wady. Łatwo można zapomnieć o możliwościach, jakie dają wersje desktopowe, a bezpośrednie przenoszenie designu mobilnego na większy ekran może skutkować rozwiązaniami nieprzyjaznym dla użytkownika.

Dlatego warto zastąpić mobile-first filozofią user-first. Dzięki niej możemy ułatwić użytkownikowi wykonanie określonych zadań, niezależnie od urządzenia, z którego korzysta. Przykłady firm, takich jak Duolingo czy Airbnb, pokazują, że podejście mobile-first może przynieść wymierne korzyści, o ile zostanie zastosowane w przemyślany sposób.

Podsumowując, mobile-first to nowe, perspektywiczne podejście do projektowania stron internetowych, ale aby w pełni wykorzystać jego potencjał, należy pamiętać o zachowaniu równowagi między potrzebami użytkowników mobilnych i desktopowych. Tylko wtedy możemy zapewnić im wyjątkowe, spójne doświadczenie niezależnie od urządzenia.

Strony internetowe to Twoja firma? Zainteresowany bardziej kompleksowymi usługami z zakresu projektowania i tworzenia stron www? Sprawdź naszą ofertę!