icon-menu

Etiqueta: diseño web

Los pecados capitales de no mantener tu página web actualizada

Posted on by Jordi López

Son muchos los quebraderos de cabeza que nos va a dar nuestra página web cada día: tener los productos de la tienda online con el precio actualizado, optimizar las imágenes para que la web cargue rápidamente, artículos con contenido nuevo, resucitar algún post anterior cuyo tema vuelva a estar al día, realizar campañas de posicionamiento para estar siempre arriba y cerca de las zonas calientes de clic para obtener más clientes…

Siempre nos preocupamos que el contenido de la misma, así como su velocidad de carga, sean óptimos para que los clientes naveguen sin problemas y consigamos que nuestro negocio funcione correctamente. ¡Todos contentos!

Pero, aquí falta plantear otra parte muy importante dentro de una web; da igual si es una tienda online en Prestashop, una web realizada mediante WordPress, o una solución a medida (aunque en este caso en menor medida), tener todos los plugins, módulos y elementos de terceros actualizados es realmente fundamental dentro de tus desarrollos.

Tan importante es tener una buena campaña de marketing, como saber seleccionar e instalar aquellos componentes que nuestra página web va a necesitar para funcionar correctamente. Este proceso inicial de estudio, selección y desarrollo es una parte imprescindible para que la página web no presente errores, fallos o incluso reciba ataques en el futuro.

actualiza tu sitio de forma periódica

 

1. Si actualizas de forma regular obtendrás las últimas mejoras y novedades.

A medida que un equipo llega a unos hitos en el tiempo, se van añadiendo mejoras en la parte de diseño, se crean nuevas traducciones en los módulos, o se realizan mejoras en el rendimiento del plugin instalado. Todo esto son siempre eventos positivos para mejorar, ya que no solo te hacen a ti la vida más fácil, si no que mejoran la experiencia de navegación a tus clientes, y en definitiva va a ser un paso para mejorar.

 

2. Actualizar regularmente por si existen agujeros de seguridad.

Creemos que este es el punto más importante, tanto a nivel técnico como a nivel de experiencia de usuario. No debería de ocurrir si hay trazada una buena hoja de ruta durante el desarrollo de una aplicación, pero pueden existir alguna de serie de errores que hagan que tu web no esté a salvo de posibles ataques de hackers con no muy buenas intenciones, así como inyecciones de código malicioso en tu web, que puedan afectar al correcto funcionamiento de tu página.
Descubrir dichos fallos de seguridad y subsanarlos es la razón más poderosa para tener una web actualizada: nadie queremos que nos entren y nos urgen en nuestra propia casa ¿verdad?

 

3. Porqué no actualizar de golpe y con mucha diferencia en el tiempo entre versión y versión.

Recomendamos actualizar de forma periódica los componentes de tu página web: cada 15 días o cada mes.

No recomendamos realizar actualizaciones cada 3 o 4 meses: normalmente los desarrollos introducen mejoras cada cierto tiempo, e incluso modifican piezas de código que afectaban a la version inmediatamente posterior a la que estaba destinada, y las pequeñas mini actualizaciones reparan algunos contratiempos que puedan salir.

Actualizar con tanta diferencia en el tiempo, puede acarrear que el plugin de base no funcione, porqué durante ese tiempo se introdujo una pieza de código que afectaba al conjunto global del módulo, y luego no sepamos desde donde puede venir el problema.

Un ejemplo que podríamos poner fué cuando el plugin de formularios de contacto de WordPress Contact Form 7 pasó de la versión 4 a la 5, que ya requería de la nueva API de recaptcha. En la 5, se utiliza recaptcha 3, y el propio desarrollador ya avisaba de dicho salto, así que nos fuimos preparando. Ciertos clientes nos comentaban que cuando se tiraron meses después a lanzar la actualización no funcionaba correctamente el plugin de envío de formularios.

 

Tu web despegará si la mantienes constantemente actualizada

 

4. Revisar previamente si existe alguna incompatibilidad con otro módulo instalado.

En este punto hay que tener un poco de ojo a la hora de pulsar el botón actualizar. En algunos CMS, como WordPress, se nos avisa si un plugin es 100% compatible con la versión del núcleo de WordPress actual. En algunos casos, a los plugins les falta algunas piezas de código para ser 100% compatible con el core que acaba de salir, y su autor notifica que no nos fiemos que puede que salga algún problema.

Ahí están los casos de clientes que nos comentan que después de actualizar un tema o plugin nos dicen que la web se ha quedado en blanco, y que no funciona. Ese plugin no es compatible porqué se ha dejado de utilizar algún tipo de funcionalidad en la última versión de WordPress y es necesario actualizarla por parte de su autor.
Por eso recomendamos que primero actualicéis los que indican que son 100% compatibles con esa versión de WordPress y posteriormente actualizar los que falten.

 

5. No recomendamos la automatización de las actualizaciones.

Las actualizaciones automáticas son un método que quita mucho trabajo, ya que te permite no estar pendiente constantemente de tu página web y que sea ella la que se auto instale lo necesario cuando aparezca una nueva versión de algún módulo.

Pero esto puede daros algún dolor de cabeza. ¿No os ha pasado que actualizáis un módulo, a la versión x.0.3, a las 4 horas aparece la versión x.0.4 y 1 dia después aparece la versión x.0.5 de dicho plugin?

No tiene por qué ser así: a veces en temas de desarrollo puede ocurrir este tipo de versiones y especificaciones, y no suele ser la opción más común a la hora de lanzar actualizaciones de un plugin.

Esto ocurre cuando por la razón que sea se ha traspapelado algún componente, y se lanzan una serie de versiones intermedias, o bien son micromejoras que afectan a algún componente en concreto.

Algunas veces, entre actualización y actualización no funciona algún elemento, y falla la web. Es muy frustante el no saber por qué no funciona si encima está todo en la última versión.
Nosotros recomendamos que después de que salga una actualización (en el caso anterior la versión x.0.3) esperemos unas 12-24 horas aproxidamente para actualizar, desde que se presenta para actualizar, si es una actualización o mejora menor. Si es una consabida actualización de seguridad porqué ha habido un agujero de seguridad gordo que exponga tu web, en ese caso mejor actualizar para no dejar la web expuesta, los posibles errores menores los solucionarán seguro en las próximas horas.

También en caso de presentar una actualización mayor (pasar de versión 4 a 5), recomendamos que pase un dia, dos dias aproximadamente, pues en las primeras horas seguro aparecerán bugs o fallos que en las próximas horas se solucionaran.

 

6. Instalar plugins de confianza

Aunque este punto pueda ser una tontería, es equiparable a cuando realizamos compras online basadas en la confianza de las opiniones vertidas sobre un producto en concreto

¿Qué producto nos lanzaremos a comprar?¿aquél que vale 2 euros menos pero que nadie a opinado sobre él?¿o el que és 2 euros más caro, pero tiene muchas opiniones positivas de calidad, valor, etc…?

En el caso de instalar plugins que realice las funciones que deseemos ocurre exactamente lo mismo: buscad siempre aquellos módulos que tengan un recorrido en cuanto a uso y desarrollo por empresas y/o desarrolladores de confianza, y que aún esté mantenido en el tiempo de forma regular. Ver cuantas instalaciones tiene y si está regularmente actualizado.

No significa que un plugin que haya salido nuevo no sea mejor que uno que ya existe, pero normalmente (no tiene porqué ser siempre) el que más tiempo lleva en el repositorio habrá solucionado problemas que los nuevos puede que se encuentren más tarde.

 

Una web actualizada tiene mejor reputación

 

7. No instalar plugins de pago buscando en google la misma versión como free

Y este es el error que más quebraderos de cabeza da cuando se presenta el caso. Una web infectada que supuestamente tiene todos los módulos actualizados de la tienda, o de la página web.
En principio no hay ningún problema hasta que el plugin X de pago, hace cosas extrañas, y rebuscando entre sus entrañas descubres códigos evaluados maliciosos, inyecciones que afectan al core del CMS, etc.

Parece muy extraño si está actualizado dicho plugin a su última versión, pero te tiras las manos a la cabeza cuando descubres que el cliente ha instalado un módulo de pago que buscando por internet lo encontró gratis en una página que no sabe cuál es.

Este es el error más grave que se puede hacer: los hackers obtienen una copia del plugin en cuestión e inyectan código dentro del mismo para luego ofrecerlo gratis. Esto tiene un transfondo: utilizar los recursos de tu página web o del propio servicio donde está alojada la web para diferentes objetivos fraudulentos.

Aunque un módulo para tu tienda online valga dinero, recomendamos comprarlo: luego es más dinero intentando limpiar el producto infectado que lo que pudiera costar en un principio ese módulo. Y además, que los vendedores de dichos plugins ofrecen un soporte técnico.

 

Y por último …. ¡actualiza ya!

Así que, no hay excusas para no tener actualizada tu página web. Tendrás un sitio más eficiente y sobre todo, seguro. De esta forma tendrás mejor reputación online, y tanto tus clientes habituales como tus potenciales clientes tendrán ganas de entrar a comprar en tu tienda. Así de sencillo.
Y si no te aclaras de como realizar tu actualización, ponte en contacto con nosotros: nuestros técnicos te asesorarán con las dudas que tengas.

Colores que pueden incrementar las ventas de tu tienda online

Posted on by Nacho Olcina

Hoy os traemos un interesante artículo sobre la importancia que tiene el color sobre nuestras webs y, más en concreto, sobre nuestros ecommerce. Aspecto muy importante si deseamos que la web, no sólo sea bonita sino sea efectiva para la venta que, al fin y al cabo, es el objetivo de cualquier tienda online. En él analizamos conceptos básicos sobre la psicología del color y cómo influyen sobre las decisiones de los clientes descubriendo aquellos colores que pueden incrementar las ventas.

¿El color importa?

Está más que comprobado que, el simple hecho de que un botón sea de un color o de otro puede influir de forma importante sobre tus clientes en más de una forma. 

El subconsciente de los usuarios analizan y juzgan todos los datos que proporciona tu tienda. Según un estudio del ‘Institute for Color Research’, en apenas 90 segundos, los clientes ya tienen una opinión sobre si les gusta un producto y que entre el 62% al 92% de esta opinión se basa, únicamente, en el color.

La culpa de todo esto lo tiene la Psicología del color, aun así, cabe mencionar que no existe un botón mágico que, simplemente cambiando de color, vaya a disparar las ventas de nuestro ecommerce, no existe un color universal para ello. El color adecuado es aquel que se elige teniendo en cuenta el sector y el consumidor. Descubre los colores que pueden incrementar las ventas de tu tienda online, teniendo en cuenta tu sector y tu público objetivo.

 

colores vender web

Psicología del color

El color tiene un papel muy importante en cómo los consumidores perciben nuestra marca.

