Experiencia y Diseño Digital

Todavía se hacen demasiados proyectos digitales (sitios web, apps) sin tener la UX en cuenta, pero en un entorno competitivo cualquier ventaja que se pueda conseguir es valorable, y tener una buena definición de la experiencia de usuario es un gran valor añadido, que notarás en muchos conceptos, conversiones incluidas.

Para empezar, una aclaración: cuando hablamos de experiencia de usuario, no queremos decir únicamente usabilidad. La usabilidad analiza la facilidad de uso, mientras que en la experiencia de usuario, además de ese concepto, entran en juego también la propuesta de valor (contenidos), su rendimiento y la satisfacción que el usuario pueda conseguir. La experiencia de usuario tiene un punto de subjetividad, algo que es mejor tomarse como una oportunidad que como un obstáculo.

Auditoría UX: el usuario, en el centro

Al llevar a cabo una auditoría UX, estarás consiguiendo dos objetivos importantes: encontrar funcionalidades o páginas que no son bien valoradas por los usuarios de tu sitio o aplicación e identificar mejoras que ayudarán a que más usuarios cumplan los objetivos de las páginas.

Estos son los puntos más importantes que debes incluir en tu auditoría UX:

- Home Page:
¿Explica el sitio con claridad qué hace la empresa o el producto destacado?
¿Incitan el diseño y la arquitectura del sitio a explorar más contenidos?
¿Hay equilibrio entre la densidad de contenido y el espacio en blanco?

- Orientación a tareas
Cada página de tu sitio web debe tener un objetivo identificable. Las páginas que no lo tengan sobran. Pero que tengas ese objetivo identificado no quiere decir que se esté incitando bien al usuario hacia él. En una página de listado de productos, ese objetivo será conseguir el clic hacia algún producto. En una página de producto, el objetivo será añadir al carro.

- Navegación y arquitectura de la información
¿Se atiene el diseño y flujo de la navegación a estándares y convenciones?
¿Existe una relación fácilmente identificable entre la página en la que está el usuario y la navegación del sitio?

- Formularios
¿Los campos están claramente identificados? ¿Se entienden? ¿Dan pistas al usuario sobre lo que se espera de él que escriba? Especial atención a este punto deben prestar los especialistas en optimización de conversiones, ya que la mejora de los formularios aumentará la tasa de conversión, seguro.

- Confianza y autoridad
¿Está el contenido del sitio bien redactado y sin errores?
¿Los anuncios del sitio se identifican con claridad y tienen aspecto profesional?
¿El contenido está bien escrito o parece redactado con palabras clave para los buscadores?

Realizar una auditoría UX supone poder llegar a conclusiones muy valiosas sobre el funcionamiento de nuestro sitio web o aplicación y su eficacia a la hora de conseguir el objetivo: que los usuarios puedan realizar de forma satisfactoria las tareas que se pueden llevar a cabo.

Los puntos que hemos incluido en esta propuesta de auditoría UX son suficientes para encontrar buenas oportunidades de mejora, pero puedes incluir otros. Si lo haces, hazlo desde la perspectiva de las áreas que no puedes descuidar, de las preguntas que quieres responder:

• ¿Es tu sitio web o aplicación atractivo?
• ¿Es fácil familiarizarse con él?
• ¿Es sencillo resolver las tareas que se pueden llevar a cabo?
• ¿Los usuarios saben en todo momento dónde están y sienten que tienen el control?

Si necesitas contratar una empresa que destaque en la gestión de proyectos de User Experience, contacta con nosotros; te ayudamos a mejorar la experiencia de usuario en tu web o aplicación.

Hoy en día ya no se concibe un proyecto web que no tenga en consideración la User Experience. Diseñamos y hacemos desarrollos web para que sean usados por personas, y tener en cuenta las percepciones y efectos de ese uso en las personas desde la fase inicial es parte esencial de un proyecto exitoso. Afortunadamente, la siguiente tira de Dilbert se produce con menor frecuencia ahora que hace unos años.

Sin embargo, tener en cuenta la experiencia de usuario desde el principio del proceso no garantiza, lamentablemente, un buen resultado final. Son muchas las piedras en el camino, y además es fácil tropezar con ellas en más de una ocasión. Para evitarlo, te contamos en 5 puntos cómo gestionar un proyecto de UX para que dé los resultados que esperas.

1. Gestiona tu proyecto en función del presupuesto que tengas y el alcance del proyecto.

