Dołącz do czytelników
Brak wyników

Trendy w digitalu

17 czerwca 2020

NR 52 (Czerwiec 2020)

Projektowanie mobile first – fakty i mity o trendach WWW w czasach smartfonów i tabletów

67

Ostatnich kilka lat było rewolucją dla sposobu, w jaki korzystamy z internetu. Komputer, przez wiele lat jedyne narzędzie łączące nas z siecią, coraz rzadziej jest w tym celu wykorzystywany. Jego rolę konsekwentnie przejmują urządzenia mobilne, wymuszając zmiany zarówno w obszarze technologii, jak i projektowania serwisów internetowych. 

Daleko za sobą pozostawiliśmy czasy, kiedy ruch mobile pozostawał „niezagospodarowany” biznesowo, nie przekładając się bezpośrednio na liczbę leadów czy dokonywanych transakcji. Dzisiejsza rzeczywistość jest inna – według raportu „E-commerce w Polsce 2019”1 najpopularniejszym urządzeniem, na którym użytkownicy dokonują zakupów przez internet, nadal pozostaje komputer przenośny, ale aż 61% użytkowników deklaruje, że kupując online, korzysta z telefonu. W najmłodszej grupie biorącej udział w badaniu (15-24 lata), telefon był wykorzystywany do zakupów online częściej niż laptop.Oczywiście wielkość ruchu mobilnego w naszej witrynie zależy od branży, w której działamy, oferowanego produktu oraz tego, kim są nasi klienci. Coraz częściej spotykamy się jednak z sytuacją, w której na stronach docelowych kampanii nawet 80% rejestrowanych sesji realizowanych jest za pomocą urządzeń przenośnych. Dlatego też, aby skutecznie realizować nasze cele biznesowe poprzez serwis internetowy, należy zwrócić szczególną uwagę na dostosowanie projektu do potrzeb urządzeń mobilnych. Dzięki temu możemy zapewnić użytkownikowi odpowiedni komfort korzystania z naszej witryny i skuteczniej zachęcić go do zostania naszym klientem.

POLECAMY


Czym jest mobile first?


Jednym z bardziej rozpowszechnionych haseł związanych z projektowaniem na urządzenia mobile jest niewątpliwie mobile first, czyli takie podejście, w którym projektowanie rozpoczynamy od ekranu urządzenia mobilnego. Tyle tylko, że droga od popularności hasła do jego realnego zastosowania jest długa oraz wymaga pokonania kilku „zakrętów”. Pierwszym z nich jest wyjście poza strefę komfortu związanego ze zmianą dotychczasowego, sprawdzonego podejścia i przekonanie samego siebie, że mobile first nie jest kolejną sezonową modą, za którą w rzeczywistości niewiele się kryje. Drugim „zakrętem”  są przyzwyczajenia. Praca jest dzisiaj typowym kontekstem, w którym korzystamy z urządzeń desktopowych, więc także na ekranie komputera chcemy ocenić przygotowany przez agencję projekt graficzny nowego serwisu internetowego. Trzeci „zakręt” to uwarunkowania płynące z wnętrza organizacji, w której pracujemy. Ze względu na ograniczoną ilość miejsca na ekranie urządzenia przenośnego podejście mobile first wymusza silną gradację treści pod kątem jej ważności. W takiej sytuacji osoba prowadząca projekt po stronie klienta musi godzić interesy różnych zespołów, które w naturalny sposób swoją część pracy uważają za najbardziej istotną i chcą ją w szczególny sposób wyeksponować na stronie internetowej. Mając na uwadze przeciwności pojawiające się na drodze do spopularyzowania podejścia projektowania mobile first, trzeba też pamiętać, że nie jest to jedyne właściwe podejście, a rezygnacja z niego czasem następuje zupełnie świadomie. Istnieją bowiem takie branże i takie produkty, dla których projektowanie serwisu w podejściu mobile first nie jest rozwiązaniem optymalnym. Ważne, by o tym pamiętać i podejmując decyzję, opierać się na specyfice swojej branży i analizie własnych danych.

Korzyści z podejścia mobile first


Jeśli wszystko przemawia za tym, że nasz serwis powinniśmy projektować w podejściu mobile first, należy się na nie zdecydować pomimo trudności czekających nas po drodze. Rozpoczęcie projektowania od ekranu mobilnego zamiast desktopu pozwoli na:

  • lepszą priorytetyzację treści – pomimo że wymaga to dużego wysiłku i opanowania tarć pomiędzy różnymi zespołami, to w efekcie końcowym otrzymamy projekt, którego cel jest jasno sprecyzowany, a waga różnych części naszego biznesu znajduje w nim swoje odwzorowanie,
  • uniknięcie błędów związanych typowo z korzystaniem z internetu przez urządzenie mobilne – np. uwzględnienie sposobu nawigowania po stronie za pomocą kciuka i umieszczenie ważnych elementów w jego zasięgu,
  • ograniczenie elementów strony, które w przypadku ruchu mobilnego działają jako „rozpraszacze” i odciągają użytkownika od realizacji właściwego celu strony, 
  • dostosowanie funkcjonalności strony do oczekiwanego typu ruchu – zdarza się popełnianie błędu, w którym LP kampanii prowadzonej przede wszystkim w środowisku mobilnym dostosowujemy do desktopu.

Dobre praktyki – jak to robić?


