UX y UI Design

Qué es el diseño UX

El diseño de experiencia de usuario (UX) es una disciplina centrada en crear productos que proporcionen experiencias significativas y relevantes a los usuarios. Incluye aspectos de branding, diseño, usabilidad, y función. Podríamos decir que se ocupa de toda la experiencia del usuario con el producto, desde cómo se siente al interactuar con él hasta la eficacia con la que logra sus objetivos.
‍
En su esencia, hablamos de un proceso que busca entender al usuario, sus necesidades, deseos, y contextos de uso. Los diseñadores UX utilizan una variedad de métodos y herramientas para investigar, como entrevistas con usuarios, pruebas de usabilidad, y análisis de datos, para obtener insights que guíen sus decisiones de diseño.

‍

‍
‍
El objetivo es mejorar la satisfacción del cliente y la lealtad a través de la utilidad, facilidad de uso, y el placer proporcionado en la interacción con el producto. Un buen diseño UX no solo se ve bien, sino que también se siente intuitivo, accesible y simple de usar.
‍
Aunque a menudo se utiliza en el contexto de la tecnología digital, como en la creación de aplicaciones y sitios web, el diseño UX se aplica a cualquier producto o servicio, incluyendo entornos físicos y servicios interactivos.
‍
Podemos decir que es una disciplina en constante evolución, que ha ido incorporando elementos de psicología, diseño visual, investigación de usuarios, y estrategia de negocio, convirtiéndose en un elemento integral del éxito del producto en diversas industrias.

‍

Analizar antes de diseñar

Antes de sumergirse en la creación de soluciones de diseño, es crucial realizar un análisis exhaustivo. Este proceso garantiza que las decisiones de diseño estén informadas y alineadas con las necesidades y expectativas del usuario, los objetivos del negocio, y las condiciones del mercado. Aquí están las subsecciones detalladas para entender mejor cómo llevar a cabo este análisis:

‍

Propuesta de valor a transmitir

Identificar claramente la propuesta de valor de tu producto o servicio es esencial. Esto significa comprender y articular qué lo hace único y cómo satisface las necesidades o resuelve los problemas de tus usuarios. En esta etapa, defines el mensaje central que quieres que los usuarios reciban y comprendan, lo cual influirá en todas las decisiones de diseño subsiguientes.

‍
Insights de usuarios

Los insights de usuario son entendimientos profundos sobre las necesidades, comportamientos, experiencias, y motivaciones de los usuarios. Recolectar estos insights a través de métodos como entrevistas, encuestas, observación, y pruebas de usabilidad es crucial. Te permiten crear soluciones que resuenen con los usuarios y satisfagan sus necesidades de manera efectiva.

‍

Benchmarking y best practices

El benchmarking implica investigar productos competidores o comparables y analizar lo que están haciendo bien o mal. Esto te ayuda a entender el estándar de la industria, identificar oportunidades de innovación, y asegurarte de que tu diseño esté al menos al nivel de tus competidores. Adoptar las mejores prácticas del sector puede ayudarte a evitar errores comunes y a implementar estrategias probadas que mejoren la experiencia del usuario.

‍

Detección de problemas de usabilidad

Identificar y entender los problemas de usabilidad actuales o potenciales es crucial antes de empezar a diseñar. Esto puede lograrse mediante análisis heurísticos, pruebas de usabilidad, o revisión de feedback de usuarios. Conocer estos problemas te permite abordarlos directamente en tu diseño, creando una experiencia más fluida y satisfactoria para el usuario.
‍

Análisis de datos

El análisis de datos implica recoger y examinar datos de usuarios para tomar decisiones informadas. Esto puede incluir datos de comportamiento del usuario, tasas de conversión, interacciones dentro de la aplicación o sitio web, y más. Utilizar el análisis de datos te ayuda a identificar patrones, tendencias, y problemas, lo que a su vez informa y mejora tus decisiones de diseño.

‍
Al realizar un análisis exhaustivo antes de diseñar, te aseguras de que tu proceso de diseño UX esté fundamentado en una comprensión profunda del usuario y del mercado. Esta comprensión te permite crear soluciones más efectivas y centradas en el usuario, aumentando las posibilidades de éxito del producto.

‍

User Journeys

Los User Journeys, o viajes del usuario, son representaciones visuales o narrativas de la experiencia completa de un usuario con un producto o servicio. Estos viajes mapean cada punto de interacción que el usuario tiene con el producto, desde el primer contacto hasta el final de la experiencia, incluyendo todos los pasos intermedios. Aquí se detalla cómo desarrollar y utilizar User Journeys en el diseño UX:

‍

Definir los objetivos del usuario

