포털관점에서본웹디자인 및...

포털 관점에서 본

웹 디자인 이슈 및 UX동향

Daum UX2팀 김기성

포털 관점에서 본 웹 디자인 이슈 및 UX동향


n. 입구가 되는 사이트라는 뜻으로 수많은 사이트를 특정한 분류에 따라 정리해놓고 주소를 링크시켜서 사용자들이 원하는 곳을 쉽게 찾아갈 수 있도록 만든 사이트를 이르는 말

http://www.giantbomb.com/stargate-command/95-2798/all-images/52-412658/stargate/51-1288601/












http://www.flickr.com/photos/a440/2065934413/



입구가 되는

이동이 쉬운

원하는 곳에 쉽게 접근할 수 있는


GATEWAY

http://durl.kr/3turen

http://durl.kr/3turen

Start-page

자사 서비스로의 Gateway


타사서비스로의 Gateway


타 서비스로의 Gateway




GATEWAY

“ Portal is Dead. ”

“the enterprise portal as we know it (a one-size-fits-all web

site with some personalization features) is dead.

Our devices, be it laptops, smart phones or tablets, will be our

new enterprise portals.” Oscar Berg, Digital Strategist & Business Analyst

http://durl.kr/3tumks

http://durl.kr/3tumks

“the old portal is dead.

it’s not just about how we take traditional marketing and stick

it on these devices, but how we can use technology to create

newer, more immersive experiences that are BETTER than

anything else we’ve ever seen.” Rob Bennett, MSN executive Producer

http://durl.kr/3tumgv

http://durl.kr/3tumgv

“A focus on shifting Yahoo’s platform to mobile.

Being friendly to partners across a range of companies from

mobile carriers to social networks to hardware makers.” Marissa Mayer, New Yahoo CEO

http://durl.kr/3tux2x

http://durl.kr/3tux2x

“Our programmers are doing work on mobile first,

We’ll still have a desktop version, but we’ll also have one on a

high-performance mobile phone. The top programmers want

to work on mobile apps.” Eric Schmidt, Google CEO

http://durl.kr/3tvb2i


2000 2005

1000

0

500

750

250

PC

Smartphone

http://durl.kr/3tvexi

2010 2015

Sales

Time

Smartphone sales overtook PC sales


2000 2005

1000

0

500

750

250

PC

Smartphone


2012

2010 2015

Sales

Time



2000 2005

1000

0

500

750

250

PC

Smartphone


2015

2010 2015

Sales

Time



2000 2005 2010

1000

0

500

750

250


한메일, 카페

97 99

미디어 다음

03

tv팟

06

자체 검색엔진

07

스카이뷰, 로드뷰 오픈

09

tv팟앱

08

지도앱

09

마이피플

10

뮤직앱

11

사전앱

12

2015

Sales

Time

13

14

15



PC Ver. Mobile Ver.

London Olympic

PC Mobile

100

200

300

400

500

600

London Olympic | Page View

PC Mobile

London Olympic | Page View

X 1.7

100

200

300

400

500

600

PC: 3 Mobile:7

출처: 나스미디어

London Olympic | 하이라이트 시청

Pattern

Context

Device

Portal

Pattern

Context

Device

Portal

Daily, Weekly

0

Traffic

23

Smart phone

PC

12 6 Time

18

Daily | PC & Mobile Traffic

0

Traffic

0

PC

Smart phone

23 12 6 Time

출근

18

06:00~08:00

기상


0

Traffic

0

PC

Smart phone

23 12 6 18 Time

학교/직장

점심

09:00


학교/직장

17:00

0

Traffic

0

PC

Smart phone

23 12 6 Time

퇴근 취침

18


18:00 ~ 23:00

출/퇴근 시간

Game

출/퇴근 시간 | Killing Time

Gossip


FUN


취침 전 | Entertainment

Webtoon

Movie

취침 전 | Entertainment

월

Traffic

0

PC

일 금 수 토 Time

화 목

Smartphone

Weekly | PC & Mobile Traffic

월

Traffic

0

PC

일 금 수 토 Time

화 목

Smartphone

토 ~ 일

월 ~ 금

Weekly | PC & Mobile Traffic

Weekdays | 날씨

Weekdays | 주식

Weekend | 지도

Weekend | 맛집

Mobile Traffic 분석을 통한 순환구조 개선

Case Study

Case Study | Mobile 순환개선

Pattern

Context

Device

Portal

Chance =

Pattern

Context

Device

Portal

On/Offline, in/Out

http://durl.kr/3u222t

Outside

Home

Offline

Mobile Context

http://durl.kr/3u222t

http://durl.kr/3u264i

http://durl.kr/3u264i

Mobile Context | Offline

Mobile Context | Home

