Está en la página 1de 32

Diseño y experiencia de usuario

[1.1] ¿Cómo estudiar este tema?

[1.2] Diseño centrado en el usuario

[1.3] Experiencia de usuario

[1.4] Diseño de interacción

[1.5] Usabilidad

[1.6] Estilos de interacción

[1.7] Glosario de términos

1
TEMA
Esquema

¿Qué es?
Normativa DCU
Metodología de diseño
centrado en el usuario

Experiencia de usuario: Diseño Disciplinas de interacción:


¿Qué es la experiencia de usuario? Usuario-contexto-producto-objetivos
Disciplinas de la experiencia de
centrado en el Las bases del diseños de interacción
usuario. usuario Estilos de interacción

Usabilidad:
Objetivos de la usabilidad
Principio de interacción
Diseño de Interacción y Animación
Diseño de Interacción y Animación

Ideas clave

1.1. ¿Cómo estudiar este tema?

Para estudiar este tema lee las Ideas clave que encontrarás a continuación.

En este tema hablamos de los principios básicos de diseño de experiencia de usuario.

Partiremos de una aproximación metodológica desde la que trabajar una experiencia


física o digital: el diseño centrado en el usuario. Veremos distintas disciplinas que se
integran en el contexto de la experiencia de usuario y que serán desarrolladas a lo largo
de la asignatura, la usabilidad y el diseño de interacción. Finalmente, el tema concluye
con un glosario de términos propios de la experiencia del usuario y el diseño de
interacción.

Los objetivos principales del tema son:


» Entender el concepto de diseño centrado en el usuario.
» Diferenciar y relacionar los términos experiencia de usuario, diseño de interacción y
usabilidad.
» Conocer estilos de interacción.

1.2. Diseño centrado en el usuario

Raymond Loewy es uno de los diseñadores industriales más destacados del siglo XX,
conocido por haber diseñado el tranvía de Cleveland de su época. El logotipo de la marca
de cigarrillos Lucky Strike o conceptos de vehículo para Tudebaker Avanti. Loewy y
Scholz publicaban en 1955 su libro Lo feo no se vende, donde promovían un diseño
moderno en el que la estética fuese funcional y práctica. Este era el ámbito en el que el
diseño se movía en aquellos años, el estilismo que prestaba belleza a los productos, un
estilismo que intervenía en etapas finales del desarrollo de producto.

Paralelamente el diseñador Henry Dreyfuss publica: Design for people, con un enfoque
más centrado en las personas, un diseño para la gente que podemos considerar
una pequeña semilla de lo que hoy entendemos por diseño centrado en el
usuario (DCU).
Diseño de Interacción y Animación

Dreyfuss, participa en el diseño del teléfono para la compañía Bell que representa un hito
en la historia de esta tipología de producto. Hasta el momento los teléfonos disponían de
la zona de habla separada de la zona de escucha, Dreyfuss integra ambas funciones en un
solo elemento. Para poder realizar un producto que se adaptase con éxito a los múltiples
usuarios que iban a usarlo se tomaron medidas de cabezas, brazos y manos de distintos
perfiles de personas a fin de crear una media antropométrica que permitiese definir un
dimensionamiento del producto aceptado por la mayoría de los usuarios. Esta manera
de diseñar, partiendo de la dimensión humana (en este caso física) es el motivo por el
que consideramos a Dreyfuss un precursor de DCU.

Figura 1. Teléfono modelo 500 de AT&T

Fuente: http://blog.duopixel.com/articulos/dreyfuss.html

¿Qué es diseño centrado en el usuario?

El diseño centrado en el usuario (DCU) es un conjunto de metodologías de diseño


orientadas a la creación de productos y servicios que den respuesta a los
objetivos de los usuarios, consiguiendo con ello una mejor experiencia de uso.

DCU es poner a las personas (usuarios) en el centro del proceso de diseño.


Entender las necesidades reales de aquellos que van a utilizar el producto o servicio que
se ha de crear, comprender sus motivaciones, sus deseos y miedos.
Diseño de Interacción y Animación

Entender el contexto y las necesidades del usuario es la base de la filosofía DCU, pero
además esta forma de diseñar se desarrolla involucrando al usuario en el proceso
de diseño. El usuario participa en dinámicas de co-creación junto a diseñadores, en
procesos de prototipado para probar las ideas, mejorarlas y volver a testarlas de manera
iterativa. Finalmente, los usuarios participan en el pilotaje de lanzamiento final del
producto o servicio diseñado.

El término DCU se popularizó con el trabajo realizado por Donald Norman en la


década de los 80 en la Universidad de Northwestern y con la publicación del libro de
Donald y Draper en 1986, User Centered System Design: New perspectives on human-
computer interaction.

¿Por qué diseño centrado en el usuario?

