Design in the 4th Dimension:
Interaction Design for RealTime Applications
@Nanalq
mariana@agilityfeat.com
@ArinSime
arin@a...
Design & Development in Costa Rica
“RealTime” web & mobile applications
User Experience,Visual Design and Product Assessme...
3 | 16
Example clients
4 | 16
RealTime Messaging Example
Sensei Sensei
Data
DataCommands
Commands
Attendees send and receive
data in order to cas...
5 | 16
RealTime Comms Example (WebRTC)
Signaling Messages
Video Channel
Audio Channel
Data Channel
WebRTC starts with mess...
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 attentio...
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 at...
12 | 16
4. Handling changes in a fast changing
environment.
Did something disappear?
What happened since
I last saw the sc...
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 b...
15 | 16
Design Excercise
16 | 16
Key takeaways
1. Don’t let the technology become more
important than the experience.
2. Feedback is ALWAYS importa...
1 | 20
Questions?Questions?
A few suggestions:
RealTimeWeb.co
RealTime Weekly Newsletter
Upcoming SlideShare
Loading in …5
×

Design for the 4th dimension: Real-time apps

2,240 views

Published on

UX and design considerations for building real time applications, by Mariana Lopez of AgilityFeat, as presented at the MoDevUX conference in Washington DC May 19 2014

Published in: Software, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,240
On SlideShare
0
From Embeds
0
Number of Embeds
1,610
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design for the 4th dimension: Real-time apps

  1. 1. Design in the 4th Dimension: Interaction Design for RealTime Applications @Nanalq mariana@agilityfeat.com @ArinSime arin@agilityfeat.com 1 | 16
  2. 2. Design & Development in Costa Rica “RealTime” web & mobile applications User Experience,Visual Design and Product Assessments 2 | 16 What we do
  3. 3. 3 | 16 Example clients
  4. 4. 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. 5. 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. 6. 6 | 16 Other Applications for RealTimeRealTime Applications
  7. 7. 7 | 16 RealTime is more than just video
  8. 8. 8 | 16 Design Challenges
  9. 9. 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. 10. 10 | 16 2. Feedback is ALWAYS important Waitng forfriend to allowcamera... No connection Please redial Lost call
  11. 11. 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. 12. 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. 13. 13 | 16 5. Identifying important micro-interactions Video On Mic ON Connecting with friend...
  14. 14. 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. 15. 15 | 16 Design Excercise
  16. 16. 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
  17. 17. 1 | 20 Questions?Questions? A few suggestions: RealTimeWeb.co RealTime Weekly Newsletter

×