Mobile Context | Outside

Daum 지도 필드 리서치를 통한 Context파악

Case Study | Field Research

74

다음 모바일 지도 사용 특성 이슈 4.

도보사용자는 이동 하면서 목적지까지의 경로를 재확인 하기 위해 간헐적으로 지도 앱을 켜서 현위치 및 경로를 파악함

- 목적지까지 제대로 가고 있는지 확인하기 위해 이동 중간중간 앱을 켜서 현위치를 확인함

- 초행길인 경우 로드뷰 기능을 활용해서 주변을 탐색하는 행위도 발견됨


다음 모바일 지도 사용 특성 이슈 3.

실시간 교통 정보 이용을 위해 네비게이션 앱을 사용하고 있음

- 네비게이션 앱은 실시간 교통 정보를 확인하기 위해 사용 한다고 응답함

- 네비게이션 앱의 경우 경로 이탈 시에 재안내가 네비게이션 대비 느려 불편하다는 의견도 다소 있었음

- 모바일의 화면 사이즈는 작아서 메인 네비게이션으로 사용하기에 무리라고 지적하였음



http://wwl1401.daum.net/Mail-bin/view_submsg3.cgi?TM=jOi5o+GuQw11UNDmPbjnmvPvfF3T+fF80eBsXAaxqGcIalR7tpB6vFbm1DZg7/vX8VtWMmHW/+0QC9/m3jKYKU9q6a6L3T1O3dOg9yspGYeMP4utw151l5z6PekFDT5ihdcapsusiIKVi3kLJZC44Tm307BWdy0QnffHlUriOQeZkicvwdrOFeSDelhN4JGkLQfAY9uiyx2ZxVnlvtL+vIk3t0u4pXqvKSQmrtG+3k682ioenSessOhmG6jYOe0kcSrtTReBkKBzCCbzNHQ7DSg3fAAlBFPR7NUsfc7knxswwun3TBabxhjSQmvGWs4OFso0td29unU+FIyINVHu+pmDsIDBHJMZlx28DfOQnh/KOztVQQ/IltPLpp57TkSGCax1lKm6i0i1irKAWwkLj0YhgS+gI4AHyIEOWBlJQsz+aQXvxGOdzjQh1t7gbnfUMg2CYC4ze9PtK8sZYJDtdUvzJp+ItNzg5SwoG2ULLrfN1ChQBzA7NEEEleEckLrSoQHqtAxNHEzLiQcqDuooo6aXF1HxvNfvKqlnxE7ALB8EzNahFy4VTD8Dv1qeIgiHL9Ad+39rF3ZiAo6lc82LsTQsVIEDpfwUqLZh/sTqB2j+WNzEmZTgNQS1MNoY4vnW0JfYqbmDSX3aSpPhhGRn46v8pbX65pN0Z3oppLqNrUNuSiFeeOku0A==&encoding=UTF-8&MSGID=0000000000004TB&pos=183842&bodylen=103740&realname=%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7+2012-11-09+%EC%98%A4%ED%9B%84+7.44.24.png&contenttype=image/png&attnum=3&attid=0.2


http://wwl1401.daum.net/Mail-bin/view_submsg3.cgi?TM=jOi5o+GuQw11UNDmPbjnmvPvfF3T+fF80eBsXAaxqGcIalR7tpB6vFbm1DZg7/vX8VtWMmHW/+0QC9/m3jKYKU9q6a6L3T1O3dOg9yspGYeMP4utw151l5z6PekFDT5ihdcapsusiIKVi3kLJZC44Tm307BWdy0QnffHlUriOQeZkicvwdrOFeSDelhN4JGkLQfAY9uiyx2ZxVnlvtL+vIk3t0u4pXqvKSQmrtG+3k682ioenSessOhmG6jYOe0kcSrtTReBkKBzCCbzNHQ7DSg3fAAlBFPR7NUsfc7knxswwun3TBabxhjSQmvGWs4OFso0td29unU+FIyINVHu+pmDsIDBHJMZlx28DfOQnh/KOztVQQ/IltPLpp57TkSGCax1lKm6i0i1irKAWwkLj0YhgS+gI4AHyIEOWBlJQsz+aQXvxGOdzjQh1t7gbnfUMg2CYC4ze9PtK8sZYJDtdUvzJp+ItNzg5SwoG2ULLrfN1ChQBzA7NEEEleEckLrSoQHqtAxNHEzLiQcqDuooo6aXF1HxvNfvKqlnxE7ALB8EzNahFy4VTD8Dv1qeIgiHL9Ad+39rF3ZiAo6lc82LsTQsVIEDpfwUqLZh/sTqB2j+WNzEmZTgNQS1MNoY4vnW0JfYqbmDSX3aSpPhhGRn46v8pbX65pN0Z3oppLqNrUNuSiFeeOku0A==&encoding=UTF-8&MSGID=0000000000004TB&pos=1670&bodylen=181868&realname=%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7+2012-11-09+%EC%98%A4%ED%9B%84+7.45.19.png&contenttype=image/png&attnum=3&attid=0.1

