TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

INTERFAZ E INTERACCIÓN
Abrir un sitio web y encontrase con el logo de la marca, algunas imágenes y un menú
desplegable. Desplazarse hacia abajo y hallar un producto ofertado, dar click sobre él y lo
primero a ver es un video demostrativo de sus funcionalidades. Terminar por añadirlo al carrito
y finalizar la sesión satisfecho por la experiencia de compra.

Detrás de la interacción mencionada hay todo un proceso de diseño: el logo de la marca,

las imágenes del producto, el video demostrativo y hasta el ícono del carrito de compras han
sido dispuestos en la pantalla con un propósito: ofrecerle la mejor experiencia de navegación
al usuario. La interfaz de usuario o UI (User Interface) es un concepto que abarca arquitectura
de información, patrones y diferentes elementos visuales que nos permiten interactuar de forma
eficaz con sistemas operativos y softwares de diversos dispositivos. Este tipo de diseño se le
conocen como diseño de interacción.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

QUÉ ES EL DISEÑO DE INTERACCIÓN?

El diseño de interacción es el estudio, proyecto
y creación de espacios y productos digitales
centrados en la interactividad entre un usuario
y la plataforma virtual. Este enfoque gira en
torno a la promoción de buenas experiencias
para el usuario de medios y mercancías
electrónicas. Estos medios pueden ser sitios
web, aplicaciones móviles, plataformas de
redes sociales o cualquier espacio digital.
Asimismo, el diseño de interacción está
presente en el desarrollo la interfaz, del
software, programas computacionales o
cualquier producto informático.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

PARA QUÉ SIRVE ?

Su propósito principal es optimizar todas las
instancias que se ven involucradas cuando un
usuario entra en contacto con una plataforma
digital. El objetivo es que la interacción sea
simple, eficiente y comprensible para todos los
usuarios y que obtengan exactamente lo que
buscan en el producto o plataforma en uso.
El diseño de interacción se relaciona
íntimamente con la experiencia del usuario
(UX). Ambos enfoques se complementan para
ofrecer soluciones que mantengan encantados
a los consumidores mediante el diseño de
espacios digitales y productos electrónicos
eficientes y amigables.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

Planear una estrategia de diseño de interacción puede ser un verdadero reto ya que la
satisfacción de una persona es un fenómeno multifactorial. Esto significa que no solo depende del
buen diseño de una plataforma, sino de las preferencias de los usuarios, sus competencias
computacionales y expectativas, entre otros factores.

Hay algunos métodos que nos ayudarán a sondear los perfiles de los usuarios para crear
plataformas que realmente propicien buenas interacciones.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

CREACIÓN DE PROTOTIPOS
Antes del diseño web, las empresas ya
realizaban prototipos que les ayudaban a
saber si realmente un producto funcionaba de
la manera esperada o si era del gusto de los
consumidores. Hoy al realizar un prototipo web,
lo mejor es compartirlo con algunos usuarios
(testearlo) para saber qué piensan. Si
analizamoss su interacción, distinguiremos los
pasos en donde se bloquea el sistema, los
callejones sin salida en este o los elementos
que frenan una experiencia de usuario
excelente, del mismo modo, evaluar si todas sus
funcionalidades operan correctamente y si
tiene un diseño intuitivo y lógico.
Los prototipos son maquetas o borradores que
nos ayudarán a identificar las áreas de
oportunidad y mejora.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

MAPEO DE INFORMACIÓN
Es el establecimiento de pautas lógicas para
organizar la información dentro del sitio web.
Este método se da en abstracto y funciona
como un paso previo a la creación de
prototipos o la evaluación de casos de
estudio. La arquitectura de la información es la
mejor aliada para crear estos mapas. Lo
primero es reunir la información y categorizarla
dependiendo del público a dirigirse, la
naturaleza de la información o las cualidades
de los productos. Esto ayudará a crear
jerarquías y relaciones entre la información
para organizarla dentro de la plataforma. Este
ejercicio, mantendrá la coherencia en el sitio.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

