Introducción al diseño de Interfaces de Usuario

Óscar Bustos

Frontend Developer & UI/UX Designer

@elchiconube

oscar.bustos@live.u-tad.com

649131791

 

Introducción

La tecnología lo inunda todo

¿Cuál es nuestro papel?

Cubrir las expectativas de las personas que van a utilizar nuestra interfaz

 

Construir interfaces amigables, intuitivas y predecibles

¿Cómo hemos llegado aquí?

La Revolución Industrial

Bernardino Ramazzini

"Las enfermedades de los trabajadores"

¿Cómo hemos llegado aquí?

En 1857 nace el término ergonómico.

 

El estudio de interacciones entre personas y máquinas

 

Optimización del trabajo

¿Cómo hemos llegado aquí?

Familia Gilbreth

El estudio sobre movimientos y el tiempo.

Estudio de factores humanos

Concepto de formación

¿Cómo hemos llegado aquí?

II Guerra Mundial

 

Cambio de paradigma.

 

La máquina tenía que adaptarse a la persona

¿Cómo hemos llegado aquí?

1980 Desastres nucleares de Three Mile Island y Chernobil

 

Importancia de entorno intuitivo y sencillo

¿Cómo hemos llegado aquí?

¿Cómo hemos llegado aquí?

¿Cómo hemos llegado aquí?

Evolución de web desde los años 90

 

Surge concepto de usabilidad aplicado al entorno digital

 

Gran competencia en Internet 

¿Cómo hemos llegado aquí?

¿Cómo hemos llegado aquí?

Qué es UX

UX o experiencia de usuario hace referencia al sentimiento que tenemos a la hora de utilizar una web o aplicación

Qué es UI

UI o interfaz de usuario hace referencia a los elementos con los que interactuamos en la interfaz

UI

UX

UI+UX

Silla visualmente atractiva

Silla apilable

Silla visualmente atractiva y apilable

Diseñador UX

  1. Investiga al usuario (necesidades, barreras, entorno, etc)
  2. Establece la arquitectura de la información y el contenido
  3. Diseña el camino o los pasos que debe de dar cada usuario

Todo gira en torno al usuario y sus necesidades

Diseñador UI

  1. Encargado de crear una interfaz atractiva para el usuario
  2. Diseña los elementos visuales adecuados para crear una interfaz clara y fácil
  3. Utiliza recursos visuales para guiar y centrar la atención del usuario
  4. Refuerza la identidad corporativa de la marca
  5. Consistencia/Coherencia

Conceptos fundamentales

Usabilidad

Es el atributo de calidad de un producto haciendo referencia a su facilidad de uso

 

No tiene que ser fácil para todo el mundo, sino para el público que fue diseñado

 

¿Ejemplos?

Usabilidad

¿Qué significa que un producto sea fácil de usar?

Usabilidad

La usabilidad tiene dos dimensiones

Objetiva

Subjetiva

Se puede medir

Se basa en la percepción del usuario

Usabilidad

Objetiva

  1. Facilidad de aprendizaje: Cómo de fácil es la primera vez
  2. Eficiencia: Una vez aprendido cuánto tardan en realizar las tareas
  3. Cualidad de ser recordado: Después de un tiempo cuánto tardan en usarlo eficientemente
  4. Eficacia: Cuántos errores y cómo de graves son los errores que comete un usuario

Usabilidad

Subjetiva

  1. Satisfacción: Cómo de agradable y sencillo le ha parecido

Usabilidad

Dimensiones

Un producto puede ser subjetivamente usable, pero no serlo objetivamente y viceversa

¿Ejemplos?

Accesibilidad

Es el atributo que se refiere a la posibilidad de que pueda ser usado sin problemas por el mayor número de personas posibles

Los usuarios pueden tener limitaciones que pueden ser

  1. Relativas a los conocimientos, habilidades o experiencia
  2. Impuestas por el contexto del uso
  3. Discapacidades (temporales o permanentes)

Accesibilidad

Diseñar productos accesibles no significa diseñar para todos, sino asumir la diversidad funcional de la audiencia

Un producto accesible debe ser:

  1. Perceptible: La información y los componentes deben ser mostrados de forma que se puedan percibir
  2. Operable: Los componentes deben ser manejables
  3. Comprensible: La información y las opciones deben ser comprensibles
  4. Robusto: Maximizar compatibilidad con tecnologías de asistencia o de apoyo

Arquitectura de la Información

El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información

Richard Saul Wurman - 1975

Interacción

También denominada como "diálogo". Es un proceso iterativo y cíclico, divisible en 3 principales etapas:

  1. Formulación del objetivo: Qué quiere lograr el usuario
  2. Ejecución: Qué hace
  3. Evaluación: El usuario compara qué ha ocurrido con lo que quería que ocurriera tras su acción

¿Dónde se producen la mayoría de errores?

Interacción

Linea de comandos

Tipos

  1. Muy frustrante para usuarios inexpertos y costoso de aprende.
  2. Requiere de aprendizaje previo
  3. Arbitrariedad de los comandos
  1. Más eficiente que otro tipo de interfaces
  2. Posiblidad de hacer macros

Interacción

Menús de selección o navegación

Tipos

  1. Cuantas más opciones presentemos mayor número de errores
  2. Opciones poco descriptivas
  1. Sencillo para usuarios inexpertos

Interacción

Formularios

Tipos

  1. Problemas cuando son extensos
  2. La validación tiene que cuidarse mucho para evitar frustraciones
  1. Resulta familiar y sencillo para todo tipo de usuarios