Antes de mapear el viaje, es crucial entender qué está tratando de lograr el usuario con el producto o servicio. Esto podría ser algo tan simple como comprar un artículo o más complejo como aprender una nueva habilidad. Comprender los objetivos del usuario te ayudará a definir los puntos más críticos en su viaje.

‍

Identificar los puntos de contacto

Los puntos de contacto son todas las instancias donde el usuario interactúa con el producto o servicio. Esto incluye todo, desde visitar un sitio web, hablar con el servicio al cliente, recibir correos electrónicos, hasta usar el producto en sí. Identificar estos puntos de contacto te permite ver dónde se están creando las experiencias y dónde puede haber problemas o oportunidades para mejorar.

‍

Mapear el viaje que prevemos para los usuarios

Con los puntos de contacto identificados, el siguiente paso es mapear la secuencia de eventos en el orden en que ocurren desde la perspectiva del usuario. Esto te da una visión cronológica del viaje del usuario y te ayuda a entender el flujo y la progresión de la experiencia.

‍

Incluir emociones y motivaciones

Un aspecto importante de los User Journeys es incluir las emociones y motivaciones del usuario en cada etapa del viaje. ¿Cómo se sienten en este punto? ¿Qué los motiva a continuar? Comprender esto puede revelar insights valiosos sobre cómo mejorar la experiencia.

‍

Identificar oportunidades de mejora

Al mapear el viaje del usuario, es probable que identifiques áreas donde la experiencia podría ser más fluida, agradable o efectiva. Estas áreas son oportunidades para innovar y mejorar el diseño del producto o servicio.

‍
Recopilar Feedback

Un User Journey no es estático; debe evolucionar a medida que obtienes más información sobre los usuarios y cómo interactúan con el producto. Continuamente recoge feedback y datos, y utiliza esta información para actualizar y mejorar el viaje del usuario.

‍

en Smartbrand, como agencia de diseño UX, sabemos que los User Journeys son una herramienta valiosa, porque te permiten visualizar y comprender la experiencia completa del usuario. Te ayudan a empatizar con los usuarios, identificar problemas y frustraciones, y encontrar oportunidades para mejorar. Al centrarte en el viaje completo, en lugar de solo en puntos individuales de interacción, puedes crear experiencias más coherentes, integradas y satisfactorias para el usuario.

‍

Sitemaps y arquitectura de información

‍

Los sitemaps son una herramienta crucial en la arquitectura de información, proporcionando una visión clara de la estructura organizativa y jerárquica de un sitio web o aplicación. Son fundamentales para el diseño UX, ya que ayudan a planificar la disposición del contenido y las rutas de navegación de manera que sean intuitivas y eficientes para el usuario. A continuación, se detallan aspectos esenciales sobre los sitemaps y la arquitectura de información:

‍
Definición y función de sitemaps

• ¿Qué es un Sitemap?
  Un sitemap es un diagrama o representación visual que muestra la organización de contenido de un sitio web. Muestra cómo están estructuradas y conectadas las distintas páginas o secciones, permitiendo a los diseñadores y a los interesados comprender la disposición y jerarquía del sitio.
  ‍
• Función del Sitemap
  La principal función de un sitemap es planificar y clarificar la estructura del sitio web o aplicación. Ayuda a diseñadores, desarrolladores y stakeholders a visualizar cómo el usuario navegará por el sitio y cómo se organizará la información.

‍
Creación de sitemaps

• Identificación de Componentes
  Empieza por identificar todas las páginas y secciones principales que necesitas en el sitio web o aplicación. Esto incluye páginas de inicio, de contacto, categorías principales, funciones del producto, entre otros.
  ‍
• Organización Jerárquica
  Una vez identificados los componentes, organízalos jerárquicamente. La página de inicio suele estar en la parte superior, seguida de las categorías o secciones principales y sus subsecciones correspondientes. Esta jerarquía debe reflejar la importancia y el flujo natural de navegación.
  ‍
• Visualización del Sitemap
  Utiliza herramientas de diagramación o software de diseño UX para crear una representación visual del sitemap. Esto puede ser tan simple como un diagrama de árbol o un esquema más detallado que muestre interacciones específicas.

‍

Consideraciones en la arquitectura de información

• Intuitiva y Accesible
  La arquitectura de información debe ser intuitiva. Los usuarios deben poder encontrar lo que buscan fácilmente, sin confusiones ni frustraciones. Asegúrate de que las categorías y subcategorías sean lógicas y que los términos utilizados sean claros y comunes.
  ‍
• Flexible y Escalable
  La estructura debe ser lo suficientemente flexible para acomodar contenido adicional o cambios en el futuro. Una buena arquitectura de información puede crecer y adaptarse con el tiempo sin requerir una revisión completa.
  ‍
