포털관점에서본웹디자인 및...
Post on 06-Jul-2015
369 Views
Preview:
DESCRIPTION
TRANSCRIPT
포털 관점에서 본
웹 디자인 이슈 및 UX동향
Daum UX2팀 김기성
포털 관점에서 본 웹 디자인 이슈 및 UX동향
포털 관점에서 본 웹 디자인 이슈 및 UX동향
포털 관점에서 본 웹 디자인 이슈 및 UX동향
포털 관점에서 본 웹 디자인 이슈 및 UX동향
포털 관점에서 본 웹 디자인 이슈 및 UX동향
포털 관점에서 본 웹 디자인 이슈 및 UX동향
n. 입구가 되는 사이트라는 뜻으로 수많은 사이트를 특정한 분류에 따라 정리해놓고 주소를 링크시켜서 사용자들이 원하는 곳을 쉽게 찾아갈 수 있도록 만든 사이트를 이르는 말
http://www.giantbomb.com/stargate-command/95-2798/all-images/52-412658/stargate/51-1288601/
http://www.flickr.com/photos/a440/2065934413/
입구가 되는
이동이 쉬운
원하는 곳에 쉽게 접근할 수 있는
Start-page
자사 서비스로의 Gateway
자사 서비스로의 Gateway
타사서비스로의 Gateway
자사 서비스로의 Gateway
타 서비스로의 Gateway
타 서비스로의 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
“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
“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
“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
http://durl.kr/3tvexi
2012
2010 2015
Sales
Time
Smartphone sales overtook PC sales
2000 2005
1000
0
500
750
250
PC
Smartphone
http://durl.kr/3tvexi
2015
2010 2015
Sales
Time
Smartphone sales overtook PC sales
2000 2005 2010
1000
0
500
750
250
http://durl.kr/3tvexi
한메일, 카페
97 99
미디어 다음
03
tv팟
06
자체 검색엔진
07
스카이뷰, 로드뷰 오픈
09
tv팟앱
08
지도앱
09
마이피플
10
뮤직앱
11
사전앱
12
2015
Sales
Time
13
14
15
Smartphone sales overtook PC sales
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
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
기상
Daily | PC & Mobile Traffic
0
Traffic
0
PC
Smart phone
23 12 6 18 Time
학교/직장
점심
09:00
Daily | PC & Mobile Traffic
학교/직장
17:00
0
Traffic
0
PC
Smart phone
23 12 6 Time
퇴근 취침
18
Daily | PC & Mobile Traffic
18:00 ~ 23:00
출/퇴근 시간
Game
출/퇴근 시간 | Killing Time
Game
출/퇴근 시간 | Killing Time
Gossip
출/퇴근 시간 | Killing Time
FUN
출/퇴근 시간 | Killing Time
취침 전 | 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 순환개선
Case Study | Mobile 순환개선
Case Study | Mobile 순환개선
Pattern
Context
Device
Portal
Chance =
Pattern
Context
Device
Portal
Chance =
Pattern
Context
Device
Portal
On/Offline, in/Out
Mobile Context | Offline
Mobile Context | Offline
Mobile Context | Offline
Mobile Context | Offline
Mobile Context | Offline
Mobile Context | Home
Mobile Context | Home
Mobile Context | Home
Mobile Context | Outside
Mobile Context | Outside
Daum 지도 필드 리서치를 통한 Context파악
Case Study | Field Research
74
다음 모바일 지도 사용 특성 이슈 4.
도보사용자는 이동 하면서 목적지까지의 경로를 재확인 하기 위해 간헐적으로 지도 앱을 켜서 현위치 및 경로를 파악함
- 목적지까지 제대로 가고 있는지 확인하기 위해 이동 중간중간 앱을 켜서 현위치를 확인함
- 초행길인 경우 로드뷰 기능을 활용해서 주변을 탐색하는 행위도 발견됨
Case Study | Field Research
다음 모바일 지도 사용 특성 이슈 3.
실시간 교통 정보 이용을 위해 네비게이션 앱을 사용하고 있음
- 네비게이션 앱은 실시간 교통 정보를 확인하기 위해 사용 한다고 응답함
- 네비게이션 앱의 경우 경로 이탈 시에 재안내가 네비게이션 대비 느려 불편하다는 의견도 다소 있었음
- 모바일의 화면 사이즈는 작아서 메인 네비게이션으로 사용하기에 무리라고 지적하였음
Case Study | Field Research
Case Study | Field Research
Case Study | Field Research
Case Study | Field Research
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
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
3개의 이동 Gateway
18개의 이동 Gateway
Portal in Mobile | Gateway
4개의 이동 Gateway (+ 전체이동)
Portal in Mobile | Compact Screen
Portal in Mobile | Hidden Screen
Portal in Mobile | Hidden Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
Portal in Mobile | Personalized Screen
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.
Start-page Step 3 • 포털 페이지: 네이버, 다음, 네이트
Portal in PC | Task Flow
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: 카페, 블로그, 쇼핑 등
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: 카페, 블로그, 쇼핑 등
Main Gateway: Device 페이지 아이콘
Main Page Step 1 • 주요 어플리케이션 (Page Flicking)
Portal in PC | Task Flow
Main Gateway: Device 페이지 아이콘
Portal in Mobile | Task Flow
Start-page Step 3 • 포털 페이지: 네이버, 다음, 네이트
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)
Portal in Mobile | WEB vs. APP
순위 전월 순위 서비스 명
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)
Portal in Mobile | WEB vs. APP
2012. 11. 16
포털 관점에서 본 웹 디자인 이슈 및 UX동향
GATEWAY
Mobile Focus
Mobile First
Device Focus =
Context Experience =
Pattern Chance =
Portal in Mobile ?
Portal in PC ?
Device Focus =
Context Experience =
Pattern Chance =
Portal in PC ? = Browser Start-page
Portal in Mobile ?
Device Focus =
Context Experience =
Pattern Chance =
Portal in Mobile ?
Portal in PC ? = Browser Start-page
= Device Main Page Icons
감사합니다.
e-mail: heisk@daumcorp.com
twitter: @pentaxzs
top related