2 A Diseño Aplicaciones Interactivas

Diseño de aplicaciones
interactivas
Desarrollo de Sistemas Interactivos
Contenido
Principios abstractos de diseño de interfaces.

Objetivo: Entender los mecanismos que permiten a los
usuarios interactuar con los programas.
El tema cubre los siguientes apartados:
1 Modelos mentales e interacción
2 Abstracción
3 Paradigmas de diseño de interfaces
4 Estilos de diseño
5 Principios de diseño de interfaces

¿Cómo perciben los usuarios el funcionamiento de los

sistemas?
Implicaciones que esto tiene en la interacción con ellos.
Fuentes habituales de conflicto:
● Brechas.
● Errores de traducción mental.
● Limitaciones de la memoria.
1.1 Percepción del funcionamiento de un sistema
Modelo mental: Un modelo de un sistema es una forma de

describir cómo funciona dicho sistema.
Cuando un usuario emplea tecnología, lo habitual es que no comprenda los
detalles de su funcionamiento. Lo que suele ocurrir es que el usuario formula su
propio modelo mental de cómo funciona la tecnología.
Fricción cognitiva: Si el modelo del usuario y el modelo

tecnológico no coinciden.
Principal problema de la
mayoría de las interfaces:
● los modelos mentales de
los ingenieros son
avanzados y próximos a
la implementación,
● pero los modelos de los
usuarios son muy
simples.
El modelo mental: Un control Modelo Tecnológico: Hay un único

para la temperatura del frigorífico control de potencia de frío y un
y otro para el congelador. selector de cuánta potencia de frío
se envía al congelador.
¡Muchos jugadores no entienden de aerodinámica

y pueden utilizar simuladores de vuelo!
El modelo mental: Modelo Tecnológico:

Se gira con el timón de En la mayoría de los aviones
dirección. se gira con alabeo
y timón de profundidad

Modelos en sistemas interactivos.
En los sistemas interactivos existe una capa bien definida entre el modelo
mental y el modelo tecnológico:
● El modelo tecnológico/del sistema/de implementación:

Representa lo que internamente hace un sistema, lo que hace la
tecnología, los puntos de función, subprogramas principales, etc.
● El modelo representado/manifiesto/interfaz:
La interfaz ofrece el modelo representado al usuario y que actúa de
puente entre modelos.
● El modelo mental del usuario/conceptual:
Es el modelo sobre cómo piensa el usuario que el sistema funciona.
● El modelo representado puede ser muy diferente al

modelo tecnológico.
● Oculta los detalles técnicos del sistema que son
innecesarios.
Esto es muy similar a lo que se hace en la programación orientada a objetos:
definimos interfaces para ocultar la implementación concreta de los métodos.
Diferencia entre el modelo representado y el tecnológico:

● Cuadro de selección de color (modelo tecnológico puro)
● Herramienta de Photoshop (modelo representado)
● Si el modelo representado es próximo al modelo

mental del usuario, la interfaz resulta sencilla de usar.
● Si el modelo representado es próximo al modelo
tecnológico, se produce fricción cognitiva al no coincidir
el comportamiento del sistema con el comportamiento
esperado por el usuario.
Las interfaces de usuario bien diseñadas representan modelos de
funcionamiento próximos al usuario.
¡Es necesario entender

cómo los usuarios perciben los sistemas
y cómo interactúan con ellos!.
1.2 Percepción e interacción
Ciclo de interacción: Donald Norman definió el ciclo de la

interacción según las siguientes etapas:
1. El usuario tiene un objetivo
2. Formula una intención de

acción para alcanzar el objetivo
3. Planifica y Ejecuta la acción
4. Percibe la reacción y
el estado del sistema
5. Interpreta el estado del sistema
6. Evalúa el estado del sistema en

relación con el objetivo marcado

Las brechas (gulfs) se producen cuando los usuarios perciben que el
sistema no se comporta como ‘debe’, es decir, cuando el modelo
conceptual del usuario no concuerda con el modelo representado.
La ruptura se puede producir en dos puntos ():
● La brecha de ejecución está relacionada con las acciones que el

sistema proporciona para las intenciones que tiene el usuario.
● La brecha de evaluación está relacionada con lo que el usuario
percibe y es interpretable de acuerdo a sus intenciones.
https://www.interaction-design.org: Gulf of evaluation and execution


La brecha de ejecución está relacionada con las acciones que el
sistema proporciona para las intenciones que tiene el usuario.
● La acción no se corresponde con las acciones que permite el sistema.
● Puede ser que el sistema no lo proporcione de una manera directa.
Brecha de ejecución:
¿Es el usuario
consciente de que
este icono sirve para
enviar un mensaje
directo?

Brecha de Ejecución:
● Error (mistake). El usuario realiza una acción equivocada, planifica

equivocadamente la acción, por discrepancias entre modelos.
● Descuido (slip). El usuario entiende el sistema y el objetivo, y formula

correctamente la intención de acción pero luego ejecuta la acción
equivocada.
Ejemplo de descuido en Excel-Mac:

● Si quiero acceder a las
propiedades de la celda pulso
Cmd+1.
● Para salir de cualquier aplicación
en Mac se pulsa Cmd+Q.
En ocasiones se cierra la aplicación
Excel sin querer.
La brecha de evaluación está relacionada con lo que el

usuario percibe y si es interpretable de acuerdo a sus
intenciones.
Representa el esfuerzo para interpretar el estado del sistema
y determinar si sus intenciones han sido satisfechas.
Aquí podemos hablar de dos problemas distintos:
● Problema de percepción: Después de realizar la acción,

el sistema no cambia de estado como se espera.
● Problema de interpretación: El estado del sistema no se

corresponde con lo que percibe el usuario.

Brecha de percepción: Pulsar el botón no nos lleva al estado esperado
Brecha de interpretación:
¿Están desactivadas las acciones

de este menú?

Los diseños iniciales a menudo asumen que los usuarios no cometen
errores, pero realmente sí comenten errores.
Muchas aplicaciones informáticas piden confirmación para evitar los

descuidos. Pero la mayoría de las veces realmente deseamos ejecutar la acción.
Por ello, las confirmaciones resultan frustrantes.
Una solución es que las acciones sean reversibles (se puedan deshacer).
Algunas pautas para diseñar teniendo en cuenta los errores:

● Entender la causa y hacer diseños que minimicen esta causa.
● Dar la posibilidad de deshacer acciones y sólo pedir confirmación

de aquéllas que no se puedan deshacer.
● Facilitar que se descubran los errores y mostrar cómo

arreglarlos.
● Cambiar la actitud hacia los errores: Ante un error, no asumir

directamente que es un error humano si en realidad puede ser el
resultado de una interfaz inadecuada.
1.3 Funcionamiento de la memoria
El principal reto a la hora de interactuar con una

aplicación lo define el funcionamiento de la memoria
humana.
Nos interesan dos tipos de memoria (realmente hay más):
● La memoria a largo plazo: es la parte donde está toda

esa cantidad ingente de información que guardamos.
● La memoria de trabajo o de corto plazo: es la parte de
la memoria en la que se producen los procesos mentales.
1.3 Memoria a largo plazo
La memoria a largo plazo es la parte donde está toda esa

cantidad ingente de información que guardamos.
● Para guardar elementos en la memoria la repetición no es tan
efectiva como la creación de asociaciones y nemotécnicos.
● Para acceder a ese conocimiento solemos utilizar relaciones.