Cada proyecto es un mundo, y darle su importancia no quiere decir que haya que matar moscas a cañonazos. No es lo mismo trabajar la UX de un microsite promocional que la revisión completa de una tienda online. El presupuesto será probablemente distinto y las herramientas utilizadas y procesos a seguir, también.

2. Si haces un proyecto de UX, hazlo bien: ¡no te saltes fases!

Por ejemplo, no te saltes los tests de usuario. Es curioso como, siendo uno de los pasos más importantes, por tiempo o presupuesto en demasiadas ocasiones se omiten. No tiene ningún sentido, sobre todo porque luego pagarás un coste mucho más alto cuando tengas que modificar diseños porque la experiencia de usuario no es todo lo buena que debería y se nota en los resultados.

Otro punto importante es realizar obligatoriamente una conceptualización de alto nivel. Este diseño de la experiencia debe servir de guía, marco y establecer los principios básicos que regirán todo el proyecto, que le darán coherencia. Sin este diseño, es fácil que se produzcan rápidamente desviaciones sobre temas y conceptos teóricamente bien fijados y acordados.

3. Ten un proceso, pero hazlo flexible

Tener un proceso bien marcado no significa que no debas alterarlo cuando todo te indique que así debes hacerlo. Necesitarás flexibilidad en muchas fases del proyecto, por ejemplo para aceptar y accionar resultados de tests de usuario diferentes a los que esperabas. Y además de eso también es importante que, concediendo a los casos de uso la importancia que tienen, no bases todo el proyecto en ellos. Son útiles, pero con frecuencia reflejan más lógicas de negocio que experiencias reales de usuario. Aprovecha su utilidad, pero no seas fundamentalista con ellos.

4. Utiliza las herramientas apropiadas para la gestión del proyecto

Aparte de las propias herramientas de wireframing, prototyping, organización de la información, user testing e investigación necesarias para la ejecución de cualquier proyecto UX, es imprescindible el uso de plataformas de gestión de proyectos como Basecamp y de gestión de feedback visual como TrackDuck. Ambas, usadas apropiadamente convierten el potencial y costoso caos en un real y productivo orden.

5. Haz la vida más fácil a los diseñadores UX, para que se centren en lo que toca

Facilita y promueve que los diseñadores UX se comuniquen entre sí. La falta de comunicación es la madre de muchos "monstruos" del UX mal gestionado. También es importante que no permitas que todo el mundo opine y decida; identifica claramente a los responsables de cada área del proyecto y trata únicamente con ellos los temas que hay que decidir, aunque luego como es lógico la comunicación llegue a todos los integrantes del equipo. Involucrar a todo el mundo en la toma de decisiones es otra forma de ralentizar, cuando no directamente perjudicar, un proyecto de UX.

Por otra parte, no permitas que el gran conocimiento que sin duda tienen los consultores UX más experimentados se convierta en un freno para el proyecto, ya sea en forma de desmoralización de otros integrantes del equipo o por la no adecuación de su trabajo a los inputs que se van produciendo durante el proyecto.

¿Quieres que te ayudemos a poner en marcha un proyecto de UX bien concebido? En Smartbrand somos expertos en UX, compruébalo con nuestros casos de éxito.

Es la gran pregunta, que cada vez resuena más en departamentos de marketing de multitud de empresas. Una pregunta que tiene años, aunque el auge en el uso de Internet en el móvil para todo: búsqueda, usos sociales, compra... ha hecho que ahora sea urgente tratar de contestarla. El caso es que no es una pregunta de respuesta única, depende del tipo de negocio y del objetivo que tengamos para nuestros usuarios.

Diferencias entre web móvil y app móvil

A continuación analizamos algunas de las diferencias más significativas entre web móvil y app móvil:

- Inmediatez y compatibilidad: la web móvil está accesible de forma instantánea desde multitud de dispositivos, la app hay que descargarla desde un marketplace (una tienda de apps), una barrera significativa. Y requiere versiones distintas para dispositivos diferentes (Android, iOS, Windows).

- Dinamismo en las actualizaciones: como propietario de la web móvil tú decides cuándo aplicas mejoras; en el caso de la app móvil que las mejoras lleguen a los usuarios depende de que se instalen la actualización.

- Visibilidad: la web móvil se encuentra con facilidad en buscadores; las app, de momento, no, a pesar de los avances de Google en la indexación de contenidos de apps de Android.

