Sposoby poprawy UX Twojej mobilnej witryny eCommerce

Zawsze pamiętaj, że podzielona przez kogoś najlepsza praktyka może nie być najlepsza dla innych. Te najlepsze praktyki nie są tworzone w równym stopniu, ale są tylko punktami wyjścia. W tej serii artykułów omówimy sprawdzone metody i wskazówki dotyczące witryn mobilnych. Naszym celem jest poszerzenie naszej wiedzy na temat tworzenia zdumiewających witryn mobilnych i weryfikacja najlepszych praktyk za pomocą danych ilościowych na temat tego, jak użytkownicy postrzegają witrynę mobilną w określonym wymiarze wyglądu, przejrzystości, wiarygodności i użyteczności.

Najlepiej byłoby korzystać z tych wytycznych dotyczących artykułów w swojej praktyce, ale nie na tym powinieneś skończyć. Od tego należy rozpocząć optymalizację. Powinieneś być przynajmniej tak dobry, jak te wytyczne. Pamiętaj, to są obecne praktyki internetowe. To, co działało 2 lata temu, może już nie działać. Figura taktyczna jest prawdziwa. Ludzie, technologie internetowe i trendy marketingowe ciągle się zmieniają, a wygrane są zawsze nietrwałe.

Zalecamy zapoznanie się z tymi wskazówkami, ale także zastanów się, jak konkretna witryna pasuje lub różni się od wytycznych. Możesz od razu zastosować te praktyki w swojej witrynie mobilnej, chociaż zalecamy ich uprzednie przetestowanie. Nie mogą być stosowane w każdym przypadku. Przejdźmy przez pierwszą część „Jak poprawić UX witryny mobilnej Twojego sklepu e-commerce?”

1. Spróbuj najpierw zaprojektować swoją witrynę mobilną (tj. przed zaprojektowaniem witryny na komputery)

Wszyscy wiemy, jak ważne są urządzenia mobilne w naszej sprzedaży. Ponad 50% sprzedaży realizowane jest z urządzeń mobilnych. Projektowanie witryny mobilnej nie jest ani zabawne, ani łatwe. To najmądrzejszy sposób na rozpoczęcie projektowania witryny. Dowiedzmy się dlaczego:

Ograniczenia polegają na tym, że urządzenia mobilne są wyższe niż jakakolwiek inna platforma. Ekrany są mniejsze, a przepustowość niska i wiele innych ograniczeń. Jeśli zaczniesz od zera z witryną mobilną, możesz uniknąć komplikacji związanych z łagodną degradacją (takich jak funkcje, które nie są tłumaczone między platformami lub niechciane dane, których ładowanie zajmuje więcej czasu).

Następnie przyjazna dla użytkownika witryna mobilna powinna być przejrzysta, intuicyjna i szybko się ładować. Wymagania te zmuszają projektantów do zrozumienia, dlaczego użytkownicy odwiedzają witrynę i jakie treści i funkcje są niezbędne.
Lepszy UX na platformach mobilnych oznacza, że ​​użytkownicy mogą łatwo znaleźć wszystko, czego szukają i nic więcej. Poza tym opracowanie przejrzystych ram dla treści z priorytetami zmniejsza nakład pracy związany z projektowaniem witryny na komputery.

2. Automatycznie przekieruj witrynę mobilną, a strony muszą być zoptymalizowane pod kątem urządzeń mobilnych

Liczba użytkowników mobilnych wciąż rośnie, zwiększając liczbę kupujących z urządzeń mobilnych. Ludzie często robią zakupy za pomocą telefonów komórkowych i oczekują, że będzie to łatwe. Jeśli nie nadążasz, zostajesz w tyle.

Aby nadążyć, witryna e-commerce powinna być zoptymalizowana pod kątem wszystkich urządzeń. Zapewnij lepsze wrażenia mobilne dzięki zoptymalizowanej stronie mobilnej, tj. w pełni responsywnej stronie mobilnej.

Projektowanie responsywne to praktyka, w której strony internetowe dostosowują się do ekranu, na którym są przeglądane. Zawartość strony internetowej automatycznie dostosowuje się do ekranów różnych urządzeń, takich jak laptopy, smartfony, tablety, komputery stacjonarne itp. Dzięki takiemu podejściu nie będzie żadnych zmian w treści i funkcjonalności.

W przypadku responsywnej witryny ten sam adres URL odpowiada wszystkim platformom. Oznacza to po prostu, że nie będzie osobnych adresów URL dla urządzeń mobilnych, a użytkownicy nie będą musieli czekać na przekierowanie na te adresy URL. Krótszy czas ładowania = lepsze wrażenia z urządzeń mobilnych . Dodatkowo wszystkie SEO trafiają do jednego adresu URL.

