Design in the 4th Dimension:
Interaction Design for RealTime Applications
@Nanalq
mariana@agilityfeat.com
@ArinSime
arin@agilityfeat.com 1 | 16

Design & Development in Costa Rica
“RealTime” web & mobile applications
User Experience,Visual Design and Product Assessments 2 | 16
What we do

3 | 16
Example clients

4 | 16
RealTime Messaging Example
Sensei Sensei
Data
DataCommands
Commands
Attendees send and receive
data in order to cast votes,
suggest actions, etc.
Moderator sends commands
to the data channel (such as
to advance pages) and also
receives data updates

5 | 16
RealTime Comms Example (WebRTC)
Signaling Messages
Video Channel
Audio Channel
Data Channel
WebRTC starts with messag-
ing between 3rd party
service, aka “Signaling”.
After the signaling is com-
plete theWebRTC channels
setup are completely peer to
peer.You can still optionally
send other data/commands
through the 3rd party

6 | 16
Other Applications for RealTimeRealTime Applications

7 | 16
RealTime is more than just video

8 | 16
Design Challenges

9 | 16
1. Don’t let the technology become more
important than the experience.
3:46
Start Stop
Users focused their attention
on the clock and checking if
it was synched rather than
interacting wiht the main
application
Developers spent more time
creating the clock than in
other areas of the applica-
tion

10 | 16
2. Feedback is ALWAYS important
Waitng forfriend to allowcamera...
No connection
Please redial
Lost call

11 | 16
3. Information Hierarchy. Selecting when and how
to show information.
*Remember movement on screen
really draws attention.
Relevant Information
Call to action
Other information Look at me
Look at me
Look at me
Look at me

12 | 16
4. Handling changes in a fast changing
environment.
Did something disappear?
What happened since
I last saw the screen?
Where should this
item go?
Item #2
Item #7
Item #4
Item #5
Item #1
Incoming Item

13 | 16
5. Identifying important micro-interactions
Video On Mic ON
Connecting with friend...

14 | 16
6. Graceful degradation
Mariana López
Arin Sime
David Alfaro
Ford Englander
Daniel Phillips
Allan Naranjo
!
Your browser is not supported
for web calls, you may still post
comments.
Alert!You may
be experiencing network
problems.
Last Refresh: 9:34 pm.

15 | 16
Design Excercise

16 | 16
Key takeaways
1. Don’t let the technology become more
important than the experience.
2. Feedback is ALWAYS important
3. Information Hierarchy. Selecting when and how
to show information.
4. Handling changes in a fast changing
environment.
5. Identifying important micro-interactions
6. Graceful degratation

1 | 20
Questions?Questions?
A few suggestions:
RealTimeWeb.co
RealTime Weekly Newsletter