• Consistente
  Mantén una consistencia en la nomenclatura, el estilo y la disposición a lo largo del sitio. Esto no solo mejora la estética sino que también ayuda a los usuarios a familiarizarse con la navegación del sitio más rápidamente.

‍
Los sitemaps y la arquitectura de información son fundamentales en el proceso de diseño UX, asegurando que el contenido sea accesible y comprensible para los usuarios. Al invertir tiempo en la planificación cuidadosa de un sitemap y en la consideración meticulosa de la arquitectura de información, se pueden crear experiencias de usuario que no solo satisfagan sus necesidades sino que también faciliten una interacción agradable y sin esfuerzo.

‍

Prototipado y test de usuarios

El prototipado y el test de usuarios son etapas cruciales en el proceso de diseño de experiencia de usuario (UX). Permiten a los diseñadores visualizar y probar ideas de diseño antes de desarrollar completamente el producto, identificando problemas y oportunidades de mejora a través de feedback real de los usuarios. A continuación, se desglosan estos dos procesos esenciales:

‍

Prototipado

• ¿Qué es el Prototipado?
  El prototipado es la creación de modelos funcionales o semi-funcionales de un producto para explorar, comunicar y validar ideas de diseño. Los prototipos pueden variar en fidelidad, desde bocetos a mano (baja fidelidad) hasta versiones interactivas casi completas (alta fidelidad).
  ‍
• Propósito del Prototipado
  El objetivo principal es experimentar y iterar diseños rápidamente antes de invertir tiempo y recursos en el desarrollo. Los prototipos ayudan a visualizar cómo funcionarán las soluciones de diseño en la práctica y facilitan la recolección de feedback temprano y continuo.
  ‍
• Tipos de Prototipos
  Dependiendo de lo que se necesite testear o comunicar, puedes elegir entre varios niveles de fidelidad:
  -Bocetos (Sketches): Rápidos y de baja fidelidad, útiles para las primeras etapas de brainstorming.
  -Wireframes: Más detallados, muestran la disposición de los elementos en la página.
  -Mockups: Visualmente más cercanos al diseño final, pero estáticos.
  -Prototipos Interactivos: Permiten interacción del usuario, simulando la experiencia del producto final.

‍

Test de usuarios

• ¿Qué es el Test de Usuarios?
  El test de usuarios es un proceso de investigación que involucra observar a usuarios reales mientras interactúan con el prototipo para identificar problemas de usabilidad, entender comportamientos y recolectar opiniones y preferencias.
  ‍
• Implementación del Test de Usuarios
  Para realizar tests de usuarios efectivos, sigue estos pasos:
  -Reclutamiento: Elige participantes que representen a tu audiencia objetivo.
  -Preparación del Test: Define las tareas que los usuarios intentarán completar y prepara preguntas o encuestas para después del test.
  -Conducción del Test: Observa y registra cómo los usuarios interactúan con el prototipo. No intervengas a menos que sea necesario.
  -Análisis de Resultados: Analiza las grabaciones, notas y encuestas para identificar patrones y problemas recurrentes.
  ‍
• Beneficios del Test de Usuarios
  Los tests de usuarios ofrecen una visión invaluable sobre la experiencia real del usuario. Pueden revelar problemas que los diseñadores no habían previsto, validar o refutar suposiciones, y proporcionar ideas para mejorar la usabilidad y satisfacción del usuario.

‍

Iteración basada en feedback

Una vez recopilado el feedback de los usuarios, el siguiente paso es iterar el diseño. Usa los insights recogidos para hacer ajustes y mejoras en el prototipo. Este proceso de iteración puede ocurrir varias veces, refinando continuamente el diseño hasta que satisfaga las necesidades y expectativas de los usuarios.

‍
Documentación y comunicación

Documenta los hallazgos y las decisiones tomadas durante el prototipado y el test de usuarios. Comunica claramente cómo el feedback ha influido en el diseño y qué cambios se han realizado. Esta documentación es vital para el equipo de desarrollo y otros stakeholders para entender el proceso de diseño y las razones detrás de las decisiones tomadas.

El prototipado y el test de usuarios son fundamentales en el diseño centrado en el usuario, permitiendo a los equipos crear productos más efectivos, eficientes y satisfactorios. Al involucrar a los usuarios desde las primeras etapas y iterar basado en su feedback, puedes asegurar que el producto final no solo sea usable, sino también deseado por tu audiencia objetivo.

‍

Convivencia entre Diseño UX y UI

El diseño de experiencia del usuario (UX) y el diseño de interfaz de usuario (UI) son dos aspectos fundamentales del diseño de productos digitales que, aunque distintos, deben trabajar juntos armónicamente para crear productos exitosos y agradables. Entender cómo coexisten y se complementan es esencial para cualquier proyecto de diseño. Aquí se desglosan sus roles y cómo interactúan:

