Workshop ministrado na FLAGCX para sensibilizar a equipe sobre a importância de interações bem desenhadas.

1. 04
Workshop Sessions

2. Where do I click
Designing Interactions

3. Kindle and iPhone have made the term UX globally
famous. All the time, online or offline, we interact.
As we dive deeper into more complex ecosystems,
our experiences are what count. Digital advertising
is all about experiences.

4. However, when we talk of UX, we are looking
at a black box.
Still, as Steve Krug puts it, “It's not rocket surgery”.

5. UX?

6. UX?
IA?

7. UX?
UI?
IA?

8. UX?
UI?
UCD?
IA?

9. UX?
IXD?
UI?
UCD?
IA?

10. UX?
IXD?
UI?
UCD?
IA?
CLI?

11. UX?
IXD?
UI?
UCD?
IA?
VD?
CLI?

12. UX?
IXD?
UI?
UCD?
IA?
VD?
CLI?
GUI?

13. UX?
IXD?
UI?
UCD?
IA?
VD?
CLI?
GUI?
NUI?

15. IA
A discipline that emerged
from the need to identify &
classify information, creating
labels, hierarchies and the
sort.
How it’s organized

16. IXD
The disciplines of outlining
interactions that will happen
with an artifact. If IA is
concerned with structure,
IXD follows the logic of the
flow.
How it will work
IA
A discipline that emerged
from the need to identify &
classify information, creating
labels, hierarchies and the
sort.
How it’s organized

17. UI & VD
The disciplines of creating
the end-user interfaces for
an interaction. As with most
cultural interfaces, it is
usually known for being
visual - hence visual design.
How it looks
IXD
The disciplines of outlining
interactions that will happen
with an artifact. If IA is
concerned with structure,
IXD follows the logic of the
flow.
How it will work
IA
A discipline that emerged
from the need to identify &
classify information, creating
labels, hierarchies and the
sort.
How it’s organized

18. UCD
A philosophy and a series of
techniques that concern
themselves with focusing
the design on user’s needs
and capabilities.
Who it’s for
UI & VD
The disciplines of creating
the end-user interfaces for
an interaction. As with most
cultural interfaces, it is
usually known for being
visual - hence visual design.
How it looks
IXD
The disciplines of outlining
interactions that will happen
with an artifact. If IA is
concerned with structure,
IXD follows the logic of the
flow.
How it will work
IA
A discipline that emerged
from the need to identify &
classify information, creating
labels, hierarchies and the
sort.
How it’s organized

19. UX
The experiences people
have with the designed
artifact - it is considered it
cannot be designed, only
supported by the work of
other disciplines.
The subjective experience
UCD
A philosophy and a series of
techniques that concern
themselves with focusing
the design on user’s needs
and capabilities.
Who it’s for
UI & VD
The disciplines of creating
the end-user interfaces for
an interaction. As with most
cultural interfaces, it is
usually known for being
visual - hence visual design.
How it looks
IXD
The disciplines of outlining
interactions that will happen
with an artifact. If IA is
concerned with structure,
IXD follows the logic of the
flow.
How it will work
IA
A discipline that emerged
from the need to identify &
classify information, creating
labels, hierarchies and the
sort.
How it’s organized

20. What makes a good user experience?
Value
Why is it useful?
Usability
How easy it is to use?
Adoption
How is the adoption curve?
Desirability
What is the OMG-I-want-it-now
factor?

21. In the UX heart, lies a quest:
"If you can't explain it simply,
you don't understand it well enough."

22. NUI
The interface between user
and machine happens in a
direct manner. Even though
it might still use metaphors,
it gets rid of supporting aids.
There was a struggle for simplicity:
GUI
The interface between user
and machine happens in a
graphical interface that relies
deeply on metaphors.
CLI
The interface between user
and machine happens in
s p e c i fi c l a n g u a g e b y
e x c h a n g e o f w r i t t e n
command lines.
And it is a Interaction Design decision.

23. GUI
CLI
NUI

24. Exercise 1, What?
1. Form a group.
2. Get your canvas.
3. Pick an object. Anything you worked with here. Or that
you want to discuss, really.

26. But what is an interaction?
Interaction is a kind of action that occurs as two
or more objects have an effect upon one another.

27. How do interact?
?
Me The world

28. Goal definition
Intention to act Sequence
of actions
Execution of the
action sequence
Perceiving the
state of the world
Interpreting
the perception
Evaluation
of perceptions

29. An example:
Open the door
I want to open
the door
Get close
to the door
Raise my hand
Grab the knob
Turn the knob
Push the door
OK, let’s do so
Nope, it hasn’t opened? Maybe it’s
locked or jammed.
Have to check that
Has the door
first.
The door

30. However, most designed interactions are broken.

31. How so?
Technology has removed long ago the clear relation
of cause and consequence. Ever since the NUI
were implemented in scale, we are aiming
at regaining clear notions of interaction.

32. Best practices change daily and ‘intuitive'
is the nicest word that will screw you up.

33. Guide and refine
Finally, ypu need to show
the consequence of his
actions while keeping the
interaction stable.
Create a funnel
Afterwards, you need to take
the user by the hand and
create a funnel - truly
narrowing the dos and
don’ts.
Lead the way
First off, you need to lead
the way to the interaction.
Let’s keep it short.
Visibility & mappings Affordances & constraints Feedback & consistency

34. Visibility
How much of the interface is sensible to us?

35. Natural signals
Natural design

36. Visible & Invisible

37. Mapping
How can I trace the correlation between
what can I do and what I notice to be possible?

38. Natural mapping

39. Affordances
How can the object imply how it’s used?
How can it gives hints on how it’s used?

40. Afford to motivate action

41. Afford to show where to go next

42. Constraints
What are the limitations of the object?

43. Physical
& Logical
Semantic
& Cultural

44. Feedback
Does the object provide any answers
once something has been done to it?

45. Visual
Auditive
Haptic

46. Consistency
How can I stay lean? In other words, SISI.

47. Teach once and use it to new features

48. Exercise 2, How?
1. Second canvas round!
2. Let’s try and define the usability aspects. Think of what
was done.

49. Can’t we bend the rules?

50. Philippe Starck’s juicy salif

51. Flow (the indie game)

52. Well, pretty much the “Easter Egg” concept

53. Rules can be bent:
as long as it is a conscious choice
and invites discovery.

54. Exercise 2, Share!
1. Conduct an elevator pitch. You have 2 minutes
to tell us about your product, its strength and
what you decided to change.