La tecnología ha impulsado nuevas formas de comunicarnos a través de nuevos dispositivos, con diferentes maneras de interacción y con múltiples formatos (tamaño y disposición). El diseño interactivo permite crear productos y servicios digitales que permite interactuar con los usuarios a través de un interfaz. Aparecen nuevos formatos interactivos (para la comunicación audiovisual, ocio y entretenimiento) y nuevos medios donde se publican (dispositivos).

La interfaz de usuario es la parte del artefacto encargada de dar soporte a la actividad humana. Comprende todos los puntos de contacto entre el usuario y el equipo (hardware y software).

La interacción persona-ordenador es el área de conocimiento interdisciplinar que estudia el diseño, evaluación e implementación de sistemas interactivos y de los fenómenos que pueden afectar a la comunicación.

“La interactividad no es algo relacionado con sólo pulsar botones o descargar ficheros; consiste en fomentar la comunicación” (Edwin Schlossberg, 2002, Fundador de ESI Design)

Ejemplos de dos tipos de interactividad distinta:

• The Interactive Documentary explores the Auckland LGBTQ+ vogue ball scene FAFSWAGVOGUE.COM

• 86 & half years - https://www.86andahalfyears.com/ (premiado por https://thefwa.com/) https://thefwa.com/article/insights-8612-years)

Estilos de interacción

Estilos de interacción. Son las diferentes maneras en que los usuarios se comunican o interaccionan con el ordenador (Preece, 1994). Desde los primeros ordenadores, los estilos (y por tanto el interfaz hombre-máquina) ha ido evolucionando, para ser más una comunicación más natural e intuitiva.

• 1980 - Interfaces
  • Órdenes (comandos)
  • WIMP (menús, formularios, manipulación directa)
• 1990 - Interfaces
  • Web
  • Voz
  • Gestos (Pen/touch)
  • WebApp
• 2000 - Interfaces
  • Móvil (App)
  • Multimodal
  • Háptica
  • Tangible
  • Realidad Aumentada
  • Realidad Mixta
  • Wearable
  • Robótica
  • Prompt (IA)

Diseño de la Interacción

El diseño es el proceso de búsqueda de una solución en un área de producción creativa (industria, ingeniería, arquitectura, comunicación), ideado y concebido visualmente a través de bocetos. En el caso del diseño de la interacción de un sistema, se debe concebir tanto la forma como su comportamiento. El producto (interactivo) es el medio para lograr una experiencia al usuario (UX) satisfactoria.

La eXperiencia de Usuario (UX) es el proceso para generar emociones y actitudes positivas de las personas al utilizar un determinado producto, con objeto que además, mejore su capacidad de atracción (engagement) y retención.”

Experiencia de usuario multi-dispositivo

• Vivimos en un ecosistema de dispositivos conectados

• Existen 7 billones de dispositivos (se esperan 20B para 2020) Debemos conocer cómo diseñar para estos dispositivos, como garantiza coherencia de apariencia y comportamiento entre ellos para una experiencia gratificante.

  “Estamos más tiempo en interacción con dispositivos que con personas” “A menudo el usuario interactúa a con más de un dispositivo al mismo tiempo”

Los nuevos dispositivos además incluyen novedosos mecanismo de interacción con el usuario como por ejemplo los dispositivos móviles actuales (smartphones)

• Visualización completa de pantalla con orientación vert/horiz
• Basados en gestos, sin botones (pantalla multitouch) http://www.lukew.com/touch/
• Una aplicación en cada momento, una sola ventana
• Acelerómetro, Sensor de proximidad, GPS, Reconocimiento de voz, Doble Cámara...

Diseño centrado en el usuario

Debemos establecer conexiones entre elementos del proyecto. Identificación de los usuarios. Hacer que sea una experiencia que “enganche” y motive (observar, participar, interactuar, difundir/publicar…) con tu audiencia y medios (artefactos)

Los perfiles de usuarios ofrecen connotaciones y estereotipos tecnológicos y hábitos relacionados con estos medios.

Bocetos & Prototipo

Un boceto es una representación esquemática de un interfaz y que permite evaluar la funcionalidad, uso, organización, etc.

Un storyboard es una narración gráfica de una historia en cuadros consecutivos. Se puede utilizar para evaluar los escenarios, los enlaces a diferentes bocetos (de navegación). El mapa del sitio (sitemap) es un caso simplificado de storyboard de navegación

El esquema de navegación permite usar el diseño interactivo de forma natural e intuitiva. Tiene influencias culturales y de experiencias previas.

https://adictosaltrabajo.com/2022/03/30/figma-la-solucion-definitiva-para-el-diseno-ui-ux/

Las pantallas pequeñas (smartphones) obligan a scroll largo (infinito) Organización de contenido muy sencillo. Se puede usar para storytelling, creatividad, y navegación. Importancia de mecanismos para volver inicio

Hay muchas herramientas para construcción de prototipos más o menos funcionales. EL objetivo principal es planificar y probar el diseño lo antes posible (aunque sea en papel)

Objetivo de las herramientas:

• Orientado al diseño (bocetos)- cómo organizar espacio (layout) y contenido
• funciones de navegación
• Simulación

Herramientas prototipo:

• proto.io

• figma.com

Elementos del Interfaz de Usuario

Componentes UI

Los componentes son elementos del interfaz que permiten la interacción con el usuario. Características de los widgets:

• Apariencia. Se representan mediante un icono/gráfico. Debe facilitar el reconocimiento cada elemento interactivo.
• Comportamiento. Indica la forma de interaccionar sobre el componente. Puede tener diferentes estados (reposo, seleccionado, desactivado, modo normal).
• Acción. Debemos asociar un efecto cuando se actúa sobre el componente. Esta acción debe ser predecible.

Eventos

Un evento es un suceso significativo provocado (normalmente) por el usuario y que supone un cambio en el estado de algún componente (pulsación de un botón, movimiento del ratón, pulsar una tecla, etc.).

Cada dispositivo posee una serie de eventos que se pueden disparar (por acción del usuario, por cambio en el sistema…). Ejemplo(*) Mouse: Presionar (onMouse Down/onclic), Soltar (onMouseUp), entrar/dentro (OnMouseOver), sobre (Mouse Within), salir (onMouseout). Se puede distinguir entre pulsar y soltar botón derecho o izdo. Todos estos eventos estarán referidos sobre un widget (un boton, una imagen, etc.)

Para diseñar interfaz hay que identificar objetos que son manipulables (ventanas de diálogo, checkbox, sliders, botones, etc.)

Pasos de la definición de la interacción:

• Identificar el evento al que se desea escuchar o atender. ¿qué va a suceder?, ¿a qué se va a responder?

• Identificar sobre qué objeto sucede ese evento (sobre un botón, una ventana…). ¿en qué objeto va a producir el evento? (event listener)

• Asociar una acción que expresa el comportamiento deseado. Esta es la respuesta a la acción del usuario. ¿Qué hay que hacer cuando ocurra el evento? (event handler / callback)

Normalmente existe un lenguaje (script) con sintaxis específica para describir la gestión de eventos (ActionScript, Lingo, Javascript…)

Bibliografía

• J. Sterne (2016) Fundamentos del diseño interactivo : principios y proceso que todo diseñador debe conocer. Ed. Bloomsbury FBA/7.055 STE fun
• Y. Rogers; H. Sharp; J. Preece (2011) Interaction design: beyond human-computer interaction, 3rd Edition. John Wiley & Sons
• M. Levin (2014). Designing Multi-Device Experiences. An Ecosystem Approach to User Experiences Across Devices, O’Reilly Media,