Dependiendo del tipo de público optaremos por una gama de colores u otros.

La psicología del color es la encargada de estudiar las emociones, conductas y reacciones que generan los colores sobre las personas. Cada color tiene un significado y debemos conocerlo para acercarnos lo más posible a nuestro público. A su vez, cada color puede tener varios significados, dependiendo de varios factores como pueden ser la educación, el sexo, la cultura, los valores, etc. No es lo mismo el significado de un color en occidente que en oriente, por ejemplo.

 

La sociedad va evolucionando, y con ella la simbología y la comprensión del color va cambiando también.

 

Sabías que no siempre el rosa ha estado relacionado con la mujer y el azul con el hombre

Hubo un tiempo en que a los niños no se les distinguía por color de sus prendas, todos iban de blanco nuclear y con vestido de algodón hasta los 6 o 7 años. Fue a partir del siglo XIX cuando aparecieron los tonos pastel, pero en ningún caso para definir el género.

No es hasta después de la I Guerra Mundial cuando empiezan a aparecer la diferenciación mediante estos colores, pero es aquí cuando descubrimos que la regla aceptada era rosa para los chicos, y azul para las chicas. La razón es que el rosa es más decidido y fuerte, adecuado a niños, mientras el azul, más delicado y refinado, para las niñas. Algo fundado totalmente por modas.

Fue a partir de la II Guerra Mundial, años 40, cuando se cambiaron las tornas, no están claros los motivos, algunos aseguran que los soldados empezaron a usar chaquetas azules, y este color se fue tímidamente poniendo de moda entre los niños, y por tema de modas se invirtieron los colores. En los 60 con la revolución feminista que descolocó estos estándares, apareció la ropa unisex, pero en los 80, en la madurez de los niños nacidos durante los 40 (babyboom) fue cuando aplicaron estas reglas y más fuerza tomó esta separación de sexos por colores, junto con la aparición de saber el sexo del bebe antes de nacer.

Resumiendo, fueron la moda y los grandes almacenes quienes decidieron separar los sexos por colores, no hay un fundamento psicológico más allá de estos intereses.

Se han estandarizado de alguna forma una relación directa entre colores y sectores, no es lo mismo escoger colores para el sector financiero (azules, transmiten confianza y seguridad), para el ecológico (verdes, relacionados con la naturaleza y la salud), o para un sector enfocado al lujo (negro, denota autoridad, poder y fortaleza).

 

Significado de los colores y su influencia

 

Primarios

 

Rojo

Asociado con fuego, sangre, sexo.

Positivo: pasión, amor, sangre, energía, entusiasmo, emoción, calor, poder.

Negativo: agresividad, ira, lucha, revolución, crueldad, inmoralidad.

Además:

  • El color más dominante visualmente.
  • Sugiere velocidad, acción.
  • Estimula el ritmo cardíaco, la respiración y el apetito.

Utilizado en productos de consumo y restaurante de comida rápida, y en el sector inmobiliaria. De los colores más usado en marketing.

 

Amarillo

Asociado con el Sol.

Positivo: entendimiento, sabiduría, optimismo, gloria, alegría, idealismo.

Negativo: celos, cobardía, engaño, cautela.

Además:

  • Es el primer color que percibe el ojo humano.
  • Más brillante que el blanco.
  • Acelera el metabolismo.
  • El amarillo intenso es el color más agotador; es capaz de irritar los ojos.
  • El amarillo claro puede favorecer la concentración.

Color arriesgado, pero que es muy llamativo y destaca entre la multitud.

 

Azul

Relacionado con el mar y el cielo.

Positivo: conocimiento, tranquilidad, paz, masculinidad, contemplación, lealtad, justicia, inteligencia.

Negativo: depresión, frialdad, indiferencia, apatía.

Además:

  • Se utiliza en productos o alimentos azules para suprimir el hambre, ya que son poco frecuentes los alimento azules en la naturaleza .
  • Hace que el cuerpo produzca químicos tranquilizantes; relajante.
  • Se dice que las personas son más productivas en espacios de color azul.
  • La ropa azul simboliza lealtad o confianza.

Transmite calma, confianza, y relaja (sector financiero). En tonos oscuros representa elegancia y éxito, y en tonos claros juventud y frescura (sector tecnológico).

 

Secundarios

 

Verde

Asociado con las plantas, el entorno, y lo natural.

Positivo: fertilidad, dinero, crecimiento, curación, éxito, naturaleza, armonía, honestidad, juventud.

Además:

  • El verde es el color más agradable para la vista.
  • El verde es un color relajante y refrescante; se utiliza con frecuencia en hospitales para tranquilizar a los pacientes.
  • Crea sensación de orden.

Es un color que remite al naturaleza y la salud. Versátil y agradable siempre suele funcionar sin error.

 

Púrpura

Asociada con realeza, espiritualidad.
Positivo: lujo, sabiduría, imaginación, sofisticación, rango, inspiración, riqueza, nobleza, misticismo.

Negativo: exageración, excesos, locura, crueldad.

Además:

  • Posee una calidad femenina y romántica.
  • Poco frecuente en la naturaleza, parece artificial.
  • Fomenta la imaginación.

Color relacionado con el sexo femenino, elegante, y a la vez frío y cálido. utilizado en productos de fantasía y que inspiran superación.

 

Naranja

Asociado al otoño y los cítricos.

Positivo: creatividad, vitalidad, exclusividad, energía, intensidad, estimulación, sociabilidad, salud, extravagancia, actividad.

Negativo: ignorancia, seguir la moda, ruido.

Además:

  • Estimula el apetito.
  • Se emplea para realzar la visibilidad.
  • Aumenta el optimismo, la seguridad y la confianza.

El más utilizado en publicidad, estimula las compras. Por ello también es el color que más convierte en un ecommerce. Muy utilizado también en Call to Actions. 

 

Blanco

Asociado a luz y pureza.

Positivo: perfección, matrimonio, limpieza, virtud, inocencia, ligereza, suavidad, sagrado, sencillez, verdad.

Negativo: fragilidad, aislamiento.

Además:

  • Color perfectamente equilibrado.
  • Simboliza paz y pureza.

Utilizado en campañas minimalistas.

 

Negro

Asociado con la noche y la muerte.

Positivo: poder, autoridad, peso, sofisticación, elegancia, formalidad, seriedad, dignidad, soledad, misterio, estilo.

Negativo: miedo, negatividad, maldad, ocultación, sumisión, luto, pesadumbre, remordimiento, vació.

Además:

  • El negro hace que los demás colores sean más intensos.
  • En cromoterapia se cree que el negro aumenta la seguridad en uno mismo y la fortaleza.

Combina perfectamente con casi todo. Utilizado en campañas tanto tradicionales como modernas. Utilizada en campañas de moda (elegancia y sofisticación) y productos de lujo.

 

Fuente: “El color en el diseño gráfico”, Sean Adams y Terry Lee Stone.

 

Los colores más utilizados en ecommerce

 


Rojo: adecuado para tiendas de deporte, mundo inmobiliario, productos textiles y moda.



Naranja: es el color que mejor convierte en los botones de carritos y CTA. Relacionado con productos deportivos, bebidas energéticas, y vitaminas.

 


Verde: enfocado a productos naturales, ecológicos y saludables, y utilizado en tienda del hogar.

 


Azul oscuro: enfocado al sector financiero.

 


Azul claro: enfocado a la tecnología, y a la moda infantil.

 


Negro: muy utilizado en el sector de moda, y en productos de lujo.

 


Amarillo: perfecto para el sector del ocio y el entretenimiento.

 


Rosa: adecuado para tiendas enfocadas a imagen femenina.

 


Morado: ideal para tiendas de fantasía, y según qué matices también para productos femeninos.

 

Conclusión

¿Hay por tanto colores que pueden incrementar las ventas? No hay un color universal que ayude a aumentar tus ventas de forma mágica, pero un uso adecuado del color sí que puede ser un factor decisivo para ello.

Un estudio de usabilidad adecuado realizado por profesionales puede ser el empujón necesario para que un negocio ecommerce funcione mejor.

En acceseo somos especialistas en ecommerce y nos encargamos de llevar a cabo este tipo de estudio de mejoras de usabilidad y conversión. ¿Hablamos?

 

Qué es Adobe Xd y para qué sirve

Posted on by Nacho Olcina

Hoy queremos presentaros una de la herramientas que más utilizamos en el departamento de diseño web y también de desarrollo, Adobe Experience Design CC, o más comúnmente llamada Adobe Xd.

Adobe Xd es un herramienta de Adobe para la creación de interfaces. Un programa dedicado íntegramente al diseño y prototipado de aplicaciones web. Recoge todas las herramientas necesarias que usábamos en otros programas de Adobe y lo unifica en esta sencilla pero potente herramienta.

 

Cómo nace Adobe Xd

Allá por octubre de 2015 Adobe anunciaba una nueva herramienta de diseño y prototipado con el nombre de «Project Comet», en una conferencia Adobe MAX. Poco después, en el primer trimestre de 2016 lanzaba una primera versión beta para MacOS llamaba Adobe Experience Design. A finales del mismo año la lanzaban para Windows.  A partir de octubre de 2017 dejó de ser una beta.

Nace para hacer frente a las necesidades de los diseñadore UX/UI para generar bocetos, diseños y prototipos de interfaces, dado el vacío que había dentro de Adobe, sin ningún software específico para generar este tipo de procesos. Antes hubieron otros como Adobe Fireworks (una clásica herramienta absorbida de Macromedia, que desapareció en 2013), y algunos programas se han utilizado para estos fines, sin ser los más apropiados, como Photoshop (programa dedicado al retoque fotográfico) e Illustrator (dedicado al diseño vectorial). Ninguno de ellos es óptimo ni específico para ello. Aunque se les ha intentado agregar herramientas para ello, no eran nada ligeros ni estaban bien optimizadas para ello.

Adiós a Photoshop e Illustrator para diseñar páginas webs o aplicaciones.

También para hacer frente a otros softwares como son Sketch, InVision, o Figma.

Uno de los mejores softwares de diseño de interfaces y prototipado es Sketch, muy conocido dentro del mundo de editores de gráficos y diseño UX UI, que se ha convertido casi en un estándar en el sector. Uno de los factores clave de este software es que solo está disponible para Mac OS.

Adobe tuvo una fuga masiva a este software ya que no cumplía con las necesidades del momento. Ahora (aunque algo tarde) quiere plantarle cara directamente a Sketch, y aunque pensamos que aún le falta bastante recorrido para ello, va por el buen camino.

 

Cómo funciona Adobe Xd

Adobe Experience Design CC – Diseña experiencias, genera prototipos y compártelos.

