Cele mai importante greșeli de proiectare și dezvoltare a aplicației mobile Magento pe care le întâlnim în continuare

Comerțul electronic mondial a realizat 3,54 miliarde de dolari în 2019 și va atinge 6,54 miliarde de dolari până în 2022. După cum v-ați aștepta, webmasterii pricepuți vor o bucată din tortul respectiv și pariază pe platforme de comerț electronic de ultimă generație.

În această postare, vă vom prezenta Magento 2 și de ce este adesea ales în eCommerce, vă vom prezenta prin ignorările tipice care se întâmplă în cursul dezvoltării aplicațiilor pe platformă, precum și vă vom oferi sfaturi despre ce trebuie evitat când vine vorba de blocul de proiectare.

Ce veți găsi în acest articol?

Câteva cuvinte despre Magento 2
Greșeli care apar adesea cu dezvoltarea Magento și designul aplicațiilor
1. UI umplute și UX slab
2. Nu este construit pentru iOS și Android și nici nu are PWA
3. Testare slabă a utilizatorului
4. Experiență de checkout slabă
5. Viteza de încărcare
Concluzie

Sună bine? Hai să ne scufundăm!

Câteva cuvinte despre Magento 2

Deși Magento nu este cea mai frecvent utilizată platformă software de comerț electronic de astăzi, deși serviciile de dezvoltare Magento se confruntă în prezent cu o creștere a cererii. Pentru început, platforma este foarte personalizabilă și poate fi practic „sculptată” chiar în jurul nevoilor specifice ale afacerii, mai ales dacă magazinul este complex și pe scară largă. Mai mult, platforma crește de trei ori mai repede decât colegii săi. Ca să nu mai vorbim că odată cu încetarea suportului pentru prima versiune a Magento la mijlocul anului 2020, procesul dur de migrare la cea de-a doua versiune a platformei este pur și simplu inevitabil.

Potrivit Datanyze și așa cum se vede în captura de ecran de mai jos, Magento stă în spatele altor platforme în ceea ce privește cota de piață și numărul de domeniu. În prezent, se află în spatele WooCommerce, Squarespace și Shopify, procentajul cotei de piață este de 3,35%, cu peste 70 de mii de domenii.

Captură de ecran de la Datanyze

Alte date colectate de Statista sugerează că începând din primăvara anului 2020, Magento deține poziția a 6-a printre platformele de comerț electronic de top din întreaga lume, cu o cotă de piață de 3,44%.

Captură de ecran de la Statista

Dar nu vă grăbiți cu concluzii despre poziția sa în liste încă. De-a lungul perioadei de 4 ani din 2016 până în 2020, baza de comercianți a Magento a crescut cu 200%. Ceea ce este destul de impresionant dacă ai în vedere că a crescut cu 100% numai din 2017 până în 2018. Mai mult decât atât, este demn de remarcat faptul că Magento este printre primele platforme de comerț electronic B2B.

Și, așa cum a fost deja menționat pe scurt, este o potrivire excelentă pentru magazinele mari și foarte personalizabile care nu doresc să rămână la modelele de șabloane „standard”. Da, acest lucru implică, prin urmare, sfera de lucru a dezvoltatorilor și designerilor profesioniști pentru construirea magazinului (spre deosebire de modificarea blocurilor drag-and-drop gata făcute).

Acesta este motivul pentru care, revenind la mulți ani de dezvoltare atât pentru Magento 1, cât și pentru Magento 2, am dori să vorbim despre ce să nu facem pentru ca un proiect Magento să aibă succes.

Greșeli care apar adesea cu dezvoltarea Magento și designul aplicațiilor

Dezvoltarea Magento necesită abilități tehnice puternice și o înțelegere foarte aprofundată a principiilor sale de navigație pentru a crea modele adecvate. Astfel, nu toată lumea o are roz cu platforma. Dezvoltatorii și designerii de aplicații mobile Magento fac greșeli care le costă conversii și profituri. Să explorăm aceste erori și cum pot fi remediate.

