Modalități de a îmbunătăți UX-ul site-ului dvs. mobil de comerț electronic

Amintiți-vă întotdeauna că o bună practică împărtășită de cineva poate să nu fie cea mai bună pentru alții. Aceste bune practici nu sunt create în mod egal, ci sunt doar punctele de plecare. În această serie de articole, vom parcurge cele mai bine cercetate practici sau linii directoare ale site-urilor mobile. Scopul nostru este să ne extindem cunoștințele despre dezvoltarea de site-uri mobile uimitoare și să validăm cele mai bune practici cu date cantitative despre modul în care utilizatorii percep un site mobil în dimensiunea specifică a aspectului, clarității, credibilității și utilizabilității.

Cel mai bine ar fi să utilizați aceste ghiduri pentru articole în practica dvs., dar nu este ceea ce ar trebui să ajungeți. De aici ar trebui să începeți optimizarea. Ar trebui să fii cel puțin la fel de bun ca aceste reguli. Rețineți, acestea sunt practicile web actuale. Ceea ce mergea acum 2 ani s-ar putea să nu mai funcționeze. Figura tactică este reală. Oamenii, tehnologiile web și tendințele de marketing sunt mereu în schimbare, iar câștigurile sunt întotdeauna perisabile.

Vă recomandăm să luați în considerare aceste reguli, dar să luați în considerare și modul în care site-ul dvs. specific se potrivește sau se diferențiază de reguli. Puteți aplica aceste practici imediat pe site-ul dvs. mobil, deși vă recomandăm să le testați mai întâi. Este posibil să nu fie aplicate în toate cazurile. Să trecem prin prima parte a „Cum să îmbunătățiți UX-ul site-ului mobil al magazinului dvs. de comerț electronic?”

1. Încercați să vă proiectați mai întâi site-ul mobil (adică înainte de a proiecta site-ul desktop)

Cu toții știm importanța dispozitivelor mobile în vânzările noastre. Peste 50% din vânzări sunt realizate de pe dispozitive mobile. Proiectarea site-ului dvs. mobil nu este nici distractiv, nici ușoară. Este cea mai inteligentă modalitate de a începe să vă proiectați site-ul. Să știm de ce:

Restricțiile sunt că dispozitivele mobile sunt mai mari decât orice altă platformă. Ecranele au dimensiuni mai mici, iar lățimea de bandă este redusă și multe alte restricții. Dacă începeți de la zero cu site-ul mobil, complicațiile care vin cu o degradare grațioasă (cum ar fi funcțiile care nu se traduc pe platforme sau datele nedorite care durează mai mult timp pentru a se încărca) pot fi evitate.

În continuare, un site mobil ușor de utilizat ar trebui să fie curat, intuitiv și rapid de încărcat. Aceste cerințe îi obligă pe designeri să înțeleagă de ce utilizatorii vizitează site-ul și ce conținut și caracteristici sunt esențiale.
O UX mai bună pe platformele mobile înseamnă că utilizatorii pot găsi cu ușurință tot ceea ce caută și nimic mai mult. În plus, dezvoltarea unui cadru clar pentru conținutul prioritizat reduce volumul de lucru pentru proiectarea site-ului desktop.

2. Redirecționează automat site-ul mobil, iar paginile trebuie să fie optimizate pentru mobil

Numărul utilizatorilor de telefonie mobilă este în continuare în creștere, crescând numărul de cumpărători de pe mobil. Oamenii fac achiziții frecvente de pe telefoanele mobile și se așteaptă să fie ușor. Dacă nu țineți pasul, rămâneți în urmă.

Pentru a ține pasul, site-ul de comerț electronic ar trebui să fie optimizat pentru toate dispozitivele. Oferiți o experiență mobilă mai bună printr-un site mobil optimizat, adică un site mobil complet receptiv.

Designul responsiv este o practică în care paginile web se adaptează la ecranul pe care sunt vizualizate. Conținutul paginii web se adaptează automat la ecranele diferitelor dispozitive, cum ar fi laptopuri, smartphone-uri, tablete, desktop-uri etc. Nu vor exista modificări în conținut și funcționalități cu această abordare.

Cu un site responsive, aceeași adresă URL corespunde tuturor platformelor. Înseamnă pur și simplu că nu vor exista adrese URL separate pentru dispozitivele mobile și că utilizatorii nu trebuie să aștepte să redirecționeze pe aceste adrese URL. Timp de încărcare mai mic = experiență mobilă mai bună . În plus, tot SEO merge la o singură adresă URL.

