Conceptos y Herramientas de Diseño en Sistemas Interactivos

Conceptos y Herramientas de Diseño en Sistemas Interactivos

Conceptos y Herramientas de Diseño en Sistemas InteractivosMtro. Omar Sosa Tzec

3er Taller Mexicano de Interacción Humano-Computadora.Noviembre de 2010. San Luis Potosí, S.L.P., México.

Diseño.

Diseño.Veamos qué dicen del diseño…

Diseño:

1. Traza o delineación de un edificio o de una figura.

2. Proyecto, plan.

3. Concepción original de un objeto u obra destinados a la producción en serie.

4. Forma de cada uno de estos objetos.

5. Descripción o bosquejo verbal de algo.

6. Disposición de manchas, colores o dibujos que caracterizan exteriormente a diversos animales y plantas.

RAE, 2010.

Entender el significado del diseño es no sólo entender el papel que desempeña la forma y el contenido, sino descubrir que el diseño es también un comentario, una opinión, un punto de vista y un responsabilidad social. Diseñar es mucho más que simplemente ensamblar, ordenar, incluso editar: es añadir valor y significado, iluminar, simplificar, aclarar, modificar, teatrilizar, persuadir y quizá, incluso entender.

Diseño es sustantivo y una forma verbal.

Es el principio, el fin, el proceso y el producto de la imaginación.

Paul Rand. “Design, Form, and Chaos”, Yale University Press, New Heaven, 1993.

“Entender el significado del diseño es no sólo entender el papel que desempeña la forma y el contenido…”

“…el diseño es también un comentario, una opinión, un punto de vista y un responsabilidad social”.Imagen tomada de http://alt1040.com/2010/10/banksy-los-simpson-introVideo en YouTube: http://www.youtube.com/watch?v=DX1iplQQJTo

http://alt1040.com/2010/10/banksy-los-simpson-intro

http://alt1040.com/2010/10/banksy-los-simpson-intro

http://www.youtube.com/watch?v=DX1iplQQJTo

http://www.youtube.com/watch?v=DX1iplQQJTo

“… es añadir valor y significado…”

“… iluminar, simplificar, aclarar,…”

El diseño de información es la definición, planeación y dar forma a los contenidos de un mensaje y los ambientes en los que es presentado con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios.

IIID, 2009.

¿Está lleno o vacío?

¿Qué cantidad es mayor? ¿1000 ml o 32 onzas?

Dado un líquido en el recipiente, al ser tomado ¿aumenta o disminuye su volumen?

¿Y si se evapora? ¿Cómo podrías comprobarlo visualmente?

Exportación entre Dinamarca e Inglaterra por William Playfair, 1780.http://en.wikipedia.org/wiki/William_Playfair

“…definición, planeación y dar forma a los contenidos de un mensaje…”

http://en.wikipedia.org/wiki/William_Playfair

http://en.wikipedia.org/wiki/William_Playfair

Henry Beck, 1933.http://britton.disted.camosun.bc.ca/beck_map.jpg

“… con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios…”

http://britton.disted.camosun.bc.ca/beck_map.jpg

http://britton.disted.camosun.bc.ca/beck_map.jpg

Diseño de Interacción es la creación de un diálogo entre una persona y un producto, servicio o sistema. Este diálogo se encuentra usualmente en el mundo del comportamiento…

Para diseñar comportamiento se requiere un entendimiento de la fluidez de un diálogo natural…

… A través de un lenguaje visual y semántico, un diseñador de crear un diseño que apoye al observador no sólo en experimentar una emoción en particular sino también un verdadero entendimiento del contenido.

Jon Kolko. “Thoughts on Interaction Design”. Morgan Kaufmann, 2010.

“ la creación de un diálogo entre una persona y un producto, servicio o sistema. Este diálogo se encuentra usualmente en el mundo del comportamiento…”

Designing for Interaction: Creating Innovative Applications and Devices, Second Edition.

Dan Saffer.

New Riders, 2009.

Diseño deExperiencia de

Usuario.

Arq. deInformación. Arquitectura.

Contenido.

Diseñovisual.

Diseñoindustrial.

Factoreshumanos.

Diseñode sonido.

Interacciónhumano-computadora.

Diseño deInteracción.

Los diseñadores de interacción trabajan en una variedad de productos: todo desde sitios web a aplicaciones de escritorio, de electrónica de consumo hasta robótica, de dispositivos móbiles y médicos hasta ambientes interactivos. Estos productos pueden ser solamente digitales (software) o mayormente análogos (robots) o incorpóreos (una interfaz por gestos), o una combinación de todo.

