Ernesto Olivares Infographics

Experiencia de usuario: 125 reglas para optimizar la UX de cualquier web o app

Agregado en: Sin categoría Started by

Experiencia de usuario: 125 reglas para optimizar la UX de cualquier web o app

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (5,00, 3 votos)
Loading...

head_ux-uicastellano_v01

1. Controla el enfoque y la atención del usuario

1.1 Deja claro el punto de entrada al interfaz

Haz que los titulares de tus páginas y posts tengan contraste.

1.2 Guía a los usuarios mediante una jerarquía visual

Evita encerrar el espacio negativo dentro de una composición.

Utiliza un diseño de una sola columna.

Monta elementos del diseño para una mayor sensación de continuidad.

1.3 Diseña teniendo en cuenta los principios de la Teoría de la Gestalt

  • Semejanza.
  • Proximidad.
  • Cierre.
  • Conexión.
  • Continuidad.
  • Relación entre figura y fondo.

Agrupa funciones o ítems similares por proximidad.

Coloca los titulares más cerca de la sección que les corresponde.

Los titulares deben limitarse al espacio de sus respectivas secciones.

1.4 Muestra cambios en el interfaz sin molestar al usuario

Usa animaciones visibles para marcar cambios en el interfaz.

Marca claramente los elementos que han causado un error.

1.5 Elimina o dale poca importancia a la información que no es indispensable

Oscurece el fondo bajo los popups o cajas con mensajes.

Haz destacar los datos sobre el fondo en todas las tablas.

No uses bordes en los elementos de tu diseño cuando no sea necesario.

No incluyas instrucciones redundantes o demasiado obvias.

Esconde ajustes e informaciones necesarias, pero que se usan muy poco.

1.6 Indica si al hacer scroll el usuario podrá encontrar más contenido

Extiende los elementos más allá del marco visible (fold).

Añade una sombra cuando necesites mostrar profundidad.

Indica que hay más contenido mediante texto o un icono.

2. Guía a los usuarios hacia el objetivo final

2.1 Coloca todas las funciones frecuentes y la información importante en las posiciones más accesibles

Filtra o salta directamente hacia los elementos que busca el usuario.

Da opciones por defecto basadas en las elecciones más frecuentes.

Incluye la información más importante en los listados de productos.

Da información importante cuando el usuario pasa el cursor sobre un producto.

Indica las opciones usadas más frecuentemente.

Muestra la información principal o mensajes de estado en el panel de control.

Muestra la información principal o estado en un panel de control.

Muestra las opciones más comunes al principio de un menú drop down.

2.2 Comunica el estado de cada interacción

Muestra el progreso y tiempo restante en las actividades del sistema.

Indica el estado actual de interacciones complejas o muy largas.

Indica siempre el número de pasos que tiene una secuencia.

Indica el número de items en una categoría.

2.3 Ofrece varias maneras de llevar a cabo la misma acción

Deja que los usuarios se logueen mediante nombre o email (y login social).

Ofrece atajos de teclado para acciones muy frecuentes o repetitivas.

Permite que los usuarios arrastren y suelten elementos.

Permite que los usuarios puedan editar cualquier dato.

2.4 Comunica claramente los requisitos necesarios para una interacción

Describe el tipo de datos que los usuarios deben introducir.

Indica en tiempo real los requisitos para crear una contraseña.

Incluye por defecto parámetros universales en los formularios.

Indica claramente si los elementos de un formulario son opcionales u obligatorios.

2.5 Comunica claramente cuál será el resultado de cada acción

Los textos de los botones deben ser descriptivos.

Ofrece una vista previa de cuál será el resultado de los datos que el usuario está introduciendo.

Indica cuál será el siguiente elemento de una secuencia.

Usa elementos inteligentes en los menús para eliminar las dudas del usuario.

 

2.6 Recompensa a los usuarios cuando avancen hacia el objetivo

Los textos de los enlaces deben ser congruentes con las páginas a las que enlazan.

Ofrece pequeñas acciones fáciles de completar durante la primera sesión.

Empieza las barras de progreso siempre por encima de 0%.

 

