Get Out of the Way: Using Fluid Interfaces to Design Seamless Experiences
1.
2. 2
NICE T O MEET YO U!
Morgan Wheaton
Associate Creative Director
Edgar Rios
Associate Designer
Marc Vandehey
Senior Developer
3. We’re thirteen23
WELCOME TO OUR STUDIO
We are an interactive product studio dedicated to
the craft of digital. We conceive, design, and build
intelligent software.
3
16. WHAT’S A FLUID INTERFACE?
16
An interface is fluid when it behaves
according to the way people think, not
the way machines think.
16
17. WHAT’S A FLUID INTERFACE?
17
These interfaces prioritize fast, smooth,
frictionless experiences that map to the
way people think and act in natural space.
17
19. WHAT’S A FLUID INTERFACE?
19
Why should we care about
fluid interfaces?
They give users a sense of control.
The interface is reacting to the needs
of the user and their context.
01. 02. 03.
They create better experiences.
Instead of the user reacting to and
learning the computer, the computer
learns and reacts to the user.
They’re more accessible because
they are more natural. They’re more
discoverable and easier to
understand and remember.
19
22. ON-SCREEN
22
On-screen interfaces should be alive and responsive to
user input—just like interactions in the real world.
They should feel effortless and natural, and encourage
play and discovery.
23. ON-SCREEN
23
Make it responsive
• Immediately react and respond to a user’s touch,
making it feel as if a user is moving a physical object
across the screen.
• Provide feedback to let the user know the input has
been detected.
24. ON-SCREEN
24
Make it interruptible
• Understand that a user can change their mind at any
time including in the middle of an interaction.
• Provide a way to interrupt or re-direct an interaction.
25. ON-SCREEN
25
Make it natural
• Use common gestures and reference real life
• Identify common interactions and avoid making the
user stretch their fingers across the screen
• Iterate, prototype, and test until it feels right.
27. 27
• Define the animation
Discuss and understand what the animation needs to
accomplish. Generate documentation to help direct
the intent.
• Ask yourself the important questions
Do you need to set up navigation? Is it just a state
change? What views are needed at the beginning
and end?
ON-SCREEN
Triangle 1
Move
500 MS
Triangle 4
Move
500 MS
Triangle 2
Rotation 0 - 180°
500 MS
Move
500 MS
Scale 100% - 30%
400 MS
Label Fade Out
250 MS
Delay
125 MS
Triangle 3
Reverse of Triangle 2
28. 28
• Prototype each interesting interaction
Build prototypes that help you understand how more
complex animations will work
ON-SCREEN
29. 29
• Refactor and bring it together
Work with your team to make sure everything feels
right. Test and try to break everything.
ON-SCREEN
33. WHAT’S A FLUID INTERFACE?
33
Most experiences we have every day
are fluid
33
34. WHAT’S A FLUID INTERFACE?
34
We rarely use just one type of action to get
through a real world experience
3434
35. WHAT’S A FLUID INTERFACE?
35
We need interfaces that think like us
35
36. WHAT’S A FLUID INTERFACE?
36
Multimodal interactions use several different modes of
action to create experiences that respond more naturally
and contextually to user’s activity and needs.
MULTIMODAL
36
37. WHAT’S A FLUID INTERFACE?
37
MULTIMODAL
What can we use to create these
experiences?
37
Audio
Asking is easy! There’s no learning curve and users
can stay hands free
Listening to a lot of information gets tiring fast.
Also, remembering is hard.
Implicit
Understanding your users leads to more seamless,
personal experiences
Too many wrong assumptions makes the experience
feel annoying, not fluid
Visual
It’s much easier for users to see and read
complex information
Visuals can be distracting and consuming
Gesture
Gestures can make interactions feel playful and
novel, and they can be done privately
Haptic movement can quickly get cumbersome
40. WHAT’S A FLUID INTERFACE?
40
What should we keep in mind when
designing fluid, multimodal experiences?
01. 02. 03.
Proximity
Is the user close to their device? Can they
touch it? What other devices are nearby?
Environment
Where’s your user? In a public space or
alone? Is the product shared or used one-
on-one?
Activity
What is the user currently doing?
Are they in motion? Or are they
sitting still?
MULTIMODAL
40
42. Audio
Visual
42
Best practices
MULTIMODAL
• Optimize for the strongest interaction point
Prepare for the best case scenario but
be flexible
• Avoid redundancy
Think about how each modality can provide different,
contextually appropriate information
• Create fluid hand-offs
Different interaction modalities should hand-off to
one another seamlessly and intuitively.
42
Gesture
Implicit
43. Building your experiences
MULTIMODAL
• Understand your technical capabilities
Know what is at your disposal
• Plan your use cases
Sketch thumbnails or script your use cases to
help you understand the steps in the interaction and
where hand-offs occur.
• Prototype, prototype, prototype
Lo-fi user testing and proof-of-concept videos can
help you see where things are not intuitive.
43
U S E R
S P E A K E R
Initiate: Audio
Asks for new music
1
Assess: Implicit
User recognition
User preferences
Location awareness
2
Respond: Audio, Visual
Recommendation, suggests hand-off
3
Initiate: Visual
Hand-off notification
1
Respond: Audio
Plays content
2
Initiate: Gesture
Browses content, selects
1
Respond: Audio
Verbally accepts recommendation
2 Assess
3
43
44. WHAT’S A FLUID INTERFACE?
44
Fluid, multimodal interfaces represent the next step
toward building more coordinated and natural experiences
for our users.
MULTIMODAL
44
