web ui/ux in the multi device & multi screen environment

Web UI/UX in the Multi device & Multi screen environment

Jonghong JeonETRI, SRC

Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com

http://twitter.com/hollobit

http://www.etri.re.kr

2

Multi Screen & Multi Devices

3

Multi Screen & Multi Devices

4

Pattern of Multi-screens

Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/

5

[1] Coherence

the unique contexts across a multi-device ecosystem and adapt elements and features accordingly.User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이최적화되어야 함

6

Responsive Images

W3C Responsive Image Community Group Picture Elements

http://picture.responsiveimages.org/ http://bit.ly/Uyu05L (W3C)

Goals Respond to different screen pixel width/height Respond to different screen pixel densities Respond to user zoom on image resource. ….

6

7

[2] synchronization

Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대한 싱크를 유지함

8

[3] Screen Sharing

하나의 가상 스크린 처럼 여러 단말이 스크린을 공유

9

[4] Device Shifting

Apple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면서 컨텐트를 이용

10

Web Intent for local networks

11

[5] Complementarity

여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일단말로 TV를 제어하는 등 단말간 상호관련성

12

[6] Simultaneity

TV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새로운 Experience를 만들어 낼 수 있음.

13

[추가] Bi-directional & Real-time

14

Multi Devices - Capability Sharing

단말의 다양한 기능을 여러 단말이 공유 Network (Tethering)

하나의 가상단말처럼 다수의 기기가 동작

15

Web of Things

16

Web of Things

17

Swarm Web ??

18

Conclusions – Social Web of Things

19

Conclusions

Web of Things UI/UXInvisible Web UI

Swarm Web UI/UX

20

Thank youFor more discussion :

JongHong Jeon (hollobit@etri.re.kr)+82-42-860-5333

Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit

OR