10 consells per dissenyar una gran botiga web

Els empresaris i els minoristes de totxo i morter que volen expandir-se a les compres en línia tenen més opcions que mai, però també tenen més consideracions de llocs web i opcions tècniques per desxifrar-les. La creació d'un aparador web eficaç encara compta amb proveïdors clau en mà, com ara Wix Stores, que poden fer que la vostra presència inicial sigui ràpida i senzilla. Però aquells que realment són seriosos per créixer els seus negocis en línia trobaran que les seves necessitats evolucionen més enllà d’aquests serveis clau en mà.

Hi ha moltes preguntes a respondre abans que aparegui qualsevol cosa al ciberespai i després molt més a mesura que el negoci maduri. La recopilació de dades sobre els clients és un bon exemple, i avui és una gran pregunta, especialment per a qualsevol botiga que busqui accedir als mercats europeus. La conversió de moneda i les diferents lleis de comerç electrònic són encara problemes espinosos en aquests mercats, però ara també hauràs de tractar amb el Reglament general de protecció de dades (GDPR), que requereix un procés de manipulació molt més minuciós de les dades dels clients.

La seguretat de les transaccions és una altra qüestió clau perquè significa equilibrar la necessitat de la seguretat del client amb quants cèrcols li caldrà que passin abans de poder realitzar una compra. I, independentment de quines decisions prengueu per al vostre lloc web estàndard, haureu de tenir les mateixes discussions per a la seva iteració mòbil. Perquè, si bé la mobilitat era sens dubte un dels darrers mots de paraula, els dotze mesos addicionals no han minvat la seva importància.

El pensament actual designa que els constructors web han de dissenyar primer l’experiència mòbil i, després, ajustar l’experiència d’escriptori segons calgui.

"Cada element, cada element de contingut, ha de ser funcional en mòbil", va dir Jimmy Rodriguez, director operatiu (COO) de 3dcart. "Si comences des de zero, dissenyes per a mòbils. Amb un disseny sensible, pots crear el lloc web per començar al mòbil i després portar-lo a l'escriptori."

Per ajudar-vos a dissenyar la vostra botiga de comerç electrònic tant per a usuaris mòbils com per a escriptoris, hem recopilat els deu consells importants a continuació. Tot i això, Rodríguez recomana que, abans que les empreses incorporin alguna d’elles als seus aparadors, facin una prova d’A / B d’aquestes característiques en pàgines de producte específiques per veure com ho fan abans de publicar-les a tot el seu lloc web.

1. Navegació de capçalera enganxosa

Tots hi hem estat: hem desplaçat fins a la part inferior d’una pàgina de producte per llegir les ressenyes dels usuaris o els detalls del producte i ara estem preparats per deixar la pàgina per tornar al menú per continuar el nostre viatge de compres. Malauradament, per tornar al menú, normalment hem hagut de fer clic al botó "Arribar a la pàgina" dels teclats d'escriptori o tocar a la part superior de la pantalla dels nostres dispositius mòbils.

Amb les capçaleres enganxoses, mentre es desplaça cap avall, el menú es redimensiona i s’ajusta. El menú us segueix al llarg del vostre viatge per mantenir la navegació a la pantalla si heu de saltar ràpidament les pàgines. Podeu veure-ho en efecte a Bose.com. Tot i estar a mig punt de la pàgina, encara podeu accedir a la navegació principal de la pàgina sense haver de tornar a la part superior de la pantalla.

2. Menús d’hamburgueses

Tot i que els menús d’hamburgueses semblen una característica més adequada per a restaurants de menjar ràpid, s’estan convertint ràpidament en una empresa obligada per a les empreses que fan molts negocis en dispositius mòbils. Ja els heu vist: Hamburger Menus s'han convertit en la icona mòbil estàndard per a la navegació i els menús mòbils.