La ventaja competitiva de las empresas ha pasado por distintos momentos desde el siglo
pasado a la actualidad, la producción de bienes en masa, la era de la distribución, la era
de la información y en los años próximos al 2010. Hoy en día podemos hablar de la era
del cliente.

La era del cliente prioriza en las necesidades de los clientes para conseguir
una ventaja competitiva, por ello empresas como Apple o Best Buy, son líderes en
sus mercados. El cliente de hoy es un usuario informado, crítico con el contenido
publicitario y conectado, alguien que lee opiniones de otros usuarios antes de comprar o
que utiliza unos grandes almacenes como el lugar en el que conoce o prueba un producto
que posteriormente adquiere por un medio digital.

Para poder conectar con el cliente actual utilizamos la manera de hacer del DCU. Esta
forma de trabajar y la necesidad de priorizar en el cliente como ventaja competitiva ha
llevado a que proliferen las llamadas disciplinas del cliente: Customer Experience (CX),
Service Design (SD), User Experience (UX) etc.

Seguir procesos DCU ayuda a las empresas a diseñar productos con mayor
éxito en el mercado, dado que son productos más orientados a las necesidades reales
de los clientes. El DCU permite ahorrar costes de desarrollo dado que su carácter
iterativo permite evaluar de manera constate el interés de las propuestas de producto
antes de su desarrollo, lo que contribuye a reducir la incertidumbre para las empresas.
Diseño de Interacción y Animación

Normativa o manifiesto DCU

Una norma ISO es una serie de estándares que sirven para velar el cumplimiento de un
determinado proceso o forma de hacer las cosas. En el caso de la ISO 9241-210, que
es la referida al diseño de sistemas interactivos centrados en las personas,
tiene una interpretación para los diseñadores más cercana a un manifiesto de principios.

Estos principios son:

» El diseño se realiza en base a la comprensión de los usuarios, su entorno y las


actividades que desarrollan.
» Los usuarios están involucrados a lo largo de todo el proceso de diseño.
» El proceso de diseño es iterativo en ciclos de prototipo-test-prototipo.
» La evaluación dirige el proceso.
» El diseño da respuesta a la experiencia completa del usuario.
» El equipo de proyecto se constituye con perfiles multidisciplinares.

Metodología de diseño centrado en el usuario

En el desarrollo de la asignatura, a lo largo de los principales temas, vamos a seguir un


proceso similar al que se llevaría a cabo en un proyecto realizado desde la perspectiva del
DCU. Los principales pasos de este proceso, que como veréis coinciden con el temario
son:

» Investigar: la investigación DCU, utiliza métodos cuantitativos y especialmente


cualitativos para conocer el contexto de usuario, sus objetivos o la labor que está
desarrollando la competencia. Es habitual utilizar técnicas etnográficas, entrevistas,
grupos de enfoque o procesos de observación.
» Conceptualizar: partiendo de los aprendizajes y hallazgos de la investigación se
plantean soluciones a los problemas definidos en la etapa anterior. Sesiones creativas
en grupo integrando a usuarios permiten generar ideas de interés que serán
desarrolladas y tangibilizadas por el equipo de diseño.
» Evaluar: las ideas y conceptos de producto o servicio, son representadas mediante
prototipos a fin de contrastar su interés para los usuarios, detectar errores de
interacción, aprender y mejorar las propuestas de diseño.
Diseño de Interacción y Animación

Este proceso de investigar - conceptualizar - evaluar, sigue un ciclo iterativo en que de


manera cíclica se repite para investigar posibles problemas detectados en la evaluación
y plantear nuevas soluciones que vuelven a ser prototipadas y testeadas. Los ciclos
iterativos de desarrollo se integran con el lanzamiento al mercado, es habitual
encontrar productos digitales beta que los usuarios empiezan a utilizar y reportan su
opinión a las empresas, o pequeños cambios que detectamos en aplicaciones que están
sometidas a ciclos de mejora continua. Todo ello responde a una manera de trabajar
propia del DCU.

Figura 2. Diseño centrado en el usuario

Fuente: http:// www.designkit.org/


Diseño de Interacción y Animación

1.3. Experiencia de usuario

¿Qué es la experiencia de usuario?

Por experiencia entendemos la vivencia, sensación, respuesta emocional,


valoración y satisfacción de las personas, respecto a un producto o servicio;
resultado del fenómeno de interacción con las personas y puntos de contacto que
configuran dicho servicio o las partes que configuran el producto.

En la llamada economía de la experiencia (Pine y Gilmore, 2000) se describe que la


ofrenda económica es teatralizada convirtiéndose en un atributo de carácter memorable
y personal del cliente, un cliente convertido en huésped y cuyo factor de demanda va más
lejos del beneficio buscando sensaciones.