‍

Definiciones y roles

• Diseño UX (Experiencia de Usuario)
  El diseño UX se centra en la experiencia general que un usuario tiene con un producto o servicio. Se preocupa por cómo se siente el usuario al interactuar con el producto, la facilidad de uso, la eficiencia en la realización de tareas y la resolución de problemas y necesidades del usuario de forma efectiva. Involucra investigación, desarrollo de prototipos, pruebas y iteración.
  ‍
• Diseño UI (Interfaz de Usuario)
  El diseño UI se concentra en los aspectos visuales y táctiles de la interfaz de usuario. Incluye la selección de colores, tipos de letra, disposición de elementos, iconografía y otros componentes visuales. El objetivo del diseño UI es crear interfaces claras, atractivas y coherentes que inviten y faciliten la interacción del usuario.

‍
Interacción y colaboración

• Flujo de trabajo integrado
  En un proyecto típico, el diseño UX precede al diseño UI en el proceso de desarrollo del producto. Primero, se define la estructura, el flujo y la funcionalidad (UX), y luego se trabaja en la estética y la presentación (UI). Sin embargo, este proceso no es lineal ni estrictamente separado; hay una constante retroalimentación y colaboración entre ambos roles.
  ‍
• Complementariedad
  Mientras el diseño UX define cómo funciona el sistema, el diseño UI influye en cómo el usuario percibe y se siente acerca del sistema. Una interfaz atractiva puede mejorar significativamente la experiencia del usuario, mientras que una excelente experiencia de usuario puede compensar deficiencias en el diseño visual. Juntos, crean un producto cohesivo y eficaz.

‍
Importancia de la convivencia

• Balance entre funcionalidad y estética
  Un producto debe ser tanto funcional como visualmente atractivo para ser exitoso. Una gran UX con una mala UI puede llevar a un producto que, aunque útil, es abandonado por su falta de apelación o intuitividad visual. Por otro lado, una hermosa UI con una mala UX puede resultar en un producto frustrante que los usuarios no pueden o no quieren usar.
  ‍
• Comunicación y colaboración
  Los diseñadores UX y UI deben comunicarse y colaborar estrechamente. La retroalimentación constante y el entendimiento mutuo de objetivos, limitaciones y posibilidades son esenciales para que ambos aspectos del diseño se complementen efectivamente.
  ‍
• Unificación de objetivo
  Aunque con enfoques distintos, tanto el diseño UX como el UI comparten el objetivo común de satisfacer las necesidades del usuario y proporcionar una experiencia positiva. La colaboración entre UX y UI debe estar siempre orientada a mejorar la satisfacción y la eficacia del usuario final.

‍

Influencia del Diseño UX en el Posicionamiento SEO

El diseño de experiencia del usuario (UX) juega un papel crucial en el posicionamiento SEO (Search Engine Optimization) de un sitio web. Si bien SEO se refiere tradicionalmente a la optimización de contenido y metadatos para motores de búsqueda, la experiencia del usuario se ha convertido en un factor cada vez más importante para los algoritmos de ranking. Aquí se detalla cómo el diseño UX afecta al SEO y cómo puedes optimizar ambos para mejorar la visibilidad y el rendimiento de tu sitio web:

‍
1. Interacción del Usuario y Tiempos de Permanencia

• ‍‍Experiencia Agradable: Un sitio bien diseñado con una excelente UX invita a los usuarios a quedarse más tiempo, explorar más páginas e interactuar más con el contenido. Los motores de búsqueda interpretan estos comportamientos como señales de que el sitio es valioso y relevante, lo que puede mejorar su ranking.
  ‍
• Tiempos de Carga: Los sitios que cargan rápidamente y permiten una navegación fluida tienen tasas de rebote más bajas. Los tiempos de carga son un factor conocido en el SEO, por lo que optimizar la velocidad del sitio es esencial para ambos, UX y SEO.

‍
2. Diseño Responsive y Accesibilidad

• ‍‍Multi-dispositivo: Un diseño responsivo que se adapta a diferentes tamaños de pantalla y dispositivos es crucial para la UX y SEO. Los motores de búsqueda, especialmente Google, prefieren sitios que ofrecen una buena experiencia en móviles y pueden penalizar aquellos que no lo hacen.
  ‍
• Accesibilidad: Asegurarse de que tu sitio web sea accesible para usuarios con diferentes capacidades también puede influir positivamente en el SEO. La inclusión de descripciones alt en imágenes, el uso de encabezados claros y la navegación intuitiva son buenos tanto para la accesibilidad como para el SEO.

‍
3. Contenido Claro y Estructurado

