Diseño de interfaz de usuario.
Iván Fernández V.
Objetivo
Aportar, desde el inicio, la visión global de un proyecto multiplataforma desde la perspectiva de la metodología de Diseño Centrado en el Usuario, siguiendo paso a paso sus fases.
Qué se aprenderá...
- Conceptos claves.
- Técnicas y estándares.
- Conceptualización y Arquitectura.
- Metodología ágil.
Teórico-Practico
¿Qué es?
Diseño de Interfaces, o UI
-
Centra su atención en el medio.
-
Selección y distribución de los elementos.
-
Diseño de Interfaces no equivale a Diseño Gráfico.
Experiencia de Usuario, o UX
Experiencia de Usuario.
- Se enfoca en el usuario y su motivación
- Experiencia antes, durante y después de la interacción
- Del análisis de experiencia parte la interfaz
- Validación con usuarios
Diseño de Interacción, o IxD
Se trata de definir las formas de operar la interfaz, los flujos de operación y las respuestas del sistema.
En definitiva, pone el foco en el contacto entre el usuario y el artefacto.
¿Por qué es importante conocer la diferencia entre
UI / UX / IxD?
¿Qué es UI (Interfaz de Usuario)?
Todos los días interactuamos con una interfaz. Ya sea en un automóvil de camino al trabajo, para comprar un boleto de avión, al acceder al correo electrónico, marcar el tiempo de calentado en un horno de microondas, solicitar un turno en un banco, estas comunicándote con un sistema
Definiciones
Laurel y Mountford la definen como:
La superficie de contacto que refleja las propiedades físicas de los interactores, las funciones que pueden realizarse, y el balance entre poder y control.
En otras palabras:
El lugar donde el contacto entre dos entidades ocurre.
La representación visual, táctil y/o fonética que permite a un usuario interactuar con un sistema.
¿Arquitectura de información?
Definir
Componentes de la UI
La UI, principalmente presenta las posibilidades de interacción junto con el look & feel, o en otras palabras, el diseño visual.
Esto quiere decir, que las decisiones de Arquitectura de Información, Diseño de Interacción y/o Diseño Visual se ven reflejadas aquí. Ejemplo:
Componentes de la UI
La arquitectura dicta la estructura y el esqueleto, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una capa de colores, texturas y gráficos que lo hacen estético.
Según Usability.gov, los elementos que generalmente se presentan en una UI para un producto digital son:
- Controles de Input: botones, campos de texto, checkboxes, radio buttons, listas drop down, switches, campos de fecha
- Componentes de Navegación: breadcrumbs, sliders, formularios de búsqueda, paginación, sliders, tags, iconos
- Componentes de Información: tooltips, iconos, barras de progreso, notificaciones, cajas de mensajes, modals,
- Contenedores: acordeones
UI
UX
La UI influye en la generación de una buena UX
Principios del Diseño de UI.
- Estructura: El diseño debe organizar la interfaz de usuario a propósito, de manera significativa y útil basada en modelos claros y consistentes que son evidentes y reconocible para los usuarios, poniendo cosas relacionadas entre sí y que separa las cosas no relacionadas, diferenciando cosas diferentes y hacer cosas similares se parecen entre una y otra. El principio de estructura concierne a la arquitectura general de la interfaz de usuario.
Existen ciertos principios para el diseño de interfaz centrado en el usuario. Estos principios son:
- Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos que estén significativamente relacionados con procedimientos más largos.
- Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una tarea determinada sin distraer al usuario con información superflua o redundante. El buen diseño no abruma a los usuarios con alternativas o confunde con información innecesaria.
Principios del Diseño de UI.
- Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones, los cambios de estado o condición, y los errores o excepciones que son relevantes y de interés para el usuario a través de un lenguaje claro, conciso y claro que sea familiar para los usuarios.
- Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores y el mal uso al permitir deshacer y rehacer, y al mismo tiempo evitar los errores siempre que sea posible, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.
- Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo en lugar de consistencia meramente arbitraria, reduciendo así la necesidad de los usuarios a repensar y recordar.