W kręgach marketingu mobilnego i optymalizacji “responsive design” to coś więcej niż tylko hasło. To standard, który wziął wszystko, co wiesz o projektowaniu stron internetowych i zwrócił go na swoją stronę – dosłownie.
Jak się okazuje, 9 na 10 użytkowników smartfonów prowadzi jakąś formę aktywności finansowej na swoich urządzeniach – wynika z badania Prosper Mobile Insights. Obejmuje to ponad połowę osób, które używają telefonów do robienia zakupów online. Chociaż współczynniki konwersji na komputerach stacjonarnych są nadal wyższe, Tablety nie są zbyt daleko w tyle.
Co ciekawe, mimo że współczynniki konwersji dla smartfonów są nadal poniżej 2%, im mniejszy ekran, tym więcej pieniędzy użytkownicy wydali średnio.
Należy pamiętać, że większość witryn nadal nie jest zoptymalizowana do obsługi ruchu mobilnego. W miarę jak projektowanie responsywne staje się coraz bardziej splecione z najlepszymi praktykami projektowania stron internetowych, kupujący będą bardziej komfortowe zakupy na różnych urządzeniach, a firmy przyzwyczają się do obsługi klientów za pośrednictwem różnych kanałów dedykowanych tym urządzeniom.
Dobrym tego przykładem jest WebUndies.com. ten rodzinny sprzedawca bielizny, bielizny nocnej i piżamowej poinformował, że jego sprzedaż mobilna osiągnęła 168 000 USD, czyli 5,4% ze sprzedaży 3,1 miliona. Jeśli wydaje się, że to zaledwie kawałek ruchu wart optymalizacji, należy wziąć pod uwagę, że jest to wzrost o ponad 169% dla sprzedawcy detalicznego. WebUndies korzysta zarówno z responsywnego projektu, jak i katalogu zoptymalizowanego pod kątem tabletu. Biorąc pod uwagę ilość uwagi WebUndies rozciąga się na swoich mobilnych kupujących, nic dziwnego, że ich ruch mobilny podwoił się z roku na rok.
Czym jest responsive design?
Responsive design to elastyczny, płynny układ, który dostosowuje się do różnych rozmiarów ekranu, rozdzielczości i urządzeń. Zamiast mieć oddzielne, indywidualne elementy projektu, które są zbudowane dla witryny mobilnej, projekt responsywny koncentruje się na kodzie rdzenia, który wyrównuje i sytuuje się, aby przepływać w ramach parametrów samego urządzenia.
Rozważ ten przykład pokazując kabiny do wynajęcia:
Jak widać, układ dostosowuje się do prezentowania informacji w sposób, który ma sens dla urządzenia, na którym jest wyświetlany.
Ale prawdziwe pytanie z punktu widzenia konwersji jest: co mam zatrzymać, a co przyciąć?
Elementy konwersji, które warto zachować
Zachowaj wszystko, co ułatwia klientom mobilnym szybkie znalezienie tego, czego szukają. Oznacza to Mapy i wskazówki, godziny pracy i funkcję “dotknij, aby zadzwonić”, która umożliwia kontakt z przedstawicielem.
Witryna mobilna Red Cross™ jest doskonałym przykładem integracji funkcji mobilnych w sposób, który ma doskonały sens. W jednym z przykładów możesz stuknąć, aby przekazać darowizny za pośrednictwem wiadomości SMS, telefonu lub karty kredytowej. Taka elastyczność pozwala użytkownikom kontrolować sposób, w jaki podejmują działania.
Projekt responsywny skoncentrowany na konwersji wykorzystuje również funkcje wykraczające poza ekran dotykowy. Ponieważ masz do czynienia ze znacznie mniejszą przestrzenią ekranu, chcesz w pełni wykorzystać dostępne opcje widzenia, dźwięku i mediów. Czytanie zwykłego tekstu na telefonie komórkowym jest męczące i trudne, ale oglądanie wideo lub odtwarzanie podcastu jest intuicyjne i łatwe.
Elementy, które warto przycinać
Optymalizacja mobilnego responsywnego projektu pod kątem optymalizacji konwersji przypomina budowanie strony docelowej. Musisz przyciąć tłuszcz, co oznacza odrzucenie wszystkiego, co może skłonić gościa do kliknięcia lub odwrócenia uwagi od podjęcia działań, które chcesz podjąć.
Jak widzieliście z powyższego przykładu kabiny, ogłoszenie o wynajęciu kabiny na jeziorze Flathead zostało całkowicie usunięte na rzecz miejsca na więcej zdjęć i tekstu. Ponieważ biały tekst na czarnym tle jest trudniejszy do odczytania, dla wersji smartphone zaimplementowano lepsze standardy użyteczności, które prezentują bardziej czytelny czarny tekst na białym tle.
Ale optymalizacja pod kątem responsywnego projektu mobilnego to nie tylko usuwanie reklam i dostosowywanie układów. Musisz również poważnie przyjrzeć się, co usunąć, aby uzyskać lepsze wrażenia użytkownika. Oto jak firma kosmetyczna Tria była w stanie zoptymalizować swoją stronę mobilną, aby sprzedawać produkty do depilacji laserowej:
Jest kilka rzeczy, których możemy się nauczyć z takiego projektu:
- Mniej znaczy więcej – zauważ, jak strona zoptymalizowana pod kątem urządzeń mobilnych prezentuje obrazy w przewijanym formacie pokazu slajdów zamiast jednego dużego widoku i kilku miniatur, co ułatwia nawigację dotykową.
- Rozszerzalna zawartość – zamiast zmuszać użytkowników mobilnych do przewijania fal treści, jedno dotknięcie otwiera stronę pełną korzyści, które są zwykle wystawione na przeglądarkę pulpitu po lewej stronie. Karty, które pojawiają się na niebiesko w wersji komputerowej, są otwierane za pomocą znaków plus w witrynie mobilnej.
- Recenzje są bardziej widoczne – zauważ, jak oceny i recenzje są z przodu i w centrum na stronie mobilnej, gdzie więcej wysokiej klasy przedmiotów zakupu są dodatkowo wzmocnione dowodem społecznym.
- Cena i opcje płatności są większe – Cena i możliwość płacenia w ratach są znacznie większe, więc nie trzeba szukać ” ile to kosztuje?”lub” jak Mogę za to zapłacić?”
- Darmowa wysyłka jest bardziej zauważalna – mobilni kupujący natychmiast widzą powiadomienie o bezpłatnej wysyłce wraz z dużą, widoczną ikoną, aby wyświetlić koszyk.
- Duży przycisk call-to-action – Tria w pełni wykorzystuje duży przycisk call-to-action, który zajmuje całą szerokość ekranu, więc nie ma szczypania, ściskania i powiększania, aby zobaczyć przycisk Dodaj do koszyka.
W tym przykładzie Tria uprościła, usprawniła i skupiła się na tym, co było ważne dla najlepszego możliwego doświadczenia użytkownika, dostępności i łatwości użytkowania.
Co byś przyciął?
Oto kolejny przykład mobilnego responsywnego projektu, tym razem promującego godzinę Ziemi World Wildlife Foundation:
Wersja na tablet po prostu przesuwa elementy witryny, ale wersja na smartfon układa je i eliminuje dodatki wysysające przepustowość, takie jak przyciemniona żarówka i zegar odliczający. Najnowsze wiadomości są również usuwane z głównego obszaru zainteresowania, co pomaga utrzymać wezwanie do działania krótkie i proste.
Ale nie każda strona wycina słodycze dla oczu. Spójrz na zmysł jedzenia. Na urządzeniu, w którym wygląd posiłku może być momentem zakończenia lub przerwania kliknięcia, aby dowiedzieć się więcej, Food Sense zdecydował się zachować wspaniałe obrazy i przyciąć tekst:
Na tablecie nawigacja po pasku bocznym jest przesuwana na górę, dzięki czemu przeglądarki mogą cieszyć się pełnym widokiem sałatki owocowej. Użytkownicy smartfonów mają ikony usunięte całkowicie za pomocą prostej nawigacji tekstowej i większego nacisku na poszczególne zdjęcia.
Patrząc na te przykłady, powinno być jasne, że tworzenie mobilnego responsywnego projektu to coś więcej niż tylko żonglowanie elementami projektu.
Wzrost współczynnika konwersji o 400%
Firma projektowa Electric Pulp niedawno przeprojektowała stronę internetową sprzedawcy odzieży O ‘ neill, aby była bardziej mobilna. Podjęli wszystkie właściwe decyzje, wprowadzając najlepsze praktyki projektowania mobilnego: płynny układ, składane menu, które można otworzyć jednym dotknięciem, zwiększony rozmiar czcionki, większe obszary dotknięcia i ulepszone zdjęcia.
Następnie przeprowadzili kilka testów. Nie zrobili typowych testów A / B. Zamiast tego spojrzeli na czysty wolumen zamówień i przychody oprócz konwersji ruchu niemobilnego. Takie były ich wyniki:
Czasami mobilny responsywny projekt jest kwestią praktyczności. Jak Shiseido Americas odkryło, gdy uruchomiło witrynę mobilną dla swojej wysokiej klasy marki kosmetycznej Nars w styczniu, po prostu nie mogli utrzymać trzech oddzielnych wersji swojej istniejącej witryny (na komputer, tablet i smartfon). Przejście na bardziej płynną konstrukcję pozwoliło im nadążyć za nowymi wydaniami urządzeń, na które nie byli przygotowani, takimi jak iPad Mini.
W tym przypadku Shiseido stworzył grafikę i inne zasoby, które pasowałyby wyłącznie do Nars mobile design, a nie po prostu do przestawiania elementów na istniejącej stronie. Dotychczasowe wyniki opłaciły się na wiele sposobów.
Udało im się zwiększyć konwersje przy kasie na smartfonie o 54% i konwersje na tablety o 24%. Oprócz tego nowe podejście zwiększyło również przepływ pracy i produktywność zespołu, zapewniając jednocześnie, że wszystkie podejścia do urządzeń wykorzystują odpowiednie zasoby, aby zmusić klienta do działania.
Najlepsze praktyki dla formularzy mobilnych w projektowaniu responsywnym
W dawnych czasach WAP, pola formularzy były nie do pomyślenia, ponieważ były one bólem głowy, aby spróbować wypełnić. Na szczęście standardy się zmieniły,a projektanci interfejsu użytkownika dostarczyli dobrze zaokrąglony zestaw instrukcji dla maksymalnej skuteczności przycisków.
Stoisko UX ma fantastyczny artykuł na temat najlepszych praktyk projektowania i optymalizacji formularzy mobilnych, który obejmuje następujące:
- Używanie etykiet wyrównanych pionowo (u góry) w porównaniu z tradycyjnymi etykietami wyrównanymi do lewej.
- Usunięcie wszelkich informacji, które nie są absolutnie konieczne. Wielu użytkowników może mieć utracone połączenia i utracone dane, co utrudnia wypełnianie długich formularzy.
- Łączenie pól formularza (takich jak wybór kraju/stanu/prowincji) lub Dokonywanie najbardziej popularnych wyborów pojawia się najpierw na liście i włączenie domyślnych wyborów, gdy ma to sens. To z kolei ułatwia użytkownikom szybkie skanowanie i podejmowanie działań bez marnowania dużo czasu i przepustowości.
Dobrym przykładem łatwego w użyciu formularza mobilnego jest Hertz.
Jak stworzyć własny responsywny projekt
W tym momencie możesz się zastanawiać: “prezentowanie przykładów i wyników jest dobre i dobre, ale jak stworzyć własny responsywny projekt mobilny?”Na szczęście istnieje kilka narzędzi, których możesz użyć, aby usprawnić i uprościć ten proces. Przykładem jest szkielet. Szkielet jest zestawem rozwojowym boilerplate, który jest oparty na popularnym stylu siatki 960. Posiada również wiele rozszerzeń dla popularnych platform zarządzania treścią i udostępniania, w tym WordPress, Drupal i Github.
Wniosek
Zaczynając od płynnego układu, zminimalizujesz czas, koszty i pracę związaną z dopasowaniem witryny do różnych urządzeń. Zamiast tego będziesz mógł skoncentrować się na solidnym kodzie, który można łatwo zastosować na różnych urządzeniach dzisiaj i w przyszłości.
Najważniejszą rzeczą, jaką możesz zrobić, aby zwiększyć konwersje dzięki responsywnemu projektowi mobilnemu, jest odkrycie, które funkcje są najważniejsze dla odwiedzających. Możesz to zrobić za pomocą nałożonej mapy cieplnej, aby określić, gdzie ich obszary skupienia mają tendencję do spadania. Dobry mobilny responsywny projekt, który jest również skoncentrowany na konwersji, wyeliminuje bezużyteczne elementy nawigacyjne i projektowe, koncentrując się na wyraźnym, prostym projekcie, który ładuje się szybko i wymaga działania.
Aby pomóc ci szybciej się rozwijać, stworzyłem również infografikę, która nauczy Cię, jak uzyskać większą sprzedaż od użytkowników mobilnych.
Kliknij na obrazek poniżej, aby zobaczyć większy widok:
