sesion07 sintesis-prescribir

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


Diseño de Sistemas InteractivosSíntesis

Creatividad



Creatividad- Tipos de creatividad -

Extraído de:The cognitive neuroscience of creativity. Arne Dietrich (2004)



Creatividad- Diseño de Sistemas Interactivos -


✔ ✔

✔ ✗




✔ ✔

✔ ✗

Creatividad- Diseño de Sistemas Interactivos -


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


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



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



Ley de Fitt > TamañoLeyes

Principios

Guías diseño

Heurísticas

Patrones



Ley de Fitt > Distancia y movimiento

Leyes

Principios

Guías diseño

Heurísticas

Patrones



Ley de FittLeyes

Principios

Guías diseño

Heurísticas

Patrones



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



Leyes

Principios

Guías diseño

Heurísticas

PatronesLey de Hick



Leyes

Principios

Guías diseño

Heurísticas

PatronesLey de la Gestalt



Leyes

Principios

Guías diseño

Heurísticas


Conjunto de leyes que determinan como el ser humano percibe y organiza la

información



Leyes

Principios

Guías diseño

Heurísticas




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”



Leyes

Principios

Guías diseño

Heurísticas

PatronesPsicología del diseño


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



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



Efectivo > SeguridadLeyes Principi

osGuías diseño

Heurísticas

Patrones



Efectivo > FlexibilidadLeyes Principi

osGuías diseño

Heurísticas

Patrones



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.”



Efectivo > ConsistenciaLeyes Principi

osGuías diseño

Heurísticas

Patrones



80/20 (Ley de Pareto)Navaja de Ockham/Occam

Efectivo > SimplicidadLeyes Principi

osGuías diseño

Heurísticas

Patrones



Efectivo > SimplicidadLeyes Principi

osGuías diseño

Heurísticas

Patrones



Efectivo > FamiliaridadLeyes Principi

osGuías diseño

Heurísticas

Patrones

✔ ✗

http://www.youtube.com/watch?v=1UtlOgkOGy4


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



Information architectureLeyes Principio

sGuías diseño

Heurísticas

Patrones



Visual Design > Fuerzas perceptivas

Leyes Principios

Guías diseño

Heurísticas

Patrones

Balance

Énfasis

Continuidad



Visual Design > Teoría del color

Leyes Principios

Guías diseño

Heurísticas

Patrones



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



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.

https://medium.com/muzli-design-inspiration/style-guide-inspirations-dfb77c4bb13b%23.4005muj4v



Touch Gesture GuidelinesLeyes Principio

sGuías diseño

Heurísticas

Patrones



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

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

http://developer.android.com/guide/topics/ui/index.html?utm_source=twitterfeed&utm_medium=twitter

http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx

http://wiki.eclipse.org/User_Interface_Guidelines

https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html



Material Design (Google)Leyes Principio

sGuías diseño

Heurísticas

Patrones




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.




sGuías diseño

Heurísticas

Patrones


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



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



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



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


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


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