Si entendemos cualquier producto o servicio en el contexto experiencial podemos


equipararlo a la experiencia teatral. Imagina que estas un sábado por la tarde sentado en
el sofá, no tienes plan y recuerdas que hace mucho que no vas al teatro. Decides coger tu
smartphone y buscar la web del teatro principal de tu ciudad, en la landing page te llama
la atención una obra de humor que tiene pase para ese mismo día, pinchas para conocer
más información de la obra y compartes el enlace por algún servicio de mensajería con
una amiga. Intercambiáis unos cuantos mensajes y decidís comprar las entradas, pasas
por todo el proceso de pago online, recibes una confirmación en tu correo y sales a la
calle en dirección al teatro. Cuando llegas te espera un majestuoso edificio, los carteles
de la obra cuelgan de las paredes y el personal del teatro os indica cómo llegar a vuestros
asientos, comienza la obra, el escenario cobra vida y pasa el tiempo entre risas. La obra
termina y satisfechos os hacéis un selfie junto al cartel de la obra que compartiréis en
vuestra red social preferida recomendando a vuestros amigos ir a ver la obra.

El enfoque de diseño de experiencia (user experience – UX) entiende la obra de teatro


en sí misma como un punto de contacto de la experiencia del usuario, siendo la
experiencia algo más global y completo que, en este caso, comienza en el momento en el
que el usuario tiene una necesidad de ocio y culmina en el momento en el que el usuario
recomienda la obra a otras personas. Los puntos de contacto son artefactos, productos,
entornos digitales o físicos con los que el usuario interactúa a lo largo del tiempo. Puntos
de contacto, interacciones y personas configuran la experiencia.
Diseño de Interacción y Animación

Experiencia de usuario digital - UX

Si bien, la experiencia de usuario puede ser tanto física como digital, en este contexto
del nos centraremos en las experiencias digitales.

En relación al punto anterior donde describíamos lo que es una experiencia, podemos


decir que la experiencia de usuario es un conjunto de elementos que generan una
percepción positiva o negativa de un producto o servicio digital como
consecuencia del proceso de interacción y contemplando cuestiones
objetivas, subjetivas y emocionales.

La experiencia de usuario es, según la Asociación Profesional de Especialistas en


Información (APEI), «una filosofía de diseño que engloba o se relaciona con un
heterogéneo conjunto de metodologías y técnicas que comparten un
objetivo común: conocer y comprender las necesidades, limitaciones,
comportamientos y características del usuario final del producto».

La UX no se entiende sin una vinculación directa al DCU, podemos concluir


diciendo que la UX se sirve de los métodos del DCU para conseguir una
mejor experiencia para los usuarios ya sea en un producto digital concreto, como
un e-commerce contemplando desde que el usuario tiene la necesidad de comprar hasta
el momento de uso del producto físico adquirido.

Disciplinas de la experiencia de usuario

Podemos hablar de distintos niveles de diseño en función de la responsabilidad, alcance


e impacto que tiene el diseño en una organización, empresa o sociedad.

En un nivel superior podemos hablar de diseño estratégico cuando el diseño se ubica en


el ADN de la organización y dirige la estrategia de la misma. El diseño de sistemas incluye
la coordinación de diversos servicios y modelos de negocio en un escalón de
responsabilidad inferior.
Diseño de Interacción y Animación

El nivel del diseño de servicios engloba la experiencia de usuario y los procesos internos
de las organizaciones para que esta experiencia sea posible. El siguiente nivel es la
experiencia de usuario y para que esta sea posible se nutre de distintas
disciplinas tales como: ergonomía, diseño industrial, arquitectura,
desarrollo de software, marketing, diseño de interacción, arquitectura de la
información, animación, diseño visual, usabilidad, psicología etc.

En la siguiente figura número 3 se puede apreciar cómo se relacionan las distintas


disciplinas. En el glosario de términos de este tema y a lo largo de la asignatura se hablará
de las distintas disciplinas de la UX.
Diseño de Interacción y Animación

Figura 3. Disciplinas de la UX

Fuente: https://raw.githubusercontent.com/envisprecisely/disciplines-of-ux/master/The-Disciplines-of-
User-Experience-Design_envis-precisely.png
Diseño de Interacción y Animación

1.4. Diseño de interacción

Ana como buena mileniar está mirando fotos de desconocidos en instagram mientras va
a hacer la compra al super a 5 minutos de su casa. A mitad de camino tropieza en un
bordillo, su móvil, resbala entre sus dedos, sale despedido y tras estrellarse contra la
pared, cae al suelo reducido a un amasijo informe de cristales, plásticos y lágrimas. De
vuelta, en casa ofuscada y apenada, enciende su ordenador con el fin de reponer su
valioso artefacto, abre su navegador favorito, busca móviles baratos en internet, tras
pasar varias horas buscando, finalmente encuentra su mismo móvil a un precio
razonable en lo que parece una tienda más o menos seria. Añade el móvil al carrito, clica
en «comprar ahora», rellena unos interminables formularios, va a buscar su tarjeta, hace
el pago y después de unos minutos más, la tienda y un correo le informan: «pedido
realizado con éxito». Una semana más tarde y tras dos intentos fallidos de entrega, va a
buscar el paquete a correos, y por fin tras una larga e interminable espera puede volver a
darle like a fotos de desconocidos. ¡Bravo!