Kluczowe dla sukcesu jest faktyczne rozpoczęcie projektowania od ekranu urządzenia mobilnego, który z powodu swojej wielkości rodzi najwięcej ograniczeń. Na początku projektu warto minimalizować myślenie o wersji desktopowej – jeśli tego nie zrobimy, będziemy w rzeczywistości tworzyli dwa projekty równocześnie. Projektując zgodnie z podejściem mobile first, projekt dla urządzenia desktopowego powinniśmy otrzymać później, w wyniku progresywnego ulepszania (progressive enhancement) rozwiązania stworzonego na urządzenia mobilne. W trakcie procesu projektowego w centrum naszego zainteresowania cały czas powinien znajdować się użytkownik z typowym dla korzystania z rozwiązań mobilnych zestawem zachowań, kiedy:

  • Chętniej korzystamy z gestów typu swipe, scroll niż z klikania w klasyczne przyciski. Mniej chętnie i ze znacznie mniejszą uwagą czytamy też długie teksty, zamiast tego jedynie się przez nie „prześlizgując”. Takie zachowania sprawiają, że prezentując produkt, usługę czy publikując treść, powinniśmy zupełnie inaczej planować interakcje. Przykładem może być tu artykuł z „The New York Times” prezentujący rozprzestrzenianie się wirusa SARS-Cov-2. Kolejne informacje pojawiają się użytkownikowi po użyciu scrolla, a nowe treści są wizualizowane odpowiednimi animacjami. Tak właśnie powinna wyglądać prezentacja treści w dobie mobile.
Rys. 1. https://tiny.pl/7wqw1

 

  • Trudniejsze, obarczone większym ryzykiem pomyłki i zwyczajnie bardziej czasochłonne są te działania na mobile, w których musimy korzystać z wirtualnej klawiatury – np. autoryzacja za pomocą hasła, wpisanie adresu czy numeru karty lojalnościowej. Jeśli technologia, z której korzystamy, pozwala nam uprościć te czynności, to należy to robić. Zamiast z wpisywania adresu, możemy skorzystać z lokalizacji GPS lub przesuwania wskaźnika na mapie, zamiast z podawania hasła, możemy korzystać z autoryzacji poprzez czytnik linii papilarnych, zamiast wpisywać numer karty lojalnościowej, możemy ją zeskanować, używając wbudowanej w urządzenie kamery.
Rys. 2. Aplikacja Freenow

 

  • Potrzebujemy zachowania odpowiedniego dystansu pomiędzy klikalnymi elementami, aby ograniczyć kliknięcia w elementy, których kliknąć nie chcieliśmy – np. gęsto ułożone pozycje w menu lub checkboxy nie sprawiają trudności, kiedy klikamy w nie kursorem myszki, ale stają się wyzwaniem, jeśli musimy trafić w nie palcem. Jeśli w serwisie stosujemy listy rozwijane, warto pomyśleć o rozwiązaniach, które ułatwią korzystanie z nich na mobile (np. podpowiadanie) lub zastąpienie ich innymi rozwiązaniami – np. wyborem rozmiaru za pomocą suwaka czy wskazaniem sklepu na mapie zamiast korzystania z listy.
  • Na mobile nie jesteśmy także skłonni wypełniać rozbudowanych formularzy, stąd zawarte w nich pola powinny być ograniczone do niezbędnego minimum. Raz jeszcze trzeba tu przypomnieć o szczególnym znaczeniu przypisywania wartości konkretnym elementom, które muszą się znaleźć na stronie. Nie inaczej jest w przypadku formularzy, gdzie powinniśmy zdecydować, jakie dane są dla nas niezbędne, a które w pierwszej fazie możemy pominąć, starając się uzupełnić je później.

Technologia, którą wykorzystamy we wdrożeniu naszego rozwiązania, to zagadnienie na oddzielny artykuł, warto jednak choćby wspomnieć o Progressive Web Applications (PWA) czy Accelerated Mobile Pages (AMP), które same nasuwają się w kontekście mówienia o rozwiązaniach mobilnych. Progressive Web Application pozwala na stworzenie rozwiązania, które dla użytkownika będzie bardzo zbliżone do doświadczenia korzystania z aplikacji mobilnej. Mają na to wpływ funkcje możliwe do wykorzystania w PWA, wcześniej zarezerwowane tylko dla aplikacji, np. skorzystanie z NFC lub publikowanie push notifications. Korzystanie z PWA może być jeszcze bliższe użytkowaniu klasycznej aplikacji dzięki dodaniu ikony na pulpicie urządzenia, ukryciu paska przeglądarki czy dopasowaniu pozostałych, widocznych elementów do naszego UI. Wartością dodaną PWA jest możliwość pracy zarówno online, jak i offline. W przypadku słabego dostępu do sieci lub nawet braku internetu możemy zapewnić użytkownikowi dostęp do ostatnio załadowanych elementów lub, dzięki pracy w tle, do aktualnej wersji – co nie byłoby wcześniej możliwe. 
Zalety i wady PWA możemy rozpatrywać z punktu widzenia wydawcy oraz użytkownika. Dla wydawcy PWA niesie oszczędności we wdrożeniu w porównaniu z klasyczną aplikacją. Nie potrzebujemy zespołu specjalistów zajmujących się dedykowanym rozwiązaniem dla iOS lub Androida, ponieważ tworzymy jeden wspólny produkt dla wszystkich urządzeń. Jedynym minusem do rozważenia w tym k...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy