sesion07 sintesis-prescribir
Post on 15-Apr-2017
121 Views
Preview:
TRANSCRIPT
SíntesisDavid Díez Cebollero
Departamento de InformáticaUniversidad Carlos III de Madrid
DISEÑO DE SISTEMAS INTERACTIVOS
Grado en Ingeniería Informática
Diseño de Sistemas InteractivosSíntesis > Contenido sesión 7
Entender como el conocimiento puede impulsar la creatividadSaber qué son y para qué sirven los artefactos prescriptivosConocer 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
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis
Creatividad
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis
Creatividad- Tipos de creatividad -
Extraído de:The cognitive neuroscience of creativity. Arne Dietrich (2004)
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis
Creatividad- Diseño de Sistemas Interactivos -
Extraído de:The cognitive neuroscience of creativity. Arne Dietrich (2004)
✔ ✔
✔ ✗
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis
Extraído de:The cognitive neuroscience of creativity. Arne Dietrich (2004)
✔ ✔
✔ ✗
Creatividad- Diseño de Sistemas Interactivos -
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
TeoríaT
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 (…)
Leyes
Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
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 FittLeyes
Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Ley de Fitt > TamañoLeyes
Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Ley de Fitt > Distancia y movimiento
Leyes
Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Ley de FittLeyes
Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
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
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de Hick
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de Hick
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de la Gestalt
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de la Gestalt
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de la Gestalt
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de la Gestalt
Conjunto de leyes que determinan como el ser humano percibe y organiza la
información
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesLey de la Gestalt
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
Patrones
“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”
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Leyes
Leyes
Principios
Guías diseño
Heurísticas
PatronesPsicología del diseño
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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 Principios
Guías diseño
Heurísticas
Patrones
TeoríaT
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
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 Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
Efectivo > SeguridadLeyes Principi
osGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
Efectivo > SeguridadLeyes Principi
osGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
Efectivo > FlexibilidadLeyes Principi
osGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
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.
EficienteLeyes Principi
osGuías diseño
Heurísticas
Patrones
Definición de eficiente“Que permite alcanzar el efecto deseado minimizando esfuerzos, con los mínimos recursos posibles.”
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
Efectivo > ConsistenciaLeyes Principi
osGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
80/20 (Ley de Pareto)Navaja de Ockham/Occam
Efectivo > SimplicidadLeyes Principi
osGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
Efectivo > SimplicidadLeyes Principi
osGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Principios
Efectivo > FamiliaridadLeyes Principi
osGuías diseño
Heurísticas
Patrones
✔ ✗
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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 (…)
Leyes Principios
Guías diseño
Heurísticas
Patrones
TeoríaT
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Information architectureLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Information architectureLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Information architectureLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Information architectureLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Visual Design > Fuerzas perceptivas
Leyes Principios
Guías diseño
Heurísticas
Patrones
Balance
Énfasis
Continuidad
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Visual Design > Teoría del color
Leyes Principios
Guías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Visual Design > Teoría del color
Leyes Principios
Guías diseño
Heurísticas
Patrones
• 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
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Visual Design > Tipografía digital
Leyes Principios
Guías diseño
Heurísticas
Patrones
• 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.
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Touch Gesture GuidelinesLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
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 GuidelinesLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Material Design (Google)Leyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Material Design (Google)Leyes Principio
sGuías diseño
Heurísticas
Patrones
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.
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Material Design (Google)Leyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Guías de diseño
Material Design (Google)Leyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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ísticas
Patrones
TeoríaT
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Heurísticas
1. Consistencia2. Facilitar el uso de atajos por usuario habituales3. Ofrecer retroalimentación informativa4. Consistencia y estandarización5. Prevención de errores y manejo simple de errores6. Permitir acciones reversibles7. Soportar puntos internos de control8. Reducir el consumo de memoria
Ocho reglas de oro (Sheneiderman) Leyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Heurísticas
1. Visibilidad del estado del sistema2. Coincidencia entre el sistema y el mundo real3. Control del usuario y libertad4. Prevención de errores5. Consistencia y estandarización6. Reconocimiento antes que recuerdo7. Flexibilidad y eficiencia de uso8. Estética y diseño minimalista9. Ayudar a los usuarios a reconocer, diagnosticar y recuperar la
situación cuando se produce un error10. Ayuda y documentación
Heurísticas de NielsenLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Heurísticas
Heurísticas de NielsenLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Heurísticas
Heurísticas de NielsenLeyes Principio
sGuías diseño
Heurísticas
Patrones
25/02/2016Rosa Romero Gómez
Diseño de Sistemas InteractivosSí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 (…)
Leyes Principios
Guías diseño
Heurísticas
Patrones
TeoríaT
Observación
Experimentación
O
E
Experiencia uso
Experiencia diseño
Xu
Xd
25/02/2016Rosa Romero Gómez
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
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Patrones de diseño
25/02/2016Rosa Romero Gómez
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
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Patrones de diseño
25/02/2015Rosa Romero Gómez
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Patrones de diseño
Diseño de Sistemas InteractivosSí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”
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > Microinteracciones
Diseño de Sistemas InteractivosSíntesis > Artefactos prescriptivos > MIcrointeracciones
Diseño de Sistemas InteractivosSíntesis > Contenido sesión 7
Entender como el conocimiento puede impulsar la creatividadSaber qué son y para qué sirven los artefactos prescriptivosConocer 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
top related