1. UI umplute și UX slab

Elementele aglomerate pot distruge designul aplicației mobile Magento înainte de a începe. Așadar, păstrați designul simplu.

Când cumpără online, oamenii petrec aproximativ patru minute pe mobil. Dar petrec cinci minute sau mai mult pe desktop. Prin urmare, aveți timp minim pentru a vă marca pe un potențial cumpărător. Nu-ți ucide șansele cu dezordine.

Cu siguranță, nu doriți să creați un design bland. Și asta este contraproductiv. Trebuie să echilibrezi lucrurile. Mai exact, doriți ca utilizatorii aplicației dvs. să se bucure de o experiență interactivă care îi determină să facă o achiziție.

Deci, cum ajungi la un echilibru? Cum realizați o interfață de utilizator interactivă și evitați aglomerația? Cum proiectați experiențele utilizatorilor care fac clic?

Iată câteva dintre cele mai bune practici din industrie pe care le puteți utiliza.

Designul ar trebui să accepte atingere dublă și prindere pentru zoom

Credit de imagine

Într-un studiu, Institutul Baymard a aflat următoarele:

„40 la sută dintre site-urile de comerț electronic nu au oferit funcții de zoom, cum ar fi atingerea dublă sau ciupirea imaginii.”

În consecință, acele site-uri web au înregistrat rate de respingere ridicate. Potrivit studiului, chiar și acele site-uri care au oferit versiuni în prim plan ale imaginilor produselor lor, dar nu au acceptat gesturi de zoom, au suferit conversii slabe.

O altă problemă este utilizarea imaginilor cu rezoluție mică. Nu sunt egale cu nimic, deoarece utilizatorii nu pot vedea detaliile produsului. Atâta timp cât imaginile sunt de înaltă calitate și optimizate în ceea ce privește dimensiunea lor, sunteți pe drumul cel bun.

Mai mult decât atât, dezvoltatorii experți Magento și proiectanții de aplicații mobile indică în mod clar că sunt prezente funcții de zoom. Studiul Baymard Institute a constatat că 50 la sută din aplicațiile care au oferit funcția nu au indicat că au făcut-o.

Acceptați funcția „Salvați articolul” sau „Salvați coșul de cumpărături”

Pe baza statisticilor Oberlo din 2020 privind vânzările M-Commerce, numărul vânzărilor realizate de pe dispozitive mobile continuă să crească, acest lucru este clar văzut în captura de ecran de mai jos.

Captură de ecran de la Oberlo

Deși dispozitivele mobile conduc cel mai mult trafic către un magazin online, cumpărătorii se întorc adesea pe desktop-urile lor pentru a finaliza achiziția. Aici apare funcția „Salvați articole” sau „Lista de dorințe”.

Construirea funcției „Salvați coșul” (denumit și coșul de cumpărături perpetuu) în aplicația dvs. Magento eCommerce poate fi utilă în multe cazuri. Deoarece uneori cumpărătorii nu sunt încă pregătiți să cumpere, vor să păstreze coșul pentru mai târziu. De asemenea, doriți să trimiteți e-mailuri de reamintire la intervale de timp către acești cumpărători pentru a-și finaliza achizițiile. Mai mult, este logic să puneți un afișaj de memento pe versiunea desktop pentru a-i încuraja să finalizeze pașii de plată.

Proiectare pentru Thumb

Aproximativ 75% dintre utilizatorii de telefoane mobile se bazează pe degetele mari atunci când interacționează cu dispozitivele lor. Deci, designul site-ului dvs. mobil ar trebui să se alinieze comportamentului utilizatorului respectiv.

Proiectarea cu accent pe degetul mare crește conversia, îmbunătățește implicarea utilizatorilor și facilitează navigarea. Acest lucru este de două ori mai relevant atunci când lucrați la proiectarea progresivă a aplicațiilor dvs. web.

Captură de ecran de la Alistapart

