Conceptos y Herramientas de Diseño en Sistemas Interactivos

Conceptos y Herramientas de Diseño en Sistemas Interactivos Mtro. 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-intro Video en YouTube: 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?

“…definición, planeación y dar forma a los contenidos de un mensaje…” Exportación entre Dinamarca e Inglaterra por William Playfair, 1780. http://en.wikipedia.org/wiki/William_Playfair

“… con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios…” Henry Beck, 1933. 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…”

Diseño de Experiencia de Usuario. Arq. de Arquitectura. Información. Diseño Contenido. industrial. Factores humanos. Diseño visual. Diseño de Interacción. Designing for Interaction: Diseño de sonido. Creating Innovative Applications and Devices, Second Edition. Dan Saffer. Interacción humano-computadora. New Riders, 2009.

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.

Método. Solución.

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ón de la retórica

Hanno Ehses. Rhetorical Handbook. Logos: Nova Scotia College of Art and Design. 1996. Apela a la razón, busca instruir. Emplea signos de autoridad intelectual. fáctico. plano. lógico.

Hanno Ehses. Rhetorical Handbook. Ethos: Nova Scotia College of Art and Design. 1996. 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 bello. ornato. apropiado. buen gusto. agradable.

Hanno Ehses. Rhetorical Handbook. Pathos: Nova Scotia College of Art and Design. 1996. 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. Design process. Ethos. Pathos. Design phase. 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. Omar Sosa Tzec, 2009.

Designing a user interface based in the Calm Technology Paradigm and Logos: Schematic Visualization, and its evaluation from a Relacionado con los datos que communicability and rhetoric stand point of view. conformarán los diferentes nichos informativos en el contenido del sitio. Omar Sosa Tzec, 2009. Estructura y jerarquías de la información. Enfoque funcional. Flujos de trabajo. Interfaz de usuario basada en estándares. Arquitectura Funcional. API. de Información.

Designing a user interface based in the Calm Technology Paradigm and Ethos: Schematic Visualization, and its evaluation from a Pondera la perspectiva basada en diseño, communicability and rhetoric stand point of view. tanto en lo visual como en todos los demás sentidos para enriquecer la Omar Sosa Tzec, 2009. 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 de Pensamiento Affordances. Experiencia. orientado a diseño.

Designing a user interface based in the Calm Technology Paradigm and Pathos: Schematic Visualization, and its evaluation from a Está relacionado con los elementos que communicability and rhetoric brindan un carácter emocional a la stand point of view. interfaz. Omar Sosa Tzec, 2009. 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ño Personalización Apropiación. emocional. de la interfaz.

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.

¡Tienen 20 minutos para Por equipos: realizar la actividad! * 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.

* Van a dividir primero sus post-it según ¡Tienen 20 minutos para realizar la actividad! 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!

¡Tienen 30 minutos para realizar la actividad! 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 de Arquitectura de Información

Sistemas de Navegación

Sistemas de Navegación Sistemas de Etiquetado

Sistemas de Navegación Sistemas de Etiquetado Sistemas de Organización

Sistemas de Navegación Sistemas de Sistemas de Etiquetado Búsqueda Sistemas de Organización

* 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

Trebuchet

Georgia

Arial Helvetica

Helvetica Helvetica

futura baskerville

isótopo isótopo

fíjate fíjate

Contraste Contraste Contraste

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

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

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

* Saber organizar * Saber jerarquizar * Saber etiquetar o nombrar

* Saber organizar * Saber jerarquizar * Saber etiquetar o nombrar * Saber organizar visualmente * Saber jearquizar visualmente * Saber crear identificadores visuales

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

¡15 minutos máximo para dibujar las pantallas! 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.

Exposición y cierre de este tutorial… ¿Qué te llevas?

¡Gracias! Porfafolio de Diseño: http://tzek-design.com Blog de Diseño: http://tzek-design.com/blog Redes Sociales: http://twitter.com/tzek http://facebook.com/omitzek http://slideshare.net/tzek

Conceptos y Herramientas de Diseño en Sistemas Interactivos

by Omar Sosa Tzec on Nov 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 15

Statistics

Conceptos y Herramientas de Diseño en Sistemas Interactivos — Presentation Transcript