2.7 Dale a los usuarios la respuesta que están buscando

Indica si tus oficinas estás abiertas o cerradas en este momento.

Indica cuánto tiempo hace desde que se completó una acción o evento.

 

3. Facilita las cosas al usuario y haz que el proceso sea fluido

3.1 Evita que el usuario tenga que hacer cálculos

Indica cuántos elementos quedan para agotar el máximo disponible.

3.2 Incluye la ubicación actual del usuario dentro de tu interfaz

Destaca la sección actual dentro del menú de navegación.

Muestra “migas de pan” o mapas de secuencia para facilitar interfaces complejos.

Muestra la información más importante al comienzo del título de la página.

3.3 Simplifica la toma de decisiones

Indica la opción más escogida por los usuarios.

Ofrece una lista con los términos más buscados.

Cada sección del menú debe tener un número manejable de opciones o categorías.

Cada sección del menú debe tener un número manejable de opciones o categorías.

3.4 Usa las convenciones de diseño que tus usuarios ya conocen

Usa menús de navegación de acuerdo a las convenciones aceptadas por todos los usuarios.

Coloca funciones útiles en la esquina superior derecha.

Coloca funciones útiles en la esquina superior derecha.

3.5 Dale información al usuario después de cada interacción

Muestra un mensaje de éxito después de cada interacción importante.

Resalta el elemento sobre el que el usuario pasa su cursor.

Resalta el elemento sobre el que el usuario pasa su cursor.

3.6 Minimiza los efectos negativos de los períodos de espera

Usa colores atractivos para disminuir la impaciencia de las esperas.

Mantén a los usuarios interesados durante los períodos de espera.

Evita que los usuarios suban archivos no compatibles.

Resume y muestra las diferentes acciones que se están llevando a cabo.

3.7 Evita que el usuario tenga que recordar datos

Evita que las etiquetas de los formularios desaparezcan al introducir datos.

Coloca la ayuda a los formularios fuera del campo donde se insertan los datos.

Ofrece la posibilidad de copiar contraseñas, códigos, etc.

Ofrece la posibilidad de copiar contraseñas, códigos, etc.

3.8 No abuses de los diseños en “zig zag”

Alinea los datos similares para que los usuarios puedan comparar productos.

En formularios, coloca las etiquetas inmediatamente junto a sus respectivos campos.

En formularios, coloca las etiquetas inmediatamente junto a sus respectivos campos.

3.9 Comunica claramente qué áreas son clicables o interactivas

Dale características tridimensionales a los botones.

Usa bordes punteados para las áreas donde se pueden arrastrar y soltar elementos.

Utiliza iconos para ayudar a entender el significado de una acción.

3.10 Usa siempre palabras y símbolos familiares

Utiliza el mismo lenguaje que el usuario, no hables como una máquina.

Muestra un botón para traducir cualquier contenido en otros lenguajes.

Escoge y usa colores congruentes con el significado de cada elemento.

3.11 Haz tu interfaz lo más escaneable posible

Mantén los párrafos cortos y destaca las palabras más importantes.

Coloca la información más importante al inicio de las listas.

Añade sombreado a las filas de tus tablas.

Escribe encabezados que tengan sentido por sí mismos.

Rompe los bloques de texto largos con elementos visuales para dar variedad.

3.12 Tu texto debe ser muy fácil de leer

Crea contraste entre el texto y el fondo.

Alinea a la izquierda la mayor parte de tu texto.

3.13 Usa siempre las mismas formas y estructuras a lo largo del interfaz

Crea una guía de estilo para el diseño de tu front-end.

Mantén los menús de navegación en la misma posición a través de todas tus páginas.

3.14 Tu diseño debe ser agradable a la vista y estar equilibrado

Diseña siguiendo principios matemáticos.

Elige tipografías diferentes y con mucho contraste para texto y encabezados.

4. Adáptate al máximo a todos los usuarios y situaciones

4.1 Adáptate al nivel de conocimiento y habilidad de los usuarios

Utiliza la cantidad justa de tutoriales en las primeras sesiones.

