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

20
Web UI/UX in the Multi device & Multi screen environment Jonghong Jeon ETRI, SRC Email: [email protected] Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr

Upload: jonathan-jeon

Post on 08-May-2015

864 views

Category:

Technology


0 download

DESCRIPTION

금일 HCI 2013 학회 패널토의에서 발표했던 멀티디바이스/멀티 스크린 환경에서의 웹 UI/UX 기술에 대한 기조 발표 자료입니다. 조금 앞선 미래의 관점에서 이슈들을 살펴보았습니다.

TRANSCRIPT

Page 1: Web UI/UX in the Multi device & Multi Screen Environment

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

Jonghong JeonETRI, SRC

Email: [email protected] Blog: http://mobile2.tistory.com

http://twitter.com/hollobit

http://www.etri.re.kr

Page 2: Web UI/UX in the Multi device & Multi Screen Environment

2

Multi Screen & Multi Devices

Page 3: Web UI/UX in the Multi device & Multi Screen Environment

3

Multi Screen & Multi Devices

Page 4: Web UI/UX in the Multi device & Multi Screen Environment

4

Pattern of Multi-screens

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

Page 5: Web UI/UX in the Multi device & Multi Screen Environment

5

[1] Coherence

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

Page 6: Web UI/UX in the Multi device & Multi Screen Environment

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

Page 7: Web UI/UX in the Multi device & Multi Screen Environment

7

[2] synchronization

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

Page 8: Web UI/UX in the Multi device & Multi Screen Environment

8

[3] Screen Sharing

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

Page 9: Web UI/UX in the Multi device & Multi Screen Environment

9

[4] Device Shifting

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

Page 10: Web UI/UX in the Multi device & Multi Screen Environment

10

Web Intent for local networks

Page 11: Web UI/UX in the Multi device & Multi Screen Environment

11

[5] Complementarity

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

Page 12: Web UI/UX in the Multi device & Multi Screen Environment

12

[6] Simultaneity

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

Page 13: Web UI/UX in the Multi device & Multi Screen Environment

13

[추가] Bi-directional & Real-time

Page 14: Web UI/UX in the Multi device & Multi Screen Environment

14

Multi Devices - Capability Sharing

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

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

Page 15: Web UI/UX in the Multi device & Multi Screen Environment

15

Web of Things

Page 16: Web UI/UX in the Multi device & Multi Screen Environment

16

Web of Things

Page 17: Web UI/UX in the Multi device & Multi Screen Environment

17

Swarm Web ??

Page 18: Web UI/UX in the Multi device & Multi Screen Environment

18

Conclusions – Social Web of Things

Page 19: Web UI/UX in the Multi device & Multi Screen Environment

19

Conclusions

Web of Things UI/UXInvisible Web UI

Swarm Web UI/UX

Page 20: Web UI/UX in the Multi device & Multi Screen Environment

20

Thank youFor more discussion :

JongHong Jeon ([email protected])+82-42-860-5333

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

OR