Sesion07 sintesis-prescribir

Síntesis
David Díez Cebollero
Departamento de Informática
Universidad Carlos III de Madrid
DISEÑO DE
SISTEMAS INTERACTIVOS
Grado en
Ingeniería Informática

Diseño de Sistemas Interactivos
Síntesis > Contenido sesión 7
 Entender como el conocimiento puede impulsar la creatividad
 Saber qué son y para qué sirven los artefactos prescriptivos
 Conocer distintos tipos de artefactos prescriptivos
 Leyes: Formulaciones basadas en la observación y la experimentación
 Principios: Abstracciones generalizables basada en la teoría o la
experimentación
 Guías: Recomendaciones de diseño basadas en la teoría, la
experimentación o la práctica
 Heurísticas: Abstracciones generalizables basadas en la experiencia
 Patrones: Soluciones repetibles basadas en la experiencia
 Conocer el concepto de microinteracción
25/02/2016David Díez Cebollero

Síntesis
Creatividad

Síntesis

Síntesis
Creatividad
- Tipos de creatividad -
Extraído de:
The cognitive neuroscience of creativity. Arne
Dietrich (2004)

Síntesis
Creatividad
- Diseño de Sistemas Interactivos -
Extraído de:
Dietrich (2004)
✔ ✔
✔ ✗

Síntesis
Extraído de:
Dietrich (2004)
✔ ✔
✔ ✗
Creatividad
- Diseño de Sistemas Interactivos -

Síntesis > Artefactos prescriptivos
Definición
“Conjunto de artefactos dirigidos a la
elaboración de soluciones óptimas.
Los artefactos prescriptivos sugieren o
establecen la forma de acometer la
solución.”
Leyes Principios Guías diseño Heurísticas Patrones
Basado en la
experimentación
Basado en la
práctica
Artefactos prescriptivos

Síntesis > Artefactos prescriptivos > Leyes
Teoría
T
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd
 Definición
“Por leyes de interacción se entiende al
conjunto de formulaciones elaboradas a
partir del estudio del comportamiento
humano al interactuar con el medio.”
 Ejemplos
 Ley de Fitt
 Ley de Hitch
 Leyes de la Gestalt
 (…)

Modelo predictivo que establece el tiempo necesario para
moverse desde una posición inicial hasta una zona destino final
como una función de la distancia hasta el objetivo y el tamaño
de éste.
Describe…
…movimiento en una dimensión
…respuestas motoras simples
…movimiento sin entrenamiento
Ley de Fitt

Ley de Fitt > Tamaño

Ley de Fitt > Distancia y movimiento

Ley de Fitt

Modelo predictivo que establece el tiempo necesario para tomar
una decisión en función del número de opciones posibles.
Describe…
…tareas sencillas de toma de decisión
…decisiones intuitivas
…decisiones inmediatas que no requieren razonamiento
Ley de Hick

 

Ley de Hick

Ley de la Gestalt

Ley de la Gestalt
Conjunto de leyes que determinan como el ser
humano percibe y organiza la información

“La psicología del diseño hace referencia
a la aplicación de conocimientos propios
de la psicología al campo del diseño
como forma de guiar la creación de
artefactos que mejoren la experiencia de
usuario”

Psicología del diseño

Síntesis > Artefactos prescriptivos > Principios
 Definición
“Los principios de diseño son
abstracciones generalizables basadas en
la teoría, la observación y la
experimentación.”
 Bases de conocimiento
 Diseño visual
 Interacción
 Psicología
 (…)
Leyes Principio
s
Guías diseño Heurísticas Patrones
Teoría
T
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd

 Utilidad (Utility)
El sistema debe ser concebido para un propósito
claro y conocido
 Seguridad (Safety)
El sistema debe disponer de mecanismos que
minimice la ejecución de errores y facilite la
recuperación de los mismos
 Flexibilidad (Flexibility)
El sistema debe proporcionar distintas formas de
ejecutar una acción a fin de adecuarse a distintos
tipos de operativas y contextos
 Estabilidad (Stability)
El sistema debe ser diseñado de manera que
pueda utilizarse de manera prolongada
Efectivo
 Definición de efectivo
“Que permite lograr el efecto
deseado o alcanzar el objetivo
propuesto.”
Leyes Principio
s

Efectivo > Seguridad
Leyes Principio
s

Efectivo > Flexibilidad
Leyes Principio
s

 Consistencia (Consistency)
Emplear elementos similares en situaciones
parecidas
 Visibilidad (Visibility)
El usuario debe ser consciente de la
funcionalidad del sistema (affordance) y el
resultado (feedback) de su actividad
 Simplicidad (Simplicity)
Utilizar elementos fáciles de comprender y
memorizar. Limitar (constraint) acciones
superfluas
 Familiaridad (Familiarity)
Emplear, en la medida de lo posible, modelos
mentales conocidos por el usuario.
Eficiente
Leyes Principio
s
 Definición de eficiente
“Que permite alcanzar el
efecto deseado minimizando
esfuerzos, con los mínimos
recursos posibles.”

Efectivo > Consistencia
Leyes Principio
s

80/20 (Ley de Pareto)
Navaja de Ockham/Occam
Efectivo > Simplicidad
Leyes Principio
s

Efectivo > Simplicidad
Leyes Principio
s

Efectivo > Familiaridad
Leyes Principio
s
✔ ✗

Síntesis > Artefactos prescriptivos > Guías de diseño
 Definición
“Por guías de diseño se entiende un conjunto de
recomendaciones basadas en la teoría, la
experimentación o la práctica orientadas a
mejorar la experiencia de uso del sistema.”
 Ejemplos
 Information architecture guidelines
 Human Interface Guidelines (HIG)
 Guías de diseño para la Web 2.0
 Guías de Yahoo para el diseño de sitios web
 (…)
Teoría
T
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd

Information architecture

Visual Design > Fuerzas perceptivas
Balance
Énfasis
Continuidad

Visual Design > Teoría del color

Visual Design > Teoría del color
•Limitar la paleta de colores al número de colores que puede procesar
el cerebro en un vistazo
(alrededor de cinco)
•Diseño web: utilizar un color para el fondo, un color principal y un
color de realce
•Empezar con colores sólidos y luego introducir gradientes
•Mejor que utilizar muchos tonos distintos es modificar el matiz de un
determinado tono o color

Visual Design > Tipografía digital
•En diseño web, tipos con un tamaño entre 9 y 12
puntos se considera óptimos. Para resoluciones
menores, habría que utilizar tamaños de tipos mayores.
•Para tamaños de tipos entre 9 y 12 puntos, el
interlineado debe ser de 1 a 4 puntos. A menor tamaño
de tipo, mayor interlineado.
•Para tamaño de tipos entre 9 y 12 puntos, la longitud
de línea debe estar entre 8 y 12 cm, resultando en un
máximo de 10 a 12 palabras por línea o entre 35 y 55
caracteres.

Touch Gesture Guidelines

 Recomendaciones de diseño destinadas a mejorar la experiencia de usuario,
proporcionando interfaces de usuario más usables e intuitivas
 Centradas en realizar recomendaciones sobre la disposición de la interfaz de
usuario, la apariencia de la interfaz y los elementos de interacción
Human Interface Guidelines

Material Design (Google)

Material Design (Google)
Desarrollar un sistema subyacente que permita una experiencia
unificada a través de plataformas y tamaños de dispositivos. La
entrada táctil es fundamental, pero el tacto, la voz, el ratón y el
teclado son métodos de entrada indispensables.
Crear un lenguaje visual que sintetice los principios clásicos de
buen diseño con la innovación y las posibilidades de la
tecnología y la ciencia.

Síntesis > Artefactos prescriptivos > Heurísticas
 Definición
“Las heurísticas se refieren a abstracciones
generalizables basadas en la experiencia
dirigidas a mejorar la usabilidad del sistema
(experiencia de usuario).”
 Ejemplos
 Ocho reglas de oro (Shneiderman)
 Diez heurísticas de Nielsen
 Heurísticas de Nielsen y Molich
 (…)
Leyes Principios Guías diseño Heurística
s
Patrones
Teoría
T
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd

1. Consistencia
2. Facilitar el uso de atajos por usuario habituales
3. Ofrecer retroalimentación informativa
4. Consistencia y estandarización
5. Prevención de errores y manejo simple de errores
6. Permitir acciones reversibles
7. Soportar puntos internos de control
8. Reducir el consumo de memoria
Ocho reglas de oro (Sheneiderman)
s
Patrones

1. Visibilidad del estado del sistema
2. Coincidencia entre el sistema y el mundo real
3. Control del usuario y libertad
4. Prevención de errores
5. Consistencia y estandarización
6. Reconocimiento antes que recuerdo
7. Flexibilidad y eficiencia de uso
8. Estética y diseño minimalista
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperar la situación
cuando se produce un error
10. Ayuda y documentación
Heurísticas de Nielsen
s
Patrones

Heurísticas de Nielsen
s
Patrones

25/02/2016Rosa Romero Gómez
Síntesis > Artefactos prescriptivos > Patrones de diseño
 Definición
“Los patrones de diseño hacen referencia a
soluciones probadas a problemas recurrentes. Los
patrones compendian la esencia de un problema y
su solución correspondiente siguiendo una plantilla
prefijada”
 Ejemplos
 Patrones de diseño software
 Patrones arquitectónicos
 Patrones de interacción
 (…)
Teoría
T
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd

 Patrones de diseño para plataformas específicas
 Patrones de diseño web
 Ejemplos:
 Patrones de Van Duyne
 Patrones web de Yahoo!
 Patrones del Quince
 Patrones de diseño móvil
 Ejemplos:
 Patrones de Theresa Neil
 Patrones de Android/iOs
 Patrones de diseño para dominios específicos
 Ejemplos:
 Patrones de diseño para sistemas en tiempo real
 Patrones de diseño para sistemas de recuperación de información
 Patrones de diseño para juegos
Tipología de patrones de diseño

 Definición
“Un catálogo de patrones de diseño hace referencia a una
colección de patrones de diseño clasificados por uno o más
criterios a fin de que resulten más accesibles para el diseñador”
 Ejemplos de criterios de clasificación:
 Nivel de abstracción: nivel de detalle en la descripción provista por el patrón de diseño
 Propósito: tipo de problemas que resuelve el patrón de diseño
 Alcance: ámbito de aplicación del patrón
 (…)
Catálogo de patrones de diseño

Síntesis > Artefactos prescriptivos > Microinteracciones
“Una microinteracción hace referencia a
cada una de las tareas, funcionalidades,
que pueden ejecutarse de manera
aislada al interactuar con un dispositivo”

Síntesis > Artefactos prescriptivos > Microinteracciones

Síntesis > Artefactos prescriptivos > MIcrointeracciones

Sesion07 sintesis-prescribir

Recommended

Recommended

More Related Content

Similar to Sesion07 sintesis-prescribir

Similar to Sesion07 sintesis-prescribir (20)

Recently uploaded

Recently uploaded (20)

Sesion07 sintesis-prescribir