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

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

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

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 de
Experiencia de
Usuario.
Arq. de
Información.
Arquitectura.
Contenido.
Diseño
visual.
Diseño
industrial.
Factores
humanos.
Diseño
de sonido.
Interacción
humano-computadora.
Diseño de
Interacció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/

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.

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.
Nova Scotia College of Art
and Design. 1996.
Logos:
Apela a la razón, busca instruir.
Emplea signos de autoridad intelectual.
fáctico. plano. lógico.

Handbook.
and Design. 1996.
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.

Handbook.
and Design. 1996.
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.
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.

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.
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.
Arquitectura
de
Información.
Funcional. API.

based in the Calm
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 de
Experiencia.
Pensamiento
orientado a
diseño.
Affordances.

based in the Calm
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ño
emocional.
Personalización
de 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

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.

Introducción al concepto de
Arquitectura de Informació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
Etiquetado
Sistemas de
Organización
Sistemas de
Bú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).

Ocupación del espacio (composición).

Establecimiento de jerarquías.

Aislamiento de elementos legibilidad.

Sentido de lectura del mensaje.

Uso del color y contraste cromático.

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

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

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

amet, sollicitudin id ipsum.
Jerarquía
amet, sollicitudin id ipsum.
Jerarquía

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 etiquetar o nombrar
* 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.com
http://tzek-design.com/blog
http://twitter.com/tzek
http://facebook.com/omitzek
http://slideshare.net/tzek
Porfafolio de Diseño:
Blog de Diseño:
Redes Sociales:

Conceptos y Herramientas de Diseño en Sistemas Interactivos

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Conceptos y Herramientas de Diseño en Sistemas Interactivos

Similar a Conceptos y Herramientas de Diseño en Sistemas Interactivos (20)

Más de Omar Sosa-Tzec

Más de Omar Sosa-Tzec (20)

Último

Último (20)

Conceptos y Herramientas de Diseño en Sistemas Interactivos