- Viralidad: piensa en lo fácil que es compartir una web móvil (vía Facebook, email, twitter, etc). Una app simplemente no se puede compartir así.

- Persistencia: un sitio web no puede ser borrado ;) Una app sí puede ser borrada del dispositivo.

- Coste: en principio, es más económico desarrollar un sitio web móvil que una app.

Si repasas el listado anterior, te darás cuenta de que en todos los puntos la web móvil sale vencedora. ¿Quiere esto decir que debes optar por ello y no apostar por una app móvil? Ni mucho menos, tal y como explicamos a continuación.

Cuándo usar web móvil y cuándo usar app móvil

Un factor importante es el tiempo de uso en el móvil: ¿estamos más tiempo utilizando apps para móvil o web móvil? Pues a pesar de que hay discrepancias entre diversos estudios (Comscore apunta a un predominio de las app mientras por ejemplo la IAB dice que el uso de la web móvil está infravalorado en esos datos), lo que parece claro es que las app se usan bastante, y tres son los motivos principales que dan los usuarios:

1. Comodidad y facilidad de uso: le das, y ahí están los contenidos; sin tener que ir a un navegador ni escribir ninguna dirección.

2. Las apps ofrecen una mejor experiencia de usuario. Porque están pensadas para su uso en móvil y a menudo están mejor resueltas que las versiones adaptadas a dispositivos móviles de versiones web de escritorio, y porque pueden incluir funcionalidades que no se pueden replicar en el sitio web móvil (como las ligadas al uso de la cámara de un smartphone, por ejemplo).

3. Es más rápida. A menudo las apps son más rápidas en cargar contenidos que los sitios web móviles.

Es decir, que las apps se usan, y los usuarios explican que ven algunas ventajas sobre las webs móviles. Entonces, ¿qué debe hacer tu negocio? En primer lugar, ten web móvil sí o sí. Si el reciente cambio en el algoritmo de Google premiando los sitios web optimizados para móvil no es suficiente, ten en cuenta además que un sitio web móvil es excelente para conseguir nuevos consumidores, tiene más eficacia en este objetivo que una app; y ¿qué negocio no necesita captación? Una web móvil te permite hacer que potenciales clientes descubran tu marca y también puedes llevar tráfico desde emails. Por tanto un sitio web móvil te va a ser muy útil para conseguir alcance. Y si tu marca no es muy reconocida, la captación es algo que no puedes desdeñar.

Ahora bien, si tu marca es fuerte y puedes ofrecer una experiencia superior con una app, no lo dudes, hazlo. Ofrece una app móvil además de un sitio web móvil. Sí, hay que superar esa barrera del descubrimiento y la descarga, pero la recompensa lo vale: usuarios con más engagement, y además con el valor añadido para tu negocio de las notificaciones. Además, todavía queda mucho por estudiar sobre el uso de web móvil y app móvil por parte de los usuarios, pero parece que hay diferencias según los objetivos que analiza de forma completa las características de web móvil y app móvil. Haz clic en la imagen para leer bien el contenido de la infografía.

Fuente: mdgadvertising.com

Si necesitas ayuda para tener un sitio web móvil o una app móvil para dar la mejor experiencia de usuario posible a tus clientes, contacta con nosotros. Somos expertos en hacer que tu negocio aproveche todas las oportunidades que el marketing online ofrece.

En los últimos años destaca una tendencia al minimalismo en el diseño web. Y parte relevante de esta apuesta por el minimalismo consiste en un uso importante del espacio en blanco. Es lógico: más espacio en blanco, menos información cabe en pantalla. Pero ese uso extendido del espacio en blanco como recurso en el diseño web, ¿es bueno o malo para la experiencia de usuario y para la imagen de un sitio web?

La respuesta a esta pregunta debe partir de una constatación: el espacio en blanco, también conocido como espacio negativo (ya que en realidad no tiene por qué ser blanco), es un elemento indispensable del diseño web. No es correcto hablar del espacio en blanco como espacio perdido. Como en la música: sin silencio es imposible disfrutar las notas en plenitud.

Ahora bien, un uso excesivo de este recurso puede conseguir un efecto distinto al inicialmente previsto. El espacio negativo ayuda, entre otras cosas, a enfatizar contenidos y a mejorar la legibilidad, pero abusar de él no consigue que un mal contenido pase a ser bueno o que un diseño poco usable se arregle sin otras modificaciones, más allá de que sí contribuye a quitar ruido.