Pattern

Context

Device

Portal

Experience =

Chance =

Pattern

Context

Device Button Size,GPS,etc.

Chance =

Experience =

Portal

Display

Interaction

GPS

Camera

Mic., SPK

Mobile Device

57

144 57

144

Mobile Device | Button Size

http://durl.kr/3u2k8h

Mobile Device | Button Size



Mobile Device | Gyro Sensor



Mobile Device | GPS


Case Study | Guideline

Pattern

Context

Device Focus =

Chance =

Experience =

Portal

Pattern

Context

Device Focus

Chance =

Experience =

=

Portal

GATEWAY

Pattern

Context

Device

Portal in PC ?

(Browser) Start-page

Pattern

Context

Device

Portal in Mobile ?

GATEWAY ?

15개의 이동 Gateway (+전체 이동)

8개의 이동 Gateway



Portal in Mobile | Gateway

4개의 이동 Gateway (+ 전체이동)

Portal in Mobile | Compact Screen

Portal in Mobile | Hidden Screen

Portal in Mobile

http://durl.me/3we4zm



Portal in Mobile | Personalized Screen

Desktop Step 1 • Windows XP/7/8, OSX, etc.

Portal in PC | Task Flow

Browser Step 2 • Explorer, Chrome, Firefox, etc.

Services Step 4 • 포털 - 뉴스, 카페, 블로그, 쇼핑 • 일반 – 각 홈페이지, 쇼핑몰, SNS서비스 등

Start-page Step 3 • 포털 페이지: 네이버, 다음, 네이트

Desktop

Browser

Services

Step 1

Step 2

Step 4 • 포털 - 뉴스, 카페, 블로그, 쇼핑 • 일반 – 각 홈페이지, 쇼핑몰, SNS서비스 등

• Explorer, Chrome, Firefox, etc.



Main Gateway: Browser 시작페이지

• Windows XP/7/8, OSX, etc.

Main Page Step 1 • 주요 어플리케이션 (Page Flicking)

Portal in Mobile | Task Flow

App / Web Step 2 • Phone: 전화, 메시지, 카메라 • Browser: 사파리, 오페라, 크롬 등 • Social: 메신저, SNS • Portal: 네이버, 다음, 네이트 • Portal Services: 뉴스, 카페, 블로그 등

Browser Step 3 • Portal: 네이버, 다음, 네이트 • Portal Services: 카페, 블로그, 쇼핑 등



App / Web Step 2 • Phone: 전화, 메시지, 카메라 • Browser: 사파리, 오페라, 크롬 등 • Social: 메신저, SNS • Portal: 네이버, 다음, 네이트 • Portal Services: 뉴스, 카페, 블로그 등

Browser Step 3 • Portal: 네이버, 다음, 네이트 • Portal Services: 카페, 블로그, 쇼핑 등

Main Gateway: Device 페이지 아이콘



Main Gateway: Device 페이지 아이콘



Main Gateway: Browser 시작페이지

Portal in Mobile | WEB vs. APP

순위 전월 순위 서비스 명

1 1 네이버

2 2 다음

3 6 구글 (.com)

4 3 구글 (.co.kr)

5 4 티스토리

6 7 페이스북

7 5 네이트

8 8 Youtube

9 32 Twitter

10 10 머니투데이

* Mobile Web 이용률 (10월, 순방문자 기준, Korean Click)


순위 전월 순위 서비스 명

1 1 카카오톡

2 2 카카오스토리

3 3 애니팡

4 4 네이버

5 - 드래곤 플라이트

6 9 캔디팡

7 5 페이스북

8 7 네이버 지도

9 6 멜론

10 8 Photo Wonder

* Mobile App 이용률 (10월, 순이용자 기준, 프리로드 앱 제외, Korean Click)


2012. 11. 16

GATEWAY

Mobile Focus

Mobile First

Device Focus =

Context Experience =

Pattern Chance =

Portal in Mobile ?

Portal in PC ?

Device Focus =


Pattern Chance =

Portal in PC ? = Browser Start-page

Portal in Mobile ?

Device Focus =


Pattern Chance =

Portal in Mobile ?

Portal in PC ? = Browser Start-page

= Device Main Page Icons

감사합니다.

e-mail: [email protected]

twitter: @pentaxzs

포털관점에서본웹디자인 및...

Design

Transcript of 포털관점에서본웹디자인 및...