Disposen de tres línies horitzontals que, en prémer-les, ofereixen un menú desplegable de la navegació d’un lloc web. Són especialment útils en dispositius mòbils on la propietat immobiliària de la pantalla és prima. Però comencem a veure-les també a llocs web d’escriptori, de manera que els consumidors tenen una experiència similar als llocs web de l’empresa independentment del dispositiu que estiguin utilitzant.

"Molta gent veu els menús d'hamburgueses i sap què significa, però no saben que és bàsicament el nou estàndard", va dir Rodríguez. "Els visitants mòbils han après el significat d'aquest símbol i els llocs web han d'adoptar-lo com a estàndard per a la navegació mòbil."

Podeu veure un menú d’hamburgueseria a la part superior dreta de Target.com i al lloc web mòbil de Target. També es pot veure a la foto següent.

3. Desplaçament paral·lel

Menys d’una funció de funcionalitat i més d’una manera de millorar l’estètica del vostre lloc web, Parallax Scrolling aprofita grans pancartes plenes d’imatges d’alta resolució per afegir un toc artístic al vostre lloc web. Aprofitant imatges grans i amplades, podeu crear un efecte de desplaçament entre la imatge de fons del vostre lloc web i la imatge que hi ha directament davant del vostre consumidor.

Com es pot veure a la imatge següent des de RimmelLondon.com, a mesura que es desplaça cap avall la pàgina, les imatges de fons del lloc web canvien. Tanmateix, el canvi es produeix subtilment a mesura que les imatges de fons i de primer pla es fonen entre si. La captura de pantalla de sota mostra el lloc web en el moment en què la imatge de fons canvia de violeta a rosa.

4. Desplaçament infinit

Infinite Scrolling sona més com una tècnica de tortura que no pas amb una funció de comerç electrònic. No obstant això, aquesta eina meravellosa permet als usuaris veure contínuament nous productes sense haver de fer clic i carregar una pàgina nova. A continuació, es mostra el funcionament: quan es desplaça cap avall fins a la part inferior d’una pàgina de comerç electrònic, la pàgina carrega automàticament més elements al final de la pàgina. Segueixen catalogant com a pàgines del darrere, però el visitant no ho sap.

Podeu veure una funció similar a UnderArmour.com. Malauradament, Under Armour requereix que feu clic al botó "Carrega més" per veure contingut addicional. Alguns llocs web disposen d’un mecanisme d’obertura automàtica que us mostrarà més contingut sense necessitat de fer clic.

5. Un botó flotant "Afegeix a la cistella"

De forma similar a l'eina Sticky Navigation, els botons flotants "Afegeix a la cistella" permeten als consumidors afegir productes a la seva cistella, independentment del lloc on es trobin a la pàgina del producte. Anteriorment, els usuaris es desplaçarien cap avall fins a les ressenyes dels usuaris, els detalls del producte i altres elements de la pàgina inferior i, per afegir el producte al carret, haurien de desplaçar-se cap a la part superior de la pàgina. Ara, empreses com Diesel.com us permeten veure el preu, la quantitat, les opcions de color i la imatge del producte i el botó "Afegeix a la cistella", independentment del lloc on esteu a la pàgina del producte.

6. Utilitzeu la llei dels accessoris

No us aborreciarem amb les matemàtiques que hi ha darrere de la llei de Fitts, però és essencialment una teoria que com més gran i més proper és un objecte, més probabilitats interactuarem amb ell. El mateix principi bàsic es pot aplicar al comerç electrònic. Si voleu guiar els usuaris cap a les pàgines de productes, els carretons de la compra i les promocions, haureu de fer que els botons siguin els més grans, colorits i tan a prop del centre de la pàgina.

Si ignora la Llei de Fitts i col·loca minúsculs botons en blanc i negre al llarg dels carrils o a la part inferior de les pàgines, és possible que es perdin els possibles compradors. No us equivoqueu.

7. Mostrar comentaris i testimonis dels clients

No voleu que els clients vinguin al vostre lloc web, visualitzin els vostres productes i, després, dirigiu-vos a Amazon.com per comprovar les opinions dels usuaris. Després de tot, Amazon.com pot vendre el producte més barat o el client pot preferir l'experiència de compra d'Amazon.com a la del vostre lloc web.

