Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009

2,133 views

Published on

Designing a user interface based on the
calm technology paradigm and schematic
visualization, and its evaluation from a
communicability and rhetoric standpoint.

Paper presented at the 4th Information Design International Conference.
Rio de Janeiro | Brazil | 2009.

Omar Sosa Tzec
Centro Interactivo de Recursos de Información y Aprendizaje – UDLAP.

Egresado de la Maestría en Diseño de Información de la UDLAP.

Published in: Design
  • Be the first to comment

UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009

  1. 1. Designing a user interface based on the calm technology paradigm and schematic visualization, and its evaluation from a communicability and rhetoric standpoint. Omar Sosa Tzec CIRIA – UDLAP. Samuel Cortina Arteaga. Design Faculty – UDLAP. Roberto Holguín Molina. InSitum – México. 4th Information Design International Conference. Rio de Janeiro | Brazil | 2009.
  2. 2. Introduction: Point of start.
  3. 3. Information Design. Other disciplines & paradigms. Human – Computer Interaction.
  4. 4. Schematic Information Visualization. User Interface Design. Calm Technology Design Paradigm.
  5. 5. Users’ Needs. Design Process. Prototype Proposal. Evaluation.
  6. 6. Taking Calm Technology into count: What is to consider the paradigm into the design process?
  7. 7. Periphery Center
  8. 8. Periphery Center
  9. 9. User Interface. Interface components.
  10. 10. Interface component at user’s center.
  11. 11. Preliminary Work: Design methods based on Experience Sampling Method and Participative Observation.
  12. 12. User working with a laptop and chat client running. Visual records from location of chat windows. Fusion of visual records in order to identify patterns. Text records about the inner experience at that time. Records grouped into possible ESM categories. Needfinding Excercise
  13. 13. Chat client is running. Question about the contact’s inner experience. IM shows up on contact’s side. Contact’s answer. Recorded answers are grouped into ESM categories.
  14. 14. Design Process: Sanders’ postdesign, participative design, personas, and sketching.
  15. 15. Scenario. Design ideas.Persona. Plenary session. Design ideas. Design ideas. Sketching. Sketching. Low–fi prototype design. Sketching. Sketching. Evaluation
  16. 16. Rhetoric Triangle Model: A conjecture of how interface design process evolves.
  17. 17. User Interface.Designer. User. Speech.Speaker. Listener. Rhetorical appeals: Logos, Ethos, Pathos. Accomplish a task. Take action.
  18. 18. Logos. Ethos. Pathos. Design process. Design phase.
  19. 19. Design Results: MoviTalk, a UI proposal of an IM Client for mobile devices.
  20. 20. Variation of size. Change in placement. Color code. Change in shape. Transparency. Change in color. 3±5 feature. Drawers. Tap. Drag/write. Usage of icons.
  21. 21. Evaluation methods: Execution of usability and communicability testing plus the rhetorical space characterization on the prototype.
  22. 22. Prototype. Usability issues. Communicability breakdowns. Scenario. Insitu notes. Global analysis. Think aloud. Video from the testing.
  23. 23. Printed image of prototype. Tagging with colored sticky notes. Tagging with colored sticky notes. Tagging with colored sticky notes. Global analysis. Inference by users’ overall tagging. What and why: logos, ethos, and pathos. What is an evident functional feature? What can be interpreted as a design feature? What may be related with something emotional?
  24. 24. Results.
  25. 25. What’sthis? Participant 1 Whydoesn’tit? Whereisit? Whatnow? Whathappened? Oops! WhereamI? Ican’tdoitthisway. Thanks,butno,thanks. Icandoitotherwhise. Looksfineforme. Igiveup. Help. Participant 2 Participant 3 Participant 4 Participant 5
  26. 26. Conclusions.
  27. 27. User can decode a considerable amount of information at glance. * By applying visual variables combined with other characteristics, such as layers and easy-to-learn visual signs, users can focus only on the design elements relative to their task at hand. * The Calm Technology paradigm can be supported by applying the schematic visualization of information to a GUI.
  28. 28. * It is remarkable that a great amount of valuable information can be obtained by doing this review since early stages of design; and not only when working with interfaces, but also with other design products. * . It is appropriate to introduce a participative design exercise to know about the users’ experiences in order to enrich further stages of design. Postdesign. Participative Observation. ESM Participative Design. Needfinding.
  29. 29. * It is important to remember that the fidelity of the prototype should no be disregarded while evaluating unconventional features. A still low fidelity prototype, for example, lacks the movement and interactivity that can reinforce the users’ semiosis during an evaluation. Unconventional or untraditional user interface. Comunicability testing. Semiotic engineering.
  30. 30. * The design process can be qualitatively characterized by using the rhetorical appealing modes: logos, ethos, and pathos. * The logos appealing mode is closely related to the rational aspects of design and the instances of well-known interface elements. On the other hand, the pathos appealing mode is concerned to those interface elements that can be directly modified by the users, such as the personalization features.
  31. 31. Muito Obrigado! Full work available at http://www.tzek-design.com Facebook: http://www.facebook.com/omitzek Twitter: http://twitter.com/tzek/ Information design blog: http://www.tzek-design.com/blog

×