Design in the 4th Dimension: Interaction Design for Real Time Applications

@Nanalqmariana@agilityfeat.com

@ArinSimearin@agilityfeat.com 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