A continuación listamos los 5 principales efectos positivos del espacio en blanco en el diseño web:

- Mejora de la usabilidad. Ayuda a ordenar elementos, a que el usuario pueda focalizar su atención en ellos.

- Priorizar contenidos. El espacio negativo permite dar importancia a aquellos elementos que realmente son relevantes. No todo tiene que estar above the fold.

- Da elegancia, estilo.

- Facilita una buena experiencia de usuario en un diseño web adaptativo. Porque el espacio en blanco y la organización en bloques ayuda a que una buena forma de organización en experiencia desktop se traslade a tablet y smartphone.

- Es funcional y te permite poner el foco en toda tu propuesta de valor. Como hace Google, desde sus inicios.

En resumen, el espacio en blanco es muy relevante para conseguir buenas mejoras estéticas y de usabilidad en un sitio web. No arreglará desaguisados ni conseguirá que un mal diseño se convierta en uno bueno, pero difícilmente hará de un buen diseño uno malo. Sí es cierto que abusar del espacio negativo puede no ser tan beneficioso en el caso de marcas o productos que lo apliquen de forma indiscriminada sin que su propuesta de valor lo justifique.

Y también es verdad que la tendencia en los últimos años al minimalismo en el diseño web (a lo que ha contribuido la necesidad de conseguir una excelente experiencia de usuario en los dispositivos móviles) puede llevar a abusar del espacio en blanco en el diseño. Pero, como decimos, es difícil que este minimalismo se convierta en un problema.

¿Buscas un diseño web de calidad, pensado para destacar lo mejor de tu negocio y conseguir la mejor experiencia de usuario en cualquier situación? Contacta con nosotros, podemos ayudarte. Compruébalo.

Hace ya cinco años que David Boronat y Ester Pallarés publicaron su libro Vender más en Internet, con el que se puso de moda (para bien) el concepto de persuabilidad, un concepto de imprescindible aplicación a la usabilidad y al diseño gráfico para persuadir y convencer al usuario, facilitarle las elecciones para convertir a esos clientes potenciales en clientes. Es un concepto que sigue en plena vigencia y que hay que trabajar para que dé resultados.

Cómo diseñar para aumentar la persuabilidad

En todos los pasos que puede dar un usuario desde que accede a nuestra web y hasta que llega a la bendita "Thank you page", la confirmación de que la compra se ha realizado con éxito, en todos ellos puede encontrarse con trabas: desde falta de información, pasando por falta de claridad en lo que se explica y acabando por una experiencia pobre que no resuelve sus necesidades. ¿Cómo aumentar la persuabilidad en nuestro sitio web?

1. Dar información completa sobre el precio

Hacerle ver al usuario el ahorro que consigue gracias a una oferta es un gran elemento de persuabilidad.

Amazon, en la imagen anterior, lo tiene como es habitual todo perfectamente analizado. Fijaos en que no solo aparece el precio anterior, no solo aparece el precio actual (más grande), sino que además aparece el ahorro, y no únicamente en cifra total, sino en porcentaje. Perfecto. Con cuatro cifras, tienes al usuario ganado: tiene efectivamente todos los datos que necesita sobre el precio de ese producto para decidirse.

2. Permitir comparaciones sencillas

Comparar es una de las mejores formas de facilitar la toma de decisiones. Cuando comercializas un producto o servicio en ocasiones puede no estar claro en qué beneficia al usuario en relación otros productos tuyos o de la competencia. Compararlos es una forma sencilla de facilitar la toma de decisiones.

3. Especificar el cliente/ocasión al que nos dirigimos

¿Es ese vestido para salir de fiesta? ¿O para ir a trabajar? Cada tipo de producto tendrá sus preguntas, pero es importante plantearlas para ayudar a decidir. Veamos cómo lo hace el software de rankings Advanced Web Ranking.

No solo permite la comparación por precio, sino que deja muy claro a qué tipo de cliente le conviene más uno u otro: para agencias, para SEO in house, para propietarios de sitios web pequeños, para grandes empresas... Facilita la decisión de compra.

4. Mostrar grandes contrastes

A veces, más que una cifra o un gráfico, lo que impresiona es la diferencia que se constata a partir de esa cifra o gráfico. Ocurre por ejemplo con las estrellas generadas por las reviews de los usuarios. Algunas veces un producto o servicio puede obtener una nota buena como promedio (por ejemplo 4 estrellas sobre cinco) aunque haya bastantes usuarios repartidos entre 5, 4, 3 y hasta 2 estrellas. Sin embargo, en ocasiones una nota altísima es fruto de una casi unanimidad.

