NAVER
This presentation is the property of its rightful owner.
Sponsored Links
1 / 10

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


  • 57 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

NAVER 개편에 대한 OVERVIEW

2009. 01. 05

1차수정 : 2009. 01. 08

2차수정 : 2009. 01. 13

작성자 : 오아라


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

  • OVERVIEW

  • Main UI

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

  • Page coding layout

  • - 로그인폼의 이동

  • - 이용자만의 서비스 메뉴바

  • - 뉴스 캐스트

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

  • - 네이버 캐스트

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


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

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

  • Main UI

중복되었던 컨텐츠와 불필요했던 화면구성으로

노출되어 있던 컨텐츠들이 많아 다소 정신없고 복잡했던 메인에서 깔끔하고, 심플하게 디자인 위주의 개편.

안정된 느낌이 들었던

예전 레이아웃에서 왼쪽 테이블을 없애고 센터에 있던 광고배너,뉴스 등의 컨텐츠 영역을 넓혀 사용자 시선에 약간 어색한 구성.

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

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

이미지 size

이미지 갯수

영역

Before

After

문구 글자수

문구 줄(행)수

(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 xxx 7줄 6줄12줄 4줄 2줄 4줄3줄 12줄외17줄19줄 20줄

세부 내용

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


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

  • 로그인폼의 이동 의도

Right

로그인폼의 이동

Left

  • 네이버 개편의 큰변화

  • 3단구조의 메인에서 2단구조

  • 형식으로 변형.

  • 좌측상단에 있던 로그인폼의

  • 위치를 우측상단으로 이동.

  • ( 개편에 대한 관심 유도를 위한

  • 하나의 수단으로 추측됨)

이용율이 적은 영역을 없애고 전체적인 홈페이지 효율적 이용율을

높히기 위해좌측 로그인폼을 과감하게 우측으로 이동.

센터의 컨텐츠영역을 넓혀 3단구조의 메인에서 2단구조로 변경.

(네이버 사내 테스트 결과 > 로그인실패 없음)

사용자들의 시선이 잘 닿지 않고

이용률이 매우 저조.

After

Before


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

  • Page coding layout

  • 불필요하고 정신 사나운 컨텐

  • 츠들을 과감히 정리하여 새롭

  • 고 필요한 메뉴들로만 구성되

  • 어진 UI로 개편되었지만

  • 그만큼 오히려 더 비중을 많이

  • 차지하게 된 광고 배너들로 인

  • 해 사용자들의 메뉴별 관심 저

  • 하를 초래.

  • 원하는 컨텐츠 접근을 위한 클

  • 릭수가 많아져 불편.

  • 전체적으로 예전의 정보지식

  • 포털 사이트의 이미지보다 홍

  • 보적 성향의 사이트의 이미지

  • 가 큼.

  • 코딩방식의 차이점

  • 개편전 일반코딩방식(Table for Layout)에서 현재 개편후의 웹표준 코딩방식(CSS Layout)의 메인 소스를 비교해보면

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

상단부분은 최대한 div의 활용으로

제대로 코딩하려고 노력하였으나

스크롤바가 내려지는 하단은

Table에 div만 덮은 형식으로 코딩

Table을 전혀 사용하지 않고

Div를 최대한 활용하여

전체적으로 디자인과 개발의 구분 관리가

편리한 웹표준화 형식으로 코딩.

After

Before

* Table사용 코딩 영역


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

  • 이용자만의 서비스 메뉴바

“더보기” 클릭시, 전체 메뉴바 보기

After

Before

  • 개편전의 네이버홈에서의 정신없던 메뉴바형식에서

  • 깔끔하게 정리된 서비스 메뉴바

  • 원하는 서비스 메뉴바를 설정하여 사용할 수 있도록

  • My 메뉴설정 컨텐츠가 생김.

  • 개편 후 새로움의 인식이 강해 더 편리할 수 있는 서비스 메뉴바가

  • 실질적인 사용에 있어서 항상 애용하며 자주 즐겨찾던 메뉴의 위치를

  • 이미 파악하고 있는 예전 네이버홈에 익숙한 유저들의 입장에서는

  • 원하는 메뉴 찾기 불편해져

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

원하는 서비스의 메뉴 설정

최대5개 선택

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


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

  • 뉴스 캐스트

After

Before

원하는 언론사의 뉴스 설정

최대7개 선택


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

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

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

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

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

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

  • 이용자들과 공유 가능.

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

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

  • 제공받을수도 있는 이용자 참여형 서비스

  • 네이버메인에 보이는 캐스트의 노출 기준은

  • - 구독자가 많은 캐스트 중 최근 발행활동이 활봘한 캐스트가 일정시간(2시간정도)주기로 자동 랜덤 추출.

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

  • 로그인 하는 유저들은 블로그 유저들이 대부분이므로

  • 구지 오픈 캐스트가 아니더라도 유저들이 원하는 정보

  • 가 있는 이웃 블로그를 통해 필요한 정보를 열람할 수

  • 있으므로 오픈 캐스트를 통해 정보를 공유하자는 의도

  • 는 이중적이고 큰 필요성을 느낄 수 없는 카테고리.

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

  • 더 지켜볼 필요가 있다.

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


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

  • 네이버 캐스트

  • 네이버 캐스트 : 오늘의 뮤직, 책, 포토, 세계인물, 과학,

  • 영화 등의 더욱더 다양한 생활 문화 콘텐츠에 대한 각 분야의

  • 전문가 및 양질의 컨텐츠와 정보들을 한눈에 확인 가능.

  • 문화와 실생활에 관련된 양질의 정보를 사용자들에게

  • 제공하자는 의도이지만 관심없는 사용자들에게는 메인의 너무 많은 영역을

  • 차지하는 불필요한 컨텐츠.


Naver overview 2009 01 05 1 2009 01 08 2 2009 01 13

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

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

  • 경기결과, 환율 등의 다양한 정보들이 수시로

  • 업데이트 되어 한눈에 꼼꼼히 확인.

  • 그 외에 검색을 통해서 알수 있었던

  • 달력, 계산기, 단위변환, 국가별 시간 및 번호 등의

  • 많은 정보들을 네이버홈 뿐만 아니라

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

타이머

지역번호

Before

After

국가번호

시계

  • 타임스퀘어 메뉴는 아주 간단하고 편리하지만 네이버 홈페이지를

  • 방문하거나 위젯이 가능한 페이지에서만 사용.

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

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

  • 네이버 홈페이지로 더 간단히 이동이 가능하고 인터넷 창을 이용하지 않고도

  • 사용 가능한 기능이 구현되었으면 한다.

달력

스포츠

계산기

날씨

단위변환

환율


  • Login