• ‍‍Jerarquía de Información: Una buena UX implica presentar la información de manera clara y lógica. Los sitios que utilizan correctamente los encabezados (H1, H2, H3...) no solo ayudan a los usuarios a entender el contenido, sino que también permiten a los motores de búsqueda comprender la estructura y relevancia del contenido.
  ‍
• Etiquetas y Metadatos: Las etiquetas de título, las descripciones meta y las etiquetas de encabezado deben ser informativas y relevantes para el contenido. Esto no solo mejora la comprensión del usuario sino que también es crucial para el SEO.

‍
4. Enlaces Internos y Estructura de Navegación

• ‍‍Navegación Intuitiva: Una estructura de navegación lógica y enlaces internos no solo ayuda a los usuarios a encontrar información relevante fácilmente, sino que también permite a los motores de búsqueda rastrear e indexar el sitio más eficientemente.
  ‍
• Enlaces de Calidad: Los enlaces a contenido relevante y de alta calidad dentro de tu propio sitio fomentan una mayor interacción y tiempo de permanencia, señales positivas para el SEO.

‍

Tendencias en Diseño UX/UI

1. Experiencias Inmersivas y Realidad Aumentada

Las tecnologías de Realidad Aumentada (AR) y Realidad Virtual (VR) están llevando el diseño UX/UI a nuevos territorios, permitiendo experiencias más inmersivas que conectan el mundo físico con el digital. Esto incluye desde aplicaciones de comercio electrónico que permiten a los usuarios visualizar productos en su espacio hasta experiencias de aprendizaje o entretenimiento completamente inmersivas. La clave está en diseñar interfaces que sean naturales e intuitivas, aprovechando al máximo las posibilidades espaciales y contextuales que estas tecnologías ofrecen.

• URL de Referencia: Augmented Reality in UX Design

‍

2. Diseño Inclusivo y Accesibilidad

El diseño inclusivo se enfoca en crear productos que sean accesibles y utilizables por la mayor cantidad posible de personas, incluyendo aquellas con discapacidades. Esto significa considerar una amplia gama de habilidades humanas, culturas e idiomas desde el inicio del proceso de diseño. Las directrices de accesibilidad web, como WCAG, son fundamentales para entender y aplicar estos principios. El diseño inclusivo no es solo una responsabilidad ética sino también una oportunidad de mercado al alcanzar una audiencia más amplia.

• URL de Referencia: Inclusive Design at Microsoft

‍

3. Inteligencia Artificial y Aprendizaje Automático

La inteligencia artificial y el aprendizaje automático están siendo cada vez más integrados en el diseño UX/UI para crear experiencias personalizadas y dinámicas. Desde chatbots que mejoran la interacción del cliente hasta sistemas que adaptan interfaces en tiempo real según el comportamiento del usuario, la IA puede aumentar la eficiencia y efectividad del diseño. Sin embargo, también plantea desafíos en términos de privacidad y ética que deben ser considerados cuidadosamente.

• URL de Referencia: AI in UX Design

‍

4. Diseño Ético y Sostenible

El diseño ético y sostenible toma en cuenta el impacto a largo plazo de los productos en individuos y sociedades, así como su huella ambiental. Esto incluye desde asegurar la privacidad y seguridad de los datos hasta minimizar el consumo energético y los residuos electrónicos. En una era de preocupación creciente por el bienestar digital y el cambio climático, los diseñadores tienen un papel crucial en la creación de soluciones responsables y sostenibles.

• URL de Referencia: Ethical Design Guide

‍

5. Microinteracciones y Animaciones Detalladas

Las microinteracciones son pequeños momentos en el diseño de productos que cumplen una función y proporcionan retroalimentación al usuario, como el sonido de refresco de una página o la animación de un botón al ser clickeado. Estas no solo aumentan la usabilidad del producto, sino que también mejoran la experiencia del usuario al hacerla más agradable y personal. Las animaciones detalladas, por su parte, ayudan a guiar al usuario a través de las tareas y pueden hacer que la interfaz se sienta más viva y reactiva.

• URL de Referencia: Microinteractions in UI

‍

6. Neumorfismo, Material Design y Evolución de Estilos Visuales

El Neumorfismo es un estilo de diseño que simula la fisicalidad a través de sombras suaves y efectos de luz, ofreciendo un aspecto minimalista y realista. El Material Design, por otro lado, es un lenguaje de diseño desarrollado por Google que destaca las superficies táctiles, las respuestas realistas y las animaciones fluidas. Ambos son ejemplos de cómo los estilos visuales en UX/UI están evolucionando para ofrecer experiencias más ricas y envolventes, al mismo tiempo que mejoran la usabilidad y coherencia.

• URL de Referencia: Neumorphism in User Interfaces

‍