Mai mult, doriți ca designul dvs. să pună elemente critice ale utilizatorului în zona naturală a „zonei degetului mare”. Utilizatorii dvs. nu ar trebui să aibă dificultăți în accesarea a ceea ce ați dori să faceți în aplicația dvs.

Captură de ecran din Smashing Magazine

Acest comportament al utilizatorului este încă un motiv pentru a declanșa designul aplicației dvs. mobile Magento. Doriți ca utilizatorii să se concentreze doar pe câteva lucruri la un moment dat, deoarece se aliniază la modul în care își folosesc telefoanele mobile. În acest moment, rețineți că dimensiunea dispozitivelor mobile este în continuă creștere. Acesta este motivul pentru care plasarea butoanelor, listelor de meniu și a altor elemente mai aproape de partea de jos a ecranului mobil este considerată o practică obișnuită.

Utilizați microinteracțiunile pentru a spori experiența utilizatorului

Acest punct privind utilizarea microinteracțiunilor se bazează pe cel anterior despre proiectarea pentru degetul mare.

Sursă

Uită-te la videoclipul de mai sus. Asta înseamnă microinteracțiuni în acțiune. Un utilizator dorește să vadă cum arată produsul într-o altă culoare, dimensiune, cu o caracteristică suplimentară, etc. microinteracțiunile îi ajută pe cumpărători să experimenteze produsul în întregime, fără prea mult efort.

Dar acest tip de experiență a utilizatorului nu se oprește cu caracteristicile produsului. Cumpărătorii se pot bucura de avantajele microinteracțiunilor dacă pot evalua, aprecia sau compara cu ușurință un produs.

Scopul de aici este de a oferi utilizatorului cea mai intuitivă experiență posibilă.

Creați formulare care corespund celor mai bune practici UX

Mulți designeri și dezvoltatori de aplicații mobile Magento nu acordă atenție elementelor de formă. Nu este surprinzător că le doare conversiile.

Sursă

De exemplu, majoritatea dezvoltatorilor folosesc în continuare listele derulante în formularele lor. Dar un studiu de testare a utilizatorilor arată că stepper-urile funcționează mai bine pe formulare.

Nu se termină aici. Iată câteva alte bune practici UX pentru proiectarea formularelor:

• Ține-l scurt. Limitați numărul de câmpuri de formular pe care utilizatorii trebuie să le completeze sau pe care chiar le văd deloc. Puteți activa completarea automată invizibilă dacă doriți să strângeți date suplimentare, fără a cere utilizatorilor să le completeze manual.
• Plasați etichetele câmpului formularului deasupra câmpurilor formularului. Utilizatorii dvs. ar vedea etichetele mai ușor și reduce probabilitatea de eroare.
• Folosiți explicații scurte. Utilizați explicații mici pentru a le spune utilizatorilor de ce colectați informații specifice. Acest lucru poate crește și conversiile de formă.
• Faceți tastaturile intuitive. Dacă un câmp de formular este doar pentru numere, cum ar fi numerele cardurilor de credit și numerele de telefon mobil, lăsați un tastatură să apară intuitiv. Puteți reduce erorile și îmbunătăți experiența utilizatorului în acest fel.
• Mutați câmpurile de formular neumplute pe ecran. Faceți formulare pentru a derula până la următorul câmp de formular gol, după ce utilizatorul completează un câmp. Lăsarea câmpurilor de formular să deruleze automat în sus pentru a dezvălui următorul câmp de formular neumplut reduce efortul și crește rata de completare a formularului.

Automatizarea introducerii datelor cu imagini vizuale

Pentru această caracteristică, doriți să utilizați căutarea adreselor, sugestia automată și detectarea automată pentru a vă ajuta utilizatorii să completeze formularele și să finalizeze activitățile de introducere a datelor mai rapid.

Utilizatorii aplicației dvs. își pot indica adresa mai rapid folosind funcția de căutare a adreselor. Platforme precum Google Places și USPS oferă API-uri deschise care vă pot ajuta în acest scop.

Sursă