Tiene una interfaz muy minimalista, sencilla, intuitiva, limpia y clara (blancos y grises claros predominan). Recoge las herramientas necesarias para llevar a cabo los diferentes procesos de trabajo. Desde generar Wireframes y bocetos, con diferentes interacciones y transiciones para poder realizar test de usabilidad, hasta el diseño y prototipado interactivo, y los recursos necesarios para la producción final.

Todo ello mejorando y acelerando los procesos de creación gracias a herramientas muy intuitivas.

En la parte superior encontramos el desplegable del menú único y principal con las diferentes opciones: Nuevo, Abrir, Guardar, Importar, Exportar, etc. Y la barra con los botones para cambiar entre perfil de Diseño y Prototipo, el icono de Vista previa del diseño, y el Botón desplegable de Compartir.

El conjunto de herramientas se sitúa en una barra lateral izquierda:  Seleccionar, Rectángulo, Círculo, Línea, Pluma, Texto, Mesa de trabajo, y Zoom. En la parte inferior está el generador de activos (para crear estilos de colores, texto y símbolos) y el navegador con de capas.

Mientras que las propiedades dinámicas y configuraciones las encontramos en la parte derecha: Alinear, Repetir cuadrícula (grid), Tamaño y posición, Rota y Reflejar, Redimensionado interactivo, Aspecto del elemento.

No importa que software estemos acostumbrados a usar, es muy sencillo acostumbrarse a él.

Podemos diseñar y previsualizar (vista previa) a tiempo real, para comprobar cómo funcionan las interacciones, animaciones y diferentes transiciones, simplemente clicando sobre el icono del “Play” superior derecho.

 

Herramientas de diseño UI

herramientas-diseno-ui

Perfil de Diseño.
Desde aquí podemos generar bocetos y Wireframes para nuestras interfaces, y posteriormente darle diseño y estilo de una forma muy sencilla.

Mesas de trabajo

Permite crear dentro del espacio de trabajo diferentes mesas con tamaños de pantallas ya predefinidas, desde desktop hasta ipad o pantallas de móvil.

Cajas

Formas poligonales vectoriales sobre las que poder enmascarar imágenes. Según cambiemos el tamaño de estas formas la imagen se adaptará de forma automática, al estilo responsive.

Texto

Herramienta muy sencilla pero muy práctica para la inserción del texto en nuestros diseños.
Una funcionalidad que nos encanta es la de poder alternar entre Texto de punto (la caja se adapta al texto) para los títulos, o Área de texto (donde el texto se adapta a la caja) para textos y párrafos.

Grid

Permite la clonación de un bloque de contenido y su posible edición inteligente posterior. Perfecto para generar cuadrículas de elementos.

Panel de Activos (assets): Estilos de colores, carácteres y símbolos

Mediante esta herramienta podemos definir diferentes estilos activos que tenemos en la web, para aplicar a nuestros diseños de forma rápida, y sobre todo el poder editar estos estilos y aplicarlo de forma fácil a todo el proyecto. La creación de símbolos es muy eficaz a la hora de utilizar elementos repetitivos, como por ejemplo, cabeceras y footers, botones, iconos, etc.

Exportar recursos

La herramienta de Exportar (Ctrl + E) nos encanta, ya que exportamos de forma fácil los elementos seleccionados o que queramos, definiendo el tipo de formato, la calidad, etc. Genera automáticamente los recursos necesarios para la fase de producción, incluso en varias resoluciones según lo requiera el proyecto (1x,2x, 3x).
Podemos exportar: imágenes en JPG (elección de calidad), y PNG (imágenes con colores planos). Recursos en SVG (para iconos y logotipos vectoriales), e incluso exportar el diseño en formato PDF.

 

Prototipado interactivo UX

prototipado-interactivo-ux

Pasamos al perfil de Prototipado.
Desde aquí podremos crear las diferentes interacciones entre nuestras mesas de trabajo o pantallas.

Transiciónes y animaciones

Hay 3 tipos: Tocar, Arrastrar o por Voz.

Mediante un sencillo sistema de arrastrar la flechita podemos enlazar las diferentes páginas. Se puede elegir el tipo de transición que queramos desde una transición normal, hasta de autoanimación (para secciones desplegables o carruseles) o superposición (para desplegables,  lightbox o popups por ejemplo).  Aquí tendríamos que profundizar más para ver todas las posibilidades que nos ofrece, ya que son bastante, e interesantes.

Podemos ir viendo desde la Vista previa como van quedando estas interacciones.

 

Compartir tus prototipos y sus especificaciones

compartir-prototipos-especificaciones

Desde aquí podremos compartir nuestros prototipos con los clientes para su feedback y validación, o con otros compañeros. Simplemente con un simple enlace podremos compartir nuestra interfaz con quien queramos.

Desde el botón de Compartir veremos las siguientes opciones.

Compartir archivos

Guarda el documento de Adobe Xd en la nube y podrás acceder a él desde cualquier parte o compartirlo con otras personas para que puedan editarlo.

Compartir para revisión

Desde aquí puedes compartir el prototipo para su revisión. Si quieres conseguir feedback del cliente o de forma interna puedes generar desde aquí un enlace para compartirlo con quien quieras. Tiene algunas opciones de configuración como: Permitir comentarios (muy útil para sugerir cambios), Abrir en pantalla completa, Mostrar sugerencias sobre puntos importantes, o Requerir contraseña.

Para nosotros la parte de compartir para revisión nos es fundamental, y de esta forma nos facilita y acelera el proceso de validación. Además el cliente se hace una idea de cómo quedará el producto final terminado. ¡Se acabó lo de pasar el diseño en JPGs o PDF!

Compartir para desarrollo

Una vez pasado la parte de validación, y tenemos el Ok, pasamos a la parte de desarrollo. Debemos poder saber transmitir toda esta información a los técnicos responsables del desarrollo de la interfaz.
Desde aquí podemos compartir todos los recursos necesarios a nivel estilos (colores, tipografías, tamaños, etc.) para que puedan transformar de forma fiel nuestro prototipo a un producto final definitivo. Generando así un enlace accedemos a todos los recursos necesarios para hacerlo realidad.

Esto junto con la Exportación anterior de los recursos visuales obtenemos un tándem perfecto para los desarrolladores.

 

Integraciones y Kits de recursos para interfaces

recursos-interfaces-adobexd

Adobe pone a nuestra disposición una serie de interacciones y recursos para facilitarnos un poco más el trabajo.

Interacciones

Integración para conectar Xd con tus aplicaciones y servicios favoritos: Microsoft Teams, Jira, Slack, ProtoPie, Avocode, Zeplin, Sympli, Kite App.

Kits de recursos para interfaces

Nos facilitan kits de recursos personalizados para las principales plataformas: Apple Design, Material Design (Google), y Microsoft UWP Design.
A parte de estos hay una especie de kits/plantillas de todo tipo, desde plantillas para diseñar apps de Smartwatch, hasta para Amazon Alexa, pasando por kits ecommerce.

Muy recomendable ver todos los recursos que nos ofrecen.

 

5 Plugins recomendados para Adobe Xd

plugins-adobe-xd

Otro de los fuertes de Adobe Xd es que cuenta con una fuerte comunidad detrás que desarrolla plugins interesanes para implementar en nuestro Adobe Xd, y el propio Adobe Xd nos los facilita desde el propio programa para instalarlos. Te recomendamos para empezar que pruebes los siguientes.

UI Faces

Para generar avatares aleatorios en una interfaz, dentro de cualquier tipo de forma.

Artboard Plus

Ordena automáticamente tus mesas de trabajo. Para los más desorganizados.

Lorem Ipsum

Si vas a poner texto de ejemplo este plugin es el más cómodo para generar el famoso Lorem Ipsum.

Icondrop

Para integrar iconos, ilustraciones o fotos de stock directamente en Adobe Xd.

VizzyCharts

Para generar gráficas reales en nuestra interfaz.

 

Precio y disponibilidad

precio-adobe-xd

Es uno de los puntos fuertes de este programa, ya que es GRATIS (para particulares), y está disponible tanto para Mac OS como para Windows. Adobe quiere aprovechar el aumento de público en el campo de UX / UI y equiparar sus tarifas a competidores como Firgma.

Eso sí, a la hora de compartir estaremos limitados, ya que solo nos dejará compartir a la vez un prototipo y uno de especificaciones. Si tenemos cierto volumen de trabajo de interfaces recomendamos ciegamente pagar la versión de pago para equipos de diseño, ya que es bastante rentable.

Podremos acceder a nuestros prototipos desde diferentes dispositivos (según aseguran): Android, iPad, iPhone, etc. Aunque a nosotros personalmente nos da algún problema en Android.

Adobe Xd >>

 

Conclusión

Hace ya bastantes meses que trabajamos con Adobe Xd y ha supuesto uno de los cambios más importantes de los últimos años en el proceso que va desde el diseño hasta el desarrollo de la interfaz a nivel UX/UI. Lo hemos notado a la hora de mejorar los tiempos y los métodos de trabajo en nuestro departamento, y en la calidad del producto final. Nos facilita mucho los procesos, desde el bocetado, wireframes, diseño y prototipado, hasta la parte de desarrollo, con la generación de recursos y assets de una forma muy eficaz y práctica.

Unos de los puntos clave es la de compartir para revisión, y ahora mismo no sabríamos vivir sin esta opción para la validación, nos facilita mucho la vida.

Creemos que aún tiene bastantes limitaciones y faltan algunas herramientas clave para poder generar mejores prototipos, pero aun así desde acceso apostamos por Adobe Xd como herramienta de diseño y prototipado UX/UI. ¿Y tú que herramienta utilizas? ¿Has probado ya Adobe Xd? ¿Quieres que diseñemos tu nueva interfaz?

 

La importancia de desarrollar un buen plan de UX para tu proyecto

Posted on by Jordi López

Hola a tod@s.

En esta segunda entrada que realizo, os voy a escribir sobre algo un poco menos técnico, pero que no deja de ser importante a la hora de plantear y desarrollar un sitio, ya sea tienda online, web, etc.

La tan malograda UX o experiencia de usuario, la fea de la película. Pero me enfocaré en la parte de diseño y el apartado técnico, ya que la experiencia de usuario en sí es un ente bastante complicado de resumir y que engloba muchos otros aspectos a la hora de presentar un proyecto a un cliente.

 

Vale, no corras ¿podrías explicar un poco que es eso de la UX?

Una de las definiciones globales que más me gusta podría ser que “la experiencia de usuario es lo que siente una persona cuando está interactuando con un producto, ya sea digital o físico y que se ve afectado por elementos y factores ambientales”.