Nuestro usuario, en este caso Ana, al igual que absolutamente todos los usuarios, suelen
hacer las cosas para alcanzar un objetivo, en nuestra historia Ana tiene el objetivo de
comprarse un móvil. Aparte de nuestro usuario y su objetivo, en la historia aparecen unos
cuantos elementos como comprar en una web, navegar, buscar un producto, comprarlo
etc. Una serie elementos con los que nuestro usuario tiene que interactuar forzosamente
para conseguir su objetivo, todos estos elementos son en definitiva pequeñas barreras
que le separan de su objetivo.

Cuando un usuario interactúa con nuestros productos va salvando dichas barreras poco
a poco hasta alcanzar su objetivo. Si estas barreras no han sido demasiado grandes y el
usuario es capaz de superarlas todas, hace un balance entre la felicidad que le supone
alcanzar su objetivo y la infelicidad que le suponen las barreras. El resultado de ese
balance es la satisfacción.

Felicidad objetivo vs Infelicidad obstáculos = Satisfacción

Cuando el balance es positivo el usuario considera que el «calvario» de la interacción


ha merecido la pena. Cuanto más positivo sea este balance más feliz será el usuario, más
posibilidades habrá de que vuelva a usar nuestro producto, que nos vuelva a visitar, que
nos recomiende, que se convierta en un fanboy, etc.
Diseño de Interacción y Animación

Si el balance es negativo, o el usuario ha sido incapaz de superar alguna barrera, el


usuario no estará contento, su interacción y su experiencia habrá sido mala y
posiblemente no volverá a usar nuestro producto, no volverá a comprar en nuestra tienda
o entrar en nuestra web. Siempre que tenga otras opciones similares, preferirá ir a ellas
que entrar en contacto con nuestro producto, si por el contrario se ve obligado a usar
nuestro producto, por ejemplo, porque es una herramienta de trabajo o la web de la
institución en la que estudia, el calvario deja de ser metafórico y pasa a ser real. El
problema con estas experiencias negativas es que generan un impacto más intenso que
las positivas, se necesitan muchas menos experiencias negativas para generar un hater
que positivas para generar un fanboy.

Por ello el objetivo final del diseño de interacción es conseguir que este balance
sea siempre lo más positivo posible.

Definición de interacción

Existen múltiples definiciones de interacción con ligeras variaciones según el ámbito en


que se enmarcan y el perfil de la persona que las escribe. Para nosotros y para el ámbito
de la asignatura podemos definir la interacción como: el proceso de comunicación
entre un usuario y un producto con el fin de alcanzar un objetivo dentro de
un contexto.

En este proceso hay 4 factores clave:

» Usuario.
» Producto.
» Contexto.
» Objetivo.

Conocer en profundidad estos cuatro factores es vital para conseguir una


interacción óptima. El objetivo de esta asignatura es desgranar estos factores y dar las
claves para su diseño.
Diseño de Interacción y Animación

Usuario

En el ámbito del diseño de interacción definimos a los usuarios como aquellos que
usan nuestro producto, aplicación o servicio. El concepto de usuario en otros
campos se puede llegar a ampliar bastante ya que también incluye a personas que se ven
afectadas directa o indirectamente por nuestro producto, como usuarios secundarios,
usuario comprador o antiusuarios.

Para ofrecer una buena interacción es necesario saber las características de nuestros
usuarios, sus necesidades, costumbres, experiencias previas, expectativas, limitaciones,
que lenguaje usan, etc. El problema es que generalmente no existe un único usuario en
el que nos podamos basar para diseñar nuestro producto, cada uno tiene sus propias
costumbres, experiencias y expectativas. Y evidentemente, es imposible diseñar teniendo
en cuenta las particularidades individuales de cada uno, por ello para evitar esta
sobredosis de información se usan los perfiles de usuarios. Estos perfiles representan
tipos de usuarios genéricos que aúnan las distintas particularidades y nos ayudan a
clasificar a los usuarios de manera efectiva al mismo tiempo que nos sirven como fuente
de información para nuestros diseños.

En el tema 4: Investigación para diseño de interacción II, veremos herramientas que


nos ayuden a analizar y definir a nuestros usuarios.

Producto

Dentro del término de producto podemos englobar todos aquellos elementos que entran
en contacto con el cliente.