Designing for Interaction: Creating Innovative Applications and Devices, Second Edition.

Dan Saffer. New Riders, 2009.

Affordances, usabilidad y experiencia de uso.

http://tzek-design.com/blog/2009/05/08/affordances-everywhere/







Persona.

Necesidad.

Necesidad.

Contexto.

Ver el diseño como un proceso cognitivo que conlleva a una solución proyectual para un problema que satisface las necesidades de ciertos usuarios en cierto contexto.

Omar Sosa Tzec, 2009.

Síntesis y Análisis

Problema.

Análisis.

Método.

¿Deducción?

Método.

Solución.

Método.

Problema.

¿Abducción?

Síntesis.

Solución.

Retórica y diseño

Retórica.

1. Arte de bien decir, de dar al lenguaje escrito o hablado eficacia bastante para deleitar, persuadir o conmover.

2. Teoría de la composición literaria y de la expresión hablada.

RAE, 2010.

Es un vocablo el cual describe el uso efectivo y persuasivo del discurso… Describe la función social y viva del lenguaje, no su gramática abstracta.

La retórica no es un conjunto de reglas estilísticas fijas sino una descripción abierta de patrones y procesos de comunicación.

El orador retórico escoge un estilo, un modo de apelación, el cual será poderoso o apropiado par una situación dada.

Hanno Ehses. Rhetorical Handbook.

Nova Scotia College of Art and Design. 1996.

Modos de apelaciónde la retórica



Logos:

Apela a la razón, busca instruir.

Emplea signos de autoridad intelectual.

fáctico. plano. lógico.



Ethos:

Busca deleitar o convencer.

Se enfoca en la decoración y cualidades estéticas de un diseño, aborda con frecuencia los valores tradicionales y tendencias morales de una audiencia.

moralmente apropiado.

bello. ornato.

buen gusto. agradable.



Pathos:

Apela a las emociones, busca conmover.

Provoca respuestas no racionales, más o menos esperadas, en la audiencia.

Involucra sentimientos del estilo del amor, odio y venganza. Es decir, sentimientos fuertes, no una sensibilidad al gusto como en el ethos.

apasionado. impulsivo. discordante.

Modelo retórico para el diseño de interfaces

Logos.

Ethos. Pathos.

Design process.

Designphase.

Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view.


Logos:

Relacionado con los datos que conformarán los diferentes nichos informativos en el contenido del sitio.

Estructura y jerarquías de la información.

Enfoque funcional. Flujos de trabajo.

Interfaz de usuario basada en estándares.



Arquitectura de Información.

Funcional. API.



Ethos:

Pondera la perspectiva basada en diseño, tanto en lo visual como en todos los demás sentidos para enriquecer la experiencia de uso (no desde el punto de vista emocional).

Está supeditada a las destrezas y experiencia del diseñador para solucionar un problema.

Diseño deExperiencia.

Pensamiento orientado a

diseño.

Affordances.



Pathos:

Está relacionado con los elementos que brindan un carácter emocional a la interfaz.

Se manifiesta cuando el usuario puede apropiarse del producto a través de la interfaz, creando un vínculo emocional más allá de la utilidad de dicho producto. Lo anterior está fuertemente ligado con la capacidad de personalización y manipulación del usuario.

Diseñoemocional.

Personalizaciónde la interfaz.

Apropiación.

Actividad:Elaborar un mapa “retórico”

Escenario.

Gerardo García es un chavo de 22 años que le encanta el rock, salir de mochilero a conocer lugares con historia y todo lo que tiene que ver con deportes extremos. También es consumidor de noticias, casi siempre digitalmente a través de su iPad.

Le comentaron que en San Luis Potosí hay lugares donde puede salir “al campo” a practicar kite land boarding. Está decido a ir a probar pero necesita tener mayor información para tomar una decisión.

Necesita saber si existe una app para móviles, iPhone o iPad que le ayude con su objetivo.

Por equipos:

* Realiza una lluvia de ideas de todo, cualquier cosa, sin importar si podría parecer tonto o irrelevante, que esté relacionado con el deporte que practica Gerardo, asuntos relacionados con su forma de ser (lo que gusta, aspira o sueña), cuestiones relacionadas con San Luis Potosí (cultura, geografía, clima, etc.) y todo lo que se te venga a la mente dado este escenario.

* Cada idea por separado será escrita en un post-it.

* Lo importante es hacerlo rápido, no divagar mucho en lo que se escribe en cada papelito.

¡Tienen 20 minutos para realizar la actividad!

* Van a dividir primero sus post-it según crean que es un feature o asunto de ethos, pathos o logos.

* Vale complementar con más ideas, nuevas o equivalentes, conforme se va haciendo el arreglo.