Sugestiile automate sunt peste tot. Ii cunosti. Google le folosește pentru a sugera interogări de căutare înainte de a termina de tastat fraza de căutare, iar telefonul dvs. o folosește pentru a vă sugera cuvinte pentru funcții de corectare automată.

Sursă

Designerii pricepuți folosesc această caracteristică pentru a ajuta căutătorii să găsească produse mai rapid în magazinele lor de comerț electronic. Detectarea automată vă ajută utilizatorul să verifice dacă datele pe care le-au introdus sunt corecte. De exemplu, clientul dvs. poate vedea tipul cardului de credit pe care l-a introdus în timpul plății.

Gânduri finale despre greșelile UI și UX

Fără îndoială, aceasta este cea mai lungă secțiune aici. Dar este așa dintr-un motiv. Cele mai multe greșeli de proiectant și dezvoltator provin din erori de interfață utilizator și experiență utilizator.

O altă eroare majoră a experienței utilizatorului nu este prioritizarea pentru căutarea Magento. Faceți conținutul aplicației extrem de căutabil și interfața este ușor de căutat.

În cele din urmă, asigurați aplicația sigură sau altceva nu va funcționa. Utilizatorii sunt mai preocupați de securitate decât orice altceva atunci când fac cumpărături prin intermediul dispozitivului mobil. Utilizatorii dvs. nu ar trebui să fie nevoiți să ghicească dacă datele lor sunt sau nu sigure. Siguranța și securitatea ar trebui să fie scrise în toată aplicația. Deci, doriți să:

• Folosiți ecusoane de încredere
• Aplicați simboluri de blocare
• Utilizați cuvinte de siguranță precum „Securizat” și „Criptat” pe parcursul experienței cumpărătorului
• Folosiți psihologia culorii
• Aveți un SSL valid

Prin urmare, întrucât sunteți partea responsabilă pentru păstrarea siguranței datelor clienților, mai mult decât orice, asigurați-vă că mergeți mai departe cu securitatea și siguranța datelor, mai ales dacă doriți să evitați amenzi sau procese uriașe.

2. Nu este construit pentru iOS și Android și nici nu are PWA

Este posibil să aveți motive autentice pentru a vă concentra pe o singură platformă și este bine dacă este bine pentru afacerea dvs. Dar unii designeri și dezvoltatori de aplicații Magento care aleg să se concentreze pe o singură platformă nu au un caz de afaceri pentru deciziile lor.

În mod ideal, doriți să construiți pentru a se potrivi creșterii și a permite utilizatorilor să cumpere oriunde se simt confortabil. Așadar, construiți pentru mai multe platforme. La urma urmei, să aveți aplicația pe iOS și Android este suficient în majoritatea cazurilor. Aproape toată lumea folosește aceste două platforme mobile.

Doriți să vă ridicați jocul și să vă îndreptați către o abordare mai modernă? Mutați într-o altă direcție și alegeți în favoarea PWA-urilor în locul aplicațiilor native. Fiind rapide, ușor de utilizat și cu caracteristici remarcabile ale unei aplicații native fără a fi nevoie să fie descărcate, aplicațiile web progresive sunt în prezent următorul lucru important în M-Commerce.

3. Testare slabă a utilizatorului

Testarea a fost modul în care LukeW Ideation + Design a descoperit tipul de formă care convertește mai bine. Dacă ignorați testarea utilizatorilor, s-ar putea să optimizați conținutul fără sfârșit și fără să vă arate nimic.

Unii designeri și dezvoltatori de aplicații mobile Magento reduc la testarea utilizatorilor. Dar diferitele segmente de public au nevoi și preferințe unice. Testarea vă ajută să aflați ce vor și ce se așteaptă publicul dvs. Astfel, luați în considerare posibilitatea de a investi ceva timp în teste.

4. Experiență de checkout slabă

O mare parte din cazurile de abandonare a coșului se întâmplă chiar la etapa de plată a comenzii. Rusine mare. Menționarea greșelilor din experiența de plată care vă pot costa foarte mult afacerea includ:

