naver 개편에 대한 overview 2009. 01. 05 1 차수정 : 2009. 01. 08 2 차수정 : 2009. 01....

10
NAVER 개개개 개개 OVERVIEW 2009. 01. 05 1 차차차 : 2009. 01. 08 2 차차차 : 2009. 01. 13 차차차 : 차차차 1

Upload: virginia-mcknight

Post on 30-Dec-2015

41 views

Category:

Documents


10 download

DESCRIPTION

NAVER 개편에 대한 OVERVIEW 2009. 01. 05 1 차수정 : 2009. 01. 08 2 차수정 : 2009. 01. 13. 작성자 : 오아라. OVERVIEW Main UI - 깔끔하게 정리된 컨텐츠와 UI Page coding layout - 로그인폼의 이동 - 이용자만의 서비스 메뉴바 - 뉴스 캐스트 - 오픈 캐스트 : 이용자 참여형 서비스 - 네이버 캐스트 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

1

NAVER 개편에 대한 OVERVIEW

2009. 01. 051 차수정 : 2009. 01. 082 차수정 : 2009. 01. 13

작성자 : 오아라

Page 2: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

2

OVERVIEW• Main UI - 깔끔하게 정리된 컨텐츠와 UI

• Page coding layout - 로그인폼의 이동 - 이용자만의 서비스 메뉴바 - 뉴스 캐스트 - 오픈 캐스트 : 이용자 참여형 서비스 - 네이버 캐스트 - 타임스퀘어 : 필요한 정보들 위젯 사용

Page 3: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

Main UI

Before After

중복되었던 컨텐츠와 불필요했던 화면구성으로노출되어 있던 컨텐츠들이 많아 다소 정신없고 복잡했던 메인에서 깔끔하고 , 심플하게 디자인 위주의 개편 .

“ 양질의 컨텐츠를 보다 편리하게 이용할 수 있도록 지원하는 것을 목표로 개편 ”

로그인 광고배너 뉴스 오픈캐스트 타임스퀘어 네이버캐스트 쇼핑

전 후 전 후 전 후 전 후 전 후 전 후 전 후

이미지↑ .

좌 > 우 이동 .

글자수↑ .

이미지↑ .

중앙 > 좌 이동 .

이미지↑ .

좌측으로 영역확대 .

글자수↑ .

줄 ( 행 ) 수↓

이미지↑ , 갯수↓ .

좌측으로 영역확대 .

줄 ( 행 ) 수↓ .

이미지수↑ .

icon 수↑ .

글자수↑ / 행 ↑ .

이미지↑ , 갯수↑ .

글자수↓ .

줄 ( 행 ) 수↓

이미지↑ , 갯수↑ .

글자수↓ .

이미지 size

이미지 갯수영역

문구 글자수문구 줄 ( 행 ) 수(Title 제외 )

안정된 느낌이 들었던 예전 레이아웃에서 왼쪽 테이블을 없애고 센터에 있던 광고배너 , 뉴스

등의 컨텐츠 영역을 넓혀 사용자 시선에 약간 어색한 구성 .

더 넓어진 해상도에 비해 폰트크기가 작아져 중요한 이슈들이 한눈에 들어오지 않는 디자인과 이용자의 의도와

상관없이 마우스오버만 해도 아무때나 뜨는 동영상 광고에 불편함과 반감을 유발 .

세부 내용

197x100 280x100 388x100 595x100 390x241 595x205 397x443 595x162 190x102 280x158 376x444 595x235

191x421 280x357

x x 1 1 1 1 6 1~3 Icon 4 Icon 10 1 3 8 12

Left 상 Right 상 Center 상 Left 상 광고밑 광고밑 뉴스밑 뉴스밑 Right 하 Right 하 Left 하 Left 하 Right 하 Right 하

31 35 x x 17~20 25~30 17~20 17~21 8~12 18~19 17~20 4~11 4~12 4~6

x x x x 7 줄 6 줄 12 줄 4 줄 2 줄 4 줄 3 줄 12 줄외 17 줄 19 줄 20 줄

* 전체적으로 컨텐츠의 영역은 넓혔지만 해당 문구와 이미지는 최소한으로 심플하게 정리 .

