Agencja reklamowa – strony www, aplikacje, video, kampanie 360
Jak tworzyć strony internetowe na urządzenia mobilne
Czas czytania: 7 min.
Zasady mówiące o tym, jak tworzyć strony internetowe na urządzenia mobilne są tematem poruszanym od lat, ale z doświadczenia pracy w różnych agencjach reklamowych wiem, że niekoniecznie zespoły się do nich stosują. Teoretycznie „mobile first” jest określeniem równie popularnym, jak „Content is King”, nie mniej często pozostaje to tylko teorią.
W poniższym artykule wprowadzę Was w świat projektowania na urządzenia mobilne i opowiem z czego te zasady, wynikają.
Dlaczego warto projektować z myślą o użytkownikach mobilnych
Po pierwsze określmy rynek mobile. Z przeprowadzanych badań wynika, że udział rynku mobilnego w sprzedaży na rynku detalicznym e-commerce, wzrósł na świecie z 67,2% w roku 2019 do 72.9% w roku 2022. Oznacza to, że około trzech czwartych wszystkich transakcji zawieranych na detalicznym rynku e-commerce, odbywa się przez smartfon.
Drugą bardzo istotną kwestią jest to, że ponad 60% Polaków korzysta ze smartfonów minimum 5 godzin dziennie, czyli z dużym prawdopodobieństwem tam właśnie ich znajdziemy, a ogólny udział urządzeń mobilnych w Polsce, to 66% (źródło).
Jak tworzyć strony internetowe na urządzenia mobilne – od czego zacząć
Od zawsze uważam, że wszystko jest względne i dopiero gdy postawimy fakt lub liczbę w określonym kontekście, otrzymamy jasny i klarowny obraz, który można przeanalizować. Dlatego, by określić konkretne wytyczne dotyczące projektowania pod urządzenia mobilne, należy poznać kontekst „świata mobile”.
Przede wszystkim należałoby zacząć od zrozumienia środowiska, w którym się znajdujemy oraz jego charakterystyki.
Specyfika urządzeń mobilnych powoduje pewne ograniczenia. Mogą być to na przykład kwestie, takie jak: niewielkie wymiary ekranów, brak precyzji kursora myszki, brak tak zwanego „hovera”, który po najechaniu kursorem umożliwiałby wyświetlenie podpowiedzi, co kryje się pod danym elementem lub chociażby wyskakujące notyfikacje, które przy błędnie zaprojektowanym interfejsie powodują często irytację użytkowników.
Drugą ważną kategorią, jest kontekst korzystania z urządzeń mobilnych. Ze smartfonów zwykle korzystamy w pośpiechu, biegu czy innych okolicznościach, które wpływają na rozproszenie uwagi. W takim przypadku nie ma mowy o komforcie i oraz pełnym skupieniu. Korzystanie z urządzeń mobilnych wiąże się również z tym, że większość czasu ze smartfonem spędzamy w miejscach publicznych, wśród innych ludzi, a to także ma wpływ na sposób, w jaki z tych urządzeń korzystamy.
Trzecim z kluczowych aspektów, są ograniczenia technologiczne poza samymi smartfonami. Problemy z zasięgiem sieci komórkowej oraz ograniczone, mniej lub bardziej, pakiety internetowe powodują, że serwisy wczytują się wolno, często ciężko nam określić czy w ogóle nastąpiła jakaś interakcja ze stroną, a użytkownicy będący poza siecią Wi-Fi, często z przerażeniem patrzą na odpalające się z automatu materiały video lub „robi im się gorąco”, gdy nagle orientują się, że od kilku godzin przeglądają TikToka czy Instagrama, podczas gdy smartfon nie połączył się z domowym Wi-Fi.
Mniej znaczy lepiej
Przechodząc wytycznych w projektowaniu na urządzenia mobilne, należy zwrócić uwagę na kilka kluczowych kwestii oraz co bardzo ważne zrozumieć, że sukces projektowania w myśl zasady mobile first zależy od całego zespołu. Począwszy od copywritera, przez UX i design, skończywszy na kodowaniu.
Pierwszym z kluczowych aspektów jest hierarchia treści i elementów. Zanim zabierzemy się za projektowanie serwisu i pisanie treści, należy dobrze przemyśleć całą jego strukturę. Zastanowić się, które elementy są niezbędne, a które niekoniecznie muszą znaleźć się na urządzeniach mobilnych. Użytkownicy mobilni mają ograniczony czas i skupienie, dlatego należy zapewnić im kluczowe informacje, a niekoniecznie długą historię.
Druga istotna kwestia, to prostota i intuicyjność nawigacji oraz interakcji. Przyciski na urządzeniach mobilnych powinny być duże i na tyle intuicyjne, żeby użytkownik na pierwszy rzut oka wiedział, że dany element wywoła taką czy inną interakcję. Ważne jest również to, aby umiejscowione były w miejscach, gdzie nie wyświetli się niepodziewanie żadna notyfikacja.
Z pewnością wielu z Was miało też sytuacje, z którymi ja spotykam się notorycznie. Niby coś „tapnąłeś”, ale w sumie do końca nie wiesz, czy to miało jakąś interakcję, czy coś się wydarzyło i co wydarzy się zaraz… Dlatego warto tę interakcję dodatkowo zaznaczyć, na przykład poprzez dodanie ikonki wczytywania lub szerokiego i zauważalnego paska postępu.
Kolejny istotny element to przejrzysta typografia. Urządzenia mobilne są niewielkie, dlatego musimy ułatwić użytkownikom czytanie treści. Dobrać odpowiedniej wielkości czcionki, ustawić duże interlinie, odpowiedni kontrast i zapewnić dużo światła, czyli odpowiedniej wielkości marginesy i paddingi rozdzielające akapity i inne elementy strony. Skoro jesteśmy przy typografii, warto również wspomnieć o ułożeniu tekstu. Pamiętaj, by unikać używania wyśrodkowanych tekstów, szczególnie jeśli są dłuższe.
Kompaktowość treści
Jak wspomniałem wyżej. Kluczem do odpowiedniego projektowania serwisów na urządzenia mobilne jest określenie właściwej hierarchii, ale czy to oznacza, że pewne treści powinniśmy usunąć totalnie? Zupełnie nie. Możemy na kilka sposobów ukryć je na urządzeniach mobilnych lub przebudować tak, by nie powodowały zbytniego wydłużenia strony.
Możemy, między innymi:
- Zablokować wyświetlanie się pewnych treści na niższych rozdzielczościach
- Zamienić kolejność elementów strony
- Ukryć treści pod przyciskiem „czytaj więcej” i rozwinąć tylko tym, którzy będą chcieli
- Elementy zawierające dużo zdjęć, testymoniale, opinie, referencje, przykłady, itp. można przerobić na karuzele przewijane w poziomie
Wykonując powyższe czynności, musimy pamiętać o tym, co jest kluczem – czytelność i przejrzystość. Dlatego wykorzystując na przykład przyciski typu „wczytaj więcej” zadbaj, by komunikat na przycisku, w klarowny sposób wskazywał użytkownikowi, co się wydarzy.
Miej media pod kontrolą
Waga i format obrazów wykorzystywanych na stronie to bardzo ważny aspekt. Ma kluczowy wpływ na szybkość wczytywania serwisu, co jest niezmiernie istotne w przypadku urządzeń mobilnych. Warto więc projektując serwis nie tylko skupiać się na jego perfekcyjnym wyglądzie od strony treści, UX oraz designu, ale także przyłożyć się do właściwego przygotowania assetów dla frontend developera.
Przykład: plik PNG faktycznie ma najlepszą jakość, a zarazem najwięcej waży, bo nie jest skompresowany. Pytanie tylko, czy ta jakość jest zawsze aż tak istotna? Jeśli mamy na grafice teksty, to tak, bo kompresja spowoduje pogorszenie czytelności, ale czy zapisując zdjęcie, czy inną grafikę bez tekstów jako jpg na pewno tak dużo jakości stracimy? Myślę, że nikt tego nie zauważy, a zysk w postaci pliku o niższej wadze będzie znaczący.
Na szczęście w tym przypadku istnieje wiele niedrogich narzędzi, które mogą nas w tym względzie wspomóc.
Istotne są również proporcje obrazów. Projektując na urządzenia desktop, przyzwyczailiśmy się do szerokich panoramicznych obrazów. Urządzenia mobilne, w przeciwieństwie do nich, są pionowe, a co za tym idzie, panoramiczna grafika będzie nieczytelna i niewiele wnosząca do serwisu poza tym, że opóźni jego wczytywanie. Tworząc grafiki na potrzeby strony mobilnej, należy pamiętać, aby przygotowywać je jako kwadraty lub formaty pionowe.
Kolejne, coraz częściej wykorzystywane na stronach internetowych medium, to video. Ma ono pod kątem urządzeń mobilnych dwie kluczowe wady, o których należy pamiętać.
Duża waga = duży transfer danych, a tego użytkownicy urządzeń mobilnych będących z dala od sieci Wi-Fi nie lubią. Dlatego materiały video nie powinny odpalać się automatycznie.
Korzystanie ze smartfona wiąże się zwykle ze strefą publiczną lub (nie ukrywajmy) byciem w pracy. W związku z tym materiały video z automatu powinny być wyciszone. Dobrą praktyką jest przygotowanie filmu z napisami, co umożliwi oglądanie go, bez potrzeby włączania dźwięku.
Wydajność to klucz do sukcesu
Z wszelkich badań i analiz wynika, że każda kolejna sekunda wczytywania się serwisu powyżej 2,5-3 sekund, to utrata zauważalne zmniejszenie konwersji. Dlatego głównym celem tworzenia serwisu na urządzenia mobilne poza jego przejrzystością w sferze UX, powinna być wydajność. Wysoka wydajność, to wysoka konwersja.
Niska wydajność może za to zepsuć pracę całego zespołu i wcale nie oznacza to, że za niską odpowiedzialność winę ponosi developer. Dlaczego? Ma na to wpływ szereg działań i zaniedbań na każdym etapie prac. Dlatego ważna, jak już wspomniałem, jest praca całego zespołu.
A co wpływa na niską wydajność?
- Wolna odpowiedź serwera i bazy danych
- Długie wczytywanie skryprów JS, CSS, itp.
- Nieprzemyślany format i waga obrazów oraz video
- Wczytywanie zbyt dużej ilości treści
Mobile first = team work + zrozumienie świata mobile
Ten nagłówek, to chyba najlepsze podsumowanie artykułu. Serwis zoptymalizowany pod urządzenia mobilne wymaga pracy całego zespołu, zrozumienia świata, w którym się poruszamy oraz dopasowania się do jego reguł i zasad.
A tak na marginesie czy dotyczy to tylko świata mobile? Moim zdaniem właściwe zrozumienie świata, w którym się poruszamy, użytkowników, do których mówimy oraz usługi czy produktu, który promujemy, powinien być zawsze nieodłącznym i kluczowym elementem projektowania. No ale o tym można by napisać osobny rozdział…
Zapraszamy do skorzystania z naszej nowej oferty i współpracy z nami w kreowaniu niezapomnianego wizerunku marki. JM Publicity – Twoje partnerstwo w osiąganiu sukcesu w biznesie!
Chcesz dowiedzieć się więcej? Przejdź do zakładki OFERTA lub POBIERZ OFERTĘ W PDF.
