5.5: Implementación del diseño UX
- Page ID
- 67149
El proceso de diseño de UX ocurre antes, durante y después de que se construya el sitio web. Se vincula muy estrechamente con la estrategia y la investigación, el desarrollo y diseño web, el SEO, la estrategia y creación de contenidos, y la posterior optimización de conversiones.
Como se discute en la sección 5.4, Principios básicos del diseño de UX, el móvil no debe ser una idea tardía, en UX o cualquier otro esfuerzo digital. Se debe priorizar en estrategia, diseño e implementación. El movimiento 'mobile first 'apoya esta noción, y tiene como objetivo crear primero experiencias de usuario móvil, y luego adaptarlas para la web (en lugar de al revés). Diseñar de esta manera tiene muchas ventajas, ya que los principios de una buena UX móvil funcionan igual de bien en sitios completos utilizando diseños simples, interfaces lineales y botones claros y características.
Realizar investigaciones y descubrimientos
El primer paso consiste en realizar investigaciones detalladas sobre el negocio, los usuarios y la tecnología involucrada. Esto se cubre completamente en el capítulo de toma de decisiones impulsada por datos, que incluye la investigación de usuarios. Hacer esto permite a los profesionales de UX saber exactamente lo que necesitan hacer para abordar las necesidades de la empresa y la audiencia. Esto generará una gran cantidad de datos que necesitan ser filtrados y organizados.
Crear la estructura básica del sitio
La arquitectura de la información (IA) consiste en administrar la información, tomar muchos datos sin procesar y aplicarle herramientas y técnicas para que sea manejable y utilizable. Las categorías y páginas deben fluir de amplias a estrechas. Una estructura de diseño intuitivo guiará al usuario hacia los objetivos del sitio.
IA opera tanto en el nivel micro como en el macro cubriendo todo, desde la forma en que se presentan las páginas individuales, por ejemplo dónde están la navegación y los encabezados, hasta la forma en que se juntan sitios web completos.
La mayoría de los sitios web tienen una estructura jerárquica, lo que significa que hay páginas amplias e importantes en la parte superior, y páginas más estrechas, más específicas y menos importantes más abajo. Las estructuras jerárquicas pueden ser muy amplias y superficiales teniendo muchas secciones principales con pocas páginas inferiores o muy estrechas y profundas con pocas secciones principales y muchas páginas abajo. Depende del practicante de UX encontrar el equilibrio adecuado de amplitud y profundidad.
Analizar contenido
Si estás trabajando en un sitio web que ya existe, se llenará con una amplia variedad de contenido. En este caso, es necesario realizar una auditoría de contenido, que es un examen y evaluación del material existente.
Si el sitio web es nuevo o si planea agregar nuevo contenido a un sitio web existente, debe armar una estrategia de contenido. Este es un plan que describe qué contenido se necesita y cuándo y cómo se va a crear. No hay una sola plantilla o modelo para esto por lo que cada estrategia de contenido será única.
La estrategia de contenido es en gran parte responsabilidad de los equipos de estrategia, copia y concepto, pero el practicante de UX necesita involucrarse en algunos roles clave. Los puntos que UX necesita abordar son:
Lee más sobre esto en el capítulo Estrategia de marketing de contenidos.
- Lo que debe lograr el sitio. Naturalmente, el contenido debe trabajar hacia el logro de los objetivos del sitio y del negocio.
- Lo que el usuario quiere y necesita. Al realizar una investigación exhaustiva de usuarios deberías poder responder a esta pregunta. Proporcionar solo contenido que agregará valor real al usuario.
- Lo que hace que el contenido sea único, valioso o diferente. El contenido necesita aportar valor al usuario. Una estrategia de contenido ayudará a garantizar que el contenido se actualice regularmente e incluirá información actualizada.
- El tono y lenguaje utilizado. Debes considerar el tono, ya sea divertido, ligero o serio, el registro, ya sea formal o informal y el estilo que usarás en todo tu contenido. Asegúrese de que el tono, el estilo y el registro sean consistentes en texto, imágenes, videos y otros tipos de contenido. La gramática y la ortografía correctas son consideraciones importantes ya que hablan de la credibilidad del sitio.
Principios de creación de contenido
Hay tres puntos clave que debes considerar aquí.
1. Estructura
El contenido debe escribirse para que los usuarios puedan encontrar la información que necesitan lo más rápido posible. El capítulo sobre Redacción digital cubrirá esto con más detalle. La copia se puede hacer más fácil de leer mediante:
No olvides el SEO. Hay muchas maneras en las que un sitio web se puede optimizar durante el proceso de planificación de UX. Echa un vistazo al capítulo de SEO para conocer algunas pautas sobre qué incluir.
- Destacar o negritar frases y palabras clave
- Uso de listas con boletines
- Uso de párrafos para romper la información
- Utilizando rúbricas descriptivas y distintas.
2. Jerarquía
En la página, usa un estilo piramidal invertido o una estructura F para tu copia. La información importante debe estar en la parte superior de la página, para facilitar el escaneo visual. El encabezado viene primero y es el tipo más grande y audaz de la página. El subtítulo o nota publicitaria sigue a esto, y luego el contenido se presenta en una escala descendente de importancia. Las oraciones deben ser cortas y las palabras importantes deben aparecer al principio de la oración, especialmente en viñetas. La investigación de seguimiento ocular ha demostrado que la estructura F sigue siendo la estructura más fácil de usar, ya que este es el flujo natural del ojo (Hanes, 2016).
3. Relevancia
Sobre todo, el contenido de la página debe ser relevante para el usuario y la finalidad de la misma página. Si un usuario hace clic para leer sobre un producto pero termina en una página con contenido sobre la empresa, su experiencia se va a empañar.
Crear un mapa del sitio
En la terminología UX, un mapa del sitio es el plan estructural visualizado de cómo se diseñarán y organizarán las páginas del sitio web.
Para crear las imágenes para tu mapa del sitio, puedes seguir este proceso:
- Comienza definiendo tu página de inicio. Este debería ser el elemento superior de la jerarquía.
- Coloque los elementos principales de navegación debajo de esto.
- Organice sus páginas de contenido debajo de los elementos principales de navegación, de acuerdo con los resultados de sus pruebas y conocimientos de usuario, y su estructura de arquitectura de información.
- Agrega páginas debajo de esto hasta que hayas colocado todo tu contenido. Asegúrese de que todas las páginas sean accesibles desde al menos otra página. Puede parecer obvio, ¡pero te sorprendería la frecuencia con la que se pasa por alto esto!
- Defina cualquier otro elemento de navegación estática, es decir, el pie de página, la barra lateral, la navegación de encabezado, Colóquelos en su diagrama en un lugar lógico que posiblemente se ramifique directamente desde la página principal, o como bloques separados.
El término 'sitemap' puede tener dos significados. Una es la forma en que se define anteriormente: el plan estructural del sitio web. La otra es una página en su sitio web que enumera todas las páginas disponibles de una manera lógica y accesible. Un ejemplo es el mapa del sitio web de Apple: www.apple.com/sitemap. Este mapa del sitio debe estar disponible en todas las páginas. Se pueden emplear mapas de sitio dinámicos para que el mapa del sitio se actualice automáticamente a medida que se agrega información al sitio web. Existen diferentes sitemaps para diferentes propósitos, así que investiga lo que tus usuarios encontrarían más útil.
Construye la navegación
La navegación debe guiar a los usuarios fácilmente a través de todas las páginas de un sitio web; no se trata solo de menús. Una navegación exitosa debería ayudar a un usuario a responder cuatro preguntas básicas:
1. ¿Dónde estoy?
La navegación debe informar a los usuarios en dónde se encuentran en el sitio. Los enlaces de migas de pan, los títulos claros de las páginas, las URL y los cambios de menú ayudan a mostrar al usuario dónde está. Cuanto más grande sea tu sitio y cuantos más niveles tenga, más importante se vuelve dar a tus usuarios un indicador de dónde se encuentran en relación con todo lo demás en el sitio. Esto ayuda a los usuarios a comprender el contenido de la página en la que se encuentran, y los hace sentir más seguros para navegar más a través del sitio.
2. ¿Cómo llegué aquí?
La navegación por migas de pan a menudo indica la ruta general que un usuario puede haber tomado. En el caso de la búsqueda en el sitio, la palabra clave utilizada debe indicarse en la página de resultados.
3. ¿A dónde puedo ir después?
Las pistas de navegación permiten a un usuario saber a dónde ir a continuación, como 'agregar al carrito' en un sitio de comercio electrónico, o un enlace contextual que indica 'leer más'. La clave es dejar claras las opciones al usuario.
Hay una tendencia, al pensar en la navegación, a planear en una sola dirección, desde la página principal hacia abajo en la cadena de páginas en la jerarquía. Pero muy a menudo, los usuarios llegan al sitio desde un enlace o resultado de búsqueda que los deja caer profundamente en el sitio web. Esto hace que sea igualmente importante mirar la navegación inversa llegando de las páginas del nivel inferior a la parte superior.
4. ¿Cómo llego a casa?
Se ha convertido en convención que el logotipo del sitio web lleve al usuario de vuelta a la página principal, pero muchos usuarios aún buscan en el menú principal la palabra 'hogar'. Asegúrate de que puedan volver al principio de forma rápida y sencilla.
Crear la maquetación
Una página web se puede dividir aproximadamente en cuatro zonas:
Cada uno de estos suele contener ciertos tipos de elementos y contenido, tales como:
- El encabezado (en la parte superior de la página) — utilizado para identificar el sitio y proporcionar herramientas básicas: Logotipo o marca de identificación (posiblemente incluyendo el lama de la marca) Navegación principal Función de inicio de sesión Barra de búsqueda
- El área de contenido central — utilizada para presentar el contenido principal El contenido real específico de la página como texto, imágenes, videos y más (esto se puede romper en varias columnas) CTA de diversos tipos como “Regístrate”; “Comenzar”; “Reclama tu prueba gratuita”
Los usuarios consideran que la información en las barras laterales es menos importante, así que no pongas tu mensaje clave aquí.
- La barra lateral (ya sea a la izquierda o a la derecha, o a veces en ambos lados) — utilizada para presentar contenido secundario y herramientas Barra de navegación secundaria, u otras funciones de navegación (por ejemplo, archivo de artículos de blog por fecha)
CTA, incluyendo botones y formularios de registro
Contenido adicional, como enlaces o fragmentos.
- El pie de página (en la parte inferior de la página) — utilizado para contenido y recursos importantes pero no destacados
Información legal, política de privacidad y descargos de responsabilidad
Elementos de navegación adicionales.
La consideración más importante para cualquier diseño de página es el contenido, es decir, ¿qué se debe incluir, cuál es la acción o información más importante y cómo puede estructurarse esto para satisfacer las necesidades del usuario? Después de todo, las páginas web se crean para apoyar el viaje de un usuario. Todas las páginas de su sitio no deben necesariamente verse idénticas.
Creación de bocetos, estructuras de alambre y prototipos
Los wireframes son los contornos esqueléticos del diseño de una página web. Su propósito es trazar la ubicación de diversos elementos en la página como una guía para que el diseñador cree el diseño visual, y el desarrollador web para crear el código y la interactividad requeridos. Los wireframes pueden ser de baja fidelidad (bocetos muy toscos y básicos, que apenas se asemejan a la salida final) o de alta fidelidad (diseños muy detallados y complejos que incluyen elementos creativos). Cualquier proyecto de sitio web tendrá varios wireframes, al menos uno para cada página de plantilla. Capture sus primeras ideas en papel; es la mejor y más rápida manera de capturar buenas ideas.
Los prototipos están un paso adelante de los wireframes, en el sentido de que son interactivos. Los prototipos son esencialmente conjuntos de wireframes que se han vinculado como un sitio web, para que puedan ser navegados haciendo clic y desplazándose.
Los prototipos son excelentes herramientas para probar el flujo y la función de un sitio web propuesto antes de sumergirse en las costosas y largas fases de diseño y desarrollo. Pueden ahorrar mucho tiempo, dinero y esfuerzo al ayudar a identificar problemas y mejoras por adelantado. Nuevamente, la creación de prototipos en papel es el mejor método para un diseño rápido e iterativo de UX.
Ensamblar los demás elementos
Una vez que haya definido su contenido y mapeado el diseño básico de cada página, debe agregar todos los elementos adicionales que necesitará su sitio web. Recuerda que la página solo debe contener los elementos que un usuario pueda necesitar para apoyarlo en su tarea. Estos pueden incluir:
Los prototipos de papel hacen que las pruebas sean rápidas y fáciles. Son portátiles, fáciles de usar y no requieren herramientas complejas, conexiones a Internet o habilidades de usuario. Aplicaciones móviles como Pop (popapp.in) convierten fácilmente prototipos de papel en demostraciones en las que se puede hacer clic. Consulte la sección 5.8, Herramientas del oficio para obtener más información sobre la App Pop
Convocatorias a la acción. Los CTA pueden tomar una variedad de formas y formas, desde enlaces de texto hasta botones grandes.
Formularios. Se trata de campos interactivos donde los usuarios pueden ingresar sus datos de contacto u otra información, por ejemplo, para suscribirse a un boletín o participar en un concurso.
Buscar. Muchos sitios pueden beneficiarse de tener una función de búsqueda, tanto para ayudar a los usuarios a navegar como para facilitar la búsqueda de información específica.
Convocatorias a la Acción
Los CTA exitosos son acciones simples, rápidas y claras que no requieren que el usuario haga nada aterrador o que se comprometa. Siempre deben hacer exactamente lo que afirman para infundir confianza y claridad. Se trata de gestionar las expectativas de los usuarios, ¿realmente van a donde creen que van o realizan la acción que esperan los usuarios?
Posicionamiento
El CTA primario suele aparecer por encima del pliegue para captar la atención enfocada aquí. Otros CTA pueden aparecer debajo del pliegue, y el CTA principal también se puede repetir más abajo.
Priorización
Una sola página web se puede construir alrededor de un CTA, o podría incorporar una amplia gama de posibles acciones deseables. Todo esto se reduce a lo que la página y el sitio web en general buscan lograr, en función de los requisitos del negocio.
Cuando se utilizan múltiples CTA, debe haber uno primario que destaque fuertemente y los otros deben estar más silenciados, desempeñando un papel de apoyo. Los CTA se pueden diferenciar a través del color, la forma, la colocación y el tamaño; cuantas menos opciones, mejor.
Clickability
Cualquier CTA en el que se pueda hacer clic debe verse táctil o táctil. Esto significa que deben sobresalir de alguna manera del fondo y de los elementos estáticos. Un enfoque es hacer que el botón se vea como un botón real, destacándose de su entorno. Otro tren de pensamiento aboga por el enfoque del diseño plano como una expresión más elegante y moderna de esto.
Cantidad
Por último, asegúrese de no abrumar a los usuarios con demasiadas opciones. Apégate a un CTA central por página, haciendo evidente a los usuarios cuál es el objetivo principal, acción o resultado de la página.
Formularios
Los formularios son herramientas extremadamente útiles para recopilar información del usuario y fomentar la interacción en el sitio. Los usuarios generalmente están familiarizados con ellos y tienen cierta experiencia en llenarlos, y hay muchas convenciones web que rigen cómo se deben configurar. Como regla general, cuanto más corto hagas tu forma, mejor. Cuantos menos campos tengan que llenar los usuarios, más probabilidades habrá de completar el proceso.
Pasos y secciones
Formas simples con solo unos pocos campos se pueden ensamblar como una serie de cajas. Para los formularios que son más largos, por ejemplo, los que están en las cajas de eCommerce o procesos complejos de registro, tiene sentido dividirlos en porciones manejables. Administre las expectativas de los usuarios indicando claramente cuál es el siguiente paso.
Relevancia
La simplicidad es una consideración clave, las formas deben ser lo más cortas y claras posible. El esfuerzo debe ser igual a la recompensa ganada. Todos los campos incluidos deben ser claramente relevantes para el propósito del formulario, de lo contrario los usuarios pueden confundirse o sospechar que está recolectando su información.
Es importante que se notifique a los usuarios sobre qué campos se requieren y cuáles son opcionales. Si todos los campos son obligatorios, entonces el formulario debe indicarlo claramente.
Ten en cuenta las leyes locales que definen qué información puedes recopilar y cómo puedes usarla.
Asistencia
Es una buena idea incluir ayuda para los usuarios que rellenan formularios. Este es especialmente el caso en el que un campo específico requiere que se ingresen entradas de cierta manera y doblemente para campos de contraseña con reglas especiales. Los usuarios no conocerán instintivamente las reglas asociadas a campos específicos, por lo que debes proporcionar mucha orientación en el camino.
Un formulario debe estar bien diseñado e intuitivo en lugar de proporcionar consejos y texto a los usuarios sobre cómo completarlo. Idealmente, los usuarios no deberían necesitar ninguna ayuda en absoluto.
Validación
Validación significa dar al usuario comentarios sobre las entradas que ha enviado ya sean correctas o incorrectas. La validación puede ocurrir en dos puntos, después de que el usuario haya enviado el formulario, que es la validación de envío, o durante el proceso de llenado del formulario que es validación en línea en vivo. La validación de envíos es esencial para proteger la base de datos, pero también ayudará a detectar errores de usuario. La validación en línea en vivo generalmente resulta en experiencias de usuario mucho mejores, ya que los usuarios saben que su información es correcta antes de enviar el formulario.
Los mensajes de error son una parte importante de la validación que se muestra a los usuarios. Los mensajes de error a menudo se ignoran en el desarrollo de UX y son una gran fuente de frustración para los usuarios.
Algunas mejores prácticas a considerar:
- Estos mensajes deben ser fáciles de entender, lo que significa que el usuario no debe tener dificultades para entender el error o cómo solucionarlo.
- El mensaje de error debe permanecer visible hasta que se haya corregido el error.
- El tono del mensaje debe coincidir con el resto del sitio.
- Es importante recordar que un formulario es una conversación con los usuarios. Es un diálogo interactivo aunque no estés presente.
reCAPTCHA
reCAPTCHA es un servicio gratuito que ofrece Google que requiere que los usuarios respondan preguntas para demostrar que no son bots. Ayuda a proteger los sitios web del spam y el abuso, pero reduce las conversiones y en ciertos casos puede hacer que el sitio sea inutilizable para los usuarios. A pesar de estos problemas de accesibilidad, reCAPTCHA sigue siendo un factor importante a la hora de desarrollar formularios para proteger tu sitio web.
Buscar
La búsqueda tiene tres funciones útiles en un sitio web. No solo ayuda a los usuarios a encontrar cosas específicas, también sirve como una ayuda de navegación esencial para sitios más grandes y recopila datos valiosos de la investigación de palabras clave sobre lo que el usuario está buscando. Desde la perspectiva del practicante de UX, hay algunos principios no técnicos importantes a tener en cuenta.
Para sitios grandes, puede ser útil para permitir a los usuarios buscar dentro de categorías. En Amazon, por ejemplo, puedes buscar solo dentro de la categoría 'libros'.
Posicionamiento
La búsqueda será el principal punto de partida para tu sitio, o bien será una herramienta adicional útil. En el primer caso, por ejemplo, en un sitio de comercio electrónico de gran tamaño como Amazon, la herramienta de búsqueda debe posicionarse de manera centralizada y visiblemente para alentar al usuario a utilizar esta como la principal herramienta de navegación. En este último caso, las mejores prácticas dictan que debe estar en la esquina superior derecha, o de fácil acceso en la barra lateral.
Precisión
Cuanto mejor puedas interpretar lo que tu usuario está buscando, más relevantes y precisos serán los resultados de búsqueda. Google trabaja muy duro para afinar su algoritmo de búsqueda para garantizar que los usuarios no solo obtengan lo que buscaron, sino lo que realmente querían en primer lugar.
La investigación de usuarios puede sugerir por qué los usuarios buscarían en su sitio en primer lugar, y lo que normalmente estarían buscando. La popularidad y la actualidad del contenido son otras consideraciones clave.
Resultados
Cuando se trata de mostrar resultados de búsqueda, hay algunas preguntas clave para hacer:
¿Cuántos resultados deben mostrarse por página?
Diez a 20 resultados por página es generalmente un buen punto de referencia.
¿En qué orden deberían estar los resultados? ¿Lo más popular primero? ¿Más barato? ¿El más nuevo? ¿El partido más cercano?
Esto dependerá de la naturaleza del sitio.
¿Se pueden filtrar los resultados?
Algunos sitios web permiten a los usuarios realizar una segunda búsqueda restringida a los resultados de la primera.
¿Qué pasa si no hay resultados?
Si no se encuentran resultados de búsqueda, la función de búsqueda debe proporcionar sugerencias y consejos al usuario sobre cómo buscar mejor en el sitio. El hecho de que no haya resultados debe indicarse claramente, seguido de una lista de la coincidencia de contenido más cercana a la consulta de búsqueda. Es muy posible que el buscador no supiera el término exacto por lo que está buscando o haya hecho un error tipográfico, aunque el sitio debería perdonar estos. Las sugerencias podrían incluir comodines o dividir los términos en trozos más pequeños. El mensaje mostrado a los usuarios debe ser útil y relevante, y no simplemente copiado de los consejos de Google.
Definir el diseño visual
Antes de que los usuarios interactúen con su contenido cuidadosamente considerado, su excelente estructura de navegación y su elegante barra de búsqueda, su primera impresión proviene del aspecto del sitio web, como los colores, los gráficos y los elementos de diseño generales. A medida que las personas pasan cada vez más tiempo en la web, son menos tolerantes con sitios web que no se ven bien ni creíbles. Si bien un sitio web no es una instalación de arte, es un proyecto de diseño, y se aplican los fundamentos del buen diseño.
Lea más sobre esto en el capítulo Desarrollo y diseño web
Si bien gran parte de la experiencia en diseño visual vendrá del diseñador gráfico, es valioso para el practicante de UX conocer los siguientes principios del diseño visual:
Color
El color tiene un efecto psicológico increíble en las personas. Con base en nuestra cultura, preferencias y señales aprendidas, las personas interpretan los colores de manera muy específica y esto puede ser utilizado para informar y dirigir la experiencia del usuario. Al elegir la paleta de colores para su sitio web, tenga en cuenta las preocupaciones de legibilidad y accesibilidad. Usar mucho espacio abierto o en blanco a menudo hace que los sitios parezcan simples y fáciles de leer.
Imaginery
La elección de las imágenes utilizadas en el sitio web puede tener un efecto masivo en la forma en que los usuarios se comportan e interactúan en la página. Nunca se puede estar bastante seguro de qué imágenes tendrán los mejores resultados, por lo que esta es una área en la que necesitará hacer muchas pruebas (más sobre eso a continuación). Los humanos tienden a gravitar hacia e identificarse con imágenes de otros humanos. La estrategia de contenido debe incluir una estrategia de imagen, especialmente si el sitio es rico en imágenes. Los ángulos de cámara, el contenido, la estrategia de marca y el tono de las imágenes deben ser considerados. Las imágenes siempre deben ser relevantes y no utilizarse como rellenos o decoración pura.