DISEÑO COGNITIVO
Este enfoque consiste en planificar y organizar
los contenidos dentro de un espacio virtual en
relación con los hábitos de consumo de los
clientes, sus preferencias estéticas y sus
capacidades cognitivas. Así, no se formularán
ideas abstractas o generales, sino que haremos
uso de los perfiles de los ususarios para crear
diseños hechos a la medida de sus
necesidades.
Para lograrlo, se deberá hacer una buena
segmentación de clientes, perfilar características
e identificar cómo ven, qué tipo de contenidos
les ayudan a retener la información, qué
tonalidades detonan ciertas emociones en
ellos hasta contemplar el tamaño adecuado
de la letra de tus textos o qué tan intensos son
los colores en tus imágenes.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

CINCO DIMENSIONES
Una de las figuras más populares dentro del
diseño de interacción es Kevin Silver, quien
propuso cinco dimensiones o elementos que
toda estrategia de diseño digital debe tomar
en cuenta. Cumplir con cada uno de estos
aspectos asegura que el usuario tendrá una
buena experiencia de uso o navegación en
nuestras plataformas y permitirá la creación de
relaciones más significativas con ellos. Estas
dimensiones son:

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

PALABRAS: deben ser de fácil comprensión y componer textos que transmitan una idea de
forma simple y lógica.

REPRESENTACIONES VISUALES: son todos los gráficos e imágenes utilizadas para

comunicar una idea: se sabrá que funcionan si el usuario las entiende y resultan de interés
para ellos.

OBJETOS Y ESPACIO: las instancias físicas que inciden en la interacción como ratones o
teclados, la coincidencia entre ellos y las acciones en la plataforma deben estar
sincronizadas y ser relevantes.

TIEMPO: es la dimensión que integra las anteriores y que sirve para establecer qué tan
eficiente es la plataforma o si el usuario tarda demasiado en obtener un resultado.

COMPORTAMIENTO: se relaciona con el sujeto que utiliza la plataforma: mide las

emociones y reacciones que tiene al interactuar con esta.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

USABILIDAD
Es uno de los parámetros más útiles para saber
si una plataforma ha sido diseñada de una
manera que permita la fácil interacción con sus
herramientas. Consiste en evaluar cómo las
personas utilizan la plataforma y sus
funcionalidades.

Efectividad: permitir que los usuarios usen las

funcionalidades y herramientas de un sistema
de acuerdo con lo esperado.
Eficiencia: asegurar que la plataforma ofrece
todas sus capacidades de forma óptima.
Satisfacción: la percepción del usuario a la
hora de interactuar con un prototipo o
producto final ofrecido por una marca.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

LA ESTÉTICA
Es parte de la legibilidad, pues el producto
debe ser hermoso para ser legible. Sin
embargo, la belleza no puede tener en cuenta
solo la legibilidad. También tiene que estar
alineado con el público y la propuesta de
diseño que ofrecemos como mensaje visual.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

COMO OPTIMIZAR DIVERSOS ASPECTOS DE LA INTERFAZ

* El modo en el que se desliza el menú de una página para que sea lo más natural posible.
* La reacción de los botones por parte del uso que da el usuario, su ubicación y su forma.
* Los cambios durante el desplazamiento por la página web (scroll con paralaje o
achicamiento del reader) para facilitar la navegación.
* Los efectos de transición de un contexto a otro de la web.
* La forma en la que se indica que algún dato está incorrecto de forma que el usuario lo
entienda fácilmente.
* La manera de hacer un proceso de forma fácil e intuitivo, sin complicaciones en ningún
punto del proceso.
* Cómo organizamos la información en la página web para que el usuario sea comprensible
y natural en su proceso de búsqueda.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

DISEÑO DE INTERACCIÓN EN SITIOS WEB: GOOGLE ARTS & CULTURE