Estas tendencias son solo la punta del iceberg en el vasto y cambiante campo del diseño UX/UI. Es importante estar al tanto de estos desarrollos y entender cómo pueden aplicarse o influir en tu propio trabajo de diseño. Las URLs proporcionadas son puntos de partida para explorar cada tendencia en más profundidad.

Diseñar para niños es un reto complicado, porque a la mayor parte de los adultos se nos olvida cómo razonan, procesan la información, se enfrentan a los retos, juegan y se divierten los niños.

‍

La forma en que hacemos todo esto cambia con el paso de la niñez a la adolescencia y aún más en la edad adulta, y enfocar un trabajo para el público infantil pasa por poder entender cómo reaccionan los niños ante lo que se les ofrece. Esto pasa en todos los sectores, y también en el caso del diseño web.

Cuando se trata de diseñar un entorno web para niños, la mejor recomendación es hacerlo desde cero.

Intentar adaptar un sitio web pensado para adultos para que guste a los niños es una receta para el fracaso; es mejor liberarse de ataduras, salir de la zona de confort y enfocar el proyecto con otros ojos. De todas formas, que los diseñadores web deban salirse de sus guidelines habituales en proyectos pensados para público adulto no significa que no existan una serie de guías ya probadas por expertos que nos puedan servir para evitar cometer errores.

Grupos de edad distintos, diseño distinto

Los niños no son un público: son muchos y muy distintos, en función de su edad. No es lo mismo un niño de 5 años que uno de 12.

‍

En su libro Design for Kids, Debra Gelman identifica 4 grupos en los niños de hasta 12 años de edad, y facilita guías sobre cómo diseñar para ellos en función de la etapa de desarrollo en que se encuentran. En resumen:

‍

• Niños de 2 a 4 años: están experimentando el mundo por primera vez, todo es nuevo; si algo se mueve, ¡mola! En el diseño para ellos deberían reforzarse todos aquellos elementos con los que se pueda interactuar.
• Niños de 4 a 6 años: se desarrolla el ego y la necesidad de comunicarse. En el diseño debemos fomentar la creatividad y la autoexpresión, así como dar feedback positivo de forma inmediata cuando corresponde.
• Niños de 7 a 9 años: empiezan a entender símbolos y significados, aunque de forma simple. En nuestros diseños podemos expresar una serie de normas claras y hacer uso de la gamificación para recoger recompensas.
• Niños de 10 a 12 años: en esta edad empiezan a razonar de forma más parecida a los adultos; tiene sentido el uso de ayudas contextuales, especialmente en caso de error, y notificaciones que reafirman el trabajo bien hecho cuando hay cumplimiento del objetivo marcado.

Obviamente la lista anterior muestra únicamente algunas de las diferencias más notables entre estos grupos de edad, lo que no oculta la dificultad de diseñar para cada uno de estos grupos; pero nos sirven de ejemplo para entender que la aproximación no puede ser la misma.  

De hecho, es importante tener en mente estos grupos de edad en todo lo relacionado con el diseño: color, tipografía, texto (¡los más pequeños no reconocen palabras!), animaciones, vídeos...

Privacidad: la protección de datos en el caso de los niños

En 2018 la UE reformó la normativa sobre protección de datos, con el objetivo de que las personas tengamos más control sobre nuestros datos personales. En el caso de los menores, no debemos olvidar, precisamente, que son menores. Sus datos cuentan con protección adicional, porque los menores son menos conscientes de los riesgos y consecuencias que implica compartir datos y tienen un menor conocimiento de sus derechos. Según la nueva normativa de la UE, toda información expresamente dirigida a menores deberá estar adaptada para ser fácilmente accesible, utilizando un lenguaje claro y sencillo.

En la mayoría de los servicios online se requiere el consentimiento de los padres o tutores para tratar los datos personales de los menores, basándose en el consentimiento hasta una determinada edad. La edad límite para obtener el consentimiento parental varía entre 13 y 16 años, en función de la edad que establezca cada Estado miembro de la UE. Los controles para comprobar que los padres han dado su autorización deben ser eficaces, por ejemplo mediante un mensaje enviado a una dirección de correo electrónico del padre o de la madre.

En conclusión, diseñar para niños implica que los diseñadores deben salir de sus directrices habituales para adaptarse a las peculiaridades del público al que se dirigen. Un público que a esas edades necesita, sobre todo, entretenerse, jugar y formarse. También es importante entender que aunque el diseño debe estar fundamentalmente orientado a los niños, en muchos casos será también preciso diseñar para los padres, que les estarán acompañando en el proceso.

Y un último consejo: ¿verdad que cuando una web es lenta nos impacientamos y pasamos a otra cosa? Recuerda que en el caso de los niños la impaciencia es mayor y el pasar a otra cosa se produce mucho antes.

Smartbrand siempre ha destacado por la simplicidad y naturalidad: “Menos es más.”