Incluso, en ocasiones, añadimos elementos a nuestro mundo
exterior para acceder a ese conocimiento (Ej. Para no olvidarme que
tengo que llamar a alguien me cambio el anillo de mano).
● Existen métodos para memorizar (Palacios de la memoria).
● Los recuerdos no se borran, sino que se vuelven inaccesibles.

1.3 Memoria de trabajo
La memoria de trabajo o de corto plazo es la parte de la

memoria en la que se producen los procesos mentales.
Tiene pequeña capacidad pero nos permite recuperar
información rápidamente.
En la memoria de trabajo:
• Tan solo caben 7±2 elementos.
• Suele durar pocos segundos.
• Requiere concentración para retener.
• Desaparece por cualquier distracción. Simon es un juego
que pone a prueba la
memoria de trabajo.
Implicaciones en diseño de interfaces.
Desde el punto de vista del usuario hay que entender que su

memoria de trabajo es pequeña y que desaparece
rápidamente, por lo que no hay que sobrecargarla con
demasiada información.
Ejemplo de mal uso de las limitaciones de la memoria de trabajo

También hay que tener en

cuenta que la memoria de
trabajo es asociativa.
Una buena asociatividad permite
que el usuario aprenda más
fácilmente a usar una herramienta
por lo que la interfaz tiene que
presentar conexiones fáciles
entre los elementos que
aparecen en ella y las acciones
que se realizan con cada uno de
esos elementos.
La lógica de pensamiento.
Parte 13. Memoria Asociativa

Chunks: La memoria trabaja con pequeños elementos denominados
chunks. Son elementos que nos permiten activar zonas de la
memoria a largo plazo y traerlos a la memoria de trabajo. Permiten
mantener más información en la memoria de trabajo.
Por ejemplo, los números de teléfono se suelen dar en chunks, no
en cifras. Incluso se puede recordar el patrón de las pulsaciones o
la palabra que forman para recordarlos más fácilmente.
Los chunks están relacionados con el reconocimiento (o recognition), es

decir recordar con la ayuda de una pista visual. El reconocimiento resulta
más fácil que la evocación (o recall), recordar algo sin ayuda exterior.
Por tanto, una interfaz será más fácil de aprender y fomentará su

memorabilidad si tenemos en cuenta cómo funciona la memoria.
El conocimiento necesario para realizar una tarea no tiene

que ser completo. Realmente, para realizar una tarea basta
con que este conocimiento esté distribuido entre el
conocimiento de la persona y la información del mundo:
● Una parte debe de estar en la memoria del usuario (su conocimiento)
● Otra parte debe de estar en el mundo (en nuestro caso, en el interfaz).
El usuario conoce su fecha de nacimiento,
la interfaz le dice dónde poner
día/mes/año, pone flechas apuntando
hacia abajo para indicarle que hay una
lista desplegable y le restringe los valores
que puede escribir.
Tarea: Configura un teléfono sin verlo

2 Reduciendo distancias: Abstracción
Las principales limitaciones para interactuar:

● Limitaciones de los usuarios para
comprender el funcionamiento del sistema
● Reducida capacidad de los humanos para
recordar grandes listas de cosas.
Las interfaces pueden trasladar parte del

conocimiento necesario a los elementos
de la interfaz. Conceptos de abstracción:
● Potencialidades (affordances)
● Restricciones (restriction)
● Mapeos (mappings)
2 Abstracción
2.1 Potencialidades
Los elementos de las interfaces ayudan al usuario a no tener que
recordar datos ofreciendo potencialidades.
Las potencialidades son el rango de acciones por parte de un

usuario que son físicamente posibles sobre un artefacto.
● Percibidas: Acciones que el usuario identifica como posibles.

● Reales: Acciones realmente posibles.
Obviamente, ambos tipos de potencialidades deberían ser iguales:
● Si el usuario no percibe todas las potencialidades posibles,

la interfaz no es intuitiva.
● Si el usuario percibe potencialidades incorrectas,
la interfaz es confusa.
2 Abstracción
2.1 Potencialidades
Potencialidades en mundo real
La apariencia de los objetos

nos indica cómo usarlos:
● Una silla sugiere la posibilidad de sentarnos
● Picaportes para girar
● Ranuras para insertar objetos
● Botones para pulsar
● Asas para coger
● Palancas para empujar
Las potencialidades cambia, pero las buenas persisten.

No todas las generaciones las captan de la misma forma.
P.e. Hoy asumimos que una pantalla digital es táctil, no siempre ha sido así.
2 Abstracción
2.1 Potencialidades
Un picaporte permite girar, empujar y tirar, mientras

que una barra horizontal sugiere empujar
2 Abstracción
2.1 Potencialidades
Mejor diseño: Una barra vertical sugiere tirar, y una barra

horizontal con una superficie extra nos indica dónde empujar
2 Abstracción
2.1 Potencialidades o affordances
Potencialidades en
mundo real
Si las potencialidades son

ambiguas, y hay que aplicar
“parches” para que el usuario
sepa qué hacer.
2 Abstracción
2.1 Potencialidades o affordances
Potencialidades en el mundo digital
Un primer conjunto de potencialidades físicas:

● Los teclados permiten teclear.
● El ratón permite apuntar.
● El trackpad permite apuntar (mediante desplazamiento).
● Los botones del ratón permiten pulsar.
● Las pantallas permiten tocar (en la actualidad).
También hay potencialidades menos obvias pero posibles:

● El trackpad permite pulsar.
● El ratón Magic Mouse permite apuntar de formas distintas.
● Con un lápiz digital también se puede apunta.
2 Abstracción
2.1 Potencialidades en el diseño de interfaces

Las interfaces de manipulación directa ofrecen potencialidades.
La representación visual del objeto nos indica las acciones que podemos
realizar sobre el mismo, reduciendo así la carga cognitiva asociada al
manejo de los objetos.
Por ejemplo, los efectos 3D generan potencialidades:
● Un elemento que aparece elevado indica que puede ser presionado (botones)
● Un elemento que está hundido parece que puede rellenarse (cuadro edición)
2 Abstracción
2.1 Potencialidades en el diseño de interfaces

Por ejemplo, para mover un archivos:
● Carpetas abierta
(potencialidad para contener objetos)
● Archivo dentro de carpetas
(potencialidad de ser arrastrado)
La carga cognitiva del usuario se limita a encontrar las dos carpetas,

ubicar la representación del archivo en la carpeta de origen y arrastrarlo.
En contraste, un sistema CLI

sólo ofrece la potencialidad de
teclear comandos.
2 Abstracción
2.2 Restricciones
Las restricciones son lo contrario de las potencialidades y

juegan también un papel fundamental.
Las restricciones reducen el número de acciones
posibles, lo que simplifica el modelo de interacción.
Cuando las potencialidades y

restricciones están bien
planteadas, los modelos de
interfaz y conceptual encajan y
la interacción resulta posible.
¿Puedes distinguir las potencialidades y las restricciones?

2 Abstracción
2.2 Restricciones en el mundo real

Las restricciones en el modelo de interacción pueden ser:
● Restricciones naturales o físicas: Son las más comunes y se basan

en las propiedades de un elemento para limitar las acciones que se
pueden realizar sobre él.
● Restricciones semánticas: Se basan en nuestro conocimiento del
mundo y de la situación en la que nos estamos desenvolviendo.
● Restricciones culturales: Convenciones artificiales que gobiernan
nuestro comportamiento y que se pueden aplicar a los sistemas
(Ej. rojo es peligro, parar; verde significa continuar).
● Restricciones lógicas: Se basan en la lógica existente entre los
elementos, su organización y su estructura dentro de un todo
(Ej. 2 interruptores => dos luces que podemos encender/apagar).
2 Abstracción
Un ejemplo: tenemos un total de 12 piezas de Lego para