Dentro del entorno de diseño de interacción esto generalmente es una página web o
aplicación. Esta aplicación tiene información, necesitamos saber que caracteriza a esa
información, como se ordena, que lenguaje hay que usar.

Al igual que ocurre con los usuarios, para poder construir una buena interacción
necesitamos saber todas las particularidades de nuestro producto. No solo eso, si no que
tenemos que saber también que es lo que a nuestro usuario le interesa de nuestro
producto, para poder mostrárselo de la manera más eficiente.
Diseño de Interacción y Animación

Contexto

El contexto es el entorno tanto físico como digital donde se produce esa interacción.

Este contexto se refiere por un lado al tipo de dispositivo concreto que estamos
usando, móvil, tableta u ordenador, cada uno con sus condicionantes. Por ejemplo, usar
una aplicación en el móvil tiene una serie de limitaciones de tamaño y espacio que no
existen en un ordenador y los objetivos que tiene un usuario cuando está usando una web
en un móvil pueden variar a cuando se accede desde un ordenador, estas variaciones, si
existen, hay que conocerlas.

Por otro lado, contexto también se refiere al entorno que nos rodea en el momento
en el que se produce la interacción, no es lo mismo estar sentado en un escritorio,
cómodo, con buena iluminación y una buena postura, que estar corriendo en una calle
abarrotada de tráfico mirando en el móvil si llegamos a coger el autobús. En este segundo
caso hay más ruido, más movimiento de la pantalla, más reflejos, variaciones constantes
de luz, que en el primer caso no hay.

Necesitamos saber en qué contexto se va a usar nuestro producto y cuáles son las
características de este para asegurarnos que diseño responde a las necesidades de uso de
nuestros usuarios.

Objetivo

La finalidad, lo que quiere hacer nuestro usuario cuando interactúa con nuestro
producto.

Diferentes usuarios pueden tener diferentes objetivos cuando usan un


mismo interfaz, es importante conocer los usuarios y sus objetivos para plantear
soluciones de diseño que se adapten a todos los usuarios. Por ejemplo, un usuario cuyo
objetivo es buscar información de un determinado producto necesita unos elementos en
el sistema distintos a un usuario que tiene toda la información y simplemente quiere
comprar el producto.
Diseño de Interacción y Animación

Las bases del diseño de interacción

El diseño de interacción se sustenta en tres áreas de conocimiento, la usabilidad, la


arquitectura de la información y el diseño visual.

Estas disciplinas no son parcelas aisladas, si no que están íntimamente relacionadas


entre sí, no se puede conseguir una buena usabilidad sin tener en cuenta principios de
diseño visual o arquitectura de la información.

Cada una de estas áreas aporta herramientas y principios que nos servirán para diseñar
interacciones óptimas.

A lo largo de la asignatura iremos viendo en profundidad cada una de estas disciplinas y


como aplicarlas al diseño de interacción.

1.5. Usabilidad

Como hemos definido previamente, la interacción es la comunicación entre un usuario y


un producto, el medio por el que se produce esta comunión son los interfaces, que son el
conjunto de dispositivos que permiten la transmisión de señales entre los
usuarios y los productos o sistemas.

Dentro de los entornos digitales existen varios tipos de interfaces, entre los que podemos
destacar los siguientes.

CLI - Command line interfaces

Son los primeros tipos de interfaces que surgieron, consiste en indicar órdenes a la
máquina mediante la escritura de instrucciones concretas. El ejemplo más común de este
tipo de interfaces son lo los terminales o las consolas de los ordenadores.
Diseño de Interacción y Animación

Figura 4. Terminal de sistema operativo MACOS

La interacción con este tipo de interfaces suele ser más rápido que otros tipos de
interfaces ya que es mucho más directo escribir un comando como “muéveme el
archivo A a la carpeta B”, que ir navegado por carpetas copiar el archivo A, navegar a la
carpeta de destino y pegar el archivo.

El problema es que tienen una curva de aprendizaje bastante alta, ya que es muy
costoso aprenderse todos los posibles comandos y acordarse del orden en que se
escriben.

Una implementación de este estilo de interacción, muy popular actualmente son los
chatbots que pueden entender ordenes simples usando un lenguaje común, por ejemplo,
algunas funcionalidades de Google como las conversiones de divisas o unidades.
Diseño de Interacción y Animación

Figura 5. Conversor de unidades de google

Fuente: http://www.google.com

GUI Graphic user interface

Es uno de los interfaces más habituales y el pilar fundamental de la expansión y el éxito


de la electrónica de consumo y del mundo digital, ya que permite que las personas
interactúen con productos digitales sin tener conocimientos técnicos.

Este tipo de interfaces consisten en la representación de las acciones que puede