Usa tooltips para ayudar a los usuarios nuevos, sin molestar a los usuarios expertos.

Utiliza una estructura de cartas para organizar la información.

4.2 Adáptate a las herramientas y métodos que utilizan tus usuarios

Deja que los usuarios controlen el aspecto de la información.

Deja que los usuarios controlen el orden de la información.

Deja que los usuarios controlen la cantidad de información.

Crea “personas” para identificar métodos de trabajo específicos.

Permite a los usuarios abrir páginas en nuevas ventanas o pestañas.

4.3 Haz tu interfaz lo más accesible posible para todos los usuarios

Utiliza etiquetas semánticas en HTML5.

Utiliza varias vías para comunicar la misma información.

4.4 Ten en cuenta y adáptate a todos los posibles resultados

Evita que los mensajes automáticos tengan un resultado no deseado.

Acepta varios formatos posibles en los campos de tu formulario.

Muestra resultados que resuelvan la búsqueda del usuario.

Gestiona erratas, sinónimos y variantes con tus formularios de búsqueda.

4.5 Adáptate a todos los dispositivos y navegadores

Adapta las instrucciones al navegador de cada usuario.

En móviles, usa menús del tamaño de la pantalla.

5. Ayuda a los usuarios a evitar y superar posibles errores

5.1 Es mejor prevenir y eliminar la posibilidad de que se produzcan errores

Elimina, anula o reemplaza los botones una vez que el usuario ha hecho clic.

Ofrece sólo las opciones válidas para rellenar un campo.

Ciertas opciones sólo deben estar disponibles cuando el usuario completa una acción concreta.

Dale a cada campo de un formulario la estructura correcta.

5.2 Identifica señales de que se ha producido un error

Localiza palabras que contradicen la intención del usuario.

Recuerda a los usuarios que ya han comprado un producto.

5.3 Diferencia claramente las acciones que podrían tener un resultado no deseado para el usuario

Diferencia las funciones más importantes mediante el color o dejando un espacio.

Pregunta o confirma antes de realizar un cambio irreversible.

5.4 Ofrece siempre la posibilidad de volver atrás o salir de una situación

Utiliza “deshacer” en lugar de obligar a confirmar cada paso.

Ofrece siempre una vía de escape o la posibilidad de dejar un campo en blanco.

Muestra una forma visible de cerrar los popups y mensajes del sistema.

5.5 Minimiza los efectos negativos de abandonar una secuencia de acciones

Guarda todos los datos que introduzcan los usuarios.

Permite a los usuarios volver atrás.

5.6 Haz las áreas clicables y arrastrables lo suficientemente grandes

Añade un borde transparente para los botones pequeños.

Espera uno o dos segundos antes de abrir un menú drop down.

Coloca el enlace sobre todo el contenedor del menú, no sólo sobre el texto.

Ofrece al usuario varios lugares en los que hacer clic para llegar al mismo lugar.

5.7 Muestra mensajes de error que ayuden al usuario

Explica la razón por la que una contraseña no es válida.

Cuando haya errores complejos, ofrece al usuario documentación o la posibilidad de hablar con Soporte.

No digas “tú” en un mensaje de error.

5.8 Ofrece un registro del historial de acciones del usuario

Muestra las búsquedas recientes del usuario.

Usa un color diferente para los enlaces ya visitados.

Indica los elementos que el usuario ya ha visto antes.

5.9 Analiza el comportamiento de los usuarios para saber donde tiene problemas tu interfaz

Pide feedback al usuario en el lugar adecuado.

Crea alertas en Google Analytics para saber si aumentan los errores 404.

Identifica páginas con alto porcentaje de rebote.

Nota: esta guía de usabilidad está traducida y adaptada de “125 Easy Tweaks to Optimize Your Website’s UX/UI Today“, de Nick Kolenda.

0 Comentario

    Deja un comentario

    Contáctanos






    Pin It on Pinterest

    Shares
    Share This
    Estamos en la lista de las 20 Empresas mas Prometedoras que Proveen Soluciones de Visualización de Datos por la revista CIO ReviewX