montar la moto de policía que aparece en la figura.
Podemos montarla fácilmente sin necesidad de instrucciones.
2 Abstracción

Ejemplo: tenemos un total de 12 piezas de Lego para montar la moto de
policía que aparece en la figura. Podemos montarla fácilmente sin
necesidad de instrucciones ya que:
● Las restricciones físicas hacen que muchas de las piezas solo

encajen en un sitio (ninguna de las ruedas traseras se puedan poner
en la pieza de la delantera, la pieza negra solo puede ir atrás, los
“ganchos” solo encajan en la pieza negra...)
● Las restricciones semánticas hacen que pongamos al motorista
mirando hacia delante.
● Las restricciones culturales hacen que pongamos la luz amarilla
delante y la luz roja detrás.
● Las restricciones lógicas hacen que usemos todas las piezas para
montar la moto (no puede quedar ninguna ficha sin usar) y que dos
luces azules se relacionen con dos piezas blancas.
2 Abstracción
2.2.1 Restricciones en diseño de interfaces
Muchas de las restricciones que empleamos en el mundo

real son igualmente empleadas en el diseño de interfaces:
● Las restricciones físicas se emplean muy a menudo en tutoriales
de videojuegos, limitando las acciones que puede realizar el
usuario.
● Como convención semántica tenemos que los botones con
aspecto más claro (atenuado) no se pueden utilizar.
● Los convenios de colores suelen ser empleados en botones
críticos: verde y azul se emplean para “crear”, el rojo se suele
emplear para “borrar”, que suelen ser acciones peligrosas.
2 Abstracción
Videojuegos: Algunos tutoriales restringen las acciones del usuario

2 Abstracción
Scratch: las acciones que puedo realizar están definidas por la forma
de la pieza (p.e. las condiciones son piezas con forma de rombo)
2 Abstracción
Los convenios de colores se suelen utilizar en botones Aceptar/Cancelar

2 Abstracción

¡Algunas restricciones son para “confundir” al usuario!
2 Abstracción
2.1 Abstracción en interfaces (diseño plano)

Potencialidades: Restricciones:
● Los colores llamativos ● Color gris apagado
● Las animaciones ● Icono candado
● Iconos e imágenes
2 Abstracción
2.3 Mapeos
El mapeo (del inglés mapping) consiste en
relacionar los controles con sus efectos
en el sistema.
Existen diversas formas de mapeo:
● En un volante, giramos en el sentido de las agujas del reloj para girar a la

derecha y en el contrario para girar a la izquierda. ¿Cómo se coge el volante?
● En los controles de reproducción de un video, mapeamos la posición de los
controles con la dirección a la que afectan.
2 Abstracción
2.3 Mapeos
Mapeo arbitrario, exige

recordar información.
Mapeo parcial, menos

información a recordar
Mapeo natural, no hace

falta recordar nada
2 Abstracción
2.3 Mapeos
Interruptores mapeados:
● el de la izquierda controla la habitación,

● el de la derecha controla el pasillo.
2 Abstracción
2.3 Mapeos en diseño de interfaces
Las interfaces a menudo usan referentes espaciales

para algunas opciones de configuración:
● Agrupaciones lógicas
● Distribución espacial
Caso de estudio: Microsoft Word
● Las barras de comandos de elementos se agrupan por niveles de

relación entre sus elementos (ribbon, grupos, opciones).
● Los controles de los márgenes se ubican junto a los márgenes de la
página, actuando directamente sobre los mismos.
● Las barras de scroll vertical y horizontal se colocan respectivamente
en vertical y horizontal (Mapeados al visor del documento).
4.2.3 Mapeos en diseño de interfaces
2 Abstracción
2.3 Mapeos en diseño de interfaces

Caso de estudio: Página de J.K. Rowling. ¡YA LO HA CAMBIADO!
Ver los post más antiguos implicaba ir hacia atrás en el tiempo, lo que
implica desplazarse hacia la izquierda. Es natural pero inconsistente
con nuestra manera general de leer un blog. De hecho, la primera vez
que entramos a la web necesitamos instrucciones de cómo se maneja.
2 Abstracción
2.3 Mapeos mandos

La forma de coger el mando de Wii puede variar dependiendo del juego.
● Es posible que debas coger el mando con una o con ambas manos.
● Gatgets que facilitan el correcto mapeo.
P.e. Just Dance es muy sensible a la postura del mando.

3 Paradigmas de diseño de interfaces
El diseño de interfaces consiste en plantear los controles,
potencialidades, restricciones y mapeos necesarios para permitir la
traducción entre el modelo tecnológico y el modelo mental del usuario.
Alan Cooper distingue tres paradigmas de diseño de interfaces:
● Diseño basado en la implementación: El modelo representado es

muy próximo al modelo tecnológico.
● Diseño basado en metáforas: El modelo representado emplea
metáforas del mundo real para guiar al usuario al interactuar con el
sistema.
● Diseño basado en expresiones o ‘idioms’: El modelo representado
se basa en un lenguaje de interacción independiente del mundo
físico, pero sencillo de aprender y próximo al modelo mental.
3 Paradigmas
3.1 Diseño basado en la implementación
Esto consiste en que la interfaz del programa se basa en

recopilar todas la funcionalidades que ofrece el programa,
usando distintos mecanismos de agrupación más o menos
sofisticados.
Un diseño basado en la implementación típicamente:
● Expone detalles de la implementación interna.

● Ofrece botones o controles para todas las funciones.
● Resulta satisfactorio para el ingeniero-programador.
Los primeros programas y algunos que existen hoy en día, siguen el

paradigma del diseño basado en la implementación.
3 Paradigmas

Los programadores crean
interfaces siguiendo sus propios
modelos conceptuales:
● Potencialidades son múltiples

pero muy genéricas.
● Apenas se plantean
restricciones.
Los diseños son útiles para los

programadores, y también para
algunos usuarios muy avanzados,
que conocen la tecnología y
disfrutan de la sensación de control
sobre el programa.
3 Paradigmas
Pero la mayoría de los usuarios no trabajan así, sino que

tienen determinados objetivos específicos y lo que
quieren es que el programa les facilite la tarea.
Por ejemplo:
● El programa Handbrake tiene también menús guiados por la

tecnología, pero para ver las opciones avanzadas hay que
activarlas previamente.
● Para la mayoría de los usuarios, la interacción se centra en la parte

de la derecha, en la que el usuario dice dónde quiere ver el vídeo y
todo lo demás se configura automáticamente.
Híbrido entre diseño guiado por la tecnología y diseño guiado por objetivos
3 Paradigmas
3.2 Diseño basado en metáforas
Replicar actividades del mundo real.

Más fácil alinear los objetivos del usuario
con funcionalidades del programa.
Lenguaje visual o basado en iconos

que permiten al usuario relacionar las
acciones del programa con su
conocimiento del mundo.
Muchos de los sistemas con los
que interactuamos a diario emplean
metáforas para definir la interacción.
Bumptop: Escritorio que lleva la metáfora al extremo

3 Paradigmas
3.2 Diseño basado en metáforas.
El Escritorio: Durante
muchos años ha sido la
metáfora central de los
sistemas de ventanas.
Como en una mesa de