Un site adaptiv este ca un site receptiv, dar nu există un singur aspect pentru orice dimensiune de ecran. În schimb, există mai multe aspecte pentru diferite dimensiuni de ecran. Site-ul detectează ce dispozitiv este utilizat și afișează aspectul respectiv.

Este ușor să atingeți acest ghid prin dezvoltarea unui site mobil receptiv. Asigurați-vă că asigurați QA site-ului pe diferite platforme și dispozitive (cu browsere diferite). De asemenea, verificați toate paginile de pe site pentru a vă asigura că sunt optimizate pentru mobil. Cheia aici este de a oferi o experiență optimă de utilizare pentru utilizatorii de telefonie mobilă.

3. Design consistent pe diferite platforme pentru o UX mai fluidă

Trebuie să mențineți coerența și standardul pe toate platformele și dispozitivele pentru a asigura gradul de utilizare. Înseamnă că utilizatorii vor întâlni aceleași imagini, modele și fluxuri în magazinul dvs. de comerț electronic, indiferent de dispozitivul pe care îl folosesc. Pe scurt, utilizatorii care accesează magazinul dvs. de comerț electronic printr-un dispozitiv mobil sau browser desktop au aceeași experiență.

Deoarece dimensiunile ecranului sunt diferite, poate apărea nevoia de layout-uri diferite, dar într-o experiență proiectată în mod consecvent, utilizatorii vor recunoaște funcționalități familiare.

Multe startup-uri și antreprenori fac greșeala de a trata site-urile desktop și mobile ca produse diferite. Această abordare poate crea inconsecvență, rezultând o UX mai slabă și potențialul de înțelegere greșită a mărcii companiei.

Puteți evita această problemă. Iată câteva recomandări:

A. Identitatea vizuală

Încercați să utilizați aceleași culori, aspect, stiluri de font, elemente vizuale etc.

B. Iconografie consistentă

pictogramele aplicației și web ar trebui să reprezinte aceeași funcționalitate

C. Formulare

Numele butoanelor, linkurilor și opțiunilor de meniu ar trebui să fie aceleași atât pe site-ul web mobil, cât și pe desktop

D. Interacțiuni și flux

Procesul de navigare pentru fiecare caracteristică ar trebui să fie același (de exemplu, găsirea unui produs sau metoda de plată)

E. Coordonarea între designeri, dezvoltatori și testeri

Toată lumea din echipă ar trebui să aibă o înțelegere similară a fiecărei funcții implementate.

Aplicând aceste concepte de bază, utilizatorii se simt confortabil folosind atât serviciile web, cât și serviciile mobile fără dificultate.

4. Profitați de analize pentru a prioritiza un dispozitiv în timp ce vă proiectați site-ul mobil

Cu toții accesăm un site web prin intermediul dispozitivelor noastre mobile cel puțin o dată. Dar dacă știți care dispozitiv mobil sau platformă este folosit cel mai mult pentru a vă naviga în magazin, vă puteți optimiza site-ul cel mai bine pentru acel dispozitiv.

Instrumentele analitice, cum ar fi Google Analytics, vă pot oferi statistici eficiente, rapide și clare pentru a determina exact cum accesează un utilizator site-ul dvs. web. Folosind Google Analytics, puteți obține răspunsuri la următoarele întrebări:

• Câți utilizatori care au vizitat site-ul web erau din comunitatea Android sau iOS?
• Ce parte dintre vizitatori folosesc dispozitive cu ecran de rezoluție scăzută?
• Există o diferență între numărul de vizite de pagină de la utilizatorii care folosesc cea mai recentă versiune Android și cea veche de 2 ani?
• Cât timp petrec utilizatorii de dispozitive mobile iOS pe magazin în comparație cu cei cu Android?
• Ce tip de conexiune a fost folosit? Wifi sau date mobile?

Date ca acestea sunt prețioase pentru strategia de produs, iar companiile se pot concentra asupra publicului țintă. Ei pot crea produse care se potrivesc nevoilor reale ale utilizatorilor lor.

De exemplu , un magazin de comerț electronic are o mulțime de imagini, conținut și o listă lungă care necesită derularea pe ecran. Ei pot realiza că majoritatea utilizatorilor rămân pe site câteva secunde. Compania poate verifica profilul dispozitivelor care au accesat site-ul lor. Dacă utilizatorii care pleacă folosesc dispozitive cu ecrane mici și rezoluții scăzute, este posibil ca oamenii să părăsească site-ul din cauza UX slabă. Deci următorul pas pe care îl putem face este să îmbunătățim UX.