Obviamente estos contrastes conviene mostrarlos cuando existen, no se trata de engañar. Pero con un diseño como este queda bien enfatizado.

5. Destacar lo que nos interesa

De todas las opciones de suscripción que ofrece el grupo de comunicación Capeado, está muy claro no ya cuál es la más completa, sino la que les interesa destacar y que se nos vayan los ojos hacia ella.

Obviamente, la primera a la izquierda. Tres factores: la flecha, la diferencia de color en la primera celda de la columna y el signo de verificación, más grande en toda la columna.

¿Quieres que te ayudemos a hacer que tu web sea más persuasiva? Contacta ahora con nosotros, somos expertos en crear experiencias de usuario innovadoras orientadas a la conversión, te ayudamos a conseguirlo en tu negocio.

¿Necesitas un nuevo sitio web? Curioso cómo el paso de los años afecta a los sitios web de la misma forma que a la ropa, a los peinados, a las películas y mil cosas más, ¿verdad? No queremos que nuestra tienda online se vea antigua, poco usable o que pierda efectividad o capacidad de seducción con el paso del tiempo, y para eso debemos repensarla cada cierto tiempo.

En ese proceso de repensar la web hay dos conceptos que es conveniente tener presente porque nos van a evitar muchos quebraderos de cabeza. Hablamos del wireframing y del prototyping, dos conceptos similares pero distintos que contribuyen a que tu nuevo sitio web sea útil y usable. Ambos te serán útiles en el proceso.

Lo primero es lo primero: definamos estos conceptos, ya que (no eres el único) a veces se confunden. Pero no queremos teorizar mucho, así que lo haremos sencillo con una descripción breve: con los wireframes muestras la disposición y organización de los contenidos de una página, con lo que es una herramienta imprescindible a la hora de plasmar una primera idea de estructura y una jerarquización de contenidos. El objetivo de un wireframe es la validación de la arquitectura de la información y poder plantear cambios en un estado prematuro cuando aún tienen bajo coste.

Así, un buen wireframe mostrará, entre otros, y sin necesidad de incluir diseño ni tipografías:

• Posición del logo
• Campos de búsqueda
• Breadcrumbs
• Headers
• Menús de navegación
• Cajas de organización de contenido por tipos
• Botones sociales y de contacto
• Footer

‍

Como ves, un  montón de información en forma de cajas que facilita enormemente a quien los tenga en sus manos comprender de manera muy visual cuál es la propuesta de organización del sitio web.

El prototyping, clave para valorar la experiencia de uso

Los wireframes te dan una idea muy clara de cuán útil y valiosa puede ser tu web. ¿En qué se diferencia el prototyping? Con el prototyping consigues un prototipo funcional, lo cual indica que puede ser probado, por lo tanto ya entra en juego la experiencia de usuario.

Es esa diferencia sustancial entre wireframing y prototyping la que hace que este último sea especialmente aconsejado para tiendas online en general, y para las partes más transaccionales en concreto. Cuanta más interacción con el usuario tenga un sitio web (incluyendo cajas de diálogo, pero no solamente), más necesario se hace el prototyping sin perjuicio del wireframing.

¿En qué otros aspectos (además del diálogo con el sistema durante una transacción o registro) es valioso el prototyping? Por ejemplo, en menús que utilicen la función "on mouse over" para mostrarse o contraerse, menús desplegables, sliders...

Por tanto, ambos conceptos, wireframing y prototyping te aportan perspectivas distintas pero valiosas cuando necesitas replantear un sitio web.

Usa ambos en función de lo que necesites; y aunque siempre se puede llegar a darle al wireframing un toque de experiencia de uso (con el paper prototyping, el que con diferentes papeles simulas las diversas funcionalidades), pero disponer de un prototipo realmente funcional de tu sitio web te será posiblemente más valioso, para hacer tests de usabilidad, por ejemplo.

Si quieres más información sobre cómo concebimos en Smartbrand el diseño y desarrollo web, la innovación en Internet y cómo tenemos un enfoque 360º para que tu negocio maximice el ROI en su apuesta online, no te pierdas lo que dicen nuestros clientes, o contacta y te contamos.

