Design for the 4th dimension: Real-time apps
17
Design in the 4th Dimension: Interaction Design for Real Time Applications @Nanalq [email protected] @ArinSime [email protected] 1 | 16
description
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
Transcript of Design for the 4th dimension: Real-time apps
Design in the 4th Dimension: Interaction Design for Real Time Applications
@[email protected] 1 | 16
Design & Development in Costa Rica
“Real Time” web & mobile applications
User Experience, Visual Design and Product Assessments 2 | 16
What we do
3 | 16
Example clients
4 | 16
Real Time Messaging Example
Sensei Sensei
Data
DataCommands
CommandsAttendees 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
Real Time Comms Example (WebRTC)
Signaling Messages
Video ChannelAudio ChannelData Channel
WebRTC starts with messag-ing between 3rd party service, aka “Signaling”.
After the signaling is com-plete the WebRTC channels setup are completely peer to peer. You can still optionally send other data/commands through the 3rd party
6 | 16
Other Applications for Real TimeReal Time Applications
7 | 16
Real Time 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 for friend to allowcamera...No conn
ection
Please redia
l
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 #5Item #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 supportedfor web calls, you may still postcomments.
Alert! You may be experiencing networkproblems.
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.coReal Time Weekly Newsletter
![4th Dimension of Collaboration [INFOGRAPHIC]](https://static.fdocuments.us/doc/165x107/54c103294a7959d07d8b456d/4th-dimension-of-collaboration-infographic.jpg)