Witryna adaptacyjna przypomina witrynę responsywną, ale nie ma jednego układu dla dowolnego rozmiaru ekranu. Zamiast tego istnieje wiele układów dla różnych rozmiarów ekranu. Witryna wykrywa, które urządzenie jest używane i wyświetla odpowiedni układ.

Łatwo jest osiągnąć tę wskazówkę, tworząc responsywną witrynę mobilną. Upewnij się, że przeprowadzasz kontrolę jakości witryny na różnych platformach i urządzeniach (z różnymi przeglądarkami). Sprawdź również wszystkie strony w witrynie, aby upewnić się, że są zoptymalizowane pod kątem urządzeń mobilnych. Kluczem jest tutaj zapewnienie optymalnego doświadczenia użytkownikom mobilnym.

3. Spójny projekt na różnych platformach dla płynniejszego UX

Aby zapewnić użyteczność, musisz zachować spójność i standard na wszystkich platformach i urządzeniach. Oznacza to, że użytkownicy napotkają te same wizualizacje, wzorce i przepływy w Twoim sklepie e-commerce, niezależnie od urządzenia, z którego korzystają. Krótko mówiąc, użytkownicy uzyskujący dostęp do Twojego sklepu internetowego za pośrednictwem urządzenia mobilnego lub przeglądarki na komputerze mają takie same wrażenia.

Ponieważ rozmiary ekranów są różne, może pojawić się potrzeba różnych układów, ale w konsekwentnie zaprojektowanym środowisku użytkownicy rozpoznają znajome funkcje.

Wiele startupów i przedsiębiorców popełnia błąd, traktując strony stacjonarne i mobilne jako różne produkty. Takie podejście może powodować niespójność, skutkując gorszym UX i potencjalnym niezrozumieniem marki firmy.

Możesz uniknąć tego problemu. Oto kilka zaleceń:

A. Tożsamość Wizualna

Staraj się używać tych samych kolorów, wyglądu, stylów czcionek, elementów wizualnych itp.

B. Konsekwentna ikonografia

ikony aplikacji i stron internetowych powinny reprezentować tę samą funkcjonalność

C. Sformułowanie

Nazwy przycisków, linków i opcji menu powinny być takie same w witrynie mobilnej i stacjonarnej

D. Interakcje i przepływ

Proces nawigacji dla każdej funkcji powinien być taki sam (np. znajdowanie produktu lub metody płatności)

E. Koordynacja między projektantami, programistami i testerami

Wszyscy w zespole powinni podobnie rozumieć każdą wdrożoną funkcję.

Stosując te podstawowe koncepcje, użytkownicy czują się komfortowo korzystając zarówno z usług internetowych, jak i mobilnych bez trudności.

4. Wykorzystaj analitykę, aby nadać priorytet urządzeniu podczas projektowania witryny mobilnej

Wszyscy przynajmniej raz uzyskujemy dostęp do strony internetowej za pośrednictwem naszych urządzeń mobilnych. Ale jeśli wiesz, które urządzenie mobilne lub platforma jest najczęściej używana do przeglądania sklepu, możesz zoptymalizować swoją witrynę najlepiej pod kątem tego urządzenia.

Narzędzia analityczne, takie jak Google Analytics, mogą zapewnić wydajne, szybkie i przejrzyste statystyki pozwalające dokładnie określić, w jaki sposób użytkownik uzyskuje dostęp do Twojej witryny. Korzystając z Google Analytics możesz uzyskać odpowiedzi na następujące pytania:

• Ilu użytkowników, którzy odwiedzili witrynę, pochodziło ze społeczności Androida lub iOS?
• Jaka część odwiedzających korzysta z urządzeń z ekranem o niskiej rozdzielczości?
• Czy jest różnica w liczbie odwiedzin strony przez użytkowników korzystających z najnowszej i dwuletniej wersji Androida?
• Jak długo użytkownicy mobilni iOS wydają na sklep w porównaniu do Androida?
• Jaki rodzaj połączenia został użyty? Wifi czy komórkowa transmisja danych?

Takie dane są cenne dla strategii produktu, a firmy mogą skoncentrować się na grupie docelowej. Mogą tworzyć produkty odpowiadające rzeczywistym potrzebom ich użytkowników.

Np . sklep e-commerce zawiera dużo obrazów, treści i długą listę, która wymaga przewijania na ekranie. Mogą zdać sobie sprawę, że większość użytkowników pozostaje na stronie przez kilka sekund. Firma może sprawdzić profil urządzeń, które uzyskały dostęp do jej witryny. Jeśli użytkownicy, którzy odchodzą, używają urządzeń z małymi ekranami i niską rozdzielczością, ludzie mogą opuszczać witrynę z powodu słabego UX. Następnym krokiem, który możemy podjąć, jest poprawa UX.

Krótko mówiąc, im więcej wiemy o użytkownikach, tym bardziej możemy zapewnić przystępny, wydajny i przyjemny produkt.

5. Przetestuj mobilne wersje swojej witryny

Musisz sprawdzić, jak wygląda i działa Twoja strona internetowa na różnych urządzeniach mobilnych. Dostępne są pewne narzędzia, których możesz użyć do przetestowania swojej witryny.

A. Przyjazny dla urządzeń mobilnych Google

To proste narzędzie. Musisz wpisać adres URL swojej witryny, a Google wygeneruje recenzję „przyjazną dla użytkownika”. Recenzja może wyglądać tak:
„Ta strona jest łatwa w użyciu na urządzeniu mobilnym”.
LUB
„Strona nie jest przyjazna dla urządzeń mobilnych – korzystanie z niej na urządzeniu mobilnym może być trudne. Napraw następujące problemy:

• Tekst za mały do ​​przeczytania
• Nie ustawiono rzutni
• Elementy klikalne zbyt blisko siebie
• Używa niekompatybilnych wtyczek.”

B. Test mobilny. ja

W mobilnym test.me musisz wpisać adres URL strony, którą chcesz sprawdzić oraz wybrać urządzenie i system operacyjny. Stamtąd możesz uzyskać pełny widok witryny na dowolnym urządzeniu mobilnym. Testując, możesz naprawić błędy przed uruchomieniem.

6. Twórz elastyczne i płynne układy projektowe

Na dzisiejszym rynku istnieje wiele rozdzielczości mobilnych i rozmiarów ekranu, co zwiększa wysiłek projektantów. Gęstości wielu urządzeń również się różnią. Od ekranu o niskiej gęstości (360 pikseli) do ekranu o wysokiej gęstości (4K), oto typowe sposoby opisywania gęstości:

• Niska gęstość (ldpi)
• Średnia gęstość (mdpi)
• Wysoka gęstość (HDPI)
• xhdpi (bardzo wysoka gęstość)
• xxhdpi (Bardzo-bardzo wysoka gęstość)
• xxxhdpi (Extra-extra-bardzo wysoka gęstość)

Oto kilka prostych terminów związanych z gęstością

A. Rozdzielczość

Liczba pikseli na ekranie

B. Piksel niezależny od gęstości (DP)

Wirtualna jednostka pikseli definiuje układ interfejsu użytkownika. DP wyraża wymiary układu lub położenie w sposób niezależny od gęstości. DP jest równe 1 fizycznemu pikselowi na ekranie 160 dpi.

C. Rozmiar ekranu

Rozmiar ekranu jest mierzony jako długość przekątnej ekranu.

D. Gęstość ekranu

Ilość pikseli w fizycznym obszarze ekranu, zwykle reprezentowana przez punkty na cal.

Wszystkie te koncepcje można zastosować przy tworzeniu strony mobilnej. Zapewnia to, że interfejsy można dostosować na wszystkich urządzeniach. Nazywa się to płynnym interfejsem. Krótko mówiąc, interfejs płynów to taki, w którym wymiary są określone w procentach.

7. Jeśli nie korzystasz z projektowania responsywnego, utwórz oddzielne adresy URL, aby zachować spójność

Projektując UI sklepu e-commerce, projektanci powinni zastanowić się, w jaki sposób będzie wyświetlana treść, a użytkownicy z różnymi urządzeniami będą mieli do niej dostęp. W niektórych scenariuszach proporcje i układ znacznie różnią się od oryginalnych specyfikacji projektowych. Gdy strony internetowe nie są zaprojektowane tak, aby mieściły się na wielu urządzeniach, nie są „responsywne”.
Projektowanie responsywne to technika programistyczna, która wykrywa typ urządzenia klienckiego i dostosowuje jego projekt do rozmiaru ekranu, na którym jest wyświetlane. Dzięki temu ta sama treść może być wyświetlana w formacie 3-kolumnowym na pulpicie, 2-kolumnowym na tablecie i 1-kolumnowym na smartfonie.

Nieodpowiadający projekt może powodować wiele problemów, takich jak nieprawidłowe rozmiary czcionek, nieklikalne przyciski itp. Nie wszyscy są tacy jak my, którzy potrafią tworzyć wysoce responsywne projekty. Istnieje jednak alternatywa dla programistów i projektantów do zarządzania responsywnym projektowaniem stron internetowych. Mogą generować adresy URL, które automatycznie rozpoznają (poprzez tagi HTML) typ urządzenia. Po wykryciu urządzenia treści mogą być wyświetlane optymalnie:

Kilka przykładów wygenerowanych adresów URL to

• www.website.com (dostęp z pulpitu)
• m.website.com (dostęp mobilny)
• www.website.com (lżejsza wersja z podstawowym kodem HTML) (funkcja dostępu telefonicznego)

8. Użyj „viewport Meta Tag”, aby dopasować strony do ekranów telefonów komórkowych

Według Google „widoczny obszar może kontrolować sposób wyświetlania strony głównej na urządzeniach mobilnych”. Innymi słowy, jeśli projektanci nie wezmą pod uwagę widocznego obszaru, interfejs użytkownika na urządzeniu mobilnym będzie wyglądał jak witryna na komputery. W tym scenariuszu system dostosuje ekran do użytku mobilnego, ale generalnie nie działa. W niektórych przypadkach obrazy będą zniekształcone i będą powodować złe wrażenia użytkownika. Po zastosowaniu rzutni projektanci mogą kontrolować tryb wyświetlania i ulepszać UX.

Jak wziąć pod uwagę rzutnię?

Możesz użyć tagu CSS o nazwie „metatag viewport”, który jest zawarty w specyfikacji CSS Device Adaptation.
Ten tag ma następującą składnię: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Rozpoczynając projektowanie mobilne, określ „rdzeń” witryny.

Tworząc projekty witryn mobilnych, projektanci powinni zadbać o to, aby główne cechy witryny zostały przedstawione w przejrzysty sposób. Krótko mówiąc, witryny mobilne powinny zapewniać pełną funkcjonalność, ponieważ CTA jest oczywiste na każdej witrynie przeznaczonej na urządzenia mobilne.

Ale jak określić inne funkcje, które należy uwzględnić? Pomyśl o rdzeniu swojej witryny. Jakie są główne filary serwisu? Jakie są główne cechy serwisu? Które funkcje są drobne, ale poprawiają UX (takie jak wyszukiwanie, filtry itp.)?

Przeanalizujmy przykład zastosowania podstawowej koncepcji w witrynie e-commerce z dostawą żywności. Głównymi filarami tej strony byłyby:

• Zaloguj się i zarejestruj
• Wyszukiwarka produktów
• Lista produktów
• Dodaj do koszyka
• Wymeldować się

Witryna na komputery ma więcej funkcji, ale możesz odfiltrować te niezbędne i uwzględnić je w witrynie mobilnej. Eliminuje również możliwość, że użytkownicy poczują się przytłoczeni zbyt dużą ilością opcji na małym ekranie.

10. Używaj prostych formularzy i pól wejściowych

Istnieje formularz, który użytkownik może wypełnić w wielu witrynach, aby skontaktować się z zespołem pomocy technicznej lub otrzymać biuletyny i inne cele. Użytkownicy mobilni mogą uznać te formularze za ogromny problem, jeśli nie są odpowiednio zaprojektowane. Im dłuższy i skomplikowany formularz, tym trudniejsze jest wprowadzanie informacji dla użytkowników.

Jak zoptymalizować formularz dla urządzeń mobilnych?

• Uwzględnij tylko podstawowe pola, które użytkownicy muszą wprowadzić. Jeśli jest zbyt dużo pól obowiązkowych, istnieje większe prawdopodobieństwo, że użytkownik zrezygnuje z procesu rejestracji.
• Nie dziel pól na zbyt wiele pól. Np. imię/nazwisko można uznać za proste imię.
• Upewnij się, że klawiatura numeryczna jest automatycznie aktywowana dla pól numerycznych, takich jak Kontakt nr. , kod pocztowy itp.
• Komunikaty o błędach powinny być zwięzłe.
• Spróbuj uwzględnić automatyzację w polach. Np. pytając o adres użytkownika, skorzystaj z funkcji GPS i wstępnie wypełnij pola, takie jak kod PIN, województwo, miasto itp.

Zastosowanie tych podstawowych pojęć poprawi UX Twojej witryny mobilnej. Te aplikacje ograniczą szansę, że użytkownicy porzucą formularz lub Twoją witrynę.

Zawijanie

W pierwszej fazie tej serii omówiliśmy 10 wskazówek dotyczących poprawy UX witryny mobilnej Twojego sklepu e-commerce. W Emizentech, najlepszej firmie zajmującej się rozwojem e-commerce w Indiach, mamy doświadczenie w tworzeniu wysoce responsywnych sklepów e-commerce. Poinformuj nas o swoich wymaganiach.