Como en cualquier agencia, el trabajo de nuestros clientes es lo primero, por lo que no siempre hemos tenido la disponibilidad de dedicarnos el tiempo necesario.

A lo largo de los últimos 7 años de actividad, hemos crecido tanto y trabajado tan duro para llegar a un punto que nos permite parar, respirar y reenfocar nuestra marca.

Queremos celebrar este crecimiento aplicando a nuestra propia marca el mismo principio de simplicidad y naturalidad que dedicamos al trabajo de nuestros clientes, presentando una nueva identidad de marca, un nuevo posicionamiento y un sitio web renovado.

Elevamos Smartbrand a una posición más sofisticada y, a la vez, muy simple, y hemos creado un sitio web que representa nuestras capacidades, cultura y valores.

El posicionamiento y 'The power of nice.'

Construimos el nuevo posicionamiento de Smartbrand en base a los conceptos principales que nos representan: nice, innovación y digital.

Los conceptos ‘innovación’ y ‘digital’ se trasladan a cualquier material de marketing y comunicación. A nuestro dominio, a la experiencia y diseño de interfaz de usuario del sitio web, a nuestras landing pages, al portfolio renovado de servicios, a las presentaciones corporativas, a las tarjetas corporativas, a los presupuestos, a las facturas, a las notas de prensa...

¿Qué es 'The power of nice.'?

‘The power of nice.’ es nuestra ventaja competitiva. Es el resultado de los cuestionarios que compartimos con el equipo y con algunos clientes para descubrir qué arquetipo de Jung dominante somos, y poder así trasladar sus valores a la personalidad y tono de nuestra marca. Somos el arquetipo ‘Héroe’, cuyas características son:

• Lema: Donde hay voluntad, hay camino
• Deseo básico: Demostrar la propia valía a través de actos valientes
• Objetivo: Superarse a sí mismo y mejorar el mundo con sus actos
• Mayor temor: La debilidad, la vulnerabilidad, ser un cobarde
• Estrategia: Ser tan fuerte y competente posible
• Debilidad: Arrogancia, siempre necesita otra batalla para luchar
• Talento: La competencia y la valentía

‍

El posicionamiento ‘The power of nice.’ no lo verbalizamos, lo diluimos en los copys de nuestra web, en nuestro vídeo corporativo y vídeos de casos de éxito, en nuestro tagline _ W E L C O M E _ H U M A N _ H O N E S T _ D I G I T A L, en nuestro Instagram, y por encima de todo, lo aplicamos en el tono de comunicación y el tipo de relación que promovemos con nuestros clientes.

El logo y los elementos de diseño e interacción

No hay un solo proyecto de diseño en Smartbrand que no comience con una cuadrícula. La alineación es un componente muy importante para el diseño, por lo que comenzar con una cuadrícula es obligatorio. Para romper las reglas es necesario conocerlas.

Nuestro logotipo tiene la misma base que su predecesor. La nueva marca sigue presentándose en minúsculas para asegurar que rompe las reglas y que siempre se percibe grande y simple. Hemos reducido nuestra paleta de colores a cuatro colores: amarillo, gris, blanco y negro, y la tipografía corporativa a una: Montserrat.

Incorporamos nuevos elementos de diseño para destaque, orden y legibilidad de contenidos.

Los nuevos elementos de interacción potencian nuestro carácter innovador y creativo.

El sb

La mayoría de las personas que acceden a nuestros sitios webs y canales se pueden clasificar en dos grupos: aquellos que quieren trabajar en la agencia y aquellos que quieren contratarnos. En el momento de rediseñar nuestra marca, nos propusimos crear una experiencia que identificara el trabajo que hacemos con estilo y sencillez para ambos grupos de audiencia. Lo que se nos ocurrió es el icónico "sb". Este es nuestro símbolo, con un grandísimo potencial de brand awareness como tributo a las cosas que nos apasionan.

La simplicidad del sb es un diseño que salió a la luz tras múltiples iteraciones. Hemos probado innumerables creatividades para dotar a sb de vida que iremos presentando poco a poco. Lo hemos llevado incluso a nuestro dominio y cuentas de correo: sb.digital.

El sitio web

El principio de simplicidad y naturalidad que ha inspirado todo este proceso de renovación es también la base para la última versión de nuestra web: https://sb.digital. El nuevo sitio está conceptualizado como mobile first, por lo que no importa desde qué dispositivo se acceda, la experiencia es única y común. Queremos que el contenido sea el foco principal, ya sea un artículo, vídeo, imagen, o caso de éxito.

sb.digital presenta una navegación doble, la habitual a través del menú hamburguesa, y una navegación horizontal común a cualquier dispositivo y resolución. La navegación horizontal busca potenciar las páginas con mayor potencial de posicionamiento y conversión.