trabajo, en el escritorio
podemos encontrar objetos
interactivos (accesos
Reflejo del mundo real: Muchos
directos a aplicaciones) y
usuarios tienen sus escritorios
los documentos con los igual de ordenados que sus mesas
que estamos trabajando. de trabajo
3 Paradigmas
El sistema de archivos: A la hora de gestionar los datos, el

propio lenguaje nos sugiere la metáfora de los ficheros y las
carpetas. Trabajamos con ficheros que archivamos en
carpetas.
En realidad, el sistema de archivos es una metáfora parcial,

ya que en el mundo físico las carpetas no se guardan dentro
de otras carpetas.
3 Paradigmas

Papelera de reciclaje: La papelera de reciclaje es una
metáfora similar a la del escritorio en la que borramos los
elementos tirándolos a la papelera.
● Representa el concepto de forma razonable,
● Ofrece un nivel de protección contra descuidos.
Nota anecdótica: En sistemas OSX

antiguos, para expulsar un CD o
desmontar una unidad, había que
arrastrar el icono de la unidad a la
papelera de reciclaje, anulando la
metáfora y generando fricción
cognitiva.
3 Paradigmas

Todas las aplicaciones de calendario se basan en la
metáfora de los calendarios de pared y de las agendas.
3 Paradigmas

Directorio de contactos: Los directorios de contactos
también se suelen basar en metáforas, siendo la más
habitual un clásico en el mundo de los negocios: los archivos
de tarjetas de visita.
3 Paradigmas

Las metáforas ayudan al usuario, pero también pueden
limitarlo. “Si nos limitamos a copiar el mundo físico, no
ganamos eficacia.”
Por ejemplo, muchas

empresas de decoración
reproducen versiones
digitales de sus catálogos
basadas en Flash, con una
metáfora intensa centrada
en el catálogo físico. Es
bastante típico que estos
catálogos no permitan ni
siquiera hacer búsquedas.
3 Paradigmas
3.3 Diseño basado en expresiones
¿Qué es una expresión? En lenguaje natural son frases

hechas, con o sin origen comprensible (del inglés ‘idiom’):
Mola mazo, Tirar de la cadena,...
En diseño de interfaces una expresión es:

● Una primitiva de interacción simple
● no metafórica,
● fácil de aprender y
● fácil de extrapolar.
Las expresiones son modelos de interacción simples, pero no

metafóricos. La idea es construir un lenguaje visual y de interacción
basado en operaciones sencillas fáciles de aprender y de extrapolar.
3 Paradigmas

Una antonomasia de expresión sería el ratón:
es simple, fácil de aprender y fácil de extrapolar.
No es metafórica: El ratón se mueve en una
superficie horizontal, distinta de la pantalla,
y con una inclinación distinta.
Otras expresiones relacionadas serían:
● el doble click,
● el uso de click derecho (op. Contextuales),
● el scroll con dos dedos en trackpad,
● el “pellizco” sobre un trackpad.
En particular, el scroll con dos dedos no es

metafórico y no es evidente a primera vista.
Pero una vez que se aprende, se convierte en intuitivo.
3 Paradigmas
Otros ejemplos de expresiones:

● Listas desplegables (ComboBox)
● Botones de radio (para selecciones excluyentes)
● El botón “hamburguesa”, el de “3 puntos” (obsoleto), el de Wifi, la
rueda dentada de configuración …
● Interacción con programas residentes en la barra de notificaciones:
○ swipe vertical para mostrar la barra,
○ swap horizontal para eliminar notificaciones.
3 Paradigmas
Expresiones y primitivas:
El éxito de las interfaces gráficas reside en que es un lenguaje visual
basado en expresiones simples (primitivas).
● En un sistema CLI, se necesita conocer un conjunto significativo de

expresiones complejas (comandos, rutas, conexión de flujos, etc.).
● En un sistema gráfico, las expresiones son muchas menos y más
básicas (apuntar, pinchar, arrastrar, teclear texto).
Los sistemas exitosos se construyen combinando conjuntos muy

pequeños de primitivas, que se agrupan en expresiones compuestas y
dan lugar a expresiones de alto nivel consistentes entre sí.
3 Paradigmas

Construcción de interfaces mediante expresiones primitivas simples
3 Paradigmas
Expresiones en sistemas táctiles:

Los dispositivos táctiles han obligado a los diseñadores
a volver a pensar un las primitivas simples:
● Los primeros ordenadores táctiles con

sistema de proximidad para señalar.
● No existe la posibilidad de posar el puntero
(en modo desarrollador o con un Lápiz sí).
● Varias formas de pulsar
(long-press en Android, 3D-button en Apple).
● Android incluye como primitiva “Volver atrás”.
● iOS incluye como primitiva única “Volver al principio”
● Pero los desarrolladores añaden volver atrás en sus aplicaciones.
3 Paradigmas
Expresiones en sistemas táctiles
Creado muchas nuevas expresiones (o gestos) :
● 'Pinch’ to zoom
● Girar con los dedos para voltear una imagen
● 'Scroll’ arrastrando el dedo por la pantalla
● Secuencias táctiles para desbloquear un dispositivo
● 'Pull’ para refrescar
● ¿¿¿Más???
3 Paradigmas
Los gestos tienen dos problemas fundamentales:
● Están ocultos al usuario, es decir, no hay nada en la

interfaz que diga al usuario qué gestos puede usar.
● Todavía hay muchos gestos que no son estándares y,
por tanto, no son consistentes entre aplicaciones.
El mismo gesto (swipe lateral de un correo) tiene significados

diferentes dependiendo de la aplicación
3 Paradigmas
3.3 Metáforas <> expresiones (mejor &)
Los mejores resultados se obtienen cuando las interfaces

combinan aspectos metafóricos con expresiones no
metafóricas que aumentan la potencia del sistema.
Caso de estudio: El sistema de ficheros

● Metáforas
○ Carpetas ordenadas
○ Archivos en carpetas
○ Mover archivos de una carpeta a otra
● Expresiones
○ Doble click para abrir archivos
○ Carpetas dentro de carpetas
○ Arrastrar (drag) para copiar/mover archivos (depende del destino)
3 Paradigmas
3.3 Metáforas <> expresiones
Caso de estudio: Interacción con pantallas táctiles
● Metáforas:
○ Pinch-to-zoom
○ Scroll inverso (o natural)
○ Inercia en scroll
○ Efecto bounce (iOS)
● Expresiones
○ Pulsación larga
○ Halo azul (Android)
○ Deslizamiento lateral de notificaicones
3 Paradigmas
3.3 Metáforas <> expresiones
Patente del efecto bounce en iOS (Fuente: Google Patents)

4 Estilos de diseño
En esta sección veremos algunos de los estilos de diseño más utilizados
para desarrollar interfaces digitales.
● Efectos tridimensionales: Los diseñadores han utilizado distintos efectos

tridimensionales como metáfora.
● Esqueuomorfismo y Realismo: Consiste en construir interfaces que
reproduzcan los objetos del mundo del real, normalmente añadiendo detalles
ornamentales.
● Diseño plano: En el extremo contrario al esqueuomorfismo, surge una
importante tendencia hacia el diseño plano, cuyo máximo exponente ha sido
la interfaz Metro de Windows 8.
● Material Design: Es una propuesta de Google que trata de solucionar los
problemas de usabilidad detectados en el diseño plano. Aunque visualmente
es muy parecido, introduce de manera sutil sombras, resaltados y capas para
crear sensación de profundidad.
4 Estilos
4.1 Estilo de diseño tridimensional
Desde las primeras interfaces gráficas de usuario, los

