Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network


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

Uploaded on

Designing a user interface based on the ...

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 3

https://twimg0-a.akamaihd.net 2
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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. Introduction: Point of start.
  • 3. Human – Information Computer Design. Interaction. Other disciplines & paradigms.
  • 4. User Schematic Information Interface Visualization. Design. Calm Technology Design Paradigm.
  • 5. Users’ Design Prototype Evaluation. Needs. Process. Proposal.
  • 6. Taking Calm Technology into count: What is to consider the paradigm into the design process?
  • 7. Periphery Center
  • 8. Periphery Center
  • 9. User Interface. Interface components.
  • 10. Interface component at user’s center.
  • 11. Preliminary Work: Design methods based on Experience Sampling Method and Participative Observation.
  • 12. Visual records Fusion of visual records from location in order to identify patterns. of chat windows. User working with a laptop and chat client running. Text records Records grouped into about the inner possible ESM categories. experience at that time. Needfinding Excercise
  • 13. Recorded answers are grouped into ESM categories. Contact’s Question Chat client answer. about the is running. contact’s inner experience. IM shows up on contact’s side.
  • 14. Design Process: Sanders’ postdesign, participative design, personas, and sketching.
  • 15. Low–fi prototype Sketching. design. Evaluation Design Persona. Sketching. ideas. Design Plenary Sketching. ideas. session. Scenario. Design Sketching. ideas.
  • 16. Rhetoric Triangle Model: A conjecture of how interface design process evolves.
  • 17. Designer. User Interface. User. Accomplish a task. Take action. Speaker. Speech. Listener. Rhetorical appeals: Logos, Ethos, Pathos.
  • 18. Logos. Design process. Ethos. Pathos. Design phase.
  • 19. Design Results: MoviTalk, a UI proposal of an IM Client for mobile devices.
  • 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. Evaluation methods: Execution of usability and communicability testing plus the rhetorical space characterization on the prototype.
  • 22. Insitu Prototype. Scenario. notes. Think aloud. Video from the testing. Usability issues. Communicability breakdowns. Global analysis.
  • 23. What is an evident functional feature? What and why: What can be interpreted as a design feature? logos, What may be related with something emotional? Printed image ethos, and of prototype. pathos. Tagging with colored sticky notes. Inference by users’ overall Tagging with colored tagging. sticky notes. Tagging with colored sticky notes. Global analysis.
  • 24. Results.
  • 25. Participant 5 Participant 4 Participant 3 Participant 2 Participant 1 What’s this? Why doesn’t it? Help. Where is it? What now? What happened? Oops! Where am I? I can’t do it this way. Thanks, but no, thanks. I can do it otherwhise. Looks fine for me. I give up.
  • 26. Conclusions.
  • 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. Postdesign. Participative Participative ESM Observation. Design. Needfinding. * 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.
  • 29. Comunicability testing. Unconventional or untraditional user interface. Semiotic engineering. * 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.
  • 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. Muito Obrigado! Full work available at Facebook: http://www.tzek-design.com http://www.facebook.com/omitzek Twitter: http://twitter.com/tzek/ Information design blog: http://www.tzek-design.com/blog