* Luego van a tratar de acomodar o yuxtaponer los post-it de ser necesario de forma que vayan encontrando grupos de información similar, eliminar redundancias o incluso asociar ideas que parecen disjuntas.

* Es válido “nombrar” grupos bien definidos según convenga.


Feedback de esta parte del ejercicio

Actividad:Bocetar

Actividad:Ideación

Resulta que dado que el perfil de Gerardo resulta muy capitalizable según los estudios de mercado, tu empresa de TIC a decidido no sólo lanzar una aplicación de software que satisfaga a gente como Gerardo, sino que van a lanzar un producto nuevo desde cero.

¡Un nuevo gadget!

Con tu equipo:

* El punto de partida será el mapa generado previamente.

* Tienen que hacer una lluvia de bocetos e idear, idear, idear e idear posibles productos que cubrirán las necesidades de usuarios como Gerardo.

* Deberán hacer una especie comic donde se explique el funcionamiento del producto.


Exposición

Introducción al concepto deArquitectura de Información

Sistemas deNavegación


Sistemas deEtiquetado



Sistemas deOrganización



Sistemas deOrganización

Sistemas deBúsqueda

* Saber organizar

* Saber jerarquizar

* Saber etiquetar o nombrar

Conceptos básicos de diseño visual

Factores de ejecución siempre a considerar en la construcción de mensajes visuales:

* El espacio mismo.

* Ocupación del espacio (composición).

* Establecimiento de jerarquías.

* Aislamiento de elementos y legibilidad.

* Sentido de la lectura del mensaje.

* Síntesis e iconicidad.

* Uso del color y contraste cromático.

* Tensión y ritmo.

* Estética (básica a la cultura).

El espacio mismo

Ocupación del espacio (composición).

Establecimiento de jerarquías.

Aislamiento de elementos legibilidad.

Aislamiento de elementos.

Sentido de lectura del mensaje.

Síntesis e iconicidad.

Uso del color y contraste cromático.

Ritmo y tensión.

Estética (básica a la cultura).

Variables visuales de Jaques Bertin.http://www.infovis-wiki.net/index.php?title=Visual_Variables

http://www.infovis-wiki.net/index.php?title=Visual_Variables

http://www.infovis-wiki.net/index.php?title=Visual_Variables

Trebuchet

Georgia

Arial

Helvetica

Helvetica

Helvetica

futurabaskerville

isótopoisótopo

fíjate

fíjate

ContrasteContrasteContraste

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Phasellus dolor magna, iaculis eu tincidunt id, ornare at massa. Etiam interdum nisl ac nunc suscipit rutrum. Quisque vestibulum fermentum neque sit amet tempor. Aenean id sapien arcu. Curabitur non erat vitae nisl consequat fermentum. Aliquam vel velit aliquam ligula molestie dignissim at at risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Phasellus dolor magna, iaculis eu tincidunt id, ornare at massa. Etiam interdum nisl ac nunc suscipit rutrum. Quisque vestibulum fermentum neque sit amet tempor. Aenean id sapien arcu. Curabitur non erat vitae nisl consequat fermentum. Aliquam vel velit aliquam ligula molestie dignissim at at risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.

Jerarquía

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.

Jerarquía

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum.

Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris.

Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.

Chunking

* Saber organizar

* Saber jerarquizar


* Saber organizar

* Saber jerarquizar


* Saber organizar visualmente

* Saber jearquizar visualmente

* Saber crear identificadores visuales

Última dinámica:Elaboración de un wireframe

Aplicando lo discutido sobre la arquitectura de información y el diseño visual, boceta dos pantallas significativas de la aplicación ya sea para web, iPhone o iPad que necesita Gerardo García o incluso, de la misma GUI del nuevo gadget.

¡15 minutos máximo para dibujar las pantallas!

Exposición y cierre de este tutorial…

¿Qué te llevas?

¡Gracias!¡Gracias!

http://tzek-design.comhttp://tzek-design.com/bloghttp://twitter.com/tzekhttp://facebook.com/omitzekhttp://slideshare.net/tzek

Porfafolio de Diseño:Blog de Diseño:Redes Sociales:

http://tzek-design.com

http://tzek-design.com

http://tzek-design.com/blog

http://tzek-design.com/blog

http://twitter.com/tzek

http://twitter.com/tzek

http://facebook.com/omitzek

http://facebook.com/omitzek

http://slideshare.net/tzek

http://slideshare.net/tzek

Conceptos y Herramientas de Diseño en Sistemas Interactivos

Design

Transcript of Conceptos y Herramientas de Diseño en Sistemas Interactivos