Me he quedado a gusto, ¿eh? Enfocándolo más todavía al aspecto digital, la UX sería el cómo se siente esa persona, pero interactuando con un sistema. Que web más fácil, no sé dónde comprar, esta app es más lenta que «el caballo del malo», esto no funciona (no viene mucho al caso, pero viene implícito en el 90 y pico por ciento de quejas de un sitio cuando no te gusta). Este resumen incluye una página web, una aplicación web, una aplicación móvil o de escritorio…, básicamente cualquier tipo de interacción humano/dispositivo.

 

Ojo, que no hay que confundir la experiencia de usuario con la usabilidad …

Porque, aunque estén relacionados, no es lo mismo. UX es la experiencia, emoción, intuición y conexión que un usuario siente al usar un sitio o un producto, el feel. Mientras que la usabilidad es más acerca de la efectividad del diseño de un sitio y cómo usarlo de manera amigable. Podemos decir que la usabilidad es un componente clave de la experiencia general del usuario.

 

¿Existe la fórmula mágica para hacer una fantástica UX?

Pues no. No existe la piedra filosofal de la UX, a cada uno nos satisfacen cosas diferentes y que un producto puede tener a la mayoría contentos es bastante difícil.

Lo más importante que hay que recordar a la hora de diseñar e implementar tu sitio web o app, es que tú no eres tus usuarios. No asumas nunca que conoces lo que quieren o necesitan.

Entonces, ¿cómo se puede definir una gran experiencia? Intenta acércate a ellos, observa, escucha y pregunta.

 

¿Y por qué crees que es tan importante?

La experiencia de usuario es tan importante porque trata de satisfacer las necesidades del usuario, y un usuario satisfecho es la clave del éxito. Con la UX se intenta proporcionar experiencias positivas que mantengan a los usuarios atentos y que se vuelvan leales al producto o marca. Además, es más propicio para el éxito empresarial … y el tuyo propio.

 

¿Conoces métodos para dar un poco de caña a esto del proceso de UX?

Digamos que hay unos 8 pasos básicos para lidiar con la experiencia de usuario. Arremangaos que vamos al tajo:

 

  • Perfiles de usuario y personas

El primer paso en todo este proceso es conocer a tu audiencia. Esto te permite desarrollar experiencias que se relacionan con la voz y las emociones de tus usuarios. Para comenzar, querrás crear lo que se conoce como “una persona”: una representación semi-ficticia de tu cliente ideal basado en la audiencia que has investigado. No es el Tinder, tranquilo.

Cuando termines de trabajar con tu persona (o personas), tendrás el perfil de la (s) persona (s) con la que está hablando tu aplicación. Crear una persona consiste en sumergirse en el análisis de tu sitio y en otros datos de clientes mientras realizas entrevistas y encuestas tanto internas como externas (o como hacer que te odien tus compañeros de trabajo).

Incluso puedes hablar con audiencias «parecidas» que reflejen los mismos rasgos que tus usuarios actuales. Algunos de los rasgos comunes que deberías considerar al desarrollar tu persona incluyen:

  • Demografía (edad, ubicación, estado familiar, carrera, etc.)
  • Personalidad (introvertida, extrovertida, creativa, etc.)
  • Motivaciones (miedo, incentivación, poder, etc.).
  • Y cualquier tipo de información que te ayude a conocer a tus usuarios.

Estas entidades de personas te tomarán (y deberían tomarte) un tiempo para desarrollarse. Hay muchos pasos que se deben seguir para asegurarse de que tienes una mejor comprensión de ese ente. Y ten en cuenta que pueden cambiar a lo largo del tiempo y que las base de clientes evolucionan (hoy tu cliente trabaja para X y mañana le entran Y clientes diferentes, por ejemplo).

 

  • Testeo de la interfaz

Cuando creas una interfaz de usuario, cuantos más datos puedas recopilar, mejor. Lleva a cabo un estudio para comparar la efectividad y la calidad de la experiencia entre diferentes interfaces de usuario, incluido tu sitio actual tal y como se ve.

Algo tan pequeño como cambiar una sola palabra, o el color de una fuente, podría afectar a la efectividad de tu página. Una poderosa herramienta para probar la interfaz es la plataforma “Optimize” de Google.

Con Optimize, puede dividir las impresiones de tu sitio web en dos grupos y mostrar a cada uno de estos grupos una versión diferente de las páginas de tu sitio (A/B Testings). Una vez que tengas un tamaño de muestra estadísticamente significativo, puedes ver qué versión está superando a la otra y hacer los ajustes correspondientes.

 

  • Encuestas de usuario

Va, que ya va quedando poco …. Ahora, entrevista a los usuarios existentes y potenciales del sistema para obtener una idea de cuál sería el diseño más efectivo. Debido a que la experiencia del usuario es subjetiva, la mejor manera de obtener información directamente es estudiar e interactuar con los usuarios. Un elemento de la página que pensabas que estaba funcionando muy bien, el botón de la app que pensabas que era superefectivo, podría parecerle completamente invisible a tu usuario final, por lo que una vista de primera mano de la forma en que interactúan con el sitio web puede proporcionar información valiosa.

Analiza a las personas de tu público objetivo cuando realices estas encuestas, ya que su propio grupo puede interactuar con el sitio web de manera diferente a las personas a las que deseas llegar. Haz preguntas como: ¿Cómo te hace sentir el sitio web? ¿Dónde te confundiste? ¿Cómo harías una compra? ¿El idioma te dice algo? Es posible que te sorprenda con la cantidad de comentarios constructivos que vas recibir.

 

  • Utiliza diagramas de flujo

Haz un diagrama de flujo que muestre cómo deben moverse los usuarios a través del sistema. Comienza por decidir cómo esperas que se muevan a través del sitio, luego compáralo con la forma en que realmente interactúan con él. Las personas de usuario de antes te ayudarán aquí: cuando entienda el perfil del usuario en el sitio web, podrás planificar mejor la experiencia óptima para ellos.

Además, una serie de herramientas analíticas pueden permitirte ver cómo los usuarios se relacionan con tu página en tiempo real. Plataformas como Mouseflow pueden incluso rastrear dónde se encuentra el mouse de un visitante en la página en un momento dado. También puedes ver mapas de calor de las áreas en la página que atraen la mayor atención.

Cuando hayas aprendido cómo las personas usan el sitio, entonces ponte a cambiar las cosas. Las aplicaciones más efectivas son aquellas que hacen que la experiencia del usuario sea una prioridad máxima.

 

 

  • Mapas del sitio o aplicación

Una vez que hayas estudiado el flujo de usuarios que esperas, es esencial realizar una planificación exhaustiva. Comienza por construir un mapa del sitio para las páginas que deseas crear. Un mapa del sitio es una jerarquía claramente organizada de todas las páginas, subpáginas y apartados del sitio o aplicación.

La creación de un mapa hace que sea más fácil imaginar cómo un usuario podrá ir desde el punto A al punto B, y cuántos clics realizará. En lugar de implementar cambios estructurales una vez que se construye el sitio, un mapa ayuda a tu equipo a eliminar las malas ideas rápidamente y, al mismo tiempo, te muestra toda la estructura que eventualmente necesitarás para diseñar y escribir contenido. Es una buena herramienta para agregar eficiencia al proceso de creación de sitios web.

 

  • Prototipos y wireframes

Los elementos visuales de cada página son tan importantes como la estructura del sitio, así que invierte tiempo en crear wireframes, que son guías visuales que representan el marco esquelético y brindan una vista previa de la apariencia del proyecto. Con un marco visual, puedes eliminar los problemas de usabilidad antes de que cualquier página llegue a la pantalla. Esto puede ahorrarte tiempo de desarrollo para realizar los ajustes necesarios en el futuro.

Una herramienta que ayuda es Adobe XD (no, no me pagan por anunciarlo, lástima). Seguro que hay muchas otras, pero por experiencia te diré que solo necesitarás un lienzo, un marcador y muchas ideas de diseño y contenido para comenzar. Una vez que el diseño se ve bien en tinta, te montará un enlace con un prototipo interactivo que muestre cómo se verá en vivo. La mayoría de las veces, lo que faltará será que el equipo haga pocos ajustes durante el siguiente paso creativo.

 

  • Patrones de diseño

Los patrones brindan consistencia y una forma de encontrar el diseño más efectivo para el trabajo. Con los patrones de diseño de la interfaz de usuario, por ejemplo, seleccionar los elementos correctos de la interfaz de usuario (por ejemplo, pestañas de módulos, rutas de exploración, presentaciones de diapositivas) para ciertas tareas basadas en su efectividad conduce a experiencias mejores y más familiares.

Una herramienta que te brindará una valiosa ayuda para mantener la consistencia de la interfaz de usuario, son los mosaicos de estilo. Los mosaicos de estilo son entregables que muestran el diseño de todos los módulos en un sitio, hasta los tamaños y colores de fuente. Este documento incluye cosas como botones, diseño de tipos e incluso interactividad. Los mosaicos de estilo aseguran que el usuario tendrá una experiencia fluida en todo el sitio para poder reconocer mejor cómo interactuar con los elementos del sitio.

 

  • Seguir unas guias de estilo

La consistencia es fundamental para diseñar una experiencia de usuario buenísima a través de una marca. Las guías de estilo brindan a los escritores y diseñadores un marco en el cual trabajar al crear contenido y desarrollar un diseño, y también aseguran que la marca y los elementos de diseño se alineen con los objetivos del propietario.

Haz que esa guía de estilo sea fácilmente accesible para cualquier persona que trabaje en un nuevo sitio web. Un elemento en una página que no coincide con la imagen o la voz de tu marca puede ser una espina clavada en todo el trabajo realizado. Si no tienes una guía de estilo, considera en crear una, en serio. ¡Te sorprenderás de lo útil que será, incluso más allá del diseño de UX de la aplicación!

 

 

Zzz… Vale, y después de este rollo, ¿cómo me va a ayudar a cumplir mis objetivos?

 

  • Te ayuda a averiguar cómo es tu audiencia

Una vez que descubras tus metas, puedes enfocarte en tu audiencia. La mejor manera de hacer esto es investigar tu base de clientes y crear personas.

Un sitio web puede tener múltiples personas y cada persona puede tener diferentes antecedentes, personalidades, necesidades y objetivos finales.

Éstos son el público objetivo, y hay que descubrir lo que necesita para lograr la mejor experiencia posible que les permita cumplir sus objetivos, comprometerse con el sitio y, finalmente, convertirse en un cliente potencial. El verdadero éxito de tu aplicación se produce cuando descubres cómo hacer felices a los usuarios y a las partes interesadas.

 

  • Te ayuda con la organización y la creación de contenido

Conocer tus objetivos y tu público objetivo te ayudará a imaginarte qué será exactamente lo que las personas están buscando cuando te visitan. Esta información influirá tanto en el mapa del sitio como en la estructura de la página.

