Buenas prcticas de E-commerce

Introduccin
Hacer un template involucra algunos desafos mayores a realizar un diseo a medida, principalmente debido a que no se conocer la identidad de la marca, ni sus productos o contenidos. Esta gua ayuda al diseador a realizar templates que se comporten bien de forma genrica, y que se defiendan bien ante cualquier contenido que puedan subir los usuarios.

Consideraciones generales
El diseo debe ser prolijo, simple y sobrio. No debe estar muy cargado y debe hacer foco en exhibir los productos. En cualquier lugar donde se exhiba un producto debe verse su nombre y su precio (NO necesariamente el botn de agregar al carrito, esto principalmente debido a la existencia de variantes). Debe haber constantemente un carrito pequeo y visible, mostrando la cantidad de productos que ya fueron agregados. Suele ubicarse en el header. Adems debe contener el subtotal de la compra. Para cualquier formulario que tenga campos opcionales, deben tener un cartel en letra ms pequea que diga: "(Opcional)", al lado del nombre del campo. Opcionalmente, deben mostrarse Breadcrumbs o migas de pan, ayudan al usuario a visualizar en que seccin se encuentra y adems permiten navegar hacia las pginas anteriores. Deben ser trabajados con informacin real, sobre todo nombres y descripciones reales de productos. Es importante probar el diseo con nombres y descripciones tanto cortas como largas. Tambin probar precios conteniendo centavos, y no slo nmeros enteros. Si hay mapas, tienen que ser grandes y visibles. No tienen que tener botones innecesarios de filtros (tipo vista blanco y negro, vista terrestre, etc). Siempre tienen que tener el PIN del lugar, marcado. Deben estar acompaados por un texto con la direccin del local. No usar "descripciones" de productos en pginas que no sean la de producto nico. Esto es porque siempre hay que truncarlas y no queda de la mejor manera. Adems, tampoco es algo necesario poner la descripcin, con las fotos, en ocasiones, suele bastar. Debe estar preparado para soportar al menos 2 niveles de subcategoras. En todos los lugares donde se incluyan precios, debe indicarse claramente la moneda visualizada. Deben estar siempre presentes las formas de pago y de envos, tpicamente en el footer, utilizando los logos correspondientes.

Fotos
Se lleva bien con fotos sin fondo blanco? Explicacin: La mayora de los clientes NO tienen fotos con fondo blanco. Esto hace que cuando los clientes suban sus diseos a un template, generalmente el resultado visual no sea el mejor.

Posible solucin: opcionalmente ofrecer la posibilidad de que las fotos estn enmarcadas por un borde acorde al diseo. Esto mejora el impacto visual.

Grilla de productos con foto, ttulo del producto y precio

Est preparado para que las fotos sean del mismo tamao? Existen mecanismos CSS para mitigar este problema.

Est preparado para que varias fotos sean subidas? Debe tenerse en cuenta que cada producto tendr entre 1 y 5 fotos. Tpicamente cada producto tiene una foto principal y varias secundarias. Las secundarias aparecen nicamente en la vista de producto nico. En todos los casos debe haber un mecanismo para ver las fotos principales y secundarias en tamao original e incluso con zoom. El diseo debe ser probado con imgenes tanto horizontales como verticales.

Fotos de distintos tamaos, utilizan las propiedades CSS max-width y max-height

Pgina de Inicio
Es sin duda alguna la pantalla ms importante de la tienda, y debe destacarse del resto. Es ideal que haya alguna visualizacin dinmica como por ejemplo un slider de productos, o de imgenes con links asociados.

Slide de imgenes con fotos de campaa

Deben mostrar al menos dos niveles de destacados distintos de productos, donde uno se destaque ms que el otro.

Dos niveles de destacados, principal y secundario

No necesariamente debe haber botones de agregar al carrito en el home (principalmente debido a productos con variantes). Slo deben mostrarse ttulos, fotos y precios. No deben mostrarse descripciones de los productos. Es deseable que, opcionalmente, el usuario pueda subir un banner angosto que ocupe el ancho de la tienda, para mostrar promociones o novedades. Este banner puede ser una o dos imgenes que rotan, con un link a alguna pgina configurable por el usuario.

Listado de productos
Debe estar explcito y visible el ttulo de la categora que se est mostrando. Debe estar bien enfocado a fotos o imgenes. Los grillados suelen ser buena idea, permiten ver varios productos rpidamente, apreciando sus fotos. Slo deben mostrarse ttulos, fotos y precios. No deben mostrarse descripciones de los productos. Contemplar imgenes de diversos tamaos. Ver tcnicas CSS para lograrlo: Millenium Falcon y Max Width/Height. Es deseable que, opcionalmente, el usuario pueda subir un banner angosto, de todo el ancho, para mostrar beneficios. Similar al del home. Puede no ser clickeable y solo informativo. Tpicamente se incluye arriba, antes del listado del producto.