3

Page 4: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

사용자들의 시선이 잘 닿지 않고 이용률이 매우 저조 .

이용율이 적은 영역을 없애고 전체적인 홈페이지 효율적 이용율을높히기 위해 좌측 로그인폼을 과감하게 우측으로 이동 .센터의 컨텐츠영역을 넓혀 3 단구조의 메인에서 2 단구조로 변경 .( 네이버 사내 테스트 결과 > 로그인실패 없음 )

AfterBefore

로그인폼의 이동

로그인폼의 이동 의도

LeftRight

• 네이버 개편의 큰변화- 3 단구조의 메인에서 2 단구조 형식으로 변형 .

- 좌측상단에 있던 로그인폼의 위치를 우측상단으로 이동 .

( 개편에 대한 관심 유도를 위한 하나의 수단으로 추측됨 )

4

Page 5: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

Page coding layout

Before After

• 불필요하고 정신 사나운 컨텐 츠들을 과감히 정리하여 새롭 고 필요한 메뉴들로만 구성되 어진 UI 로 개편되었지만 그만큼 오히려 더 비중을 많이 차지하게 된 광고 배너들로 인 해 사용자들의 메뉴별 관심 저 하를 초래 .

• 원하는 컨텐츠 접근을 위한 클 릭수가 많아져 불편 .

• 전체적으로 예전의 정보지식 포털 사이트의 이미지보다 홍 보적 성향의 사이트의 이미지 가 큼 .

5

• 코딩방식의 차이점개편전 일반코딩방식 (Table for

Layout) 에서 현재 개편후의 웹표준 코딩방식 (CSS Layout) 의 메인 소스를 비교해보면전체적으로 table 이 아닌 div

만을 이용함으로써 한눈에도 파일의 용량이 많이 절감된 것을 알 수 있고 각각 기능별 컨텐츠의 오류수정 및 삭제 등 관리에 있어서 더욱 시간이 절약되고 편리하다 .

상단부분은 최대한 div 의 활용으로제대로 코딩하려고 노력하였으나 스크롤바가 내려지는 하단은 Table 에 div 만 덮은 형식으로 코딩

Table 을 전혀 사용하지 않고 Div 를 최대한 활용하여전체적으로 디자인과 개발의 구분 관리가편리한 웹표준화 형식으로 코딩 .

* Table 사용 코딩 영역

Page 6: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

6

이용자만의 서비스 메뉴바“ 더보기” 클릭시 , 전체 메뉴바 보기

“ 편집하기” 클릭시 , My 메뉴설정 페이지

원하는 서비스의 메뉴 설정 최대 5 개 선택

After

Before

• 개편전의 네이버홈에서의 정신없던 메뉴바형식에서 깔끔하게 정리된 서비스 메뉴바 원하는 서비스 메뉴바를 설정하여 사용할 수 있도록 My 메뉴설정 컨텐츠가 생김 .

•개편 후 새로움의 인식이 강해 더 편리할 수 있는 서비스 메뉴바가 실질적인 사용에 있어서 항상 애용하며 자주 즐겨찾던 메뉴의 위치를 이미 파악하고 있는 예전 네이버홈에 익숙한 유저들의 입장에서는

원하는 메뉴 찾기 불편해져

한편으로는 오히려 기존 사용자들에 대한 불만을 유발 .

Page 7: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

7

뉴스 캐스트

원하는 언론사의 뉴스 설정최대 7 개 선택

Before After

장점 단점

원하는 언론사별 뉴스를 이용자

가 선택하여 언론사에서 직접 편

집하고 운영하는 뉴스 구독 가능 .

여러 언론사별 뉴스를 한눈에 볼

수 있는 편리성 .

다양한 관점으로 이해하고 접할

수 있는 다양성 .

뉴스 캐스트 전체보기를 통해 여

러 언론사의 기사를 볼 수 있을

뿐더러 원하는 언론사의 기사를

따로 네이버홈을 통하지 않더라

도 실시간으로 확인가능한

rss 기능 구현 .

뉴스 캐스트를 통해 타사이트의 뉴스 정보를 접할때 페이

지의 사이드영역의 선정적 광고들 때문에 미성년자의