Para muchos, el arte y la cultura son temas apasionantes, pero, para muchos otros, no tanto. Por ello,
Google se dio a la tarea de crear una plataforma interactiva dedicada a las artes y a la cultura que
pudiera ofrecer una experiencia de navegación divertida para todos sus visitantes.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

La plataforma, que está en operación desde 2011, da acceso a las colecciones de más de 2000
museos en todo el mundo. En su acervo, existen varios cientos de miles de imágenes que el usuario
puede ver en alta definición desde su. Pero Google sabía que no solo se trataba de contemplar las
obras, esto ya se podía hacer desde cualquier buscador.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

La apuesta de la empresa consistió en crear una plataforma completamente interactiva para que los
visitantes pudieran saber más de cada obra, conocer su historia, las técnicas de producción y lugar de
creación a través de mapas. Esto se logra mediante una interfaz dinámica que permite el movimiento
vertical y horizontal, así como la interacción directa con cada imagen a través de hipervínculos entre
contenidos.
ASIGNATURA: TALLER DISEÑO WEB
DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

En la actualidad, la plataforma cuenta con secciones dedicadas a cada estilo de producción

artística, juegos y actividades recreativas y algunos recursos de realidad virtual que posibilita a los
usuarios situarse frente a las obras en museos digitales.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

DISEÑO DE INTERACCIÓN EN APLICACIONES: BUMBLE

En el terreno de las aplicaciones, el diseño de interacción es una de las tareas más importantes. Esto
se debe a que estos recursos dependen enteramente de las pantallas táctiles de los dispositivos
móviles con las que estamos forzados a interactuar de manera física.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

Cuando una aplicación no responde adecuadamente a nuestro tacto o cuando los formatos de sus
contenidos no coinciden con las dimensiones de nuestra pantalla, sentimos que empleamos una
aplicación de mala calidad. Por tanto, las aplicaciones deben aprovechar las ventajas de la
interactividad para potenciar la experiencia del usuario.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

Su principio es simple: la aplicación permite elegir qué es lo que estamos buscando: amigos, citas o
relaciones profesionales. En otras palabras, contamos con tres formas de usar la plataforma, cada una
con sus propias funcionalidades. Una vez elegida la opción, en la pantalla de inicio, aparecen los
perfiles de las personas. Si deslizas el perfil a la derecha, significa que tienes interés en él; si lo haces a
la izquierda, no.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

Estos comandos simples pueden aprenderse rápidamente, lo que optimiza el uso del sistema y hace
que sea más fácil conocer personas.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

DISEÑO DE INTERACCIÓN EN DISPOSITIVOS: APPLE

La creación de productos siempre ha tenido que considerar cómo será usado por los compradores,
qué funcionalidades debe tener y cómo hacerlos simples de manejar. Esto aplica para los automóviles,
televisiones, sopas instantáneas, hasta las herramientas de jardinería.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

Apple es una de las empresas con mayor presencia en este mercado gracias a su reloj inteligente: el Apple
Watch. Este producto destaca por su diseño de interacción. Todas sus funciones, diseño y tamaño
fueron meticulosamente planeados para optimizar las interacciones entre el usuario y el dispositivo.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

Algunos comandos interactivos permiten cerrar el puño o juntar los dedos para realizar acciones
específicas; sus botones están diseñados para ser accesibles y generar respuestas hápticas; su
pantalla táctil ofrece diferentes carátulas que el usuario puede diseñar para acceder de manera
inmediata a la información que le interesa.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
 TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

EJEMPLOS DE DISEÑO DE INTERACCIÓN

Cada decisión de diseño modifica la forma de interactuar de tus usuarios con tu marca. Si estás
diseñando una página web, te recomendamos apoyarte en herramientas digitales como un sistema de
gestión de contenidos para automatizar algunos de estos procesos, así como emplear fórmulas
probadas para el diseño de tus páginas web o aplicaciones.

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA
TallerDiseñoWeb/DesarrolloyTesteodePrototiposWebFuncionales

ASIGNATURA: TALLER DISEÑO WEB

DOCENTE: SANDRA SANTANA