hacer el usuario mediante imágenes, gráficos u objetos.

Figura 6. Barra de iconos de word

Estos interfaces se construyen a través de metáforas, que consisten en analogías


con el mundo real que ayudan a los usuarios a reconocer los objetos, sus propiedades y
comportamiento. Un ejemplo habitual de metáfora es la papelera del escritorio, donde
se emplea una metáfora visual para representar la papelera, pero al mismo tiempo se
emplea una metáfora funcional, la analogía entre borrar un archivo y tirar un papel a
la papelera.
Diseño de Interacción y Animación

Figura 7. Icono de papelera de sistema MacOS

Estas metáforas pueden ser de tipo visual, funcional u organizativas. Las metáforas
visuales suelen ser iconos que recuerdan a elementos o acciones del mundo real, como
por ejemplo un icono de imprimir o guardar. Las metáforas funcionales hacen
referencia a acciones que guardan correlación con el mundo real, como puede ser el
ejemplo citado anteriormente de arrastrar un elemento a la papelera. Y finalmente
pueden ser metáforas organizativas, que se fundamentan en organizar la
información o el sistema de manera análoga al mundo real, por ejemplo, la organización
de los días en un calendario o el sistema de archivos y carpetas, metáfora de un
archivador o estantería en el mundo real.

Durante esta asignatura nos centraremos principalmente en este tipo de interfaces, ya


que son los más habituales en el entorno digital actual.

NUI - Natural user interface

Son los interfaces con los que se interactúa de manera directa con las
capacidades de nuestro cuerpo, sin necesidad de periféricos (ratón, teclado,
joystick, etc), mediante el uso de gestos de las manos, gestos con la cara,
movimientos o a voz. Su finalidad es que la comunicación con los productos sea lo más
parecido a una interacción con el mundo real y con otras personas.

Algunos ejemplos de interfaces naturales van desde todas las interacciones que permite
un móvil, pantalla táctil, acelerómetro o detección de inclinación, a las cámaras que
detectan la sonrisa, el sistema Kinetic de Xbox que detectan los movimientos de los
jugadores sin necesidad de un mando, o los sistemas de reconocimiento de voz, como
Siri o Cortana.
Diseño de Interacción y Animación

Figura 8. Sistema Kinetic de Xbox

Fuente: Microsoft Xbox.

Este tipo de interfaces hacen tan fácil e intuitiva la interacción con los productos
digitales, que consiguen entre otras cosas que una persona de 80 años pueda jugar al
Candy Crush en una tableta de forma totalmente autónoma y casi sin ningún tipo ayuda,
algo que con un ordenador o consola convencional es una terea prácticamente imposible.

Otro tipo de interfaces son los TUI tangible user interface y los OUI organic user
interface.

Estilos de interacción

Cuando interactuamos con un producto, a través de cualquier tipo de interface podemos


distinguir distintos estilos de interacción, es decir distintas maneras en las que los
usuarios interactuamos con el sistema o producto. Entre estos estilos podemos destacar
los siguientes:

» Instrucciones.
» Navegación en menús.
» Manipulación asistida o conversación.
» Manipulación directa.
Diseño de Interacción y Animación

Actualmente es complicado encontrar interfaces que sólo usen un único estilo de


interacción, sino una combinación de varios. Cuando usar uno u otro, depende de las
necesidades de cada tarea.

Instrucciones

El usuario hace que el sistema realice las acciones a través de dar instrucciones directas
al sistema de lo que tiene que hacer, puede ser escribiendo un comando o apretando un
botón.

Las ventajas de este tipo de interacciones es que permite una interacción rápida y es
especialmente adecuada para acciones repetitivas.

Algunos ejemplos son los comandos que se escriben en las terminales o consolas de los
sistemas o un simple botón, tanto físico como virtual, el botón de borrar en un teclado
transmite la instrucción de borrar.

Figura 8. Botón borrar

Fuente: http://3.bp.blogspot.com/_dywdt_HkhvQ/TAG7VEQnh2I/AAAAAAAADyk/yqKM2-
1Rol8/s400/67396-delete-key.jpg

Navegación de menús

El interfaz muestra un conjunto de opciones que se pueden seleccionar y llevan a la


ejecución de una acción asociada, estas opciones suelen estructurarse jerárquicamente y
pueden estar anidadas.
Diseño de Interacción y Animación

Figura 9. Menú de fuentes de Word

Este tipo de interacción requieren un entrenamiento reducido y permite ver todas las
posibles acciones del sistema de una manera ordenada. Aunque puede resultar lento para
usuarios expertos o para tareas repetitivas.

Manipulación asistida o conversación

En este estilo de interacción, la persona dialoga con el sistema y este actúa como un
compañero de conversación que hace las acciones por él o le ayuda en el proceso. Es
adecuado para búsqueda de información o para procesos secuenciales como sistemas de
ayuda, motores de búsqueda o sistemas de aviso.

