Liczba osób korzystających z Internetu na urządzeniach mobilnych stale wzrasta. Obecnie jest to już ponad połowa światowej populacji. Powszechne korzystanie z urządzeń mobilnych w celu uzyskania dostępu do sieci doprowadziło do powstania nowych metod rozwoju, takich jak mobile first design, który zachęca do projektowania stron przyjaznych dla urządzeń mobilnych.
W tym artykule szczegółowo opisuję podejście mobile first design. Wyjaśnię m.in. czym tak naprawdę jest Mobile First Design, jakie są jego plusy i minusy oraz jaki ma wpływ na jakość doświadczeń użytkowników (user experience).
W odpowiedzi na rosnącą popularność korzystania z internetu na urządzeniach mobilnych powstał pomysł projektowania stron internetowych przyjaznych dla telefonów komórkowych. Responsive Web Desing – responsywny projekt strony internetowej. Jest to proces tworzenia stron internetowych, które działają na dowolnym urządzeniu mobilnym z dowolnym rozmiarem ekranu bez konieczności powiększania i pomniejszania, aby zobaczyć całą zawartość. W ten sposób treść strony jest dostępna dla wszystkich użytkowników, co jednocześnie sprawia, że wzrasta jakość doświadczeń na stronie.
Ale sprawy poszły o krok dalej, gdy narodził się projekt mobile first. Mobile First Design jest dokładnie tym na co wskazuje jego nazwa – rozpoczęciem projektowania od najmniejszych ekranów, a następnie przechodzenie do coraz większych rozmiarów.
Mobile first a User Experience
Generowanie leadów i współczynniki konwersji są w dużym stopniu uzależnione od wyglądu i treści witryny, która jest widoczna dla użytkowników. Jeśli nie możesz wyjaśnić odbiorcom, w jaki sposób Twoje usługi / produkty przyniosą im korzyści, nie zostaną oni na Twojej stronie. Projektując witrynę zorientowaną na urządzenia mobilne, możesz pomóc Twojej firmie w spełnieniu wszystkich wymagań i szybkim osiągnięciu celów. User experience jest najważniejszym aspektem podczas tworzenia strony, a jeśli możesz potencjalnie poprawić to doświadczenie, zyskasz szacunek i zaufanie użytkowników. Takie podejście sprawi, że będą oni wracać, a tym samym Twoje zyski będą rosły.
Mimo, że brzmi to jak idealne rozwiązanie, to wciąż podejście mobile first design nie jest normą dla większości firm zajmujących się projektowaniem stron. Aby zrozumieć dlaczego, przejdźmy do zalet i wad projektowania witryn z myślą o urządzeniach mobilnych.
Zalety Mobile First
Doskonałe doświadczenia użytkownika.
Podejście mobile-first pozwala stworzyć doświadczenie użytkownika (UX), które faworyzuje urządzenia mobilne. Odwiedzający inaczej wchodzą w interakcję z witrynami komputerowymi niż mobilnymi, a Twój UX musi się zmieniać w zależności od rozmiaru ekranu. Konstrukcja zorientowana na urządzenia mobilne pozwala na stopniowe zwiększanie wrażenia i treści w miarę powiększania się ekranu.
Koncentracja na najważniejszej treści.
Ponieważ przestrzeń na urządzeniu mobilnym jest niewielka, a projekt musi wyglądać na czysty i dopracowany, musisz ustalić priorytety. Podejście Mobile First zapobiega dodawaniu niepotrzebnych funkcji i treści.
Dopracowana strategia i plan wdrażania.
Mobile first design wymaga, aby przed rozpoczęciem opracowywania ustalić priorytety dla treści. Często programiści zapominają o istotnych treściach i dodają je później. Strategia mobile first zmusza Cię do planowania w pierwszej kolejności i późniejszego rozwoju, dzięki czemu nie możesz zapomnieć o ważnych treściach.
Szybszy czas ładowania.
Podczas ładowania strony internetowej w przeglądarce wiele elementów (obrazów, filmów, audio itp.) jest automatycznie ładowanych. Wersje mobilne tej samej witryny często ukrywają te elementy ze względu na ograniczoną przestrzeń. Nie myślą o tym, że zawartość jest również ładowana w tle. Powoduje to wydłużenie czasu ładowania. W przypadku korzystania z podejścia Mobile First tak się nie dzieje.
Wady Mobile First
Czas i koszty.
Projektowanie z myślą o urządzeniach mobilnych nie jest ani zabawne, ani łatwe, i wymaga zespołu, który rozumie nieodłączne różnice w tym podejściu. Wymaga nowych metod pracy i projektowania, a także zaangażowania, testowania i szerokiego zrozumienia platformy mobilnej.
Ponownie, ponad połowa internautów twierdzi, że nie poleci firmy ze źle zaprojektowaną witryną na urządzeniu mobilnym. Aby uniknąć tego scenariusza, Twoja firma powinna postępować zgodnie z poniższymi krokami, aby upewnić się, że Twoja witryna mobilna jest na najwyższym poziomie.
1. Użytkownicy na pierwszym miejscu
Pierwszą rzeczą, którą należy zrobić jeszcze przed rozpoczęciem procesu projektowania witryny na urządzenia mobilne, jest zbadanie i zidentyfikowanie problemów użytkowników. Witryna zorientowana na urządzenia mobilne powinna pomóc odwiedzającym wykonać zadanie lub rozwiązać problem szybko i skutecznie, w sposób, który jest dla nich najwygodniejszy.
Drugim ważnym krokiem jest określenie, jakie ścieżki użytkowników należy zaimplementować w swojej witrynie mobilnej. Spróbuj rozważyć różne scenariusze zachowań użytkowników na każdej podstronie i odpowiednio dostosuj projekt do podróży użytkownika.
WAŻNE WSKAZÓWKI
Aby Twoja witryna była bardziej przyjazna i intuicyjna dla użytkownika, zastanów się nad możliwymi interakcjami między użytkownikiem a interfejsem witryny i zidentyfikuj problemy użytkowników poprzez:
Zbadanie istniejących już witryn mobilnych i dowiedzenie się, jak się poprawiły.
Analizę konkurencji i sprawdzenie, jakich rozwiązań przyjaznych dla urządzeń mobilnych używają, ale też co mogłoby działać lepiej.
Zapytanie odwiedzających bezpośrednio o problemy, które napotykają na Twojej stronie mobilnej za pomocą ankiet.
2. Hierarchia treści
Tworząc treści dla witryny mobilnej, należy zadbać o to, aby była ona jak najbardziej zwięzła i rzeczowa. Daj użytkownikom treści, których szukają, pozbywaj się bałaganu i wszystkiego, co może rozpraszać użytkownika lub utrudniać odczytanie strony. Ponieważ witryny mobilne mają pewne ograniczenia dotyczące rozmiaru ekranu, powinieneś prezentować treści swoim odbiorcom w sposób, który respektuje wizualną hierarchię według ważności treści. Ułatwia to rozeznanie, które elementy są najważniejsze i zasługują na pierwsze miejsce.
WAŻNE WSKAZÓWKI
W trakcie optymalizacji treści podczas tworzenia projektu mobile first i tworzenia jej hierarchii, kieruj się następującymi wskazówkami:
Utrzymuj tytuły na górze, a podgląd artykułu w części strony widocznej na ekranie, aby czytelnicy mogli od razu zobaczyć i zrozumieć treść.
Zoptymalizuj rozmiary obrazów i filmów, aby uzyskać wysoką wydajność na urządzeniach mobilnych.
Skoncentruj się na prezentowaniu tylko odpowiednich treści, które Twoi użytkownicy mogą szybko przeskanować.
Zadbaj, aby treść była zwięzła oraz dostarczała jak najwięcej informacji w jak najmniejszej liczbie słów.
3. Prosty i minimalistyczny design
Prosty i zwięzły design nie bez powodu jest modny w projektowaniu stron internetowych. Poprawia bowiem czytelność strony i skupia uwagę użytkowników na tym, co najważniejsze. W praktyce oznacza to, że budując stronę mobile first, powinieneś zachować te elementy, których naprawdę potrzebujesz, a resztę usunąć. Uwaga ta w szczególny sposób odnosi się do fragmentów interfejsu związanych z interakcją z użytkownikiem, takich jak formularz kontaktowy. Staraj się nie obciążać użytkowników zbędnymi elementami, które mogą ich denerwować i rozpraszać, takimi jak wyskakujące okienka i reklamy. Uwzględnij tylko te elementy, dla których pojawili się oni na Twojej stronie.
WAŻNE WSKAZÓWKI
Chcąc uprościć swoją witrynę zorientowaną na urządzenia mobilne, rozważ podjęcie następujących środków:
Używaj prostej typografii i nie rób jej zbyt małej dla ekranów mobilnych.
Używaj szerokich odstępów i czystych linii.
Zadbaj o odpowiednio wyeksponowaną i zintegrowaną wyszukiwarkę.
Wykorzystaj białą przestrzeń, aby układ był bardziej czytelny.
Użyj maksymalnie dwóch kolumn podczas prezentacji treści.
4. Czytelne i widoczne CTA
Poste linie, jasne kolory i elementy typograficzne zdziałają cuda w przypadku witryn zaprojektowanych z myślą o smartfonach. Połączenie ich wszystkich w skuteczny, efektowny przycisk CTA (wezwanie do działania) jest koniecznością. Brak CTA może skutkować utratą cennych leadów i konwersji. Jeśli to możliwe, używaj ich zamiast linków, które mogą być bardzo trudne do kliknięcia na ekranach telefonów komórkowych.
WAŻNE WSKAZÓWKI
Inne graficzne elementy zorientowane na urządzenia mobilne, które poprawiają wrażenia użytkownika i prowadzą ich w dół lejka sprzedażowego, również powinny przyciągać uwagę. Obejmują one:
Czytelne przyciski nawigacyjne.
Kontrastowe schematy kolorów i żywe odcienie.
Oryginalny design np. ręcznie rysowane ilustracje.
Dopracowaną typografię – odpowiednio dobrany rozmiar i krój pisma.
Podsumowanie
Użytkownicy mobilni stanowią już większość odwiedzających internet. Prowadząc biznes w internecie Twoim zadaniem jest zaspokojenie potrzeb odbiorców. Oznacza to, że jeśli oni zaczynają się od urządzeń mobilnych, Ty również powinieneś zacząć od urządzeń mobilnych.
Mobile first to nowe podejście do projektowania najlepszych możliwych doświadczeń użytkowników, które pomoże określić strategię cyfrową dla Twojego produktu lub marki.
Graficzka komputerowa z 16 letnim doświadczeniem. Na swoim koncie ma realizacje dla globalnych marek w zakresie projektowania kreatywnego oraz copywritingu. Od niemal 4 lat zajmuje się projektowaniem UX w ARTNOVA gdzie z zaangażowaniem dzieli się swoją wiedzą i doświadczeniem. Prywatnie Psia Mama.
