15 Consells sobre disseny mòbil per impulsar les vendes de comerç electrònic

Sabia vostè que 55% del tràfic de comerç electrònic ara es troba en un dispositiu mòbil?


És cert, més de la meitat de les persones que consulten llocs de compres es troben al telèfon o a la tauleta.

Heus aquí el problema: El 46% dels principals 50 minoristes Encara no teniu cap lloc mòbil sensible. Així, tot i que la meitat de tot el trànsit de compres es produeix en un mòbil, la meitat dels minoristes no s’hi configuren. Això significa que la meitat dels clients pinten i fan zoom i retorcen el telèfon per veure un lloc web correctament.

Així doncs, estem d’acord, és imprescindible un lloc mòbil sensible i atractiu. Però només és el començament. Com un lloc d’escriptori, podeu ajustar i optimitzar el vostre lloc mòbil, de manera que augmenti les vendes encara més. Aquí és com:

1. Simplicitat

Treballar amb una pantalla tan petita sempre serà complicat. És per això que la vostra simplicitat és la vostra meta principal. Als llocs de comerç electrònic és especialment difícil, perquè hi ha molt contingut. Com promocioneu tots els vostres productes sense obstruir l’espai de pantalla petita?

Mireu com ETQ mostra la seva gamma de sabates al lloc web del mòbil. És bonic per la seva senzillesa. Han deixat la majoria de l’espai de la pantalla completament lliure per tal de donar protagonisme als seus productes. Fins i tot la paleta de colors ha estat escollida per combinar amb la seva gamma de productes. Dóna a tot el lloc una sensació senzilla i cohesionada. Tot i que la pantalla és minúscula, se sent espaiosa.

2. Penseu en el polze!

Proveu de mantenir el vostre telèfon intel·ligent ara. Moveu el polze per la pantalla i sentiu-vos on és el més còmode i natural. La mida del polze de tothom és diferent, però generalment aquesta imatge de sota s’aplica a la majoria de persones:

seguiment de polze

Tenint això en compte, no voldreu posar cap botó o component essencial a les seccions principals. Deixeu-ho només per a capçaleres. Poseu tot el contingut i els botons desplaçats al centre perquè sigui fàcil i còmode d’arribar-hi. (No oblideu pensar en els esquerrans! Voleu les imatges de dalt per veure com funcionen les coses per a esquerrans).

3. … Sobretot els polzes grossos

A més del botó “abast”, també heu de considerar el “polze gran”. Tots hem utilitzat un lloc web per a mòbils on heu de fer clic al més petit enllaç. És difícil i frustrant, no? La regla general és optar per elements més grans del que creieu necessaris.

“Gran

El lloc mòbil de Hobbycraft és un bon exemple. En primer lloc, els seus enllaços d’imatges grans fan que sigui molt fàcil per als polzes grans. Però fixeu-vos en les seves icones a la part superior (“botigues, compte, cistella”). Són molt més grans del que normalment esperàveu. Hobbycraft està pensant en el gran polze, i també ho hauríeu de fer.

4. Menús de navegació d’hamburgueses

Una de les tendències de disseny més populars dels darrers dotze mesos és el menú “hamburguesa”. Podeu veure un exemple al lloc anterior de Hobbycraft. Són les tres línies que semblen una hamburguesa: feu clic sobre ella i el menú de navegació complet s’amplia.

No hi ha lloc per a la navegació tradicional de capçalera i simplement obstruiria la pantalla. En canvi, opteu per una navegació en expansió. Aquí trobareu un bon balanç. Hauria d’estar ordenat i fora del pas. Però, al mateix temps, ha de ser òbvia i fàcil de tocar.

Si teniu molts productes i categories oferts, feu servir el menú ampliat per facilitar-lo. No tingueu por d’utilitzar tot l’espai de pantalla. Mireu com Argos presenta el seu menú expandit a continuació.

IMG_3663

5. Trieu un tipus de lletra gran