Debes de saber lo que la gente está buscando, no puedes simplemente dejar un diseño curioso y bonito y ya está, sitio hecho. La verdadera razón por la que las personas van a visitar tu página web es porqué están buscando cierto tipo de información que les puedes dar, y tiene que ser de interés para ellos.

Por eso el contenido es tan importante. Si tu audiencia no obtiene algo útil de tu sitio, lo encontrarán en otra parte. Que crudo, pero que simple. Que esta afirmación se te quede.

El contenido de tu sitio web implica esencialmente dos cosas: primero está la voz y segundo el tono. Esto es esencialmente cómo vas a hablar con la gente. ¿Eres divertido y juguetón, inteligente e informativo, charlatán o directo al grano? Se trata de la marca de tu cliente y cómo la gente ve la empresa. El contenido también implica lo que dices. Esto puede parecer fácil, pero es arte en estado puro. Las personas tienen períodos de atención cada vez más cortos, y más y más opciones. Tienes que ser único y hacerte oír.

Con esto en mente, debes involucrar a las personas rápidamente y darles la información que necesitan sin dudarlo. Esto es más que solo el texto del párrafo. Se trata de titulares, botones, iconos e incluso metadatos intuitivos (las cosas ocultas en el código que ponemos los frikis de esto de la informática).

 

  • Te ayuda a ahorrar dinero

Toda esta planificación que estás realizando te aseguro que no quedará en saco roto. Si se hace bien, tu sitio puede tener un impacto duradero. Tomando decisiones inteligentes basadas en la investigación realizada en la aplicación que estás realizando, harás que esta tenga una “vida” más larga: más que si dejaras caer algo y lo presentaras.

Si deseas realizar un diseño iterativo (repetitivo), puedes aprender de tus decisiones anteriores y del rendimiento del sitio, realizar mejoras continuas, en lugar de centrarte en un rediseño tras otro que solo te hará gastar más dinero.

 

  • Y cómo no … ayuda a ganar dinero

No dejemos de lado lo obvio, queremos que se gane dinero con el producto del cliente y que esté contento, si no nos esforzamos tanto.  Al realizar una investigación y planificación, puedes crear un sitio web que funcione tanto para sus potenciales clientes como para la organización.

Si conoces a tu cliente, necesitas llegar al lugar correcto. Cuando esto suceda, obtendrás un gran retorno de todo el tiempo y el esfuerzo invertidos en la construcción de la aplicación.

 

 

Y para despedirme de vosotros, una pequeña conclusión

Como ya he dicho antes de tanto parrafazo, UX es un arte en sí mismo. Inicialmente no podrás predecir a ciencia cierta cómo será percibida la aplicación o página web que desarrolles. Lo que si puedes hacer es utilizar herramientas para tomar las buenas decisiones durante el proceso de diseño. No pares de hacer / rehacer / deshacer / destruir / maldecir… wireframes, mock ups, prototipos y testearlos.

No hay nada más importante que dar con la tecla que haga que el usuario encuentre ideal el hecho de utilizar la aplicación, y que la encuentre cómoda, fácil y amigable.

Si deseas garantizar una gran UX, debes de aprender a cumplir los deseos de tus usuarios, con el mínimo esfuerzo.

 

 

¿Cómo diseñar una tienda online?

Posted on by Nacho Olcina

Hoy nos centramos en el diseño en tiendas online, en los puntos más importantes a tener en cuenta para que nuestra tienda online sea un éxito y consiga ventas, siempre desde el punto de vista del diseño y la usabilidad.

Un estudio de la Universidad Webster de Viena demostró que el diseño de una tienda online puede “influir en gran medida en la satisfacción del cliente a la hora de comprar”.

La primera impresión cuenta mucho, por lo que un diseño adecuado es clave para que el usuario se quede en nuestra tienda online y navegue por ella de forma agradable hasta dar con lo que está buscando, y termine comprando.

Pero hay algunos aspectos a tener en cuenta antes de ponernos a crear el diseño:

¿Hay una empresa o marca ya creada?

Debemos respetar la correcta aplicación de dicha marca, siguiendo las pautas de la identidad corporativa ya establecidos. Colores, adaptación correcta del logotipo, tipografías acorde al diseño de la marca, etc. Esto debemos tenerlo en cuenta durante todo el proceso de diseño.

¿Qué tipo de producto se va a vender?

El diseño se va a ver influenciado dependiendo del producto que se vaya a comercializar, ya que no es lo mismo vender zapatillas deportivas que artículos para bebés, el cliente final es diferente. Desde los colores, la tipografía, imágenes, y en general todos los elementos, se van a ver afectados y deben tener cierta coherencia con el producto que se está vendiendo.

Si vendemos accesorios de montaña debemos crear un ambiente acorde a éste, atractivo, dinámico. Si es de relojes, uno más de lujo o distinción.

¿Cuál es nuestro público objetivo?

Debemos tener presente tipo de cliente potencial y el target al que nos estamos “enfrentando”, ya que debemos pensar como lo haría este usuario potencial, que es al final del cual va a depender que vendamos, y que la tienda sea un éxito o no.

Una vez definidos estos dos puntos pasamos a la parte de diseño.

 

Algunos consejos para el diseño de tiendas online:

  • Hacer un estudio de mercado, ver que está haciendo la competencia, y también otros sectores, ya que siempre nos va a dar más perspectiva general a la hora de diseñar la tienda, y poder coger posibles ideas, e incluso mejorarlas, para destacar frente a ellos.
  • Que sea sencillo, menos es más. Eliminar elementos recargados o que puedan distraer al cliente. Todo lo que no sea necesario es recomendable eliminarlo directamente.
  • No ser extremadamente creativos en cuanto a la funcionalidad, ya que puede generar confusiones con el cliente potencial a la hora de querer comprar el producto si el proceso es muy novedoso. Esto lo dejamos más para webs corporativas y más creativas. Aquí el usuario medio ya está ciertamente acostumbrados a las tiendas online, por lo que la usabilidad es clave, y no debemos inventar nada raro para liar al cliente, que sea todo fácil e intuitivo, y siguiendo un poco las pautas estándar establecidas: área privada, carrito, procesos de pago, etc.
  • Evitar grandes sliders o banners con animaciones, que puedan abrumar o marear un poco al usuario. Está demostrado que poca gente se espera a la segunda imagen del slider o clica sobre estos. Suelen estar colocados en zonas de mucha importancia, por lo que aquí debe ir información realmente relevante e importante para el usuario, banners directamente de las categorías, o directamente productos destacados, por ejemplo. Además suelen pesar bastante y esto es negativo para la carga del sitio, por lo tanto para el posicionamiento en buscadores.
  • El material gráfico debe ser de buena calidad, tanto el de los banners, como el de los productos. Cuanta mayor calidad sea estas fotografías o renders mayor calidad y confianza le transmitiremos al usuario, lo cual es clave para la conversión. Intentar elegir la de mayor calidad o donde mejor se vea el producto como imagen principal destacada. Aquí debemos tirar de fotógrafos especializados, o en su defecto (por falta de presupuesto) de algún tipo de caja de luz donde podamos realizar fotografías con cierta calidad.Os dejamos un enlace a uno de nuestros artículos sobre cajas de luces para fotografías de producto > Cómo elegir y utilizar una caja de luz para fotografía de producto
  • Debemos transmitir seguridad y confianza, por lo que debemos poner bien a la vista la información realmente importante para el cliente, como pueden ser: formas de pago, gastos de envío, tiempo de envío, políticas de datos y devoluciones, atención al cliente postventa, contacto, etc, que es una de las cosas que el cliente más busca a la hora de decantarse por comprar un producto, por lo que debemos facilitárselo de la mejor manera, siendo visible en todas nuestras páginas.
    Es importante si el cliente va a comprar un producto que esté a la vista los gastos de envío, ya que suele ser determinante a la hora de comprar un producto. Si no es fijo colocar un enlace donde se explique el coste mediante tablas o tarifas.
  • Diseño actual y moderno, siguiendo las tendencias del momento, ya que el diseño en las tiendas online es algo efímero, y en cuestión de 2 o 3 años se verá desfasado. Cuanto más al día esté mejor para evitar tener una web aburrida y desfasada.
  • Diseño responsive, siempre bien optimizada para los diferentes dispositivos y resoluciones, en especial para móviles. Revisar tanto el aspecto visual como el aspecto funcional, que todos los procesos funcionen bien, comprobando que el proceso de pago funciona correctamente. Cada vez más se realizan compras desde el móvil, por lo que es importantísimo este aspecto.

 

Interfaz intuitiva / usabilidad

La usabilidad cobra mucha importancia en las tiendas online, el “No me hagas pensar” de Steve Krug resume a la perfección este punto. El usuario no debe pensar para navegar o adquirir un producto, si es así podemos perder la venta fácilmente.

Debemos ponernos siempre en la piel del usuario, desde un perfil poco tecnológico. Hacer pruebas entre varias personas a modo test presencial, nos puede hacer una idea de posibles problemas o errores que tal vez damos por hecho que son correctos, pero una vez testado descubrimos que no lo son tanto, y estar a tiempo de corregirlo y optimizarlo.

Si los usuarios se sienten cómodos y la experiencia de compra es agradable en tu tienda seguramente acaben comprando.

 

Algunos módulos y elementos imprescindibles en una tienda online:

  • Buscador:
    Para poder buscar y filtrar entre los diferentes productos.
  • Filtro:
    Si hay muchísimos producto, filtrar por precio, talla, color, etc. puede ser de gran ayuda dentro de una categoría.
  • Los más vendidos / recomendados / destacados / novedades:
    Para destacar productos en nuestro sitio.
  • Opiniones:
    La opinión de otros clientes puede ser un factor clave para la venta. Un ejemplo claro es el sistema de opiniones de Amazon, donde los clientes valoran e incluso interactúan entre ellos.
  • Comparador:
    Si los productos son técnicos o similares puede ser muy útil.
  • Descuento por suscripción (para suscripción a newsletter):
    Es una manera de conseguir una lista de suscriptores, desde la cual se enviarán ofertas y novedades, que junto con un blog y contenido en redes sociales, completarán un buen plan de marketing.
  • Productos relacionados:
    Podemos mostrarlos en la propia ficha de producto, enfocados a quien ha escogido un producto o está valorando comprarlo, de alguna forma mostrarle otros productos que estén relacionado o sean complementarios.
  • Fidelizar clientes:
    Mediante descuento, cupones y ofertas podemos incentivar a cliente para volver a comprar en nuestra tienda, y así conseguir fidelizar clientes. Algún descuento para próximas compras, o descuentos al llegar a cierto importe global pueden ser de mucha utilidad.
  • Formularios de contacto / chat:
    Es importante facilitar el contacto en todo momento con el cliente, ya sea una duda, consulta o servicio postventa. Para ello es recomendable poner a la vista, tanto un formulario, como un teléfono de contacto, o whatsapp, o incluso, si cabe la posibilidad, un chat en vivo para contestar al momento, siempre y cuando pueda haber una persona encargada de atender este chat.

 

