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

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

Embed Size (px)

Citation preview

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

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

Omar Sosa TzecCIRIA – UDLAP.

Samuel Cortina Arteaga.Design Faculty – UDLAP.

Roberto Holguín Molina.InSitum – México.

4th Information Design International Conference.Rio de Janeiro | Brazil | 2009.

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

Introduction:Point of start.

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

InformationDesign.

Otherdisciplines &paradigms.

Human – Computer

Interaction.

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

Schematic InformationVisualization.

User InterfaceDesign.

Calm TechnologyDesign Paradigm.

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

Users’Needs.

DesignProcess.

PrototypeProposal. Evaluation.

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

Taking Calm Technology into count: What is to consider the paradigm into the design process?

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

Periphery

Center

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

Periphery

Center

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

User Interface.

Interfacecomponents.

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

Interface componentat user’s center.

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

Preliminary Work:Design methods based on Experience Sampling Method and Participative Observation.

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

User workingwith a laptop and chat client

running.

Visual records from location

of chat windows.

Fusion of visual recordsin order to identify patterns.

Text recordsabout the inner

experience at that time.

Records grouped intopossible ESM categories.

Needfinding Excercise

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

Chat clientis running.

Questionabout the

contact’s innerexperience.

IM shows upon contact’s

side.

Contact’sanswer.

Recordedanswers are grouped into

ESM categories.

Page 15: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 16: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 17: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009

Design Process:Sanders’ postdesign, participative design, personas, and sketching.

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

Scenario.

Designideas.Persona.

Plenarysession.

Designideas.

Designideas.

Sketching.

Sketching.Low–fi prototype

design.

Sketching.

Sketching.

Evaluation

Page 19: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 20: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 21: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009

Rhetoric Triangle Model:A conjecture of how interface design process evolves.

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

User Interface.Designer. User.

Speech.Speaker. Listener.Rhetorical appeals: Logos, Ethos, Pathos.

Accomplish a task.

Takeaction.

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

Logos.

Ethos. Pathos.

Design process.

Designphase.

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

Design Results:MoviTalk, a UI proposal of an IM Client for mobile devices.

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

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.

Page 26: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 27: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 28: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 29: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009
Page 30: UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., CIDI 2009

Evaluation methods:Execution of usability and communicability testing plus the rhetorical space characterization on the prototype.

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

Prototype.

Usability issues.

Communicabilitybreakdowns.

Scenario.Insitunotes.

Globalanalysis.

Think aloud.

Video fromthe testing.

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

Printed image of prototype.

Tagging with colored sticky notes.

Tagging with colored sticky notes.

Tagging with colored sticky notes.

Globalanalysis.

Inferenceby

users’overall

tagging.

What and why: logos, ethos, andpathos.

What is an evident functional feature?What can be interpreted as a design feature?What may be related with something emotional?

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

Results.

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

Wha

t’s th

is?

Participant 1

Why

doe

sn’t

it?

Whe

re is

it?

Wha

t now

?

Wha

t hap

pene

d?

Oop

s!

Whe

re a

m I?

I can

’t do

it th

is w

ay.

Than

ks, b

ut n

o, th

anks

.

I can

do

it ot

herw

hise

.

Look

s fin

e fo

r m

e.

I gi

ve u

p.

Hel

p.

Participant 2

Participant 3

Participant 4

Participant 5

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

Conclusions.

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

User can decode a considerable amount ofinformation 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.

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

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

ESMParticipative

Design.

Needfinding.

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

* 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 oruntraditional user interface.

Comunicabilitytesting.

Semioticengineering.

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

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

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

Muito Obrigado!

Full work available athttp://www.tzek-design.com

Facebook:http://www.facebook.com/omitzek

Twitter:http://twitter.com/tzek/

Information design blog:http://www.tzek-design.com/blog