diseñadores han utilizado distintos efectos tridimensionales
(sombras, gradientes, resaltados, biseles)
● Los botones parecen que salen de la ventana indicando que se

pueden presionar,
● mientras que los campos de texto aparecen hundidos indicando que

se pueden rellenar.
4 Estilos
Ejemplo de interfaz 3D en Mac OS 8

4 Estilos
Las principales ventajas e inconvenientes del diseño

tridimensional son:
● Pro: este tipo de interfaces deja muy claro qué

acciones se pueden realizar y cuál es la organización
de los elementos. Se desarrollan en una época en la
que hay que educar a los usuarios a utilizar este tipo
“novedoso” de interfaz.
● Contra: el abuso de efectos tridimensionales resulta

agresivo, exagerado y distrae la atención del usuario.
4 Estilos
4.2 Estilo de diseño esqueumórfico
El esqueuomorfismo digital consiste en construir interfaces

que reproduzcan los objetos del mundo del real,
normalmente añadiendo detalles ornamentales e
innecesarios desde el punto de vista de la interacción.
● Trata de crear un vínculo más fuerte entre el usuario y la aplicación
Esqueuomorfismo y realismo no son exactamente lo mismo.

● El realismo es un un estilo visual que trata de reproducir las
texturas y formas del mundo real, mientras que el
esqueuomorfismo se refiere a la metáfora que ayuda al usuario a
entender y usar la interfaz.
Lectura recomendada: Skeuomorphism o el arte de imitar la realidad

4 Estilos
Apple ha sido hasta hace poco defensor del esqueuomorfismo.

4 Estilos
Apple ha sido hasta hace poco defensor del esqueuomorfismo.

4 Estilos
Las principales ventajas/inconvenientes del Esqueuomorfismo:

● Pro: Los usuarios novatos se encuentran con interfaces muy
similares a cosas del mundo real lo que hace que se pierda en parte
el “miedo tecnológico”.
● Pro: El resultado es vistoso y ofrece una guía de diseño visual

consistente para los diseñadores gráficos.
● Contra: Esta similitud con el mundo real se puede volver en contra

de la propia aplicación. Ejemplo: una agenda con aspecto de cuero
puede ser una interfaz poco vistosa para un joven que, incluso,
seguramente no haya conocido este tipo de agendas.
● Contra: La imitación del mundo real puede limitar la funcionalidad

del sistema (al igual que con otros tipos de metáforas).
4 Estilos
4.3 Estilo de diseño plano
En el extremo contrario al esqueuomorfismo, surge una

importante tendencia hacia el diseño plano.
● Interfaces caracterizadas por la simplicidad, formas limpias y funcionales.
● Elimina la profundidad de los iconos: no hay más sombras, biseles ni reflejos

que den un efecto 3D.
● Utilizan formas geométricas básicas (círculos, triángulos, cuadrados...)

para que los objetos parezcan simples visualmente.
● La tipografía utilizada pasa a ser clara y simple.
● Los mensajes son cortos.
● Los colores empleados suelen ser planos y desaturados.

Se eliminan los gradientes y las texturas.
Lect. recom.:Flat Design – The Next Step Forward in the Evolution of Web Design
4 Estilos

Windows 8 es el máximo exponente del diseño plano.
4 Estilos

Actualmente UWP propone Fluent Design, que es
un sistema para la creación de interfaces de usuario
adaptables, comprensivas y atractivas.
4 Estilos

4 Estilos
Google también ha cambiando

el diseño de sus distintos
servicios hacia interfaces de
diseño plano.
El uso de los espacios en

blanco en este tipo de
diseño es muy importante, y
de hecho GMail permite
configurar cuánto espacio en
blanco se usa en la interfaz.
4 Estilos

Incluso Apple ha cambiado de rumbo para abandonar el
esqueuomorfismo y acercarse al diseño plano.
4 Estilos
Vista de iBooks iOS-8

4 Estilos

Las principales ventajas/inconvenientes del diseño plano:
● Pro: elimina sobrecarga en los interfaces y es especialmente
adecuado para pantallas pequeñas. Además, como los elementos
gráficos son más sencillos, las interfaces requieren menos
recursos y cargan más rápido.
● Pro: al no replicar el mundo real, no se somete a las restricciones
físicas de los elementos que replican.
● Pro: los interfaces planos dan una sensación moderna y elegante
que la mayoría de los usuarios encuentran atrayente.
● Contra: puede afectar a la usabilidad de los interfaces.
Por ejemplo, el diseño plano tiende a eliminar todas las potencialidades
que habitualmente nos indicaban que podíamos hacer click en un botón o
enlace (color azul del texto, subrayado, botones en relieve, etc.).
4 Estilos
4.3 Estilo de diseño plano. Material Design
Material design es una propuesta de Google que trata de

solucionar los problemas de usabilidad detectados en el
diseño plano. Este tipo de diseño también se conoce como
diseño plano 2.0.
Aunque visualmente es muy parecido, introduce de manera

sutil sombras, resaltados y capas para crear sensación
de profundidad.
Material design es un nuevo lenguaje visual que trata de

proporcionar una experiencia uniforme entre distintas
plataformas y dispositivos.
Lectura recomendada: Guía de Google de Material Design
4 Estilos
Metáfora de materiales: superficies planas que se iluminan y

comportan de manera similar a como lo harían físicamente.
4 Estilos

La interfaz de las aplicaciones se construye superponiendo capas
planas en el eje Z que funcionan como cartas apiladas que permiten
agrupar los elementos de la interfaz, estructurando los contenidos.
4 Estilos

Los materiales utilizados no son sólo visuales sino que que identifican
la posición y potencialidad de cada uno de los elementos gráficos.
Las tipografías, colores y espaciados para centrar la atención del
usuario.
Se reproducen animaciones que
transforman o reorganizan los
elementos de manera continua, sin
saltos bruscos.
Este lenguaje de animaciones forma

parte de la especificación de
material design, es consistente
entre distintas aplicaciones, y
proporciona feedback a los usuarios
sobre las acciones que están
realizando.
5 Principios de diseño
¿Cómo traducir estos conceptos abstractos en principios

de diseño generalizables? Algunos de estos principios
están basados en teorías psicológicas como los Principios de
Gestalt.
Visión artística: https://www.canva.com/es_mx/aprende/teoria-gestalt-principios-diseno/
Los principios que vamos a estudiar son los siguientes:

● Principio de proximidad
● Principio de cierre
● Principio de consistencia
● Principio de visibilidad y feedback
● Principio de gestión del estado visible
● Principio de libertad y control del usuario
5 Principios
5.1 Principio de proximidad
Cuando los elementos están próximos, el cerebro interpreta

que están relacionados.
Esto supone que podemos sugerir patrones de operación

agrupando los elementos visualmente.
Desde el punto de vista del diseño de interfaces, esto tiene

dos consecuencias principales:
● Al agrupar elementos similares entre sí, conseguimos que el usuario
sepa que están relacionados, lo cual a su vez facilita el aprendizaje.
● Al agrupar elementos similares entre sí, el usuario puede
relacionarlos mentalmente y recordarlos como grupo (chunk), lo
cual mejora la memorabilidad.
5 Principios
El principio de proximidad: el grupo de la derecha parece

