1. resumen
Este trabajo plantea una propuesta para el desarrollo de un marco de trabajo que sea utilizado durante
el diseño de interfaces de usuario, el cual ayude a determinar cuándo y cómo transformar información
de una interfaz a una representación visual que al explotar la propiedades de un objeto gráfico a través
del tiempo, “extienda” la información misma y que a su vez permita enriquecer la experiencia de usua-
rio (UX por sus siglas en inglés), considerando un contexto de avance tecnológico en cuanto a disposi-
tivos móviles y cómputo embebido.
palabras clave
Representación Visual, Diseño de Interacción, Diseño de Experiencias de Usuario, Diseño de IHC, Visualización de Información, Esquemática, Diseño de Información.
motivación
En las grandes ciudades, el avance tecnológico y el aumento de servicios
informatizados han derivado en que parte de sus poblaciones, aquellos
que están en constante contacto con aparatos tecnológicos y sobre todo
empleando dichos servicios, estén consumiendo grandes cantidades de
información, las cuales pueden percibirse primeramente como entidades
dispersas pero que en realidad son tomadas como una unidad al momen-
to de tomar una decisión, ya sea en el día a día o en situaciones particu-
lares. Lo anterior corresponde de cierto modo a una gestión personal del
conocimiento.
Por ejemplo, considérese el caso en el que un turista visita una nueva
ciudad por primera vez y desea identificar un lugar dónde comer. Una
aplicación que indique la ubicación y los precios podría parecer suficien-
te. Conveniente sería tener también información proveniente de turistas
pasados o incluso de gente local. Sin embargo, un sistema inteligente
ideal relacionaría la información generada por este servicio con otras
complementarias: el estado actual de la tarjeta de crédito y/o débito,
información relevante sobre requerimientos alimenticios tomados de un
expediente médico virtual, estimación de tiempos en relación con una
posible agenda dada por la oficina de turismo de la ciudad. Para esta
aplicación ideal, lo primordial es que la información debe presentarse en
forma integral de manera que no cause para nada una ansiedad o sobre-
carga cognitiva por el exceso de información, por el contrario, el fin es
que el turista tome una decisión acertada justo en ese momento.
Determinar cuáles podrían ser las relaciones probables entre la informa-
ción generada por los servicios resulta un problema complejo, pero tam-
bién lo es el determinar la mejor representación de dicha información en
este tipo de situaciones. Con lo anterior, se ha de tomar en cuenta tam-
bién no sólo posibles restricciones como puede ser la naturaleza del
dispositivo tecnológico mediante al cual accede el usuario a la informa-
ción, sino también restricciones inherentes al usuario como puede ser su
nivel de alfabetización informacional e informática.
contexto
Por otro lado, el diseño de interacción conceptual [1][2] juega un papel
importante en el avance tecnológico, ya que a través de la ideación de
interfaces, se plantean soluciones no convencionales a ciertos problemas
que afectan la calidad de vida de las personas o incluso, permite estable-
cer nuevos planteamientos sobre cómo resolver dichos problemas con la
tecnología existente pero en forma innovadora. En algunas ocasiones,
estos diseños conceptuales muestran interfaces, ya sea para dispositivos
móviles o aquellos embebidos en el ambiente, donde es posible observar
componentes gráficos, de representación sintética o esquemática, con
los cuales los usuarios interactúan mientras consumen de ellos informa-
ción relevante para toma de decisiones [3].
A pesar de que en la literatura se encuentran principios visuales que
aplican al diseño de interfaces, no queda del todo claro cuándo y cómo
es posible transformar información textual en representaciones visuales
como las ya mencionadas. Y es que puede observarse que ante los avan-
ces de manipulación e interacción con los dispositivos tecnológicos
actuales, como lo es el manejo de gestos, el “componente gráfico”
dentro de una experiencia de uso sigue presentándose en una forma
“convencional”, con una fuerte herencia de las interfaces WIMP [4]. Re-
sulta entonces como alternativa, la propuesta de un marco de trabajo
relacionado con representaciones visuales (esquemáticas y novedosas)
que apoye en la exploración y elaboración de prototipos de interfaces
durante la fase de diseño.
trabajo relacionado
Dentro del contexto del diseño de información, el trabajo de Bertin [5]
resulta fundamental al realizar un análisis sobre el manejo de variables
visuales para la construcción de mensajes (gráficos). En adición, otros
autores han analizado también el uso de representaciones esquemáticas
y gráficas para la representación de información compleja, tales como
Tufte [6] o Engelhardt [7].
Por otro lado, dentro del contexto de Interacción Humano-Computadora
(IHC), los trabajos de Fry [8], Viegas [9] o Xiong [10], muestran el resulta-
do de estresar visualmente las interfaces de usuario para presentar infor-
mación dentro de una interfaz. A su vez, Card [11] ha presentado una
compilación sobre las características de la visualización y exploración
dinámica de información.
enfoque
Como se ha mencionado el propósito de esta propuesta es investigar el
uso de un rango de representaciones visuales que puedan ser utilizadas
durante el proceso de diseño y elaboración de prototipo de una interfaz,
tomando en cuenta cómo el marco de trabajo teórico resultante puede
coadyuvar a un experiencia de uso rica y que no cause mucha carga cog-
nitiva generada por el consumo de información durante la interacción.
Para tal fin, se considera que primer es necesario realizar una investiga-
ción secundaria sobre la aplicación y alcance tanto de la visualización de
información y el diseño de información en un contextos de uso con la
tecnología actual y tomando en cuenta también la posible tendencia de
su desarrollo; por ejemplo, las interfaces embebidas.
Como segunda fase, se considera realizar una investigación primaria
sobre una muestra de usuarios en su contexto de uso. Esta investigación
será de tipo cualitativa y empleará la observación, entrevistas y ejercicios
de diseño colaborativo [12] para obtener la información que sentará la
base para desarrollar el marco de trabajo antes mencionado.
Se espera además, que junto con el planteamiento del marco de trabajo,
se pueda establecer alguna herramienta de evaluación para las interfaces
diseñadas bajo dicho marco; siendo necesario un cuadro comparativo
con otros tipos de evaluaciones, ya establecidas en el campo de la IHC,
tanto de naturaleza cognitiva (i.e. pruebas de usabilidad) como de comu-
nicación (i.e. pruebas de comunicabilidad proveniente de la Ingeniería
Semiótica). Así, con las pruebas contrastadas, se realizarán ajustes al
marco de trabajo antes de liberar su versión final.
referencias
[1] Anderson, J., McRee J., Robb J. Effective UI: The Art of Building Great User Experience in Software. O’Reilly.
[2] Saffer, D. Designing Interactions. New Riders, IL.
[3] Microsoft. Microsoft Office Labs Vision 2019. Online: http://youtube.com/watch?v=8Ff7SzP4gfg. Last visit: June
28, 2011.
[4] Müller-Prove. Vision and Reality of Hypertext and Graphical User Interfaces. Online: http://www.mprove.de/
diplom/index.html. Last visit: June 28, 2011.
[5] Bertin, J. Semiology of Graphics: Diagrams, Networks, Maps. University of Winsconsin Press.
[6] Tufte, E. Envisioning Information. Graphic Press.
[7] Engelhardt, Y. Syntactic Structure in Graphics. Online: http://yuriweb.com/engelhardt-graphic-syntax.pdf. Last
visit: June 29, 2011.
[8] Fry, B. Computational Information Design. Online: http://benfry.com/organic. Las visit: June 29, 2011.
relación de la propuesta con la redtic de conacyt
Esta propuesta se encuentra relacionada mayormente con el Gran Reto 6 de la Red Temática de Tecnologías de la Información y Comunicación: “Servicios
basados en el conocimiento para el ciudadano: La era informática para todos los mexicanos” ya que encaja con el objetivo de “diseñar modelos y herra-
mientas que permitan ofrecer al ciudadano mexicano, servicios basados en conocimiento, para atender sus necesidades de información, de acuerdo a su
contexto y situación individual” y aún más pretende apoyar con el propósito de “disminuir las diferencias de oportunidades en nuestra sociedad mexica-
na, incrementando las opciones de acceso a la información y al conocimiento” [13]. Por otro lado, debido a la naturaleza de esta propuesta sobre cómo
obtener información a partir de la investigación de los usuarios para facilitar sus interacciones con dispositivos tecnológicos, se puede observar una estre-
cha relación con la Línea de Investigación 5: “Interacción Humano-Computadora, Graficación y Realidad Virtual”.
Omar Sosa Tzec
Universidad de las Américas Puebla.
Ex-Hacienda Santa Catarina Mártir S/N.
San Andrés Cholula, Puebla.
cp 72820.
t: +52 (222) 229 21 13
e: omar.sosa@udlap.mx
[9] Viegas, F. B., 1999. Chat Circles. In Proc. of the SIGCHI Conference on Human Factors in Computing Systems: the
CHI is the limit (Pittsburgh, USA). ACM, New York, NY.
[10] Xiong, R. People Garden: Creating Data Portraits of Users. Online:
http://infosthetics.com/archives/2006/01/people_garden_social_communication_data_visualization.html. Last visit:
June 29, 2011.
[11] Card, S. Information Visualization. In Human-Computer Interaction: Design Issues, Solutions, and Applications.
CRC Press.
[12] Sanders, E. B-N., 2008. Co-creation and new landscapes of design. CoDesign: International Journal of CoCreation
in Design and the Arts. Online: http://www.maketools.com/articles-
papers/CoCreation_Sanders_Stappers_08_preprint.pdf. Last visit: June 29, 2011.
[13] Red Temática de Tecnologías de Información y Comunicación de CONACYT. Online: http://www.redtic-
conacyt.mx/node/69. Last visit: June 29, 2011.
servicio
interfaz interfaz
servicio
servicio
servicio
usuario
usuario
servicio
interfaz
servicio
servicio
servicio
interfaz
información
generada
usuario
servicio servicio
usuario
servicio
interfaz interfaz
servicio
servicio
servicio
En un escenario sencillo, para que un usuario tome una decisión en particular, bastaría
con acceder al servicio y de ahí tomar la información generada. Esto es, la gestión perso-
nal de conocimiento tiene como base la información (e incluso conocimiento colectivo)
que le provee el servicio en forma directa.
Sin embargo, para gestionar el conocimiento personal y tomar una buena decisión, el usuario
podría necesitar nutrirse de la información de otros servicios para ampliar su contexto.
A pesar de que diferentes servicios proveen información relevante, el usuario se tiene que
encargar de relacionarlas y de identificar dentro de cada una, cuáles son los factores que sí
influyen en su situación.
En un escenario ideal, el entrelazado de información resultaría transparente para el usuario. Sin
embargo, ante la complejidad de este problema, soluciones ineficientes podrían derivar en
excesos de información presentada al usuario, llevándolo a una sobrecarga informativa y a que
pierda claridad.
Para evitar una sobrecarga y a la vez amalgamar pedazos de la información, se considera
que podría elaborarse un marco de trabajo para representar la información a través de
formas gráficas equivalentes pero visualmente sintéticas (esquemáticas).
El marco de trabajo se adaptará a proyectos de diseño de interfaces y/o elaboración de
prototipos para experiencias de usuario, el cual será aplicado durante la fase de diseño y
en el cual se contemplarán diferentes entornos o modos de interacción. Se espera tam-
bién elaborar una herramienta de evaluación que ayude a medir la eficiencia tanto en la
interacción como en la gestión personal del conocimiento para proyectos que apliquen
este marco de trabajo.
usuario diseñador
proyecto de HCI/UX/IxD
fase de diseño fase de evaluación
a
b
c
cb
a