Tecnología

A nivel back-end, sb.digital corre sobre WordPress con theme propio y protocolo HTTPS, y hemos creado objetos propios (POO) para la óptima obtención de datos, y desarrollado Custom Post Fields y Custom Post Types para garantizar la seguridad y el mínimo esfuerzo de gestión. Hemos probado e implementado numerosos recursos, incluyendo Rel-prerender y Transition Page. A nivel front-end, hemos desarrollado el site con tecnologías HTML5, CSS3, JavaScript (jQuery, TypeScript), Handlebars.js y Gulp.js.

Seguiremos evolucionando sb.digital y haciéndola mejor día a día. Porque no hemos terminado. La innovación nunca termina.

Facilitar y mejorar la experiencia de los usuarios es siempre el gran objetivo final de un análisis UX. La mayor parte del trabajo se dedica a conocer a los diferentes tipos de usuarios que van a usar el producto y cuáles son sus necesidades para trasladarlas al diseño final de la mejor manera posible. No obstante, y aún habiendo diseñado y desarrollado un sitio acorde a las necesidades del público objetivo, sigue siendo necesario que el sitio responda a las particularidades y demandas específicas de cada persona en la medida de lo posible. Es aquí donde aparece el concepto de Anticipatory Design.

Anticipatory Design consiste en adelantarse a las necesidades de los usuarios y ser capaces de ofrecerles soluciones, simplificándoles tareas y personalizando la experiencia de cada uno de ellos individualmente. Estas soluciones se pueden traducir tanto en cambios en la interfaz como en la manera en que se presenta la información en el dispositivo. Estas prácticas crean un mayor vínculo entre el usuario y el producto, pues la persona percibe que el sistema responde a lo que necesita en cada momento. El uso de algoritmos permite además que el sistema pueda aprender más sobre el usuario y ofrecerle mejores respuestas con el paso del tiempo.

Siempre se ha dicho que ofrecer al usuario diferentes posibilidades donde escoger era sinónimo de una gran experiencia, pero en muchas ocasiones la clave es facilitarle al usuario esa toma de decisiones, proporcionándole únicamente las opciones que realmente encajan en su caso. Cuantas más opciones sobre la mesa, más tendrá que esforzarse la persona en tomar una decisión y más tardará en tomarla. Es lo que se llama Esfuerzo Cognitivo y existen varias maneras de reducirlo.

Simplificar la selección

Esto se logra mostrando sugerencias basadas en algoritmos que rellenan información automáticamente, basándose en el historial y las preferencias del usuario en el propio sitio. Kayak o Skyscanner son buenos ejemplos de cómo reducir este Esfuerzo Cognitivo en lo que se refiere a la búsqueda de vuelos. ¿Cómo? Durante el proceso, ciertos campos que no varían en la mayor parte de cada búsqueda, como puede ser el aeropuerto de origen del usuario, son rellenados automáticamente. También memorizan los destinos más frecuentes y populares o muestran cuáles son las mejores fechas para viajar desde tu ciudad. En el caso de un ecommerce, ¿tiene sentido tener que seleccionar siempre tu talla de ropa en cada sesión? Amazon la recuerda tras la primera compra.

Anticipar elecciones

Se trata de aplicar cambios en tu sitio web o aplicación que provoquen un beneficio al usuario sin que exista interacción por su parte. Plataformas como Netflix o Spotify llevan ya tiempo aplicando el concepto de Anticipatory Design en sus productos, recomendando películas en función del historial del usuario, o canciones de géneros o grupos similares en relación a las playlists que éste escucha.

Editar las opciones

Consiste en definir qué opciones se le presentan al usuario en función de cada caso. A la hora de buscar hotel entran en juego muchas variables (categoría, valoración, servicios…), pero totalmente secundarias. En el caso de TripAdvisor, el buscador principal ofrece únicamente tres campos en la home: destino, fechas y tipo de habitación/nº de personas. Una vez se muestran los resultados se visualizan entonces sí otros criterios y el usuario los puede ajustar si es necesario.

La conclusión es que los usuarios suelen retornar con más facilidad a productos y servicios que cumplen con lo que ellos quieren y necesitan. Esta personalización y simplificación de tareas también se acaba traduciendo en una mayor conversión para el cliente, pues los procesos generan menos frustración en el usuario. Según un estudio de la compañía de software Janrain, el 74% de los usuarios experimenta algún tipo de frustración cuando el contenido que se muestra en un sitio no tiene relevancia en relación a sus intereses.

Es importante recordar que Anticipatory Design no consiste en tomar decisiones por el usuario, sino en la eliminación de lo superfluo, cualquier posible distracción o elemento innecesario para que la persona pueda tomar decisiones con la información que ese momento estrictamente necesita.

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.

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.