Conclusión

Por todo lo analizado, un diseño profesional es imprescindible para éxito de nuestra tienda online. Para ello, lo mejor es ponernos en manos de profesionales, y desde acceso ofrecemos nuestros conocimientos y servicios para realizar tiendas online a medida. ¿Hablamos?

 

Quizás te interese leer también:

  1. Tendencias de diseño web para 2018

¿Qué es el Diseño Web y por qué es necesario?

Posted on by Nacho Olcina

El diseño web es mucho más que darle un aspecto bonito a una web. Se encarga de la planificación y la distribución de diferentes elementos, basándose en unos principios básicos, donde el objetivo es conseguir una buena experiencia por parte del usuario, que es el verdadero protagonista, no siéndolo el propietario.

Debemos centrarnos en esto, en darle el total protagonismo a los usuarios, ya que serán los auténticos jueces. Una web sencilla, fácil de usar, intuitiva, atractiva y agradable será clave para el éxito de la misma.

El primer paso en el diseño y desarrollo de una web es tener claro el propósito u objetivo de la misma, debe estar bien definido. Debemos saber y tener claro cuál es el fin de nuestra página web: venta de un producto, dar visibilidad o reforzar a una marca, realizar presupuesto de un servicio, darse de alta en newsletter y conseguir contactos, etc. Tras esto, se debe elaborar la correcta comunicación para conseguir ese objetivo, y ahí es donde entra el diseño web.

Empecemos por el principio.

¿Qué es el diseño web? Principios fundamentales

El diseño web viene estrechamente relacionado y derivado del diseño gráfico. A finales de los 90 habían muchos profesionales del diseño gráfico pero no del diseño web, por lo que es una profesión que se ha ido desarrollando “sobre la marcha” y se ha ido definiendo y puliendo a base de experiencia.

El campo del diseño web se resume en tres áreas: creatividad y gusto estético, conocimientos técnicos, y constante actualización.

El punto clave para que todo esto funcione es entender cómo los usuarios interactúan en los sitios web, conocer los patrones básicos de comportamiento mientras navegan, y sobre esto establecer una reglas básicas de comportamiento y usabilidad. Esto es algo que también está en continuo movimiento, por lo que es importante estar siempre actualizado.

Diferencias entre diseño web y desarrollo web.

Cabe mencionar y saber diferenciar entre la fase de diseño web y la fase de desarrollo web, aunque, bien es cierto, que forman parte del mismo pack, ya que el término Diseño Web abarca diseño y desarrollo.

El diseño web se encarga más de la parte visual, la navegación y demás elementos que hacen que la experiencia de usuario sea agradable, y que cumpla el fin con el que se creó la web.

Por otro lado el desarrollo web se encarga de la parte interna, la que no se ve, la que hace posible que todo funcione. Es el encargado de que las acciones que plantea el diseño web se puedan llevar a cabo técnicamente. Engloba sistema de gestión de contenidos, funciones de registro, ecommerce, y cualquier aplicación de base de datos. Debe tener en cuenta aspecto esenciales y de vital importancia, que son de un carácter algo más técnico, como son los tiempos de carga por ejemplo, ya que suele penalizar la conversión, y por ende, el posicionamiento, ya que los buscadores se ponen en la piel de los usuarios, y si una web tarda mucho en cargar suele ser penalizada.

El perfecto equilibrio entre estos dos subcampos es imprescindible para el éxito del sitio web.

 

Elementos que forman parte del diseño web

elementos-diseno-web

Tipografías

Una tipografía adecuada es fundamental para un correcto diseño web.
Tener en cuenta la jerarquía tipográfica, el tamaño de texto adecuado, no demasiado pequeño, el interlineado y la alineación correcta, elección de una tipografía legible y acorde con el proyecto, y no utilizar demasiadas tipografías en un mismo proyecto, son algunas pinceladas clave para la correcta utilización de la tipografía.

Colores

El color tiene mucho poder, influencia desde sentimientos hasta acciones de los usuarios. Puede ayudar a fortalecer tu marca, conseguir ventas y ser determinante a la hora de tomar decisiones. Según estudios, las personas se deciden por un producto en menos de 90 segundos, y el 90% de esa decisión está basada en el color.

Imágenes

Las imágenes tienen mucho poder de persuasión y seducción, por lo que es una forma muy eficaz de centrar y captar la atención del usuario. El dicho “vale más una imagen que mil palabras” se confirma, ya que el usuario no quiere grandes parrafadas de texto, por lo que debemos aprovechar el potencial informativo de la imágenes. Cabe destacar que el uso y elección de las imágenes adecuadas es importantísimo, no vale todo en este campo.

Os dejamos un artículo sobre Los mejores bancos de imágenes gratuitos y de pago

Formas

Todo lo que nos rodea está realizado con formas, por lo que es un elemento visual imprescindible en el diseño web. Puede servir como método para agregar interés al diseño, con la forma como elemento decorativo, por ejemplo. Desde separar secciones hasta darle cierto atractivo a listados, la formas deben estar presentes como un recurso casi natural.

 

Algunos aspectos a tener en cuenta en el diseño web

 

Tamaños

Jugar con los tamaños de diferentes elementos sirve para centrar la atención hacia donde nosotros queramos. El tamaño es la forma más rápida y efectiva de captar la atención del usuario hacia un determinado elemento o sección de la web. Los elementos más grandes llaman más la atención, mientras los más pequeño suelen ser menos relevantes.

Espacios

Los espacios en blanco son elementos importantes para organizar contenidos y asignarles importancia. Un espacio en blanco no es un espacio vacío. Da sensación de orden y organización, es importante dar esos espacio de respiro, siempre bien realizados. Lo usuarios escanean la página y la dividen el área de contenido en secciones de información más digeribles, por lo que estos espacios son de gran ayuda.

Contrastes

El contraste es otro elemento que sirve para destacar zonas o elementos de nuestra web. Pueden ser contrastes de colores, tamaños, tipográficos, etc. Cuanto más drástico es el contraste más nos llamará la atención.

Interacciones

Se centra en la relación entre el usuario y la web. Lo podríamos definir como la conversación entre la web y el usuario: efectos de transición, transformaciones de botones, respuesta del formulario de contacto, etc. Esos detalles que hagan que una conversación sea fluida e interesante, o costosa e incómoda. Hay que buscar siempre que sea sencilla y clara.

Usabilidad y navegación: Principios básicos UX / UI

 

como-disenar-web-usable

Diseño de Interfaz (UI – User Interface)

Se encarga de la selección y distribución de los diferentes elementos que componen la interfaz (ej. textos y campos de formulario). Es la parte más visual y gráfica del proceso, donde entra directamente el apartado gráfico. Lo que el usuario ve al entrar al sitio web.

Experiencia de Usuario (UX – User Experience)

Se encarga de estudiar y mejorar la experiencia del usuario, por lo que se podría decir que UI es parte del UX, es una de tantos campos que abarca este estudio y desarrollo de experiencias. Otros campos que abarca son: velocidad y tiempos de carga, procesos de compra, programación interna de la web, atención al cliente, etc.

Resumiendo, la relación y la experiencia entre la web y el usuario debe ser buena, por lo que debemos tener claro todos estos puntos.

 

Claves para un buen diseño web y sus beneficios

clave-buen-diseno-web

  • Tener en cuenta la navegación por parte de los usuarios, y trabajar este aspecto para que sea lo más amigable para éstos, utilizando, por ejemplo, mapas de calor.
  • Que los usuarios no tengan que pensar, una página web debe ser obvia y explicarse por sí misma. Reducir la carga cognitiva hace que el diseño de una web sea más eficaz.
  • No hacer esperar a los usuarios. Suelen ser impacientes, por lo que todo debe ser fluido e intuitivo, sin que deban realizar pasos innecesarios, ni esperar tiempos largos de carga para realizar algún paso o proceso. Todo debe estar a mano y funcionar correctamente.
  • Jugar con los diferentes elementos para centrar la atención del usuario en lo que queremos. Estos es fundamental para conseguir los objetivos y propósitos de nuestra web. Una buena conversión será el que nos diga si se ha realizado un buen trabajo de diseño web o no.
  • Disponer los diferentes espacios o secciones de una forma clara, para que el usuario pueda fácilmente reconocer y establecer una estructura general de la web y de la información que hay en ella.
  • Utilizar textos claros, breves y concisos, es clave para transmitir el usuario un mensaje directo. El usuario no quiere ver grande y largos texto muy técnicos, si no textos amigables, breves y objetivos.
  • Apostar por la simplicidad, es algo básico. No hacer webs demasiado recargadas a nivel diseño, ya que el usuario al final quiere obtener información. Es importante conseguir un equilibro entre contenido y diseño.
  • Sin miedo a los espacios en blanco, ya que reduce la carga cognitiva, de forma indirecta. Estructuras limpias y con espacios serán más fáciles de asimilar para el usuarios, por lo que captará mejor la información de la web.

Os dejamos un artículo sobre Tendencias de diseño web para 2018

No podemos olvidar un diseño web amigable y adaptativo: responsive web design

 

Cada vez más tiene más peso el diseño web responsive, el ejemplo es un titular que veíamos hace poco: “si no tienes una web responsive Google te penalizará”.

La tendencia actual nos dice que móviles y tablets se están convirtiendo en el medio preferido por los usuarios para navegar y realizar sus comprar por internet.

Lo que se quiere conseguir con todo esto es mejorar la experiencia del usuario en los nuevos dispositivos.

 

En resumen

Hay que estudiar bien los diferentes aspectos que forman el diseño web. Es un sector relativamente nuevo, pero en pleno auge y sin vistas a que deje de crecer, ya que el diseño aplicado a tecnologías y aplicaciones web solo acaba de empezar.

Apostar por diseño web te asegura un estudio personalizado de tu proyecto, y utilizar las herramientas que más se ajusten a él. Esa personalización conlleva distinguirnos de nuestros competidores, y ajustarnos más a los objetivos y propósitos de nuestra web.

Desde acceseo ponemos a vuestra disposición un equipo especializado para asesorar y estudiar tus proyectos, y conseguir llevarlos a cabo de la forma más adecuada.

 

Tendencias de diseño web para 2018

Posted on by Nacho Olcina

Vamos a resumir y destacar los puntos más importantes de tendencias web para este año 2018.
¡No te lo pierdas para tener una web a la última!

 

Diseños Personalizados

Cada vez las webs se parecen más, ya que siguen unos patrones y unas tendencias generalmente similares, por lo que la diferenciación y la personalicación es uno de los retos para 2018. Ilustraciones, fotografías propias, y un estudio y desarrollo por parte de un equipo especialista y dedicado a ello es fundamental.