Es uno de los puntos de mejora más obvios en las tiendas online. Sí, has analizado a fondo las posibilidades de tu e-commerce; has pensado en el CMS, has invertido en un buen diseño web acorde a tu marca y en cómo dar la mejor experiencia a los usuarios de móviles, y también has invertido en SEO y PPC. Pero una vez está todo online, ¿qué haces con el contenido que caduca?

Si todavía no lo has pensado, en este post te sacamos de dudas: es imprescindible que tengas en cuenta el ciclo de vida de producto en tu sitio web: te evitarás problemas de experiencia de usuario, problemas con los buscadores y, mejor aún, podrás aumentar las ventas.

Veamos a continuación las distintas posibilidades cuando un producto de tu sitio web no debe de estar activo, y las distintas consecuencias.

1. No hacer nada: error

Esta es una de las más habituales, pero es un error. Si bien no supone problemas para el tráfico orgánico, que seguirá llegando a la web, no es buena experiencia de usuario llegar a una ficha de producto en la que no se puede comprar.

2. Despublicar sin hacer nada más: error

Otra de las habituales. Retiras el producto, y ya está. Pues no; problemas de experiencia de usuario (error 404) y problemas con los buscadores: el empeoramiento SEO no se producirá por tener un único error 404, pero si se acumulan decenas y centenares, entonces sí puede causarte problemas.

3. Despublicar y hacer una redirección 301

Correcto, impecable desde el punto de vista de los buscadores; aunque conviene buscar el mejor equivalente para redirigir. Si tienes una tienda de ropa online y quitas un vestido, mejor que redirigir a la página de inicio es redirigir a la categoría de vestidos. Así, si llega un usuario de buscadores esperando encontrar un vestido, el listado de vestidos es la mejor respuesta que tu sitio web le puede dar si el producto no está disponible.

Esta opción, que parece de entrada la más correcta, lo es fundamentalmente si sabes que no vas a volver a tener disponible ese producto. Pero si simplemente ese producto va a desaparecer de la tienda pero volverá (por ejemplo por motivos estacionales, pensemos en los bikinis, que en España tienen gran volumen de búsqueda entre marzo y agosto), entonces es más recomendable proceder con la siguiente opción.

4. Mantener publicado pero alterar el contenido

Esta es una buena solución para los productos que en ese momento no estamos vendiendo pero que vamos a volver a vender. De esta forma nos ahorramos el inconveniente SEO de tener que volver a trabajar enlaces específicos temáticamente relacionados para estas páginas.

Eso sí, para una correcta experiencia de usuario conviene modificar el contenido de la ficha de producto, por ejemplo poniendo inactivo el carro de la compra y añadiendo un cuadro de texto que especifique claramente que ese producto en ese momento no está disponible, y si es posible cuándo volverá a estar a la venta.

Para acabar de completar la buena experiencia, no olvidemos que la persona que llega desde buscador a esa ficha de producto es absolutamente un cliente potencial. Debemos tratar de retenerle. Por tanto, es una buena práctica incluir un campo para que introduzca el email, con el gancho adecuado: “Este producto no está actualmente disponible, déjanos tu email y serás el primero en enterarte cuando esté a la venta la nueva colección”. Fácil, y efectivo.

Si quieres consultoría avanzada sobre este tema o cualquier otro aspecto relacionado con el e-commerce, contacta ahora con nosotros, te ayudaremos a vender más.

El diseño, en general, y el diseño web, en particular, son disciplinas complejas, cambiantes. Evolucionan en el tiempo, y son sensibles a modas y también a evoluciones técnicas que abren nuevas posibilidades.

Esto hace que lo que un día se percibe como maravilloso al cabo de un cierto tiempo puede ser calificado como aburrido, muy visto o, claro que sí, antiguo y obsoleto.

Y no solo eso, sino que además, y ya poniendo el foco en el diseño web, tema central de este post, un diseño web debe cumplir toda una serie de requisitos que van más allá de realizar una creación "partiendo de la nada". El diseño es inspiración, por supuesto, pero el diseñador web debe también:

• Conocer cuál es la audiencia. No es lo mismo un target joven que uno senior, o dirigirse a hombres específicamente, o a mujeres, o a ambos...
• Conocer cuáles son los objetivos del sitio web y diseñar pensando en ellos. ¿Se trata de una tienda, queremos vender? ¿Un magazine, queremos que lean o se suscriban? ¿Una consultora, queremos que nos llamen o contacten?
• Tener en cuenta el medio, y por tanto diseñar pensando en optimizar el tiempo de carga de la página. Y en todos los dispositivos necesarios. Bonito sí, pero rápido también, y ahora más que nunca, cuando ya hace tiempo que la rapidez de carga forma parte del algoritmo de Google y numerosos estudios muestran los devastadores efectos (vía uso del "back" del navegador) de unas décimas de segundo de más en el tiempo de carga de la página.