Producto nico
Debe estar preparado para soportar entre 1 y 5 fotos. Las fotos deben tener algn efecto interesante al clickearlas o pasar el mouse por arriba. Ejemplo: lightbox o zoom.

El botn de "agregar al carrito" es el ms importante de esta pgina, debe destacarse y ser fcil de encontrar. Bien visible y dentro del fold. Debe estar preparado para soportar variantes. Debe incluir en el diseo botones de "like", "share" y "tweet". No deben interferir con el botn de "agregar al carrito" (a nivel "call to action"). Debe contemplar un cartel para indicar Stock. Debe incluir imagen o cartel de "out of stock", cuando no hay ms stock disponible. Las fotos, precio, y botn de agregar al carrito, son lo ms importante! Siempre visibles.

Botn claro de agregar al carrito, miniaturas de otras fotos y links para compartir el producto en redes sociales

Carrito de compras
Debe incluir una miniatura de los productos a ser comprados. Debe incluir ttulo del producto, cantidad, variante y precio. Debe tener un botn para cambiar la cantidad o para "actualizar el carrito". Una buena idea es que este botn permanezca oculto y solo aparezca cuando el usuario cambia el valor del input. Debe tener un botn para eliminar un objeto del carrito. Ese botn suele posicionarse al final de la fila donde se indica el producto (es decir, sobre el lado derecho). Debe estar bien visible el botn de checkout (arriba y abajo del carrito). Bien visible. No debe haber otros botones o links, o ningn tipo de call to action que haga que el usuario vaya a salir del proceso de compra.

Pantalla del carrito con miniatura, ttulo y precio del producto seleccionado.

Formulario de contacto
Los campos obligatorios NO deben estar marcados con *. Los campos opcionales deben tener un cartel chiquito al lado que diga "Opcional". Debe mostrarse adems del formulario de contacto, otras vas de contacto como telfono, direccin del local, Twitter, Facebook, Skype, entre otros.

Variedad de vas de contacto: Facebook, Twitter, telfono, e-mail.

Pgina de error (404)

Debe informar que la pgina que el usuario est buscando no existe. Es recomendable sugerir los productos destacados.

Pgina de error 404 donde se sugieren los productos destacados de la tienda.

Pgina de resultados de bsqueda

Mostrar la grilla de productos resultantes de la bsqueda. En el caso de que la busqueda no arroje resultados, se recomienda mostrar los productos destacados.

Snipplets
Header
Incluir espacio para logo. Incluir barra de bsqueda. Incluir banderas multipas, por si la tienda se encuentra en varios idiomas. Incluir telfono e email de la tienda. Incluir espacio para botn de ir al carrito. Debe indicar la cantidad de elementos en el carrito.

Footer
Incluir informacin institucional completa (direccin, telfono, mail, Twitter, Facebook, entre otros). Los medios de pago/envos habilitados deben verse mediante logos. Pueden incluirse links a todas las pginas del sitio, a manera de ndice.

Incluir datos tiles de contacto, formas de pago y envos

Opciones del theme (personalizacin del template)

Deben poder modificarse los colores principales del diseo. Debe haber un lugar para cargar y mostrar telfono, direccin, email, Twitter, Facebook, entre otros. Deben poder configurarse los distintos niveles de destacados del home. Si hay espacios para banners, deben poder subirse las imgenes.

Consideraciones de implementacin
El HTML / Markup debe ser vlido (html valid, utilizar http://validator.w3.org/). El CSS debe estar preparado para imgenes de cualquier tamao (no importa que no se vea de la mejor manera, pero que las soporte en el contenedor que corresponde). Si hay imgenes, que NO tengan texto como parte de la imagen (a menos que sea una tipografa muy especial y no se requiera personalizacin sobre la imagen).

Carteles dinmicos
Deben incluirse carteles dinmicos de "xito" y "error". En formularios de contacto, en carrito, en lugares para suscribirse a un newsletter, entre otros.

Extras
Los productos del home deben estar decorados con efectos javascript. Sobre todo, el primer nivel que es el ms destacado. Es ideal utilizar componentes de CSS3 que enriquecen el diseo, por ejemplo: sombras sutiles, bordes redondeados, degrads, entre otros. Es ideal que las fotos tengan algn efecto javascript. Por ejemplo, que siempre sean ligeramente transparentes y al pasar el mouse se opaquen totalmente, como ser, que al pasar el mouse por arriba cambien por otra (por ejemplo: http://sathya.tiendanube.com/). Debe incluir una miniatura del home en 205x263 pixeles para poner en el administrador y que los clientes puedan elegirlo.