métodos y proceso de diseño de información para una gui en un cliente im bajo un enfoque calm...
TRANSCRIPT
![Page 1: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/1.jpg)
![Page 2: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/2.jpg)
information
designmessage
interface
design
tipography
psychology
others
visualcommunication
information
presentation
¿What is information design?
![Page 3: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/3.jpg)
HCI and Infodesign connected
![Page 4: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/4.jpg)
General description of methodology for information extraction
![Page 5: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/5.jpg)
Method: Use Logging
![Page 6: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/6.jpg)
Method: User’s Log
![Page 7: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/7.jpg)
Method: Activities Recording
inquiring a buddy
about his inner experience
instant message
showing up
buddy’s
answer
recording
time and answer
internet
![Page 8: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/8.jpg)
First Proposal: Small display devices
NicknameEstado
Canción tocándose/cantidad de resultados encontrados en buscador
Área de publicidad
NicknameEstado
1
Canción tocándose/cantidad de resultados encontrados en buscador
Área de publicidad
Enviar email
Fulanito Pérez
Enviar archivo
1
Móvil Otro
NicknameEstado
1
Canción tocándose/cantidad de resultados encontrados en buscador
Área de publicidad
Estado Opcional a teclearse en este momento
Estado Opcional previo 1
Estado Opcional previo 2
Estado Opcional previo 3
Estado Opcional previo 4
Estado Opcional previo 5
Estado Opcional previo 6
Contacto01
Satus bar
Contacto01:
Hola, como estas?
Yo:
Bien, gracias...
Contacto01:
También estas probando este nuevo chat?
Yo:
Sí!
1
Enviar
ABC
Yo: Este es mi ultimo comentario...
Contacto05: Esto es lo último contestado...
Contacto05 (regreso en 5 minutos...)
Enviararchivos Contacto01
Satus bar
Contacto01:
Hola, como estas?
Yo:
Bien, gracias...
Contacto01:
También estas probando este nuevo chat?
Yo:
Sí!
1
Enviar
ABC
Enviar emailEnviar archivo
1
Móvil Otro
Enviararchivos Contacto01
Satus bar
Contacto01:
Hola, comom estas?
Yo:
Bien, gracias...
Contacto01:
También estas probando este nuevo chat?
Yo:
Sí!
1
Enviar
ABC
Aquí voy a insertar un smiley...
Enviararchivos
![Page 9: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/9.jpg)
Needifinding’s reframe stage
![Page 10: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/10.jpg)
Method: Participative Design & Postdesign approach
![Page 11: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/11.jpg)
logos
ethos
pathos
Tropos y esquemas
más involucrados con
aspectos navegacionales
logos
ethos
pathos
Tropos y esquemas
más involucrados con
aspectos de contenido
Ejemplo del proceso
de diseño de información
Fase de
Diseño
logos
lógica
hiperestresada
ethos
pathos
1
logos
ethos
pathos
2
caracterización retórica
del producto de diseño
logos
ethos
pathos
n
Proceso
Iterativo
Proposal: Rhetorical approach to UI Design
![Page 12: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/12.jpg)
Sketching
![Page 13: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/13.jpg)
Informal evaluation on sketches
![Page 14: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/14.jpg)
MoviTalk: final proposal
![Page 15: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/15.jpg)
MoviTalk: final proposal
![Page 16: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/16.jpg)
MoviTalk: final proposal
![Page 17: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/17.jpg)
MoviTalk: final proposal
![Page 18: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/18.jpg)
Evaluation stage
![Page 19: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/19.jpg)
Logos Ethos Pathos
Results fusion
Results: About rhetorical appealing modes
![Page 20: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/20.jpg)
Effectivity on multiple chatting.
Effective chromatic codification.
Proper interpretation about schematics on contact list.
Subjective satisfaction for adopting the idea about Emotickers.
Acceptable grade on most functions proposed.
Fail on “chaining bubles” and e-mail presentation on GUI.
“Prudence messages” approbation because their utility.
Favor vote on customizable “bubble movement”.
Results: About usability
![Page 21: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/21.jpg)
Many manifestations of “What is this?” and “Where is it?” due to participants’ introduction into a new interface.
Manifestations of “I can do it other way” due to participants’ previous experiences with windows-based OS, “suggesting” new ways to interact.
Instances of “Looks fine to me” and “I can do it other way” where part from the adapting process to the interface.
Found issues on interpretation semiosis for some interface signs, in particular the ones involved with “change of state” function. They where detected as “Thanks, but no thanks”.
Limitations on the still mockup where detected, causing some ruptures because time affects the way interaction semiosis could be generated.
Results: About communicability ruptures
![Page 22: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/22.jpg)
There’s a connection between HCI and Infodesign. Both take care about final users and they can share adapted methods from other areas.
Inside interface design, visual design can be obtained from a methodological process and its value goes further than making interface “looking pretty”.
GUI design is directly related with schematic information visualization.
Communicability, coming from Semiotic Engineering, is an important factor on infodesign for HCI due to “innovation on projects” cannot always consider usability, on a strict way, as evaluation method.
Rhetoric and its appealing modes offer an unusual and interesting perspective of showing interfaces as speeches and the designer as the speaker, projecting to some audience (the user) logical facts, design skills and emotional qualities, all in a combined way.
Conclusions
![Page 23: Métodos y Proceso de Diseño de Información para una GUI en un Cliente IM bajo un enfoque Calm Technology](https://reader030.vdocuments.mx/reader030/viewer/2022012315/55a4f9501a28aba16e8b470c/html5/thumbnails/23.jpg)