Una petita pantalla mòbil ens obliga a pensar molt i molt en el tipus de lletra que utilitzem. No hi ha lloc per als tipus de lletra petits i complexos. En canvi, pensa simple, atrevit i gran. Generalment, un tipus de lletra sans-serif és més net i senzill (és a dir, Ariel és millor que Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Tingueu en compte que aquesta decisió també us obligarà a triar la vostra còpia i redacció amb més deteniment. Utilitzeu aquesta oportunitat per simplificar i optimitzar la vostra còpia. Intenta transmetre el teu missatge de la forma més senzilla i senzilla possible. Feu-lo curt. Que sigui atractiu. Això no farà que el vostre disseny mòbil millor, sinó que millorarà tota la vostra empresa.

6. Utilitzeu “cerca intel·ligent”

La gent odia fer servir petits formularis de cerca en un dispositiu mòbil. Ens obliga a fer zoom, fer clic al quadre de cerca i escriure amb el teclat de moda. Els errors són fàcils i poden provocar frustracions.

Per millorar l’experiència de l’usuari, utilitzeu una casella “cerca intel·ligent”. Quan feu clic al quadre, el disseny ha de tornar a posar-se de nou de manera que el quadre de cerca omple la pantalla. Aleshores, assegureu-vos que tingui cerca predictiu, de manera que l’usuari només ha d’introduir les primeres lletres.

Podeu veure-ho en acció al lloc web d’Europcar. El client comença a escriure “Norw” i el lloc suggereix automàticament les seves diverses branques de Norwich. Senzill.

IMG_4331

7. Simplifiqueu els formularis de registre i compra

Parlem molt de fer els vostres formularis de registre i compra el més senzill i ràpid possible. És una part clau de la vostra estratègia de disseny de UX. També és el lloc on els llocs de comerç electrònic perden fins al 60% de les conversions per complicar les coses. Si han iniciat el procés, el client ja està convençut. L’única manera de perdre la venda o la inscripció és dificultar les coses.

Un cop més, intenta limitar la quantitat d’escriptura necessària. Utilitzeu quadres de tipus predictiu i activeu les opcions d’emplenament automàtic. Utilitzeu eines de desplaçament per tal que els usuaris triïn opcions de data de naixement, per exemple. Sabem que els formularis de compra solen requerir una informació adequada. Tot i això, hi ha una manera de simplificar aquest procés.

Mireu com Firebox utilitza un sistema numèric per mostrar als usuaris quines etapes queden en el procés. Un truc de disseny clau de UX és fer saber als usuaris on es troben. Com a clients, ens agrada saber què podem esperar, i Firebox ho fa de manera experta.

img_1292-bloc-meitat

8. Màxim tres capes

És molt més fàcil “perdre’s” en un lloc web mòbil. L’ideal és que voleu assegurar-vos que el vostre lloc mòbil només té tres capes de profunditat. Un exemple de com pot funcionar això en un lloc de comerç electrònic de moda és el següent:

  1. Pàgina d’inici: el client tria “categoria: noies”
  2. El client tria “subcategoria: sabates”
  3. El client fa clic a la pàgina del producte.

Es tracta de tres senzilles capes de descobriment. L’única opció més hauria de ser la pàgina de compra o la inscripció. Intenta evitar un forat de conill de subcategories i altres opcions. Com sempre, manteniu-lo senzill i feu que els usuaris sàpiguen on es troben en tot moment.

9. Facilita la tornada a la pàgina principal

Una vegada que el vostre client tingui tres capes de profunditat, proporcioneu-los sempre una forma senzilla i senzilla de tornar a la pàgina principal. Recordeu que és fàcil sentir-vos perduts en un lloc mòbil, de manera que faciliteu als usuaris una manera senzilla de “restablir” i tornar al principi.

Doneu una ullada a la pàgina de productes de Lush. Si el vostre client ha navegat d’alguna manera per aquí, pot ser que vulgui tornar a començar. El gran logotip de “LUSH” a la part superior és un identificador fàcil i evident per tornar a casa. No importa on estiguis al lloc web, sempre tens aquesta àncora que et permetrà tornar al principi.

img_1304-bloc a la meitat

10. Sense picar-zoom!

Durant molt de temps, els llocs mòbils eren simplement una còpia del seu disseny d’escriptori. Volia dir que havíeu de fer zoom per prémer la pantalla. Aquesta és una tendència de disseny desactualitzada i que s’ha d’evitar. L’ideal seria que tot hauria de ser proporcional a la pantalla. Tots els tipus de lletra haurien de ser llegibles sense fer zoom. Tots els enllaços han de fer clic sense fer pinces.

Apple-Pinch-to-zoom

Hi ha una sola excepció quan el pessic és útil: imatges de productes. Encara és molt útil per als clients pinçar i fer zoom a les imatges del producte. Volen poder veure tots els petits detalls abans de comprar.

11. Fer front a la preocupació per la “seguretat”

Malgrat l’enorme quantitat de trànsit cap a llocs de comerç electrònic mòbil, encara hi ha una preocupació general que comprar alguna cosa des d’un lloc mòbil no sigui tan “segur” com a escriptori. Per descomptat, no hi ha cap diferència en la seguretat des del mòbil fins a la tauleta fins a l’escriptori. Però a 2013 estudi demostra que gairebé la meitat de tots els compradors en línia se senten menys segurs quan compren alguna cosa en un telèfon intel·ligent. És probable que la por pugui matar les vostres conversions.

És una simple pregunta de confiança. És la vostra tasca fer que els clients se sentin més segurs al vostre lloc. El vostre lloc de comerç electrònic hauria de tenir, idealment, un certificat de seguretat SSL. Si no és així, compra’n un. És el que us ofereix el petit cadenat groc de la barra d’eines. Al vostre lloc mòbil, assegureu-vos que mostreu el cadenat SSL el més prominent possible.

imatge18

Una altra opció és assegurar-se que els vostres clients podran desar un producte per enviar-lo o enviar-lo per correu electrònic. En alguns casos, se sentiran segurs comprar-lo més tard a l’escriptori.

12. Apilat de contingut

Per a moltes persones, crear un lloc mòbil significa simplement triar un tema “sensible” a WordPress o Shopify o a qualsevol plataforma que utilitzeu. Tot i que és un bon començament, voldreu prestar molta atenció a la forma en què el tema emetre automàticament el contingut. No estic segur de què vull dir? Mireu aquest esquema a continuació:

15_content Emmagatzematge

Així és com un tema responsiu pot apilar automàticament el contingut per a una tauleta (imatge esquerra) o un telèfon intel·ligent (imatge dreta). Considereu atentament quins són els vostres continguts més importants i assegureu-vos que s’apilen correctament. Per exemple, a la part dreta, els productes (caixa 5 – tipus de banys) estan forçats a baixar de la pantalla. Fins i tot es poden empènyer a sota del “plec”.

Experimenteu el disseny i l’apilament de contingut per assegurar-vos que el contingut més important aparegui al lloc adequat.

13. Perdre qualsevol contingut de flaix

Flash és un format relativament obsolet a qualsevol dispositiu. (De fet, els dissenyadors ho són lluitant per matar-la d’una vegada per totes! S’empassa recursos, és lent i és un parc infantil per als pirates informàtics). Tot i que són males notícies en un lloc d’escriptori, és pitjor encara en un telèfon intel·ligent o en una tauleta.

La majoria de dispositius mòbils no reprodueixen en cap moment flash multimèdia. Així que si confieu en ell per a una demostració de vídeo o de producte, elimineu-lo: els vostres clients no ho podran veure en un mòbil. Apple ho va bloquejar fa anys, i Android va seguir el mateix poc després.

L’alternativa és assegurar-se que el vostre lloc web és compatible amb HTML5 (més informació aquí) i utilitzeu YouTube per allotjar qualsevol vídeo.

14. Abraça les limitacions!

Molta gent de la qual he parlat ha expressat frustració sobre les limitacions d’un lloc mòbil. El fet senzill és aquest: no hi podeu fer res. En canvi, abraça aquestes limitacions.

Us obliga a prendre decisions importants que us ajudaran a tota la vostra empresa. Com puc simplificar el meu lloc web? Com puc obtenir el meu sentit en menys paraules? Com puc ser més precisa i convincent en un espai més reduït? Quin dels meus productes hauria de prioritzar?

Crec fermament que respondre aquestes preguntes fa que el vostre negoci sigui més fort. Sempre que pugueu destil·lar la vostra proposta, la feu més potent. I això és essencial per a un bon lloc mòbil.

15. Prendre decisions de disseny mitjançant Google Analytics

El problema amb el disseny per a mòbils és que hi ha tants dispositius a tenir en compte. Optimitzeu el vostre disseny i disseny per a les tauletes iPad o Android? Optimitzeu per a iPhone 5 o iPhone 6? O el Samsung Galaxy?

Un disseny sensible significa que es modelarà d’una manera diferent a cadascun. Aquí és on Google Analytics us pot ajudar. L’última versió d’Analytics us permet veure quins dispositius mòbils accedeixen més sovint al vostre lloc:

dispositius mòbils-seguiment d’analítica

En aquest cas, els iPhones són el dispositiu líder, per molt. Per tant, té sentit fer totes les proves a un iPhone. Prioritzeu el dispositiu superior quan optimitzeu el vostre lloc mòbil.

Tot i que els dispositius mòbils dominen ara el mercat de les compres en línia, els llocs web mòbils encara queden molt per darrere. La meitat dels majors comerciants els han tractat com a respostes posteriors.

Efectuant aquests retocs i canvis, podeu obtenir un pas per davant de la competència aprofitant aquest gran flux de trànsit.

M’agradaria escoltar el que heu fet per optimitzar el vostre lloc mòbil. Quins retocs t’han funcionat?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map