Pe scurt, cu cât știm mai multe despre utilizatori, cu atât ne putem asigura un produs accesibil, eficient și plăcut.

5. Testați versiunile mobile ale site-ului dvs

Trebuie să verificați cum arată și cum funcționează site-ul dvs. pe diferite dispozitive mobile. Există anumite instrumente disponibile pe care le puteți folosi pentru a vă testa site-ul.

A. Google Mobile-Friendly

Acesta este un instrument simplu. Trebuie să introduceți adresa URL a site-ului dvs., iar Google va genera o recenzie „folositoare”. Revizuirea poate fi astfel:
„Această pagină este ușor de utilizat pe un dispozitiv mobil.”
SAU
„Pagina nu este compatibilă cu dispozitivele mobile – această pagină poate fi dificil de utilizat pe un dispozitiv mobil. Remediați următoarele probleme:

• Text prea mic pentru a fi citit
• Vizualizarea nu este setată
• Elementele pe care se poate face clic sunt prea apropiate
• Folosește pluginuri incompatibile.”

B. Testul mobil. pe mine

În test.me mobil, trebuie să introduceți adresa URL a site-ului web pe care doriți să o verificați și să selectați dispozitivul și sistemul de operare. De acolo, puteți obține vizualizarea completă a site-ului web pe orice dispozitiv mobil. Prin testare, puteți remedia erorile înainte de lansare.

6. Realizați planuri de design flexibile și fluide

Pe piața actuală, există o mulțime de rezoluții mobile și dimensiuni de ecran, ceea ce mărește eforturile designerilor. De asemenea, densitățile multor dispozitive variază. De la ecranul cu densitate scăzută (360 pixeli) până la ecranul cu densitate mare (4K), iată modalitățile comune de a descrie densitatea:

• Densitate scăzută (ldpi)
• Densitate medie (mdpi)
• Densitate mare (hdpi)
• xhdpi (densitate foarte mare)
• xxhdpi (densitate foarte mare)
• xxxhdpi (densitate extra-extra-extra-înalta)

Iată câțiva termeni simpli legați de densitate

A. Rezoluție

Numărul de pixeli de pe ecran

B. Pixel independent de densitate (DP)

O unitate de pixeli virtuale definește un aspect al interfeței de utilizare. Un DP exprimă dimensiunile aspectului sau poziția într-un mod independent de densitate. DP este egal cu 1 pixel fizic pe un ecran de 160 dpi.

C. Dimensiunea ecranului

Mărimea ecranului este măsurată ca lungime a diagonalei ecranului.

D. Densitatea ecranului

Cantitatea de pixeli din zona fizică a ecranului, reprezentată de obicei prin puncte pe inch.

Toate aceste concepte pot fi aplicate în timpul dezvoltării site-ului mobil. Se asigură că interfețele sunt adaptabile pe toate dispozitivele. Aceasta se numește interfață fluidă. Pe scurt, o interfață fluidă este una în care dimensiunile sunt definite procentual.

7. Dacă nu utilizați design responsive, atunci creați adrese URL separate pentru a menține consistența

În timp ce proiectează interfața de utilizare a magazinului de comerț electronic, designerii ar trebui să se gândească la modul în care va fi afișat conținutul, iar utilizatorii cu dispozitive diferite îl vor accesa. În anumite scenarii, proporția și aspectul diferă mult de specificațiile de proiectare originale. Când site-urile web nu sunt concepute pentru a se potrivi pe mai multe dispozitive, acestea nu sunt „responsive”.
Designul responsiv este o tehnică de dezvoltare care detectează tipul de dispozitiv client și își ajustează designul pentru a se adapta la dimensiunea ecranului pe care este afișat. Astfel, același conținut poate fi afișat în format de 3 coloane pe un desktop, format de 2 coloane pe o tabletă și format de 1 coloană pe un smartphone.

Designul care nu răspunde poate apărea mai multe probleme, cum ar fi dimensiunile incorecte ale fontului, butoanele care nu se pot face clic etc. Nu toată lumea este ca noi, care poate crea modele foarte receptive. Dar există o alternativă pentru dezvoltatori și designeri de a gestiona designul web receptiv. Pot genera adrese URL care recunosc automat (prin etichete HTML) tipul de dispozitiv. După detectarea dispozitivului, conținutul poate fi afișat optim:

Câteva exemple de adrese URL generate sunt

• www.website.com (acces desktop)
• m.website.com (acces mobil)
• www.website.com (versiune mai ușoară cu HTML de bază) (funcție de acces la telefon)

8. Folosiți „eticheta meta viewport” pentru a potrivi paginile pe ecranele mobile

Potrivit Google, „o fereastră de vizualizare poate controla modul în care pagina de pornire se va afișa pe dispozitivele mobile”. Cu alte cuvinte, dacă designerii nu țin cont de portul de vizualizare, interfața de utilizare de pe un dispozitiv mobil va apărea la fel ca site-ul desktop. Sistemul va adapta ecranul pentru utilizarea mobilă în acest scenariu, dar în general nu funcționează. În unele cazuri, imaginile vor fi distorsionate și vor crea o experiență slabă pentru utilizator. După aplicarea viewportului, designerii pot controla modul de afișare și îmbunătățesc UX.

Cum se ține cont de vizualizarea?

Puteți utiliza o etichetă CSS numită „metaetichetă viewport”, care este inclusă în specificația CSS Device Adaptation.
Această etichetă are următoarea sintaxă: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. În timp ce inițiați designul mobil, determinați „nucleul” site-ului web.

În timp ce creează design-urile site-ului mobil, designerii ar trebui să se asigure că principalele caracteristici ale site-ului sunt prezentate clar. Pe scurt, site-urile web mobile ar trebui să permită funcționalitate completă, deoarece CTA este evident pe orice site web conceput pentru dispozitive mobile.

Dar cum să determinați celelalte caracteristici de inclus? Gândiți-vă la nucleul site-ului dvs. Care sunt principalii piloni ai site-ului? Care sunt principalele caracteristici ale site-ului? Ce caracteristici sunt minore, dar îmbunătățesc UX (cum ar fi căutarea, filtrele etc.)?

Să trecem printr-un exemplu de aplicare a conceptului de bază la un site de comerț electronic cu livrare de alimente. Pilonii principali ai acestui site ar fi:

• Conectați-vă și Înregistrați-vă
• Căutare produs
• Lista de produse
• Adaugă în coș
• Verifică

Un site desktop are mai multe funcții, dar le puteți filtra pe cele necesare și le puteți include în site-ul mobil. De asemenea, elimină posibilitatea ca utilizatorii să se simtă copleșiți de prea multe opțiuni pe un ecran mic.

10. Utilizați formulare simple și câmpuri de intrare

Există un formular pe care utilizatorul îl poate completa pe multe site-uri pentru a contacta echipa de asistență sau pentru a primi buletine informative și alte scopuri. Utilizatorii de telefonie mobilă pot considera aceste forme o problemă uriașă dacă nu sunt proiectate corespunzător. Cu cât formularul este mai lung și complex, cu atât este mai dificil pentru utilizatori să introducă informații.

Cum să optimizați formularul pentru dispozitivele mobile?

• Includeți numai câmpurile esențiale obligatorii pentru introducerea utilizatorilor. Dacă există prea multe câmpuri obligatorii, este mai probabil ca utilizatorul să abandoneze procesul de înregistrare.
• Nu împărțiți câmpurile în prea multe câmpuri. De exemplu, prenumele/numele poate fi considerat într-un nume simplu.
• Asigurați-vă că tastatura numerică este activată automat pentru câmpurile numerice, cum ar fi Contact nr. , cod poștal etc.
• Faceți mesajele de eroare concise.
• Încercați să includeți automatizarea în câmpuri. De exemplu, în timp ce solicitați adresa utilizatorului, utilizați funcționalitatea GPS și completați în prealabil câmpurile precum Cod PIN, stat, oraș etc.

Aplicarea acestor concepte de bază va îmbunătăți UX-ul site-ului dvs. mobil. Aceste aplicații vor limita șansa ca utilizatorii să abandoneze formularul sau site-ul dvs.

Încheierea

În prima fază a acestei serii, am trecut prin 10 linii directoare pentru îmbunătățirea UX-ului site-ului mobil al magazinului dvs. de comerț electronic. La Emizentech, cea mai bună companie de dezvoltare a comerțului electronic din India, avem experiență în dezvoltarea magazinelor de comerț electronic foarte receptive. Spuneți-ne cerințele dvs.