En definitiva, el diseñador web debe trabajar conjuntamente con los desarrolladores web, el equipo de marketing, de e-commerce, de contenidos, con todos. La relación con el cliente no siempre es fácil, pero en Smartbrand sabemos cómo hacer que funcione. El secreto es la empatía, junto con unas gotitas de sentido común.

Dicho esto, existen una serie de principios y buenas prácticas que son comunes a todo buen diseño web y que se encuentran en las mejores páginas web desde el punto de vista del diseño.

Son esos principios y prácticas los que queremos detallaros en este artículo. Las buenas prácticas son cosecha propia, en Smartbrand hacemos diseño web, te animamos a ver nuestros casos de éxito. En cuanto a los principios básicos del diseño web, utilizaremos el magnífico infográfico de la agencia canadiense Paper Leaf Design.

Los 4 principios del diseño web

• Contraste: todos los elementos únicos y específicos del diseño deben distinguirse unos de otros. Puede conseguirse mediante el uso de colores, tonos, formas o elementos de dirección.
• Repetición: la repetición da cohesión al diseño web.
• Alineación: Cuando se utiliza la alineación correctamente, cada elemento del diseño da la sensación de estar visualmente conectado con otro elemento, lo que da cohesión al diseño web. Nada parece fuera de lugar.
• Proximidad: la proximidad también favorece la cohesión en el diseño web. Si dos elementos están relacionados entre sí, es mejor que estén cerca el uno del otro.

‍

Seguir estos 4 principios evita muchos quebraderos de cabeza, son una buena base; pero el diseño web es mucho más, como decíamos al inicio del post. Por eso, a continuación os detallamos algunas de las buenas prácticas que por nuestra experiencia diaria sabemos que funcionan, y que conviene aplicar.

Buenas prácticas en el diseño web

Composición:

• La composición debe guiar al usuario visualmente. Se debe distinguir las áreas de información, navegación principal, secundaria, local, etc.
• Establecer áreas "verticales". Sobre todo en páginas principales o portales de información.
• Cabecera y pie: el encabezado presenta la identidad gráfica del sitio y el pie (por lo general) presenta el origen del sitio y enlaces acerca del sitio.

‍

Dimensiones:

• Como diseñadores web tenemos siempre en cuenta todo tipo de plataformas y sus distintas dimensiones de pantalla.

‍

Elementos de navegación:

• La navegación principal debe destacar claramente.
• El diseño web debe ayudar al usuario a saber dónde está. Los cambios de colores o ubicaciones pueden desorientar.

‍

Color:

• El color afecta a la sensación del sitio web.
• Es siempre preferible un diseño limpio, sin excesos.
• Es preciso encontrar el contraste adecuado entre colores.
• Conviene mantener la consistencia de los colores según la funcionalidad de los elementos.
• Mejor no usar colores vivos en tipografías.

‍

Tipografía:

• Escoger una tipografía legible es definitivamente muy importante.
• El tamaño y el interlineado son muy importantes para una mejor lectura.
• Un diseño web eficiente utiliza Web-safe fonts, es decir, fuentes conocidas y de uso extendido que minimicen el riesgo de que los usuarios vean el contenido en una fuente distinta a la elegida.
• No abusar de demasiadas fuentes o estilos en una misma página.

‍

Imágenes:

• El uso excesivo de imágenes en una página resulta poco funcional.
• Toda imagen debe ser optimizada para web (para reducir el tiempo de carga).
• Es preciso tener en cuenta que hay imágenes de diversos tipos: las que apoyan al contenido y las que son parte de la identidad del sitio web.
• El diseño web debe establecer tamaños en las imágenes que sean consistentes y constantes en todo el site. Por ejemplo, con 3 dimensiones como máximo: pequeñas, medianas y grandes.

‍

Seguir estos principios y buenas prácticas del diseño web es la mejor forma de comenzar a cubrir las expectativas de los clientes. Si necesitas un diseño web de calidad que sea eficiente para tu marca, tus objetivos y tu audiencia, contacta ahora con nosotros.