Por ejemplo, un wizard de instalación es una simulación de una conversación con un


ordenador, con donde el ordenador plantea preguntas y posibles opciones. O un chatbot
o asistente de voz, como Siri o Cortana, con los que se puede mantener una
«conversación» más o menos fluida… siempre que te entiendan.
Diseño de Interacción y Animación

Figura 10. Wizard de configuración de Android

Fuente: http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/09/Moto-X-2014-Setup-
Wizard.jpg

Manipulación directa

Este modelo de interacción consiste en manipular objetos y navegar a través de «espacios


virtuales» utilizando el conocimiento que tiene el usuario de hacer ciertas acciones en el
mundo real a través de metáforas. Actualmente la mayoría de los interfaces GUI se basan
en la manipulación directa. Ejemplos de este tipo de interacción es arrastrar elementos
por el escritorio para moverlos entre carpetas, cualquier programa de edición de
contenido que permita crear, mover y editar elementos, como Indesign o Illustrator, los
menús de aplicaciones de los móviles, que permiten mover iconos y en definitiva casi
cualquier videojuego.
Diseño de Interacción y Animación

Figura 11. Angry birds ejemplo de manipulación directa

Fuente: Juego Angry Birds.

1.6. Estilos de interacción

Tal como hemos comentado anteriormente la usabilidad es uno de los pilares


fundamentales del diseño de interacción.

Usabilidad es una propiedad cualitativa que mide lo fácil de usar que es un


producto. Es un concepto íntimamente relacionado con la ingeniería de usabilidad,
que es el conjunto de metodologías y principios de diseño que aseguran que un
producto sea usable.

Según la UNE-EN ISO 9241-11:1998 usabilidad es «Grado en que un producto


puede ser utilizado por usuarios especificados para lograr objetivos
concretos con eficacia, eficiencia y satisfacción en un determinado contexto
de utilización».

Según Jakob Nielsen la usabilidad «es el atributo de calidad que mide lo fáciles
de usar que son las interfaces».

Y para Steve Krug «la usabilidad significa estar seguro de que algo funciona
bien».
Diseño de Interacción y Animación

Objetivos de la usabilidad

La usabilidad consiste en asegurar que para un usuario la interacción con los productos
es fácil de aprender, efectiva y entretenida. Implica optimizar las interacciones para
permitir a los usuarios realizar sin problemas sus actividades diarias. De manera más
específica los objetivos de la usabilidad son:

» Eficacia: hace referencia a lo bueno que es un sistema en haciendo lo que se


supone que tiene que hacer. Por ejemplo, una tienda online que no te deja
comprar de una determinada manera es poco efectiva.
» Eficiencia: El producto debe permitir al usuario las tareas con el minino esfuerzo
posible.
» Seguro de usar: Hay que evitar que el usuario se vea expuesto a situaciones de
riesgo o indeseadas.
» Tener buena utilidad: se refiere al grado en el que el producto ofrece las
funciones necesarias, Por ejemplo, si nuestra tienda online falta un método de
pago como pagar con tarjeta, a nuestra tienda le faltará una funcionalidad clave, y será
menos útil o si no te deja comprar varios productos a la vez.
» Fácil de aprender: A la gente no le gusta invertir tiempo en aprender cómo
funcionan las cosas, especialmente con productos que se suponen van destinados a
mercados de gran consumo. El producto debe utilizar unos patrones y affordances
que permita al usuario aprender su funcionamiento de manera rápida y consistente.
» Fácil de recordar: hace referencia a lo fácil que es recordar cómo se usa un
determinado sistema. Este factor es especialmente importante para productos
que se usan de manera infrecuente. Como por ejemplo la configuración de un
televisor o funciones especiales de un microondas. Una buena estructura de la
información y pistas reconocibles como iconos y el uso de estándares son la clave para
recordar el funcionamiento de un sistema.

Principios de interacción

Estos objetivos se pueden transformar en principios más específicos. Son un recurso que
nos permite por un lado evaluar la calidad de los interfaces y por otro sirven como base
a la hora de plantear nuestros diseños.
Diseño de Interacción y Animación

Existen varios autores que han enumerado sus propios principios de interacción, y
aunque cada uno tiene sus matices todos giran en torno a los mismos conceptos. Entre
estos autores cabe destacar:

» Alistair Sutcliffe, en su libro Human-Computer Interface Design.


» Donald Norman, en su libro La psicología de los objetos cotidianos.
» Bruce Tognazzini, en su articulo First Principles of Interaction Design.
» Ben Shneiderman, en su libro Designing the User Interface.
» Jakob Nielsen en su artículo Enhancing the explanatory power of usability heuristic.