Interacción

Diálogo basado en lenguaje natural

Tipos

  1. Lenguaje poco natural para usuarios inexpertos
  1. Fácil de aprender
  2. Los comandos cada vez mejoran más y se asemejan al lenguaje natural

Interacción

Manipulación directa

Tipos

  1. Puede ser muy poco eficiente frente a otro tipo de interacción
  2. Problemas con la manipulación de dispositivos (ratón)
  1. Fácil de aprender
  2. Muy intuitivo para todo tipo de usuarios
  3. Es el más utilizado actualmente

Affordance

Introducido por Norman Foster para definir aquellas propiedades perceptibles del objeto que determinan cómo puede ser usado. Es decir, aquellas propiedades que le confieren un aspecto autoexplicativo, haciendo obvio y explícito cómo debe ser usado y con qué objetivos.

Personajes y escenarios

El diseño centrado en el usuario consiste en diseñar en base a la información real de la audiencia del producto

Los personajes o arquetipos describen patrones de conducta, objetivos y necesidades

Para ello se describen entre 4 o 5 personas que representan y segmentan la totalidad de la audiencia

Personajes y escenarios

Elementos que componen la creación de un personaje o arquetipo:

  1. Datos demográficos: Edad, ocupación, estado civil, nivel económico, nivel de estudios, perfil laboral...
  2. Personalidad: Si es una persona extrovertida, reservada, etc.
  3. Necesidades: Qué es lo que más desea resolver
  4. Motivaciones: Qué es lo que más le motiva para cubrir esas necesidades
  5. Metas que desea cumplir.
  6. Frustaciones: Elementos o situaciones.
  7. Nivel tecnológico: Experiencia con herramientas y dispositivos

Búsqueda de información

El ser humano es un "informívoro" y debido a esa necesidad imperiosa de búsqueda de la información podemos definir dos estrategias diferentes a la hora de buscar información

Búsqueda de información

Quering

Si el usuario es capaz de representar mediante lenguaje de consulta sus necesidades de información, porque tiene una representación sintáctica de estas necesidades, utilizará el buscador (si está disponible), ya que será el mecanismo más rápido para satisfacer sus necesidades.

Búsqueda de información

Browsing

Esta estrategia de recuperación de información es utilizada por los usuarios cuando sus necesidades de información son generales o abstractas, como por ejemplo “no estoy seguro de qué es lo que busco, así que navegaré por si encuentro algo que despierte mi interés”, “me gustaría aprender a diseñar webs, pero no tengo demasiado claro por donde empezar” o “Me gustaría localizar la información acerca de quién ha creado este sitio web”.

Relación Esfuerzo-Beneficio

Como diseñadores intentamos siempre reducir al mínimo las barreras de interacción (coste o esfuerzo) para completar las tareas interactivas para evitar la frustración.

 

Cuanto mayor sea la recompensa, mayor será su resistencia a la frustración y su tolerancia al esfuerzo.

 

Por ejemplo el beneficio entre comprar un vuelo barato y el de reservar un restaurante mediante una aplicación es diferente.

Relación Esfuerzo-Beneficio

La usabilidad no es el único factor determinante de la experiencia de usuario. El beneficio puede ser un motor importante a la hora de crear una buena experiencia de usuario.

 

 

Relación Esfuerzo-Beneficio

Si como ejemplo tomamos un proceso de registro en una web, podemos decir que su ratio de éxito (porcentaje de usuarios que lo completan) estará determinado por cómo de fácil resulte completarlo, pero también por cómo de eficazmente su diseño comunique las ventajas que para el usuario tendrá completar la tarea

 

Diseño Centrado en el Usuario

Después de repasar los conceptos más fundamentales que engloban el diseño de interfaces y de haber tomado conciencia de la importancia del usuario vamos a establecer el método por el cual alcanzar nuestro objetivo.

 

El DCU hace referencia a una visión del diseño en la que el proceso está conducido por la información que tenemos acerca de nuestra audiencia.

Diseño Centrado en el Usuario

Planificación/Investigación

Se define conceptualmente el producto en base a la investigación de la audiencia objetiva (necesidades, motivaciones, características, hábitos, modelo mental, actividades...) y al análisis competitivo (qué otros productos existen con audiencias y funciones similares).

Diseño Centrado en el Usuario

Diseño/Prototipado

Se toman decisiones de diseño partiendo de su dimensión más general (arquitectura de información y diseño de interacción) hasta su dimensión más específica (diseño gráfico en detalle y micro-interacciones). Estas decisiones se documentan y se prototipan con objetivos de evaluación.

Diseño Centrado en el Usuario

Evaluación

Aquellas decisiones de diseño y procesos críticos del producto se ponen a prueba mediante métodos de evaluación que pueden involucrar a usuarios

Diseño Centrado en el Usuario

Implementación

Una vez el diseño ha alcanzado el nivel requerido de calidad, se procede a su implementación o puesta en producción.

Diseño Centrado en el Usuario

Monitorización

Una vez lanzado el producto se estudia el uso que de él hacen los usuarios, con el fin de identificar oportunidades de mejora.

Diseño Centrado en el Usuario

Caracerísticas principales

  1. Basado en evidencias (empírico)
  2. Iterativo (constante mejora)

Q&A

oscar.bustos@live.u-tad.com

-old-Introducción Interfaces de Usuario

By Oscar Bustos

-old-Introducción Interfaces de Usuario

Introducción al diseño de Interfaces de Usuario

  • 129