Facebook
Promotraffic – marketing internetowy, pozycjonowanie stron wwww
+48 512 044 729
PL EN

10 zasad projektowania strony mobilnej według Google

10 zasad projektowania strony mobilnej według Google

Monika Śmigla
SEO Specialist
18 lutego 2016
Kategorie: Optymalizacja , SEM , SEO
0 463 min

Z artykułu
dowiesz się:

  • Jak zaprojektować stronę mobilną, która będzie SEO friendly
  • Jak sprawić by Twoja strona mobilna byla przyjazna użytkownikom

W ostatnich latach mamy do czynienia z coraz większą liczbą użytkowników korzystających z urządzeń mobilnych. Osoby te wykorzystują urządzenia mobilne głównie do przeglądania stron www, ale coraz częściej również do robienia zakupów w sklepach internetowych. Obecnie szacuje się, że ruch mobilny w Polsce wynosi ponad 20% (źródło: Gemius 2015), co daje nam 3 miejsce wśród krajów Europy Środkowo-Wschodniej. Z miesiąca na miesiąc liczba ta rośnie. Ze względu na zwiększający się udział mobile w ruchu internetowym Google postanowiło zadbać o to, by użytkownicy m.in. smartphonów mieli takie same szanse na znalezienie interesujących ich informacji oraz robienia zakupów jak użytkownicy korzystający z komputerów stacjonarnych lub przenośnych. W tym celu 21 kwietnia 2015 roku Google uruchomiło algorytm mający za zadanie oceniać zgodność stron internetowych z urządzeniami mobilnymi i na tej podstawie ustalać ranking stron w wynikach wyszukiwania. Od tego czasu właściciele witryn, które do tej pory nie posiadały wersji mobilnej lub ich strona nie była responsywna ruszyli w poszukiwaniu osób, które stworzą dla nich wersje mobile.

 gemius

Aby twórcom stron mobilnych żyło się lepiej Google przygotowało zestaw zasad, których należy przestrzegać podczas projektowania witryn mobile friendly:

 

  1. 1. Przyciski call-to-actions

Podczas projektowania strony mobilnej bardzo ważną jej częścią są wszelkie przyciski nawołujące użytkownika do interakcji.  Zaprojektuj je więc tak by były widoczne i odróżniały się (np. kolorem) od pozostałych elementów na stronie. Dzięki temu zmniejszysz ilość czasu potrzebnego użytkownikowi na dokonanie konwersji. Zwróć uwagę także na położenie butonów w obrębie witryny. W tym wypadku warto zaufać zasadom User Experience.

 przycisk call-to-actions

  1. 2. Widoczne i proste menu

Projektując stronę mobilną często zmuszeni jesteśmy do ponownego zaprojektowania menu głównego. Nie wystarczy tutaj przeniesienie menu z dotychczasowej strony. Wersja mobilna powinna mieć zdecydowanie krótsze i prostsze menu, które nie będzie sprawiało użytkownikowi problemów podczas wyświetlania np. na smartphonie. Musisz  tu również pamiętać o wyskakujących reklamach oraz bannerach, które mogą zasłaniać nasze menu, skutecznie odstraszając tym potencjalnego klienta.

 Menu strony

  1. 3. Back to home page

Każdy użytkownik powinien mieć szanse powrotu do strony głównej twojej witryny bez użycia przycisku „wstecz”. Stworzysz mu do tego idealną sytuację uwzględniając w menu głównym link do strony głównej lub umieszczając go w logo firmy.

 

  1. 4. Wyszukiwarka wewnętrzna

Aby ułatwić użytkownikom odnalezienie istotnych dla nich informacji lub konkretnego produktu uwzględnij w projekcie strony mobilnej wyszukiwarkę wewnętrzną. Zwróć uwagę by była ona na tyle intuicyjna, aby podpowiadała użytkownikowi słowa/produkty, a także posiadała funkcję autokorekty. Warto także ułatwić wyszukiwanie konkretnej rzeczy dodając filtrowanie np. koloru, marki, ceny czy rozmiaru. Zastosowanie filtrowania produktów sprawdzi się przede wszystkich w dużych sklepach internetowych.

 Wyszukiwarka wewnętrzna

  1. 5. Pozwól użytkownikowi być gościem na stronie

Wiele sklepów internetowych wymusza na użytkownikach założenie konta na stronie w celu przeglądania pozostałych podstron. Wg. badań przeprowadzonych przez Google użytkownicy znacznie częściej rezygnowali z rejestracji i opuszczali stronę, która stawiała taki wymóg. Pozwól więc potencjalnemu klientowi nie tylko na przeglądanie witryny bez rejestracji na niej, ale również na dokonanie na niej zakupów jako gość.

 

  1. 6. Szybki kontakt

Przycisk click-to-call może okazać się niezbędny zwłaszcza w przypadku sklepów internetowych. Użytkownik, który napotkał problem np. podczas zakupów może za pomocą jednego przycisku skontaktować się z infolinią.

 Szybki kontakt

  1. 7. Formularz kontaktowy

Formularz na stronie mobilnej powinien być przede wszystkim prosty.  Warto zastosować w nim automatyczne uzupełnianie niektórych pól z rozwijalnej listy (np. wybór miasta, wysuwany kalendarz). Taka forma wypełniania formularza zniweluje wysuwanie się klawiatury, które w niektórych urządzeniach mobilnych może być problematyczne. Minimalizowaniu aktywności użytkownika podczas wypełniania formularza sprzyja także autouzupełnianie pól, które użytkownik wypełnił np. podczas rejestracji na stronie.  Warto także oznaczyć pola obowiązkowe, które musza być uzupełnione by formularz był wysłany. Istotną kwestią jest również wyraźne zaznaczenie pól, które zawierają błędy oraz podanie informacji jak uzupełnić je poprawnie.

 Formularz kontaktowy

  1. 8. Grafika

Niezwykle ważną rzeczą podczas projektowania strony mobilnej jest zadbanie  od odpowiednią rozdzielczość grafiki, która dostosuje się do wielkości ekranu smartphona, a także do orientacji pion-poziom, W wielu przypadkach grafika lub zdjęcie produktu może mieć duży wpływ na dokonanie zakupu. Nie każmy więc użytkownikowi powiększać lub zmniejszać zdjęć produktu.

 

  1. 9. Jedno okno przeglądarki

W odróżnieniu od tradycyjnej strony internetowej na desktopie przeglądanie strony mobilnej powinno odbywać się w obrębie jednego okna przeglądarki. Otwieranie wielu okien np. po przejściu na inną podstronę, będzie często przyczyną opuszczenia witryny przez użytkownika.

 

  1. 10.  „Desktop” czy „full site”?

Jeśli zdecydowałeś się by na stronie mobilnej dodać odnośnik do wersji desktopowej twojej strony, to zrób to poprawnie. Użyj call to actions o nazwie „desktop” zamiast „full site”. To drugie określenie może spowodować, że użytkownik pomyśli iż na stronie mobilnej nie znajdzie wszystkich informacji/produktów   i przejdzie na wersję desktopową, która sprawi mi trudność w przeglądaniu i dokonaniu konwersji.

 Płaski Responsive design

Chcesz by Twoja witryna pozycjonowała się zarówno w wersji desktopowej, jak i w wersji mobilnej? Wykorzystaj potencjał swojej witryny! Zastosuj tych kilka punktów podczas projektowania swojej strony mobilnej. Połączenie zasad User Experience z właściwą optymalizacją przyniosą sukces w postaci zwiększonej liczby konwersji na stronie mobilnej, a na tym Ci przecież zależy, prawda?