Si oferiu als vostres clients la possibilitat de valorar i revisar els productes, podreu evitar els clients prudents que necessiten la seguretat de les opinions dels altres consumidors abans de realitzar una compra. La majoria de les eines de comerç electrònic fan que les valoracions i les revisions siguin fàcils d’implementar, de manera que no defugiu l’aplicació d’aquesta pràctica.

8. Un servei eficaç d’atenció al client

Comptar amb el vostre client és fonamental per a l'èxit al detall i, en cap lloc, no és més fàcil ni efectiu que al servei d'atenció al client. Un dels camins més segurs per repetir negocis és tenir cura d'un client inquiet, insatisfet o, fins i tot, confós. Les aplicacions d’assistència i servei d’assistència d’avui en dia faciliten que mai. Si feu servir una d'aquestes aplicacions no només organitzen les sol·licituds del client, també us permeten agafar les dades de resposta i de client que aquestes trobades generen i canalitzar-les als motors de gestió de relacions amb els vostres clients (CRM), màrqueting i analítica empresarial. Si ho feu, us pareu atentament el que pensen els clients de la vostra botiga i els seus productes.

En situar els punts d'ancoratge i els punts de contacte del servei d’atenció al client és important per a l’experiència global del client. El fet que aquesta interacció tingui la forma d'una simple pàgina de contacte o que obri una finestra de xat amb qualsevol persona que resti al lloc web durant més de 60 segons, depèn del tipus de productes que veniu i estadístiques mitjanes de visites al lloc web per a la vostra botiga.

Però fer que un servei d’atenció al client sigui un èxit és molt més que programari. Has d’assegurar-te que hi ha algú professional allà per fer front a aquestes sol·licituds o bé és una inversió malgastada. Els clients que han tingut problemes a fer clic en el botó "Contacta amb el servei d'atenció al client" esperen rebre ajuda en directe d'un humà real. Podeu gestionar-ho a través del telèfon o del xat instantani, una funció que cada vegada és més habitual amb els proveïdors de serveis d’assistència. I si teniu cap personal per al vostre personal, podeu fer front a l'operació d'atenció al client amb bots de xat intel·ligents que "sonen" humans, alhora que podreu gestionar un diluvi de sol·licituds entrants a nivell bàsic, enviant només les peticions més complexes a l'homo real. sapiens.

9. Comanda de pa ratllat

Quan els clients surten fora de la vostra botiga, els agrada saber on es troben en el procés, fins a quina distància acaben i com fer-ho enrere fàcilment sense perdre totes les dades que ja han introduït. Breadcrumb Checkout mostra als clients exactament el lloc on es troben mitjançant un disseny de botons de navegació lineal que permet als consumidors fer clic endavant i enrere des de la sessió d’inici de sessió, les opcions de pagament, les opcions d’enviament, fer la comanda o continuar la compra. Sense aquesta disposició, els consumidors poden prémer el botó Enrere, veure que la informació no està registrada, frustrar-se i sortir del lloc web.

10. Vistes en 360 graus

Alguna vegada has comprat una jaqueta aparentment modesta en línia només per adonar-se que té una pedra de roca llisa? Bé, quan vau tornar aquest producte, vau perdre el vostre temps i el temps del venedor i us vau costar els diners de l’empresa. No us preocupeu, no va ser culpa vostra. Molt probablement, el venedor només tenia imatges de vista frontal i lateral de la jaqueta. Si el venedor hagués ofert imatges de 360 ​​graus, haureu vist aquestes pedres precioses i hauríeu fet clic al botó Cancel·la la comanda.

No cometeu aquest mateix error al vostre propi lloc web. A més de permetre als clients ampliar les imatges, ofereixen-los l'opció de girar o veure diversos angles de la imatge, tal com ho fa Kenneth Cole.com. D’aquesta manera, no se sorprèn quan obrin la caixa de lliurament i treuen un producte que no esperaven.