Diseño de Interfaz de Usuario (UI)
Características Principales de una Interfaz o IU
Elementos Interactivos y Simbología
- Capacidad de ejecución de las tareas del sistema por parte del usuario (enlaces, botones, imágenes)
Consistencia
- Estados de la interfaz coherentes y jerarquía.
- Sus ajustes abordan factores como forma, tamaño de pantalla, modelo de interacción (táctil, teclado) y sensores (GPS).
- Puede ser visual pero puede involucrar capas de experiencia de IA.
Principio de Coherencia y Estándares de UI
- Las razones principales son la reducción del aprendizaje y la eliminación de confusiones.
- Elegir un idioma, aplicar elementos de UI, establecer convenciones en el diseño, diseñar según las expectativas del usuario, crear elementos visuales consistentes en el sitio.
Elementos de Ubicación
- Valoración de elementos que brindan información de ubicación al usuario según la arquitectura de la información.
- Mecanismos como logotipo, navegación de cambio, encabezado, título, URL, breadcrumbs, señal contextual, cambio visual
Navegación
- Estados coherentes de la interfaz con la Arquitectura de la Información y con jerarquía establecida.
Identidad
- Se debe establecer un logotipo o nombre que establezca identidad para saber qué hace y para qué sirve.
Testeabilidad
- Capacidad de ejecución de las tareas por parte del usuario
Elementos Importantes en una UI
Espacio de Interacción
- El diseño responsivo se utiliza para que el contenido se adapte al dispositivo utilizado.
- Se utiliza generalmente el principio «mobile first» que establece su desarrollo en dispositivos móviles y luego en escala a grandes.
Los tres mayores principios de «Responsive design» son:
Sistema de cuadrícula fluida
Uso de imágenes fluidas
Consultas de medios
Con el diseño responsivo, el tamaño absoluto no funciona, por eso se utilizan tamaños relativos con CSS «Tamaño objetivo / contexto = tamaño relativo»
La forma más sencilla de manejar imágenes fluidas es usando CSS «img {max-width: 100%}».
Las consultas de medios están diseñadas para alterar el diseño web.
Optimizar el Espacio de la Pantalla
- No todo lo que los usuarios necesitan ver debe mostrarse.
- El desplazamiento no siempre es apropiado.
- Para brindar información al usuario se pueden usar imágenes emergentes y detalles.
Maximizar la Eficiencia
Los usuarios hacen más con menos esfuerzo como ventanas emergentes, widgets, sugerencias automatizadas y formularios con secuencia de comandos
Preservar el comportamiento de navegación esperado.
Elementos Importantes en una UI
Color
- Elegir un color base.
- Crear una paleta coherente.
- Encontrar acentos.
- Añadir gris.
- Crear gris armonioso.
- Utilizar conocimiento estándar como colores de éxito (verde), advertencia (amarillo), error (rojo), información (azul).
Tipografía
- Soporta estructura visual.
- Transmite con transparencia.
- Complementa el diseño visual.
Una mala elección de tipografía tiene problemas como:
- Las longitudes de línea cortas ralentizan la comprensión.
- Los logotipos tienen un seguimiento más estricto de lo que puede tolerar el texto del cuerpo.
- Con un seguimiento reducido, la legibilidad se erosiona rápidamente.
Guías de Tipografía para una Buena Usabilidad del Sitio Web
- Cantidad de fuentes usadas al mínimo
- Utilizar fuentes sans serif en lugar de serif para el contenido
- Asegurarse del tamaño y texto adecuados
- El contenido debe utilizar mayúsculas mixtas
- Utilizar una fuente estándar para fuentes de sitios web
- El espaciado de caracteres no debe minimizarse
- Limitar el uso de diferentes colores para las fuentes
- No usar azul para el contenido
- Evitar colorear el texto en rojo o verde
- No utilizar colores iguales o similares para el texto y el fondo
- Los números que tienen 5 dígitos deben tener separador de mil
- No utilizar texto en movimiento o parpadeante
Iconos
- Utilizar iconos de competidores y de uso común.
- Diseño simple y esquemático.
- Usar regla de los 5 segundos.
- Iconos reconocidos y memorables.
- Si son raros, deben usar una etiqueta.
Menús
Pautas UX para Diseñar Menús
Hazlo Visible
- No usar menús pequeños o íconos de menú en pantallas grandes
- Colocar los menús en lugares familiares
- Hacer que los enlaces de menú parezcan interactivos
- Asegurarse de que sus menús tengan suficiente peso visual
- Utilizar colores de texto de enlace que contrasten con el fondo
Comunicar la Ubicación Actual
- Indicar a los usuarios dónde se encuentra la pantalla visible
- Utilizar etiquetas de enlace comprensibles
- Hacer que las etiquetas de los enlaces sean fáciles de escanear
- Para sitios web grandes, usar menús para una vista previa
- Proporcionar menús de navegación local para similares
- Aprovechar la comunicación visual
Hazlo Fácil de Manipular
- Hacer que los enlaces de menú sean lo suficientemente grandes para que se puedan tocar o hacer clic fácilmente
- Los menús desplegables no sean muy pequeños o muy grandes
- Utilizar menús fijos para páginas largas
- Optimizar para comandos
Tono del Mensaje
El tono de voz de un sitio web comunica un sentimiento como el humor, formalidad, respeto y entusiasmo.
Las dimensiones primarias del tono de voz son:
- Gracioso vs serio
- Formal vs casual
- Respetuoso vs irreverente
- Entusiasta vs objetivo
Usabilidad de Formularios
- Que sea breve
- Agrupar etiquetas y campos
- Campos de diseño en una columna
- Usar secuencia lógica
- Evitar texto de marcador de posición
- Coincidir campos con tipo y tamaño de entrada
- Distinguir campos obligatorios y opcionales
- Explicar requisitos de entrada o formato
- Evitar botones de reinicio y borrado
- Proporcionar mensajes de error específicos y visibles