relacionado, el de la izquierda no.
5 Principios
El ribbon de las aplicaciones de Microsoft Office es un

ejemplo magnífico de proximidad, con los elementos
agrupados en capas (pestañas, grupos dentro de las
pestañas, uniones visuales dentro de los grupos).
Además, respeta (casi siempre) la limitación de siete
elementos de la memoria de trabajo.
5 Principios
Por otro lado, podemos explotar la proximidad de dos formas:

● Agrupar los controles relacionados, que ofrecen funcionalidades
alternativas para un paso en un proceso.
● Agrupar los controles que representan secuencias de acciones,
de modo que tengamos grupos para relacionar procesos.
Por ejemplo, la interfaz

de Handbrake usa
agrupaciones para
indicar operaciones
relacionadas, y también
para indicar secuencias.
5 Principios
5.1 Ley de Fitts
Cuando agrupamos para indicar secuencias, así como

cuando separamos para mejorar la claridad, es importante
tener en cuenta la Ley de Fitts para dispostivos apuntadores.
“El coste en tiempo para activar un control es

proporcional a la distancia a la que se encuentra e
inversamente proporcional a su tamaño.”
5 Principios
5.1 Ley de Fitts

Consecuencias de la Ley de Fitts: En la medida de lo
posible, hay que evitar grandes desplazamientos para
activar un control de tamaño pequeño.
Desplazarse a un elemento pequeño distante es costoso.
Los movimientos pueden:

○ ser cortos y precisos
○ o largos e imprecisos.
Los bordes y las esquinas imponen restricciones que los

hacen más fáciles de apuntar.
5 Principios
5.1 Ley de Fitts
Apple fuerza a que todos los menús estén en la barra

superior para que sea más rápido llegar a ellos.
Windows lleva los menús a la parte superior de la ventana.

5 Principios
5.1 Principio de proximidad. Ley de Fitts
Microsoft movió en Windows 7 el comando de “Mostrar

escritorio” desde la mitad de la barra de acceso rápido (difícil
de señalar) hacia una esquina de la pantalla (más rápida)
5 Principios
5.1 Ley de Fitts
Corolario a la ley de Fitts: La ley de Fitts se relaciona con

cómo procesa el cerebro la operación de apuntar:
● Cuanto más lejos está el destino, las órdenes de movimiento a la
mano se envían con menor precisión (primando la velocidad).
● A medida que nos acercamos al objeto, el cerebro reduce la velocidad

del movimiento, aumenta la precisión y corrige los errores de la
trayectoria anterior.
Una consecuencia interesante de este efecto son los

problemas con los movimientos en forma de túnel,(e.g.
obligar al usuario a mover el ratón en línea recta), ya que
obligan a un movimiento continuo y preciso (difícil y lento).
5 Principios
5.1 Ley de Fitts

Problemas en los submenús. El desplazamiento horizontal (marcado
en rojo) resulta muy complicado y muchos usuarios tienen problemas.
● Microsoft lo evita permitiendo recorrer la línea verde si t<500ms.
● En Ubuntu el submenú se mantiene siempre que el movimiento

relativo del ratón sea “hacia abajo y hacia la derecha”.
5 Principios
5.1 Adaptación de Ley de Fitts a Disp. Móviles
Problema Anatómia
Botones y barras en
bordes y esquinas.
Por accesibilidad se
debería actuar en
parte inferior
Problemas >5” para

actuar con pulgar =>
Diseño una mano
5 Principios
5.2 Principio de cierre y simplicidad
En diseño gráfico, el principio de cierre especifica que

cuando vemos un conjunto complejo de elementos
tendemos a buscar un único elemento simple.
En el diseño de interfaces, está relacionado con la manera de terminar

una secuencia de acciones cuando tratamos de realizar una tarea.
Nuestro cerebro tiene tendencia a identificar patrones

secuenciales, con: planteamiento, desarrollo y cierre.
5 Principios
5.2 Principio de cierre

P.e en el campus Virtual para
terminar la acción es necesario
volver arriba, lo que rompe la
percepción de la secuencia y
confunde al usuario.
Solución: Incluir listado en un

marco limitado. A los botones no
les afecta el desplazamiento.
5 Principios
5.3 Principio de consistencia
El principio básico de la consistencia explica que los usuarios

aprenden más fácilmente los conceptos que son
consistentes con su conocimiento previo.
Podemos distinguir dos tipos de consistencia:
● Consistencia interna: Entre los controles de la

aplicación.
● Consistencia externa: Con las expresiones habituales
dentro de un sistema específico.
5 Principios
5.3 Principio de consistencia interna

La consistencia interna consiste en garantizar que:
Todos los controles con funcionalidad similar deberían tener

una apariencia similar.
También es importante el principio simétrico:
Todos los controles que tienen una apariencia similar deberían

exhibir un comportamiento similar.
El principio inverso también es muy relevante:
Los controles que hacen cosas muy distintas entre sí, deberían
tener apariencias distintas entre sí.
Estos conceptos son fundamental para comunicar adecuadamente las

potencialidades y las restricciones de los elementos de la interfaz.
5 Principios
5.3 Principio de consistencia externa
La consistencia externa se centra en desarrollar aplicaciones

que son consistentes con las expresiones habituales
dentro de un sistema específico.
Principalmente se centra en:
● Mantener las expresiones principales del sistema

(clicks, pulsaciones, menús contextuales, etc.).
● Emplear los mismos atajos de teclado
● Emplear los mismos elementos visuales
● Emplear los mismos procedimientos
5 Principios
Para muchas partes del proceso, las plataformas ofrecen

estándares específicos que es importante seguir:
● Apple Human Interface Guidelines.

● Windows User Experiencie Interaction Guidelines, Guia de
Diseño Plano, Fluent Design, ...
● Google Material Design.
● Java Look and Feel Design Guidelines.
Las guías tienden a ser muy específicas, sobre todo en el

caso de las grandes corporaciones: Microsoft, Apple, Google,
...
5 Principios

Las guías tienden a ser muy específicas en Microsoft y Apple:
En Windows, toda aplicación debe tener un menú Archivo, con comando Salir.
En OSX, el menú tiene que llamarse como la la aplicación y Quit Nombre.
5 Principios
Pérdida de consistencia externa: Los atajos de teclado

● Los atajos de teclado en Windows originalmente eran
consistentes. Aparte de los omnipresentes Copiar y Pegar (Ctrl+C,
Ctrl+V) el resto de atajos también lo eran: Seleccionar todo (Ctrl+A),
Guardar (Ctrl+S), etc.
● Pero Microsoft optó por traducir los atajos de teclado a los

idiomas locales. Así, a día de hoy para seleccionar todo el contenido
en Windows u Office usamos Ctrl+E, y en el resto de aplicaciones
usamos el original de Microsoft internacional: Ctrl+A. Así mismo,
algunas aplicaciones utilizan Ctrl+G para guardar, frente al Ctrl+S que
se usa en la mayoría de las aplicaciones (¡y que en Microsoft Word se
utiliza para subrayar!).
5 Principios
Consistencia externa e innovación

● Violar la consistencia externa produce fricción.
● Pero si aplicamos como principio nunca modificar la consistencia

externa, entonces no podemos innovar ni mejorar.
Si se genera una innovación de interacción y