이용에 불편을 줄 뿐만 아니라 원하지 않는

성인광고들로 인한 성인 이용자들의 불만도 초래함 .

실질적으로 정보를 접 할때 UI 만 깔끔하게 정리되어

새단장 되었을 뿐 이용하는 유저들의 입장에선

복잡하고 어수선하다는 의견들이 다수 .

여러 언론사의 뉴스를 서로 비교하며 볼 수 있다는 의도와

달리 오히려 한가지내용의 기사를 여러언론사별로

보기 힘들어 내용면에서는

정리가 잘 되어 있지 않아 불편 .

뉴스캐스트는 네이버 개편이후의 가장큰 유저들의 불만으

로 의견이 다분한 상황 .

개편후 일주일간의 조사결과 뉴스캐스트 부문에서만

방문자수가 30% 이상이 감소했음을 봤을때

네이버홈의 전체적인 이용율 감소의 큰 원인 .

Page 8: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

8

오픈 캐스트 : 이용자 참여형 서비스

인터넷을 통하여 혼자만 알기에 아까운 많은 정보들을

링크로 담아 캐스트로 직접 발행 .

캐스터가 수집한 캐스트를 네이버 홈에서 다른 많은

이용자들과 공유 가능 .

관심분야의 또 다른 사이트도 웹서핑 가능 .

네이버 홈에 누구든지 자유롭게 정보를 제공할수도

제공받을수도 있는 이용자 참여형 서비스네이버 메인에 보이는 캐스트의 노출 기준은 - 구독자가 많은 캐스트 중 최근 발행활동이 활봘한 캐스트가 일정시간 (2 시간정도 ) 주기로 자동 랜덤 추출 .

그러므로 특정이유로 인한 편파 편집이 불가능 .

• 로그인 하는 유저들은 블로그 유저들이 대부분이므로 구지 오픈 캐스트가 아니더라도 유저들이 원하는 정보 가 있는 이웃 블로그를 통해 필요한 정보를 열람할 수 있으므로 오픈 캐스트를 통해 정보를 공유하자는 의도 는 이중적이고 큰 필요성을 느낄 수 없는 카테고리 .

하지만 아직 오픈된지 얼마되지않아

더 지켜볼 필요가 있다 .

원하는정보의 캐스트 구독하기 (login 필요 )

정보가 있는 해당 사이트로 직접 이동 .

Page 9: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

9

네이버 캐스트 : 오늘의 뮤직 , 책 , 포토 , 세계인물 , 과학 , 영화 등의 더욱더 다양한 생활 문화 콘텐츠에 대한 각 분야의 전문가 및 양질의 컨텐츠와 정보들을 한눈에 확인 가능 .

• 문화와 실생활에 관련된 양질의 정보를 사용자들에게 제공하자는 의도이지만 관심없는 사용자들에게는 메인의 너무 많은 영역을 차지하는 불필요한 컨텐츠 .

네이버 캐스트

Page 10: NAVER  개편에 대한  OVERVIEW 2009. 01. 05 1 차수정  : 2009. 01. 08 2 차수정  : 2009. 01. 13

10

타임스퀘어 : 필요한 정보들 위젯 사용

타임스퀘어를 통해 시시각각 변하는 날씨 , 스포츠

경기결과 , 환율 등의 다양한 정보들이 수시로 업데이트 되어 한눈에 꼼꼼히 확인 .

그 외에 검색을 통해서 알수 있었던 달력 , 계산기 , 단위변환 , 국가별 시간 및 번호 등의 많은 정보들을 네이버홈 뿐만 아니라

블로그에서도 위젯 사용으로 편리 .

타이머 지역번호

단위변환

국가번호

계산기 날씨

환율

달력 스포츠

시계

AfterBefore

타임스퀘어 메뉴는 아주 간단하고 편리하지만 네이버 홈페이지를 방문하거나 위젯이 가능한 페이지에서만 사용 .

네이버로 바로 갈수 있는 네이버 로고 버튼을 삽입한

별도 타임스퀘어 다운로드 기능을 추가하여

네이버 홈페이지로 더 간단히 이동이 가능하고 인터넷 창을 이용하지 않고도 사용 가능한 기능이 구현되었으면 한다 .