En un mundo plagado de plantillas, donde muchas páginas se parecen entre sí se debe apostar por un diseño personalizado, donde cada elemento esté estudiado exclusivamente para el proyecto en cuestión. Aunque se utilicen elementos comunes, la personalización de éstos es fundamental para darle personalidad propia y carácter a nuestra web, y poder así diferenciarnos de nuestra competencia.

 

Estilo Minimal

Fuente: http://titusklein.com/

Diseño sencillo y limpio, es algo que vemos día a día, cada vez se opta más por este tipo de estilo para el diseño web, en cada vez más campos y sectores. Se prioriza la teoría de menos es más.

Espacios y fondos claros, donde los protagonistas son los propios textos, la tipografía como tal, y algún elemento más como algún icono, fotografía, y botones también de estética minimalista y sencilla.

Este estilo se ve reflejado no solo en el diseño de la web en sí, también en diferentes elementos como logotipos o imagen de marcas que aparecen en estas webs.

Este tipo de diseño poco recargado favorece considerablemente a los tiempos de carga de una web, y a la hora de adaptar las webs a mobile y tablets. Esto repercute positivamente en el posicionamiento en buscadores, algo imprescindible para nuestras webs. ¿Qué más se puede pedir?

 

Diseño Modular, estilo Masonry

Fuente: http://veerle.duoh.com/inspiration

Basado en el estilo de Pinterest, se basa en la disposición de modulos o tarjetas (estilo estructura Masonry). Muy práctica para mostrar información de una forma heterogénea, y muy útil cuando cada módulo tiene un tamaño o está formado por diferentes elementos. Este tipo de disposición o maquetación es muy favorable respecto a la adaptación a diferentes dispositivos.

 

Colores más fuertes y brillantes

Fuente: http://elje-group.com/

Toman fuerza los colores brillantes, fuertes y llamativos. ¡Estamos en el momento de los colores vivos!

Parece que las empresas abandonan su gamas de colores más apagadas y aburridas para dar un salto de color. Optan por por una gama mucho más fuerte y vibrante, y generan así una forma fácil personalidad propia, muy favorable para ser reconocidos a simple vista. ¿Quién no reconoce Instagram solo por su colorida gama?

Un cambio sencillo en el diseño puede suponer un cambio muy grande a nivel visual, y generar una gran repercusión y ser un gran impulso. Este cambio se ve reflejado en las webs sin duda, y en todos los elementos relacionados. Son un recurso muy a tener en cuenta cara este 2018 y ver cómo va evolucionando.

 

Degradados y Duotonos

Fuente: !/

Lo degradados, o gradientes,  parece que vienen con fuerza, tras desaparecer a finales de los 2000, parece que en 2018 vuelven, ya vimos algo el año pasado. Parece que son una evolución natural del FlatDesign, (diseño plano) conocido también como Flat 2.0 o diseño semi-flat.

Su reaparición en iOS y secundado por algunas de las grandes empresas como Instagram han consolidado su popularidad. Dan cierta sensación vibrante y le dan mucha vida a las webs.

Fuente: https://www.internetum.com/en/

Por su lado los duotonos son la reproducción de una imagen donde se destacan los medios tonos y la iluminación haciendo uso de dos colores. Tradicionalmente era un proceso de impresión, donde se utilizaban planchas para la aplicación del color.

Se utilizan para potenciar las imágenes que van de la mano del diseño minimalista, dando cierta originalidad en las imágenes principales de una web, un recurso que los diseñadores van a utilizar este 2018 sin duda. También es una buena solución para maximizar la legibilidad de textos sobre imágenes

 

Hero / Fullscreen, dejando un poco de lado el famoso slider

Fuente: airewestperth.com.au

Esta tendencia viene ya arrastrada del 2017, donde las imágenes fullscreen siguen teniendo gran protagonismo, y parece que reforzando su peso respecto a otros elementos. Son un gran atractivo para la primera impresión de nuestra web, la portada, y esto parece estar dejando de lado los famosos sliders, queridos por mucho y odiados por otros.

Son una herramienta potente, y reduce tiempos de carga respecto al slider, y lo hace más adaptable aun al Responsive.

 

Tipografía Handmade, y mucha negrita

Fuente: https://weareisland.com/

La tipografía estilo Handmade sigue teniendo fuerza en las tendencias web 2018. Confieren personalidad propia y le dan un mucho carácter a las webs. Ese estilo de “hecho a mano” sigue estando de moda. No hay que abusar de ellas, y se recomienda utilizarlas en titulares o partes principales de la web, como la portada.

Fuente: http://www.monsieurcaillou.com/#!/

Para paliar un poco la saturación de contenido vamos a ver mucho el tema de las tipografía negritas. Fuentes grandes y atrevidas para llamar la atención de los visitantes. Se opta por tanto por el texto como elemento protagonista en algunas webs.

 

Responsive vs. Diseño exclusivo para móvil

Fuente: http://www.panicstudio.tv/en/

Adaptarse o morir, esa es la tónica, ya que las visitas a través de dispositivos móviles están creciendo exponencialmente, por lo que nuestra web debe estar 100% adaptada a este tipo de dispositivos.

Pero en 2018 parece que esto va un poco más allá, muchos diseñadores ya plantean no solo la adaptación de la web al móvil, si no un diseño exclusivo para dispositivos, o directamente una Progressive Web App, sobre la que os comentamos a continuación.

 

Carga progresiva / Progressive Web Apps

Esto es una parte más técnica de la web, de la parte más de maquetación y desarrollo, ya que la optimización de las webs es otro de los retos para este 2018, y algo que se va a tener muy en cuenta. El tiempo de carga afecta directamente al abandono por parte del usuario, por lo que el sistema de carga progresiva es un punto muy a tener en cuenta por desarrolladores.

Pero la autentica revolución para este 2018 son las Progressive Web Apps, siendo  el futuro de las web mobile. Una mezcla entre app móvil y app web, caracterizan por permitir almacenamiento local, carga sin conexión a Internet y en un tiempo incluso superior al de una App nativa. También admiten notificaciones push relevantes, es totalmente adaptable con experiencia de pantalla completa, icono de inicio en móvil, y mucho más. ¡Estaremos muy atentos a su evolución!

 

Animaciones, y microinteracciones

Fuente: https://www.apple.com/apple-watch-series-3/

Necesarias para crear un vínculo entre los usuarios y la web, hacerlos formar parte de ella. Dan mucho dinamismo al diseño, y se suelen aplicar a botones, al hacer scroll, y acciones que dependen del usuario.

Si se utilizan de una forma adecuada con muy recomendables, para darle vida a nuestra web, que no sea tan estática. Hay que tener cuidado de no cargar la web demasiado, usarlas de forma adecuada.

Los hovers deben ser tratados también con esta filosofía, ya que debe haber siempre una respuesta visual y comunicativa con el usuario cuando un elemento tenga algún tipo de interacción, ya sea una imagen o un botón, que tenga enlace o algún tipo de funcionamiento. Desde nuestro punto de vista es algo muy importante y que se tiene que tratar con cierto mimo.

 

Botones Ghost

Fuente: https://couple.me/alice

Aunque no son nuevos, se mantienen dentro de las tendencias como un recurso a tener en cuenta. Son botones de estilo minimalista, que se adaptan muy bien con el tema de las imágenes fullscreen (Hero), o a las webs de estilo minimalista donde se usan fondos y espacios claros. Transmiten ligereza y elegancia, y sirven para definir diferentes CTA en la página. Se caracterizan por tener el borde a color, pero sin rellen, de ahí lo de ghost o fantasma, ya que son de naturaleza transparente. Con un simple relleno en hover generamos una interacción atractiva y agradable para el visitante. Debe saber utilizarse, ya que no es recomendable para todos los casos este estilo.

 

SVG al poder

Fuente: https://material.io/icons/

Los JPGs y PNGs se están quedando desfasados, como elementos gráficos, y dan paso a los gráficos vectoriales SVG. Son archivos beneficiosos, ya que su peso es reducido a la hora de ser cargados, y se pueden reescalar sin perder calidad, y en cualquier resolución lo vamos a ver a la perfección, más aun en la era de las resolución 2k, 4k, UHD, etc. Si pueden ser propios siempre le daremos una personalidad y un carácter más propio, pero también hay otros recursos, como Fontawesome, desde donde podemos utilizar iconos para nuestras web, siendo tratados como fuentes.

Son escalables, y personalizables mediantes css, tanto en color como en tamaño, incluso se pueden animar. En resumen, más que una tendencia son casi una obligación para mejorar la optimización de una web. Cabe tener muy en cuenta el SVG para nuestros futuros proyectos, e implementarlos de forma correcta.

 

EXTRA

Color 2018: Pantone Ultra Violet

Fuente: https://www.pantone.com/color-of-the-year-2018

Pantone, la autoridad global indiscutible del color ha elegido el Pantone 18-3838 Ultra Violet como el color del año 2018.

“Un tono violeta dramáticamente provocativo y pensativo, PANTONE 18-3838 Ultra Violet comunica originalidad, ingenio y pensamiento visionario que nos señala hacia el futuro.”
Así lo definen ellos mismos.

Es elegido por los directivos de la misma empresa, junto con otros 40 expertos de todo el mundo, basados en todo tipo de factores, desde económicos hasta sociales, canciones, películas, etc.

Lo remarcamos como color tendencia, no quiere decir que lo tengamos que usar, pero no esta de más conocer las tendencias y colores de moda.

 

Conclusión

Aquí resumimos puntos clave de las tendencias web para este año 2018 que creemos van a ser más relevantes a nivel diseño web. Hay muchos más factores y elementos que no incluimos, ya que podría ser infinito el artículo, pero hemos destacado lo más importantes, desde nuestro punto de vista y experiencia.

Cabe tenerlos en cuenta para futuros proyectos, y en cada uno de ellos aplicar estos recursos de forma siempre debida y adecuada, y dependiendo del proyecto requeriremos de unos u otros, hay que saber bien definir cuándo usar unos elementos o recursos u otros.

Desde acceso ponemos a vuestra disposición un departamento de diseño y asesoramiento para cualquier consulta y propuesta. ¿Hablamos?

Quizás te interese leer también:

  1. ¿Cómo diseñar una tienda online?

Cómo diseñar Webs listas para SEO y para posicionar en Google

Posted on by Eva Guerrero

Si te dedicas al diseño web, seguro que tienes clientes que te han pedido que su negocio aparezca en los primeros puestos de Google y por tanto te han pedido una web posicionable en google. No sería de extrañar que hayas hecho ya tus pinitos en esto del SEO – o tengas la intención de hacerlo – y así ofrecer tus webs como “sites diseñados bajo las demandas de Google”, listos para que empiecen a escalar puestos en el buscador. Puede que de lo contrario te hayas enfrentado a un SEO listillo que quiere llenar tu diseño de texto cambiando por completo toda la estructura que tanto te ha costado crear, ¿verdad?