rompemos la consistencia con el conocimiento previo
es imprescindible que esa nueva interacción sea mejor.
Ejemplo: ¿Cómo reimplementarías la operación de deshacer en una pantalla
táctil? ¿Y cómo pondrías un texto con viñetas? ¿Mediante un menú? ¿Mediante
un botón? ¿Mediante un gesto? ¿Cuál es más consistente? ¿Cuál sería más
intuitiva? Mira cómo lo hacen en Paper
5 Principios
5.4 Principio de visibilidad y feedback
El principio de visibilidad: Cómo la interfaz emplea

distintos mecanismos para transmitir su estado actual y las
acciones posibles (o recomendables).
Feedback visual: Sé que

estoy registrado y disponible,
también sé que la aplicación
está lista para que escriba
algo en el cuadro.
Las interfaces deben modificar su apariencia, comportamiento y

reacciones de forma adecuada para indicar su estado, para así
conseguir evitar las brechas de evaluación (que se producen cuando la
interfaz no representa adecuadamente el estado del sistema)
5 Principios
Pricipios visuales para dirigir la atención:

● Tipografía: Se pueden usar distintos tamaños y tipos de letra para dirigir la
atención del usuario.
● Opacidad: Los elementos 100% opacos atraen la atención, mientras que los
semitransparentes pasan más desapercibidos.
● Tono: Los colores brillantes sugieren controles activos y atraen la atención.
Los colores apagados y grises sugieren controles inactivos o información
poco relevante.
● Relieve: Los elementos con apariencia de relieve ofrecen interactuar,
mientras que los elementos “hundidos” sugieren que están activados.
● Restricciones culturales: Los mensajes en rojo suelen indicar un error, en
amarillo indican avisos no críticos y el color verde implica que es correcto.
● Animación: Los elementos animados llaman la atención y sugieren
actividad.
5 Principios
Feedback visual : Es importante aportar feedback para

cada acción que realiza el usuario. Esto permite que el
usuario sienta que el sistema responde adecuadamente y
pueda interactuar de forma fluida.
En caso de que la aplicación no pueda responder de inmediato,

debería mostrar claramente que la orden se ha recibido y está
siendo procesada. De lo contrario, se producen problemas de brecha de
evaluación.
5 Principios
Nota anecdótica: El ejemplo más claro de problemas por falta

de respuesta inmediata es el comercio electrónico.
Click only once: si pulsas dos veces, te cobraremos dos

veces, y será culpa tuya por no hacernos caso. . .
5 Principios
Tiempos de reacción: Nunca permitir que el usuario se

pregunte si la aplicación sigue funcionando como debe,
siempre debería ser evidente el estado.
Según la duración esperada:
● Menos de 100 ms: La reacción del sistema parecerá instantánea, no
es necesario ningún feedback adicional.
● Menos de 1 segundo: El usuario percibe una disrupción. No hace
falta un feedback complejo, pero una mínima reacción del sistema
puede ayudar a tapar el problema.
● Entre 1 y 5 segundos: Representa un retardo significativo. El
sistema debería cambiar de estado visiblemente mucho antes. El
recurso más habitual es cambiar el cursor (reloj de arena, círculo que
da vueltas. . . ).
5 Principios
Tiempos de reacción:
● Más de 5 segundos: El retardo es relevante, suficiente para que el
usuario pueda querer cambiar de tarea o arrepentirse de su
decisión. Si dejamos simplemente el cursor ocupado, el usuario
empieza a preguntarse si la aplicación se ha quedado colgada. El
recurso más habitual es una barra de progreso.
Cuando mostramos barras de progreso, existen dos

principios que a menudo se violan:
● El proceso siempre debería ser cancelable (relacionado con el
principio de control explicado más abajo).
● Debería facilitarse al usuario feedback sobre la duración esperada.
5 Principios
A la hora de estimar el tiempo
restante, el usuario no necesita
saber los minutos y segundos con
precisión, sino el orden de
magnitud. Es suficiente con
hacerle saber si es cuestión de
segundos, de minutos, de horas,
de días. . .
Y que sea cierto, obviamente.

5 Principios
Este retardo también puede ser
utilizado como efecto placebo en
los usuarios. En ocasiones, una
respuesta inmediata a una acción
no proporciona la sensación de
complejidad que el usuario espera
de una tarea.
Si cuando filtramos unos contenidos

presentamos una barra de progreso, la
sensación para el usuario es que se
está ejecutando un complicado
algoritmo de personalización de
contenidos.
5 Principios
Otras formas de feedback: El feedback visual no es el

único tipo, hay otras formas de feedback.
● Feedback sonoro: Se emplea para acentuar un evento visual,
haciéndolo más evidente y apelando a múltiples sentidos.
● Feedback háptico: Es el que recibe mediante el sentido del tacto,
generalmente como forma de transmitir sensaciones
complementarias.
Nota anecdótica: En versiones anteriores de windows, se usaba mucho más

feedback sonoro que ahora, con efectos de sonido para prácticamente todas las
acciones de interfaz (abrir carpeta, seleccionar archivo, maximizar, etc.).
El motivo principal era compensar los tiempos de reacción del sistema, que solían
oscilar entre 200ms y 1s.
5 Principios
Feedback sonoro: Hoy en día el feedback sonoro se aplica

tan solo en situaciones especiales.
● Cuando se produce un evento que no se puede mostrar
visualmente. Generalmente se usan para indicar que un proceso ha
ido bien o que, por el contrario, se ha producido un error (Ej. Chime
de Mac o el código de pitidos de las placas base).
● Avisar de eventos asíncronos y avisar de errores graves (Ej. ha
llegado un mensaje). Es necesario tener cuidado con su uso ya que
pueden ser molestos y el usuario puede terminar ignorándolos.
● Interacción con móviles: las pantallas táctiles tienen retardos de
procesamiento. Esto, unido a la falta de precisión, se compensa
empleando feedback sonoro que confirma la recepción del
comando.
5 Principios
Feedback háptico: Se usa principalmente en

● Pantallas táctiles, para emular la sensación de haber pulsado un
botón físico y para compensar los problemas de falta de
responsividad.
● Dispositivos señaladores: La Wii de Nintendo emplea feedback
háptico cuando señalamos sobre un objeto interactivo, para ayudar al
cerebro en la tarea de apuntar.
● Palancas, joysticks y volantes: Generan feedbak háptico para
contribuir a la sensación de que se está manipulando directamente
un objeto físico.
● Gamepads: Emplean feedback háptico para dar sensación de que
el mando es una prolongación del elemento que controla en el juego
(coche, personaje, etc.).
5 Principios
5.4 Principio de visibilidad progresiva y jerarquía

Organizar la interfaz con múltiples
funcionalidades es un reto significativo.
En lugar de ofrecer todas las funciones disponibles

a la vez (mostrando todas las potencialidades), el
sistema debería ofrecer únicamente las que
son relevantes en un determinado momento.
Un ejemplo típico serían las interfaces que deshabilitan

las acciones de menú que no son aplicables en un
determinado momento.
Si el número de potencialidades es demasiado

elevado, resulta conveniente establecer
jerarquías visuales que permitan al usuario
centrarse en un conjunto a la vez.
5 Principios
• El ribbon de Office: agrupa los comandos

por grupos, y además ofrece un mecanismos
de cambio de grupo (pestañas del ribbon).
• Menús anidados: En las aplicaciones con

menús podemos hacer que los comandos
relacionados aparezcan agrupados.
• Pestañas: Para grandes conjuntos de

opciones, una de las abstracciones más
habituales es el uso de pestañas.
5 Principios
Diseño de interfaces por ordenación de tarjetas y