En el tema 7: Evaluación heurística, veremos en profundidad estos principios.

1.7. Glosario de términos

A continuación, se expone un glosario de términos propios del mundo del diseño de


interacción y la experiencia de usuario.

Accesibilidad web

La posibilidad de acceder a una web por todo el conjunto de usuarios de manera


independiente a sus limitaciones personales, permitiendo la navegación y comprensión
del total de los contenidos.

Affordances

Son a las acciones que el usuario cree que puede tomar al relacionarse con un
determinado objeto simplemente a través de su forma o estructura.

Agile Inceptions

Reunión de inicio de proyecto del equipo de diseño con el cliente y potenciales usuarios
para la definición de los objetivos y requisitos de inicio para el diseño del producto o
servicio.
Diseño de Interacción y Animación

Compatibilidad

Armonía entre los elementos de un sistema para obtener la respuesta esperada por la
mayoría de los usuarios. Esta compatibilidad puede ser espacial, de movimiento o
cultural.

CRO (Conversion Rate Optimization)

Herramientas fundamentadas en UX, analítica web y testing para mejorar las tasas de
conversión de un sitio web.

Early adopters

Son aquellos usuarios que adoptan en primer lugar un producto digital, es un usuario
que tiene vocación por la innovación y por probar nuevos productos, es un usuario que
confía en la tecnología y tiene pocas barreras.

Feedback

Información que devuelven los interfaces para comunicar al usuario que una acción u
orden ha sido realizada con éxito.

Fixation

Es la fijación de la visión en el recorrido que realiza en la visualización de un interfaz.


Dichas fijaciones tienen una duración de entre 66 y 416 milisegundos.

Heavy users

Utilizan de manera intensiva el producto, lo conocen muy a fondo, están muy entrenados
en su manejo y tienen una relación con él mucho más intensa que el resto.

Interfaz

El conjunto de dispositivos que permiten la transmisión de señales entre los usuarios y


los productos o sistemas.
Diseño de Interacción y Animación

Regression

Es la acción que realiza el usuario de releer un texto, indicativo de una comprensión


difícil del mismo.
Diseño de Interacción y Animación

Lo + recomendado

No dejes de leer…

Recursos sobre diseño centrado en el usuario

En este artículo veremos que la demanda ha cambiado a lo largo de la historia, tanto es


así, que podemos afirmar que fue a partir de la crisis de los 70, cuando se produjeron una
serie de cambios que repercutieron de forma notable en el consumo.

Accede al artículo a través de la siguiente dirección web:


http://www.eumed.net/ce/2007a/acr.htm

No dejes de ver…

Donald Norman: tres formas en las que el diseño te hace feliz

Vídeo de la charla en TED de Donald Norman, donde habla del diseño como medio para
hacer a la gente más feliz.

Accede al vídeo d a través de la siguiente dirección web:


http://www.ted.com/talks/don_norman_on_design_and_emotion?language=es
Diseño de Interacción y Animación

Michael Bodekaer: this virtual lab Will revolutionize science class

Vídeo TED que muestra las posibilidades de la realidad virtual y cómo puede mejorar la
calidad de la enseñanza.

Accede al vídeo a través de la siguiente dirección web:


https://www.ted.com/talks/michael_bodekaer_this_virtual_lab_will_revolutionize_s
cience_class#t-467631
Diseño de Interacción y Animación

+ Información

A fondo

El testing de la experiencia de usuario

En este artículo podrás ver un recurso sobre la experiencia de usuario.

Accede al artículo a través de la siguiente dirección web:


https://sg.com.mx/revista/38/el-testing-la-experiencia-usuario#.WZ07YihJbIU

An introduction to user experience desing

En este artículo podrás ver un recurso sobre la experiencia de usuario.

Accede al artículo a través de la siguiente dirección web:


http://www.slideshare.net/uxsa/an-introduction-to-user-experience-design

Principios del diseño centrado en el usuario

En este artículo podrás saber más sobre los principios del diseño centrado en el usuario.

Accede al artículo a través de la siguiente dirección web:


http://www.sidar.org/recur/desdi/traduc/es/visitable/quees/dcu.htm
Diseño de Interacción y Animación

Bibliografía

Donald, A. y Draper, S. W. (1986). User centered system design: new perspectives on


human-computer interaction. EE.UU.: Lawrence Erlbaum Associates.

Dreyfuss, H. (2003). Designing for people. NY: Allworth Press.

Loewy, R. y Scholz, M. (1955). Lo feo no se vende. Barcelona: Iberia.

Norman, D. A. (2006). La psicología de los objetos cotidianos. Madrid: Editorial Nerea.

Pine, B. J. y Gilmore, J. H. (2000). La economía de la experiencia: el trabajo es teatro


y cada empresa es un escenario. Barcelona: Granica.

También podría gustarte