Si cumples alguna de las premisas anteriores, este post te interesa. Vamos a intentar plasmar de forma sencilla qué necesitará un buen diseño web para ir más allá y llegar hasta los primeros puestos de Google.

El objetivo principal de la web de cualquier empresa es vender u obtener visibilidad por lo tanto, si consigues ofrecer diseños que faciliten esta tarea, si consigues que los profesionales del SEO te recomienden a ti como diseñador y no a otro, conseguirás ganarte un puesto muy importante dentro del sector del diseño y te posicionarás como el gran experto que eres. Empecemos…

#1. ¿CMS o diseño a medida?

Como profesional del SEO te diré que hacer un diseño a medida no es para nada una mala idea siempre que se haga en PHP (puede ser obvio pero muchas veces me he encontrado webs diseñadas directamente en html cuyos archivos duplicaban header y footer a diestro y siniestro) y que tenga las funcionalidades necesarias para que no sea una web estática, es decir, debe poder incluir líneas de código, texto, imágenes, editar atributos de los diferentes elementos incluidos, etc. y además, se pueda actualizar y ser una web “viva”.

En definitiva debe ser una web que permita implementar estrategias de marketing digital que van más allá del posicionamiento:

  • Estrategias de email marketing: debe poder captar suscriptores y enlazarlos a una herramienta adecuada;
  • Ofertas puntuales o descuentos;
  • Estrategias de branding;
  • Etc.

Si eres de los que cree que los profesionales de mi campo somos fieles incondicionales de los gestores de contenidos como wordpress o prestashop, estás muy equivocado. Los seguimos por una serie de beneficios que nos brindan:

wordpress-vs-prestashop

Sobre WordPress:

Beneficios de usar WordPress:

  1. Su código es sencillo, lógico y está ordenado
  2. Se gestiona de forma muy sencilla y rápida
  3. Hay multitud de tutoriales que muestran en internet cómo funciona o qué hacer al encontrarte un error
  4. Tienen millones de plugings que consiguen hacer cualquier «marcianada» que se te ocurra (y la mayoría son gratuitos)
  5. Los desarrolladores han tenido en cuenta que el contenido es el rey y no encontramos dificultad a la hora de incluir un texto en cualquier parte
  6. Tienen en cuenta las distintas estrategias de marketing digital que las empresas pueden poner en marcha y facilitan la gestión de todas ellas, la conexión con otras plataformas, etc.

Inconvenientes de WordPress:

  1. El único inconveniente que encuentro es que son susceptibles de sufrir ataques siendo muy necesario disponer de un servicio de mantenimiento web adecuado que mantenga todo actualizado (me recuerda a Windows y sus continuas actualizaciones, lo bueno es que Wp es gratis…)
  2. Encima, las actualizaciones siempre provocan incompatibilidades entre los plugings y siempre se rompe algo

Sobre Prestashop:

Beneficios de usar Prestashop:

  1. Al igual que WordPress hay muchas funcionalidades que vienen incluidas de forma gratuita
  2. Es el gestor ideal para tiendas online medianas pues la gestión de stock de grandes almacenes es bastante eficiente y fácil
  3. En el caso de temas básicos de SEO vienen incluidos en la propia plantilla y no se necesita ningún plugin para disponer en cada apartado del lugar donde incluir el title, la meta description, etc. Incluso el Robots.txt viene ya configurado para restringir aquellos lugares de la web que no son interesantes para los robots

Inconvenientes de Prestashop:

  1. Personalmente opino que la estructura de los Prestashops es demasiado grande y pesada, contiene demasiados archivos de todo tipo
  2. Me parece un atraso que sigan teniendo las URL con IDs y encima en las de fabricantes o proveedores usen guiones bajos. ¿A qué esperáis señores desarrolladores?
  3. Siguiendo con los atrasos del prestashop: ¿por qué usais los títulos y subtítulos (headers) en frases normales o que carecen de importancia? Por ejemplo, en la frase “Producto añadido correctamente al carrito”
  4. La mayoría de plugings buenos son de pago
  5. Las categorías no incluyen la posibilidad de incluir texto largo en la parte de abajo, sólo en la parte de arriba. ¿Por qué en las páginas de fabricantes/marcas sí y en las de categorías no?

#2. Requisitos mínimos de SEO y de navegabilidad

Veamos entonces los requisitos mínimos que deberá tener la web tanto interna como externamente para que cumpla el objetivo principal: estar preparada para posicionarse en el buscador más usado por los clientes de tu cliente:

Requisitos internos de una web:

  1. Código limpio y lógico (puedes verificar si tu código está limpio en esta web: https://validator.w3.org/)
  2. Evitar estilos inline (con el típico style=»» dentro del propio código)
  3. Diseño Responsive (e incluso incluir la versión AMP para el blog)
  4. Espacio disponible de texto de entre 400-800 palabras en todos los apartados de la web
  5. Estilo en Headers lógico (que el h3 no sea más grande que el h1, por ejemplo, ni que esté por encima el uno del otro de forma desordenada)
  6. No usar <H> en sitios irrelevantes (por ejemplo en el logo o en frases que no sean importantes)
  7. Espacio para meta etiquetas varias (lo ideal sería incluir un apartado en el que se incluyan lineas que se sitúen entre el head de la página)
  8. Tiempo de carga óptimo para lo que por ejemplo se debe evitar subir imágenes más grandes del espacio que utilizarán o no crear páginas infinitas (tan de moda últimamente)
  9. Debe poderse editar cada una de las url de las páginas así como los ítems del menú
  10. Debe poderse minificar el código html
  11. Debe incluir el archivo htaccess disponible para editar en caso, por ejemplo, de tener que realizar redirecciones
  12. Etc.

Requisitos externos o visibles de la web:

En la parte visible de la web vamos a necesitar que no sólo sea bonita sino que convierta, de nada nos servirá que aparezca en los primeros puestos de Google si no genera contactos o ventas, e incluso si es demasiado complicada para que el usuario interactúe.

Veamos varios ejemplos:

  1. Necesitaremos llamadas a la acción situadas en la parte cálida de la web y que destaquen además de que se entienda claramente lo que va a ocurrir si se hace clic en dicho lugar
  2. Facilitar el contacto con la empresa. Muchas veces creemos que queda mal poner el teléfono en la parte más superior de la web y nos limitamos a ponerlo en el footer sin tener en cuenta el canal de comunicación que necesitan los clientes de dicho negocio, ¿necesitan llamar por teléfono, mandar un mail o simplemente apretar un botón de “añadir al carrito”?
  3. Necesitaremos reducir el camino al máximo, es decir, que el lugar donde queremos llevar a nuestros visitantes esté fácilmente accesible y no necesiten infinidad de clics para llegar.
  4. Necesitamos que el cliente no tenga necesidad de hacer clic en “atrás” para volver a la página anterior sino que el camino sea siempre hacia adelante aunque el usuario crea que ha vuelto atrás.¿Cómo? Incluyendo siempre enlace a la home, por ejemplo.
  5. Enlaces con formato distinto al resto del texto (no nos valen los que se encuentran camuflados)
  6. Las páginas legales básicas deben estar incluidas (Aviso Legal, Cookies, etc.)

#3. Estructura de categorías del Site

Estructura-Web

Al plantear un diseño muchas veces los clientes se preocupan demasiado por lo que se ve y no tanto por la estructura que tendrá su web, es decir, por el árbol de categorías y subcategorías y, sin embargo, esta es una de las partes más importantes de cualquier negocio online, uno de los aspectos clave a la hora de que un usuario la elija o no para realizar su compra online.

¿Por qué? Porque es la primera manera de entender la lógica y contenido de un sitio. Se trata del esquema del mismo. La forma que nos guía por el camino adecuado hasta llegar a un lugar u otro de nuestra web.

Y dirás, ¿y a mi como diseñador en qué me afecta? Directamente a ti te da igual si hoy quieren tener 3 categorías y 20 subcategorías, y mañana cambian de opinión. Pero conoce los efectos devastadores de un cambio así…

¿Qué ocurre cuando cambiamos la estructura de una web cuando ya se ha indexado en Google?

  1. Se produce un incremento de errores 404 de todos los enlaces que estaban enlazados en Google o en otros sitios externos
  2. Si quien sigue el enlace es un cliente, puede provocar una experiencia negativa
  3. Aumenta el rebote
  4. Empeora el posicionamiento
  5. Da sensación al usuario de ir por el panorama virtual como títere sin cabeza, sin tener las cosas claras

Por tanto no significa que la estructura determine el posicionamiento de una web o sea muy importante para Google, ya que podemos saltarnos niveles a través de enlaces internos contextualizados de los que ya hablaremos en otra ocasión, pero como hemos visto, hay otros problemas resultantes que provocarán efectos negativos y que pueden provocar el descontento de un cliente que pagó por un diseño web óptimo para el posicionamiento SEO en Google.

Lo mejor para todos es que el cliente tenga claro el esquema de la web desde el principio, así no habrá sorpresas innecesarias.

#4. Requisitos finales que harán de tu trabajo un diseño de 10

La guinda del pastel la pondrás si la entregas preparada para empezar a trabajar. Me explico, con aquellas herramientas que usan los SEOs más profesionales y básicas, es decir: Analytics y Search Console, con ellas conseguirás que empiecen a registrar las visitas desde el día en que se lance la web y acelerarás el proceso de indexación de la misma. No hablo de plugins porque no soy partidaria ni de unos ni de otros, todos tienen sus pros y sus contras, pero lamentablemente en WordPress son necesarios.

Volviendo a las recomendadas, si vas más allá y las implementas a través del Google Data Studio, no sólo tendrán la información anterior sino que podrán poner en marcha con más facilidad estrategias de CPC a través de AdWords que acelere el proceso de conseguir ventas de sus productos.

Además debe poder ser dinámica y poder ofrecer:

  • bonos de descuento
  • pop ups para la versión escritorio
  • formularios de suscripción conectados a una base de datos
  • descuentos por secciones

En definitiva, apta para potenciarla con las campañas de marketing online, tan importantes hoy en día, si queremos que una web llegue hasta lo más alto.

Analytics

¿Estás preparado para crear tus mejores diseños?

© Copyright 2009-2019 acceseo projects SL | Aviso legal | Política de privacidad | Política de cookies

Programación web y diseño web, aplicaciones web, optimización e innovación tecnológica, posicionamiento en buscadores (SEO y SEM) y marketing online.

Diseño web en Alcoy, diseño web en Alicante y diseño web en Valencia

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.