diagramas de afinidad:
Consiste en presentar a un grupo de usuarios un conjunto de
funcionalidades (representadas por tarjetas) relacionadas con un
sistema interactivo. El usuario debe agrupar las tarjetas que, de
acuerdo a su modelo mental, deberían ir juntas.
El análisis de los resultados

de los usuarios conduce a la
creación de un diagrama de
afinidad, una representación
gráfica de los grupos de
tareas que se han detectado.
5 Principios
5.5 Principio de gestión del estado visible
Los principios anteriores se centraban en hacer visible el

conjunto de acciones disponibles y la responsividad del
sistema.
También se debe permitir al usuario establecer flujos

mentales mientras interactúa con la aplicación.
Para conseguir esto, se aporta información sobre el

estado de los distintos elementos del sistema mientras
realizamos un proceso, lo cual involucra varios pasos:
● Estado de la navegación
● Estado del modelo
● Estado de la interfaz
5 Principios
Estado de la navegación: Permitir al usuario recordar en

qué zona de la aplicación o recorrido de un proceso se
encuentra.
Algunos recursos típicos:
• Migas de pan en sitios web
• Jerarquía de opciones en forma de árbol (p.e. dirs)
• Pestañas resaltadas (para recordar la actual)

5 Principios

Estado del modelo: La interfaz debe sugerir el estado
interno en el que se encuentra el modelo.
Alguna información:
● Las propiedades del objeto seleccionado
● El estado del modelo (recursos disponibles,
operaciones posibles).
● El resultado de la última operación.
Por consistencia de las WIMP de los últimos años,

la información del estado interno del sistema se
muestre en la parte inferior (barra de estado)
5 Principios
Estado de la interfaz: La interfaz debe ofrecer

información sobre su estado, que es una pista fundamental
para entender las acciones disponibles para continuar con
el proceso.
Algunos ejemplos típicos son:
● Indicar claramente qué elementos están

activos (p.e. en menús y botones).
● Indicar qué objetos están actualmente
seleccionados (video inverso o fondo gris).
● Cambios en el cursor, p.e. durante una
operación de Drag & Drop (indicar que
estamos arrastrando y sugerir el resultado de
soltar el objeto en un determinado lugar).
5 Principios
5.6 Principio de libertad y control del usuario
El usuario debe sentir el control del proceso.

● Debe sentir que puede explorar la interfaz cómodamente
(sin miedo a romper nada) y que es él quien controla al
programa y no al revés.
● Es contrario al resto de principios de diseño que consisten
precisamente en guiar al usuario.
La clave está en llevar al usuario a donde queremos sin

hacerle sentir que no es él quién controla el proceso.
5 Principios
La forma más sencilla de violar el control es interrumpiendo

al usuario con confirmaciones,avisos o mensajes de error.
En lugar de interrumpir al usuario, es preferible ofrecerle
más control y permitirle vetar acciones, lo cual requiere
permitir al usuario:
● Cancelar una operación en marcha.

● Deshacer la última acción realizada.
5 Principios
Existen muchos principios que también contribuyen a la

sensación de control:
● Reducir la fricción cognitiva tratando de anticipar los modelos
mentales del usuario. Si el sistema se comporta como espera el
usuario, el usuario siente que está controlando al sistema.
● Permitir a los usuarios dirigir, no establecer conversaciones.
Consiste en reducir el número de interacciones y cuadros de diálogo.
● Ofrecer al usuario las herramientas que necesita. Es muy delicado
y difícil de conseguir: como hemos visto anteriormente, no vale con
ofrecer todas las herramientas a la vez. Si hay demasiadas, el
usuario tendrá que parar a buscar la opción que necesita, y entonces
se rompe la sensación de control.
5 Principios
Consejos:
● Evitar diálogos y ventanas modales. Los diálogos y ventanas
modales (que bloquean la ejecución del proceso padre) roban el
control al usuario, es preferible buscar otras formas de informar.
● Ofrecer manipulación directa e interacción gráfica. Siempre que
se pueda, permitir al usuario pinchar, arrastrar o señalar. Mejor
dejarle arrastrar el margen que preguntar cuántos centímetros
debería haber desde el borde.
● Ofrecer opciones, no hacer preguntas. Una barra de herramientas
ofrece opciones de interacción, mientras que un diálogo representa
una pregunta. Siempre es preferible la primera.

2 A Diseño Aplicaciones Interactivas

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

2 A Diseño Aplicaciones Interactivas

Cargado por

Copyright:

Formatos disponibles

Diseño de aplicaciones

Principios abstractos de diseño de interfaces.

1 Modelos mentales e interacción

3 Paradigmas de diseño de interfaces

5 Principios de diseño de interfaces

¿Cómo perciben los usuarios el funcionamiento de los

Implicaciones que esto tiene en la interacción con ellos.

Fuentes habituales de conflicto:

1.1 Percepción del funcionamiento de un sistema

Modelo mental: Un modelo de un sistema es una forma de

1.1 Percepción del funcionamiento de un sistema

Fricción cognitiva: Si el modelo del usuario y el modelo

1.1 Percepción del funcionamiento de un sistema

El modelo mental: Un control Modelo Tecnológico: Hay un único

1.1 Percepción del funcionamiento de un sistema

¡Muchos jugadores no entienden de aerodinámica

El modelo mental: Modelo Tecnológico:

1.1 Percepción del funcionamiento de un sistema

● El modelo tecnológico/del sistema/de implementación:

1.1 Percepción del funcionamiento de un sistema

● El modelo representado puede ser muy diferente al

1.1 Percepción del funcionamiento de un sistema

Diferencia entre el modelo representado y el tecnológico:

1.1 Percepción del funcionamiento de un sistema

● Si el modelo representado es próximo al modelo

¡Es necesario entender

1.2 Percepción e interacción

Ciclo de interacción: Donald Norman definió el ciclo de la

2. Formula una intención de

3. Planifica y Ejecuta la acción

5. Interpreta el estado del sistema

6. Evalúa el estado del sistema en

1.2 Percepción e interacción

La ruptura se puede producir en dos puntos ():

● La brecha de ejecución está relacionada con las acciones que el

https://www.interaction-design.org: Gulf of evaluation and execution

1.2 Percepción e interacción

1.2 Percepción e interacción

● Error (mistake). El usuario realiza una acción equivocada, planifica

● Descuido (slip). El usuario entiende el sistema y el objetivo, y formula

Ejemplo de descuido en Excel-Mac:

1.2 Percepción e interacción

La brecha de evaluación está relacionada con lo que el

Aquí podemos hablar de dos problemas distintos:

● Problema de percepción: Después de realizar la acción,

● Problema de interpretación: El estado del sistema no se

1.2 Percepción e interacción

1.2 Percepción e interacción

¿Están desactivadas las acciones

1.2 Percepción e interacción

Muchas aplicaciones informáticas piden confirmación para evitar los

1.2 Percepción e interacción

Algunas pautas para diseñar teniendo en cuenta los errores:

● Dar la posibilidad de deshacer acciones y sólo pedir confirmación

● Facilitar que se descubran los errores y mostrar cómo

● Cambiar la actitud hacia los errores: Ante un error, no asumir

1.3 Funcionamiento de la memoria

El principal reto a la hora de interactuar con una

Nos interesan dos tipos de memoria (realmente hay más):

● La memoria a largo plazo: es la parte donde está toda

1.3 Memoria a largo plazo

La memoria a largo plazo es la parte donde está toda esa

● Para acceder a ese conocimiento solemos utilizar relaciones.