kranky geek webrtc 2015 - a closer look at the webrtc ux/ui api

17
The UX of WebRTC @ArinSime WebRTC.ventures KrankyGeek Sept 2015

Upload: kranky-geek

Post on 20-Feb-2017

345 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

The UX of WebRTC @ArinSime

WebRTC.ventures KrankyGeek Sept 2015

Page 2: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Technology is cool… but users don’t care!

Page 3: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

but we can’t stop there! Metaphors are cool too...

Page 4: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Experience Users only care about the

Page 5: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

WebRTC provides some Interactions out of the box

Page 6: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

@ArinSime KrankyGeek.com 2015

UX Terminology

UX

Micro- Interactions The little stuff that matters

Information Hierarchy Structure and placement convey importance

Feedback Make it obvious what’s happening

Page 7: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Pre-call check

Page 8: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

To show or

Φ Φ Φ Φ Φ Φ

not to show your own camera?

Page 9: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Subtle controls for web browsers

Page 10: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Larger Controls for Mobile apps

Mute Flip Camera

Record Exit

Page 11: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Use overlays wisely, and temporarily

Φ Φ Φ

Page 12: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Multiparty placement

Page 13: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Provide feedback before and during

Page 14: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Testing the call quality

Page 15: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

Maintain Focus Everything else should be de-emphasized

Page 16: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

@ArinSime KrankyGeek.com 2015

Everything matters more with mobile

Page 17: Kranky Geek WebRTC 2015 - A closer look at the WebRTC UX/UI API

More than a video tag • Information Hierarcy

• Most important features dominate, don’t distract

• Feedback • Connection status, automatic

downgrades, pre-call screening • Micro-interactions

• Placement/size of controls, following mobile best practices

@ArinSime WebRTC.ventures