La possibilitat de comprar qualsevol cosa a través d’Internet ja és una realitat al nostre dia a dia: tenim milers de milions de productes al nostre abast des de qualsevol lloc a través d’un sol clic. Una botiga online augmenta les probabilitats de vendre d’una empresa en permetre estar exposat a la venda 24 hores, 7 dies per setmana, 365 dies a l’any. Però hi ha empreses que, tot i tenir un e-commerce i gastar diners en publicitat, no aconsegueixen vendre tant com esperaven.
Això passa perquè moltes botigues online no estan dissenyades de forma òptima per maximitzar les seves oportunitats de venda. I és que el disseny de botigues online va més enllà que el d’un lloc web estàndard: en convertir-se un lloc web en aparador i punt de venda virtual, cal oferir a l’usuari tot allò que podria necessitar a l’establiment físic, adaptant-lo a aquest mitjà, i fins i tot més.
Com que sabem que el disseny i l’experiència de compra són clau per aconseguir vendes a Internet, compartim en aquest article 23 consells de disseny de botigues online que has de considerar a l’hora de plantejar el teu e-commerce. Només així aconseguiràs que les teves visites es converteixin en clients.
Table of Contents
a) Aspecte visual
1. Disseny simple i atractiu
Les persones som éssers visuals: la vista és el mitjà pel qual adquirim més informació. Hi ha moltes coses que ens agraden perquè “ens entren pels ulls” després d’una primera impressió, i els llocs web no en són una excepció.
Es considera que els llocs web minimalistes es perceben universalment com a més atractius, professionals i fiables. Especialment en botigues online, és molt recomanable que el disseny sigui simple per facilitar la navegació, per evitar distraccions i per fer destacar els productes per sobre de qualsevol altre element. Cal procurar no sobrecarregar el disseny i deixar que respiri. No tinguis por dels espais en blanc, són necessaris!
2. Branding consistent
La identitat visual de la teva marca és allò que et defineix i et diferencia de la teva competència. Aquest senyal de distinció ha de ser present al teu e-commerce de forma coherent en cada detall. Presentar la teva marca consistentment en totes les plataformes generarà més sensació de confiança en l’usuari. Assegura’t d’incloure el logotip del negoci, utilitzar la paleta de colors definida i les tipografies escollides, que en el cas dels llocs web es recomana que com a màxim en siguin dues. En definitiva, el més important és que el disseny transmeti tots aquells valors associats a la teva marca.
Consell:
Compta amb eines que permetin personalitzar la teva botiga online perquè aquesta reflecteixi l’estil de la teva marca. Per això, nosaltres utilitzem Elementor, un plugin per a WordPress que facilita la maquetació d’un lloc web a mida.
3. Quadrícula de productes
Mostrar els productes en quadrícula sol ser la millor opció per a la majoria de botigues online, ja que la disposició d’aquests en files i columnes els manté ordenats i fa que sigui fàcil fer una ullada general a l’oferta disponible, com si d’un aparador es tractés. És recomanable no mostrar més de 3 o 4 productes per cada fila i deixar cert marge entre els uns i els altres perquè es puguin diferenciar amb claredat.
4. Ús dels colors
El color és una eina molt poderosa i per aquesta raó mai no es pot triar de manera arbitrària en un lloc web. Els colors tenen determinats efectes en nosaltres: ens suggereixen coses diferents segons les seves variacions. Això és el que es coneix com a psicologia del color, i pots aplicar els seus preceptes per aprofitar-los a favor teu.
Utilitza tons neutres per als espais més extensos i colors més vistosos en aquells elements que interessa que destaquin, especialment les crides a l’acció. Poden ser per exemple els botons que permeten fer una compra o subscriure’s a una newsletter. Assegura’t que aquests botons tinguin un color cridaner i vibrant que faci que aquest element no passi desapercebut per a l’usuari.
5. Destacar els best-sellers
Així com en una botiga física la disposició dels productes és molt rellevant, en una botiga online també. Cal destacar els productes més interessants per al negoci, ja siguin els que es venen més, els que reben més ressenyes o els que proporcionen més ingressos.
Es recomana presentar-los per separat i accentuar-los perquè cridin l’atenció dels usuaris: a través de colors vistosos o amb la simple disposició respecte a la resta d’elements, tenint en compte que el que es mostra primer i més gran és el que se sol percebre com a més important.
b) Contingut
6. Imatges i vídeos de producte
Quan anem a una botiga física i volem examinar un producte, podem agafar-lo, tocar-lo, mirar-lo, etc. En una botiga en línia l’única manera de fer-ho és a través de les imatges o vídeos que ens facilita el venedor.
Assegura’t de proporcionar més d’una imatge per producte i que en la diversitat d’imatges es pugui observar des de diferents perspectives. Una altra opció que pot ser recomanable és incloure imatges del producte en el context d’ús, per exemple unes sabates als peus d’una model o un armari en una habitació moblada. A més, procura que les imatges siguin de qualitat i tinguin una alta resolució, i que es puguin ampliar perquè el possible comprador pugui inspeccionar fins al més mínim detall del producte.
Si teniu la possibilitat de fer-ho, utilitzar vídeos és molt bona opció. Aquests ofereixen una idea més real de com és el producte i generen més confiança en l’usuari. Si decideixes proporcionar vídeos dels teus productes als teus clients, recomanem fer-ho a través de YouTube: crear un canal en aquesta plataforma, pujar-hi els teus vídeos i embedir-los a les respectives pàgines de producte del teu e-commerce.
7. Ressenyes o testimonis
Una mesura simple però molt efectiva per incentivar la compra és incloure ressenyes i testimonis dels usuaris que ja han adquirit els teus productes. Serveixen com a demostració social i contribueixen a generar confiança en aquells usuaris dubtosos sobre un producte o desconfiats de les vendes online. I és que cada vegada són més els compradors en línia que llegeixen ressenyes d’antics clients per decidir si comprar o no. Pots adjuntar les valoracions al costat de la fitxa de cada producte o incorporar una secció a la home que en recopili diverses.
Una opció fàcil és recopilar els testimonis a través del sistema de valoracions de Google. Si t’estàs preguntant què pots fer per aconseguir testimonis, llegeix el nostre article sobre com augmentar ressenyes a Google. També hi ha altres plataformes, com Trustpilot, que proporcionaran fiabilitat externa als teus testimonis.
8. Informació sobre pagament, enviament i devolució
Tot e-commerce ha de contenir una pàgina o secció dedicada a clarificar tot allò relacionat amb els termes i condicions de compra: quins són els mètodes de pagament disponibles, quant costa l’enviament, quant trigarà a arribar una vegada realitzada la compra, quina és la política de devolució, etc.
Consell:
Situa també informació sobre els mètodes de pagament i els termes de compra a prop del botó d’afegir a la cistella.
És important ser transparent en aquest sentit: que l’usuari trobi aquesta informació fàcilment i que se li faciliti perquè en sigui conscient abans de prendre la decisió de comprar. Pot ser que en aparèixer per sorpresa el cost d’enviament a l’hora de fer el pagament, desisteixi de la compra perquè no hi comptava.
9. Informació de contacte
A l’hora de dissenyar la teva botiga online, recorda incloure tanta informació de contacte com sigui possible: e-mail, telèfon, adreça de la botiga física si n’hi ha, formulari de contacte, etc. Això genera sensació de major fiabilitat en l’usuari, en posar-se de manifest que hi ha algú darrere que respondrà.
La informació de contacte ha de ser accessible i estar disponible en tot moment perquè l’usuari pugui resoldre amb la màxima facilitat possible els seus dubtes o preocupacions respecte als productes o el procés de compra. Si no trobeu la manera de solucionar les vostres inquietuds ràpidament, probablement abandonareu el procés i buscareu el que necessiteu en una altra part.
No saps per on començar amb el disseny de la teva botiga en línia?
Nosaltres ho fem per tu!
c) Navegació
10. Organització i categorització de productes
Perquè els usuaris puguin trobar el que busquen fàcilment, organitza els teus productes en categories lògiques, i procura que les categories siguin visibles des del menú principal perquè l’usuari pugui observar a primera vista tot allò que s’ofereix a la teva botiga en línia.
A l’hora d’escollir com s’han de dir les categories, pots pensar en les necessitats del teu client ideal i de quina manera faria la cerca a Google. Però sens dubte seria molt més útil fer un estudi de paraules clau, i la millor eina per a això és SeRanking: et permet saber el volum de cerca de cada keyword, amb la qual cosa reflecteix les inquietuds dels usuaris. També pots fer una auditoria SEO.
En funció de la quantitat de productes de la teva botiga online, pot ser recomanable que cada categoria tingui la seva pròpia pàgina. Serà positiu per a lexperiència de navegació de lusuari i també pel que fa al SEO. En aquest cas, us heu d’assegurar d’incloure el nom de la categoria a la URL de la pàgina en qüestió.
11. Menú de navegació
El menú de la capçalera és un aspecte clau en el disseny de botigues en línia per facilitar la navegació. És important que aquest sigui fàcilment accessible, es recomana fins i tot que sigui sticky o enganxós perquè en fer scroll es mantingui visible i estigui disponible en tot moment.
Vigila no posar gaires ítems al menú principal, ja que podrien saturar l’usuari i els acabaria passant per alt. Més que una altra cosa, es podria confondre. Si ofereixes molts productes al teu e-commerce, pots utilitzar submenús tipus “dropdown” o si això segueix sense ser suficient pots recórrer a un “mega menu” per mostrar les categories i subcategories de manera molt visual i ordenada.
12. Breadcrumbs
Les breadcrumbs (migues de pa) són una gran eina de suport a la navegació web: marquen el camí que ha seguit l’usuari fins a la pàgina on es troba. Possibiliten que l’usuari comprengui la relació entre la pàgina on es troba i les pàgines de nivells superiors, i que pugui canviar de nivell amb més comoditat.
Afegir-les en el disseny de la teva botiga online és molt útil per ajudar els usuaris a ubicar-se dins del lloc web, sobretot en aquells e-commerce que tenen moltes pàgines i diversos nivells de profunditat a causa de la gran quantitat de productes i categories existents.
Per incloure fàcilment en un lloc web realitzat amb WordPress, pots utilitzar plugins específics per SEO com Rank Math.
13. Barra de cerca
Pot ser que alguns dels usuaris que arribin a la teva botiga en línia ja coneguin els teus productes i ja sàpiguen exactament què volen. En aquest sentit, disposar d’una barra de cerca els permet arribar ràpidament i directament a allò que necessiten sense haver de fer scroll o buscar-ho dins de les múltiples possibilitats del menú. Aquesta barra sol situar-se a la cantonada superior dreta perquè sigui fàcilment accessible.
14. Filtres de producte
Els filtres de producte són un must en el disseny de botigues en línia. Permeten que els usuaris puguin buscar productes d’acord amb les especificacions o requeriments concrets: segons color, talla, material, marca, etc.
Imagina que un usuari porta una estona decidint entre dues peces diferents, i així que es decideix per una s’adona que la seva talla no està disponible. Es porta un desengany en no poder adquirir el que vol i sent que ha perdut el seu temps decidint per res. Amb els filtres de producte podeu filtrar per talla i visualitzar només les peces disponibles en la seva mida.
15. Botons “veure carret”, “seguir comprant” i “finalitzar compra”
Un dels elements més importants que sí o sí que s’ha d’incloure en el disseny de botigues en línia és un botó perquè l’usuari pugui veure el que hi ha a la cistella de compra. Normalment, aquest botó es materialitza en una icona de carret o bossa de la compra situada a la cantonada superior dreta. Cal assegurar que el botó és visible i identificable i que la llista de productes afegits a la cistella s’actualitza a temps real. Sol ser útil incloure un numeret al costat de la icona que indiqui en tot moment quants elements hi ha a la cistella, i fins i tot que aparegui un avís a la cantonada superior dreta amb un missatge tipus “1 producte afegit” cada vegada que s’afegeixi un producte.
Suposem que l’usuari ja ha afegit un producte a la vostra cistella. En aquest punt, pot voler fer una de les tres coses següents: 1) finalitzar la seva compra i procedir al pagament, 2) seguir comprant altres productes o 3) veure el carretó per valorar el que ha comprat fins ara i en funció d’això decidir si vol comprar més o no. En aquesta trifurcació del recorregut de l’usuari, és útil proporcionar-li un botó per a cadascuna de les tres opcions. Així, no tindrà complicacions per seguir per aquell pas del procés de compra que decideixi que ha de ser el següent.
d) Experiència d'usuari
16. Checkout simple
Un procés de checkout complicat és la principal causa dabandonament de carret dun e-commerce. Si vols que els teus clients arribin fins al final en el procés de compra, has de facilitar i agilitzar al màxim la fase d’introducció de dades i pagament.
Per a les pàgines de checkout es recomana un disseny simple, sense distraccions que puguin fer que l’usuari es desviï del que està fent i on tota la informació relativa al preu, enviament, devolucions i altres termes de compra quedi ben clara.
Cal evitar tant sí com no que l’usuari trobi handicaps durant el procés. Per això has d’assegurar-te de:
- Incorporar els màxims mètodes de pagament possibles: amb targeta, PayPal, Apple Pay, Google Pay contra reemborsament, Stripe i pagament ajornat.
- Demanar a l’usuari només la informació personal necessària, ja que moltes persones tenen reticències a proporcionar informació de més a Internet.
- Oferir l’opció de fer el checkout com a convidat, sense donar-se d’alta.
Un altre aspecte a tenir en compte és que els usuaris han de saber en quina fase del procés de checkout es troben a cada moment. Perquè puguin ubicar-se, cal incloure una seqüència numerada dels diferents passos del procés.
17. Missatges de confirmació i agraïment
Un cop l’usuari ha realitzat la compra, ha de ser redirigit a una pàgina on se li confirmi que el procés s’ha efectuat correctament, se li indiqui on pot trobar informació sobre la compra realitzada i se li donin les gràcies. Això l’ajudarà a estar segur que el procés ha sortit correctament. A més, expressar gratitud i ser amable envers els clients és una manera d’humanitzar una mica el procés de compra virtual i contribuir a forjar una relació de lleialtat del client cap al negoci.
18. Llista de desitjos
La wishlist o llista de desitjos permet a l’usuari desar una sèrie de productes que li interessen per poder tornar-los a examinar o comprar-los en un futur. Els usuaris poden tornar a la teva botiga online per revisar la seva llista quan vulguin o fins i tot poden compartir-la.
Evidentment, la wishlist suposa un avantatge per a l’usuari pel fet de millorar la seva experiència de compra, ja que quan aquest torna al teu lloc web pot trobar ràpidament aquells productes que estava valorant adquirir, sense necessitat de buscar una altra vegada. Però també és una mesura beneficiosa per al teu e-commerce: s’aconsegueix promoure que les visites s’acabin convertint en clients, reduir el percentatge de carretó abandonat i obtenir informació sobre quins són els productes que més agraden.
19. Productes relacionats
Una bona pràctica per a un e-commerce és oferir propostes de productes relacionats a les fitxes de productes o sota el llistat de productes afegits a la pàgina de carret. És una manera de facilitar a l’usuari una sèrie de productes que puguin ser semblants a aquells que li han interessat o bé que es puguin fer servir conjuntament.
Incorporar al disseny de la teva botiga en línia productes relacionats contribueix a millorar l’experiència d’usuari. Però el gran avantatge és que es generen oportunitats d’ingressar més:
- Augmentar el tiquet mitjà a través del up selling (venda dirigida), que consisteix a mostrar productes semblants amb un preu més elevat. Per exemple, mostrar una samarreta del mateix color que la que està examinant l’usuari però que estigui feta d’un altre material i sigui més cara.
- Fomentar que s’afegeixin més productes a la cistella mitjançant el cross selling (venda creuada), que no és més que oferir productes complementaris a aquells que l’usuari vol comprar. Per exemple, oferir pilotes de tennis a qui valora comprar una raqueta.
20. Adaptació a dispositius mòbils
Cada vegada més els usuaris accedeixen a Internet i adquireixen productes a través dels seus dispositius mòbils, per la qual cosa a l’hora de dissenyar botigues en línia cal pensar en l’experiència de compra que tenen els usuaris també des dels mòbils i les tauletes. Has de comptar amb un disseny responsiu, és a dir, que s’adapti correctament a diferents tipus de pantalles i sistemes operatius. O fins i tot més: ja hi ha empreses que donen prioritat al disseny per a mòbils davant del disseny per a ordinador, cosa que es coneix com a metodologia “mobile first”.
Per a un disseny responsiu o adaptatiu, cal considerar aspectes visuals que van des de la disposició dels elements i lespai entre ells, fins a la mida de la tipografia i les imatges. Compte amb els elements que es mostren en quadrícula en format desktop: potser de vegades és adequat visualitzar-los també d’aquesta manera en mobile adaptant les mides, però de vegades pot ser millor mostrar-los en format carrusel.
Quant a allò funcional, assegura’t que tots els botons i formularis funcionen correctament. Un altre aspecte fonamental en l’adaptació a dispositius mòbils d’un comerç electrònic és la velocitat de càrrega: com més lenta la càrrega, més s’alenteix el procés de compra i més probabilitats hi ha que l’usuari desisteixi. La revisió de la velocitat de càrrega és un dels aspectes que es duen a terme en una auditoria SEO.
e) Engagement
21. Avantatges en registrar-se
Molts e-commerce exitosos inclouen l’opció de registrar-se com a client o subscriure’s a una newsletter, i ofereixen alguna cosa a canvi com a incentiu. Recompensen amb avantatges com ara descomptes en donar-se d’alta o la possibilitat d’acumular punts amb cada compra que després es tradueixin en petites reduccions del preu de les adquisicions posteriors.
Aquestes són bones estratègies per aconseguir que els clients romanguin fidels a la teva marca. A més, el fet de recopilar una llista de correus electrònics de clients permet fer enviaments en moments clau que puguin incentivar que els usuaris acabin decidint-se a comprar.
22. “Avisa'm quan estigui disponible”
A l’hora de pensar el disseny d’una botiga online, sempre has d’oferir alternatives a aquells problemes amb què es poden trobar els teus usuaris. Per exemple, pot ser que un usuari tingui molt clar què és el que vol però no ho pugui adquirir perquè no està disponible: no queda estoc d’aquest producte , o s’ha esgotat una talla o color en concret.
En aquestes situacions, si no se li proporciona una solució a l’usuari el més probable és que abandoni el teu e-commerce i busqui un producte substitutiu en un altre lloc. Una idea per evitar aquesta situació és que l’usuari tingui l’opció de ser avisat quan el producte o la variació que necessita estigui una altra vegada disponible. D’aquesta manera, se li dóna una alternativa que el pot fer romandre a l’espera en lloc d’acudir a la competència i també es contribueix a la fidelització.
23. Enllaços a xarxes socials
Tots els llocs web d’empreses que tenen comptes a xarxes socials adjunten els enllaços a aquestes. En el cas d’un e-commerce és molt útil perquè convida els usuaris a seguir en contacte amb tu i promou una relació entre client i empresa a llarg termini. Has d’assegurar-te que les icones socials s’obrin en una nova pestanya i que estiguin ubicades al footer de la teva botiga online, no al header, perquè els usuaris no abandonin la pàgina només arribar.
Vols portar la teva botiga online a un altre nivell?
A Dimoteca podem ajudar-te!
En definitiva, una botiga online ha d’estar dissenyada pensant en la mentalitat del client i la seva experiència de compra. És molt important que el procés sigui el més fàcil i directe possible, i que el lloc web inspiri confiança.
Sabem que aquests 23 principis de disseny de botigues online són molta informació a tenir en compte. Per fer-ho més senzill i que no t’oblidis de cap d’ells, et deixem una checklist amb tots aquests consells.