• Un proces copleșitor de plată. Având un proces de plată lung și complicat.
• Ascunderea valorii coșului. Ascunderea costului total al comenzii în timp ce magazinele utilizatorilor vă vor afecta vânzările. Același lucru este valabil și pentru taxele ascunse.
• Încredere redusă. Nu prezintă încredere (ecusoane de securitate, pictograme de blocare și alte deficiențe psihologice). Cine vrea să cumpere dintr-o aplicație sau magazin potențial periculos? Observați că „pericolul potențial” este un pericol suficient.
• Crearea forțată a contului. Forțarea utilizatorilor să creeze un cont înainte de a plăti. Într-un studiu, 60% dintre participanți au avut dificultăți în găsirea unei verificări pentru clienți a unei aplicații. Faceți mai ușor să cumpărați de la dvs., nu împingeți potențialii clienți să facă ceea ce nu doresc.
• Verificare lentă Magento și adăugare la coș. Dacă trece prea mult timp pentru ca pașii să fie procesați, există șanse mari ca clientul dvs. să părăsească magazinul fără a cumpăra nimic.
• Aplicație Buggy. Dacă magazinul dvs. are erori sau se prăbușește, vă încurajați potențialii cumpărători să plece. Deci, remediați-l dacă trebuie și faceți-l rapid.
• Metode de plată limitate. Oferiți mai multe opțiuni de plată, la sfârșitul zilei, este în interesul dvs. să faceți convenabil ca oamenii să vă plătească. Acesta nu ar trebui să fie un motiv pentru a nu finaliza comanda.

După cum puteți ghici, pericolul este imens. Cu alte cuvinte, din fiecare zece cumpărători care vizitează un site de comerț electronic, șapte nu cumpără. Dar un design mai bun al comenzii duce la o creștere de 35% a ratelor de conversie. Acesta este un aliment pentru gândire.

Aflați cum să optimizați plățile mobile în ghidul nostru.

5. Viteza de încărcare

Sursă

Nu în ultimul rând, potrivit unui studiu realizat de Google / Verto, SUA, specialiștii în marketing sunt de acord că creșterea vitezei site-urilor și aplicațiilor lor mobile și-a îmbunătățit ratele de conversie cu 15%. Această statistică nu ar trebui să fie o surpriză, deoarece paginile web mobile necesită mult mai mult timp de încărcare în comparație cu paginile desktop. Prin urmare, comprimarea codului aplicației și a greutăților fișierelor vă poate îmbunătăți în mod măsurat profiturile.

Aflați mai multe despre viteza site-ului web și despre cum să o îmbunătățiți aici.

Concluzie

Designul determină succesul afacerii. În cuvintele cercetătorilor Institutului Baymard al căror studiu a fost menționat în ghid,
„Cercetările noastre sugerează că site-ul mediu de comerț electronic își poate îmbunătăți rata de conversie cu 35% numai prin îmbunătățiri de proiectare a procesului de plată”.

Deci, dacă faceți sau ați făcut oricare dintre aceste greșeli de proiectare și dezvoltare a aplicației mobile Magento, le puteți remedia. Cheile sunt în mâinile tale. Utilizati-le.

Biografia autorului:

Alex Husar , CTO la Onilab cu peste 8 ani de experiență în Magento și Salesforce. A absolvit Universitatea Tehnică din Cehia și a obținut o diplomă de licență în inginerie software de calculator. Experiența lui Alex include atât abilități complete de dezvoltare, cât și o capacitate puternică de a oferi îndrumări critice proiectului întregii echipe.

Sunteți curios despre cele mai importante tendințe de comerț electronic pentru 2020?

Acestea sunt listate în cartea noastră electronică gratuită: obțineți Revizuirea finală a TOATE tendințele comerțului electronic 2020 pentru a le cunoaște pe toate. 2020 este deja aici - mai bine obțineți copia dvs. cât mai curând posibil