올하우디자인

주메뉴

Estimate

  • 견적의뢰
  • 실시간 견적의뢰
  • 제작tip
  • 제작과정
  • 고객센타 031-417-3409
  • 웹하드
  • 올하우 회사소개서 다운로드

제작tip(디자인경영을 위한 최고의 파트너 올하우 디자인입니다.)

 

 
[TIP] 웹 내비게이션 디자인 원칙 - 제 2편
작성일 : 11-04-18 12:00
조회 : 7,169  

제공 : 코리아인터넷닷컴
저자 : Gerry McGovern

게리 맥거번(Gerry McGovern)은 웹 콘텐츠 관리 및 웹 출판 솔루션으로 유명한 Nua의 CEO다.
Nua는 1995년 아일랜드에서 설립됐고 루슨트 테크놀로지, 오라클, 프록터&갬블 등의 클라이언트를 상대로 인터넷 컨설팅 및 개발 사업을 수행했다. 그리고 각종 인터넷 통계자료 및 트렌드 정보를 제공하는 Nua Internet Surveys로 널리 알려져 있다.

 


※ 웹 내비게이션 디자인 원칙 - 제 2편 ※


지난 주에 시작한 이 시리즈 기사에서 우리는 가장 훌륭한 디자인은 독자를 위한 디자인이라는 점을 명확히 했다. 다운로드 속도가 빨라야 하고 다중의 경로를 제공해야 한다. 다음으로 우리는 독자들이 현재 어디에 있고, 어디에 있었고, 어디로 가야 하는지를 알려줘야 한다.


■ 독자들이 현재 위치를 파악할 수 있게 하라.


내비게이션은 독자에게 명확하고 모호하지 않은 방식으로 그가 현재 웹 사이트의 어느 페이지에 있는가를 알려줘야 한다. 웹 네비게이션은 지도와 교통신호 시스템 사이의 어느 지점에 있다.


여행 중이고 마을의 광장에서 지도를 살펴보고 있다고 가정해 보자. 지도가 잘 디자인됐다면 “현재 위치”란 표시가 가장 눈에 띌 것이다. 이런 면에서 CNN은 독자에게 편안함을 제공한다. CNN의 엔터테인먼트 페이지의 좌측 메뉴를 보면 붉은 박스 안에 흰색으로 표시된 “ENTERTAINMENT”란 단어를 볼 수 있다.


이것이 디자인적 관점에서 의미하는 바는 이렇다. 독자가 현재 위치한 페이지를 기술하는 내비게이션 요소는 페이지에서 가장 눈에 띄는 요소여야 한다. 그러면 독자들이 방향을 잡고 “아… 내가 있는 곳이 여기구나”라고 말할 수 있다.


대체로 내비게이션은 텍스트 기반이어야 한다. 내비게이션을 그래픽 형식으로 할 필요가 있는 곳에선 독자가 위치한 페이지를 표시해 주는 내비게이션 분류가 다른 분류와는 상이한 디자인을 가져야만 한다.


예를 들어 당신이 특정 웹 사이트의 홈페이지에 있다고 해보자. 내비게이션 요소 중 “홈”이란 분류는 다른 분류와는 약간이라도 다른 디자인을 가지고 있어야 한다. 그래야 독자에게 특정 페이지에 위치하고 있다는 것을 알려 줄 수 있다.


■ 독자들에게 방문했던 곳을 알려 줘라.


웹 내비게이션 디자인의 가장 기초적인 원칙은 독자가 웹 사이트의 어느 곳에 있었는가를 알려주는 것이다. 이것이 그래픽 형식이 아닌 하이퍼텍스트 형식으로 내비게이션 디자인하는 주요 이유다.


하이퍼텍스트에서는 링크를 클릭하면 링크의 색상이 변한다. 색상이 변하는 이유는 독자가 방문한 곳과 방문하지 않은 곳을 구분할 수 있게 하기 위해서다.


대부분의 웹 사이트에서 하이퍼텍스트의 표준 색상은 클릭하지 않은 텍스는 파랑이고 클릭한 텍스트의 색상은 자주색이다. 이 색상을 바꾸지 말라. 내비게이션은 항상 친밀감을 유지해야 함을 명심하라. 독자들은 이런 색상을 이용해왔다. 색상을 바꾸면 독자들이 혼란스러워지고 방향을 잃게 된다.


■ 독자에게 어디로 가는지 알려 줘라.


독자에게 어디로 가는지 알게 하려면 내비게이션 분류가 가능한 스스로 설명하도록 하는 것이 좋다. 당신 회사 사람들에겐 친숙하지만 일반인에게는 친숙하지 않은 불명확한 분류에 기초한 내비게이션을 구축해선 안된다.


그러나 내비게이션이 독자에게 좀 더 명확성을 제공하려면 부수적인 지원 요소가 필요하다. 여러 가지 방법이 있다.


{1} 내비게이션 요소가 회사 로고 같은 이미지고 홈 페이지로 링크가 갈려 있다면 ALT 태그에 “회사 홈페이지” 따위의 문구를 써 넣어라.

{2} 텍스트 링크가 충분히 설명적이 못하면 "링크 타이틀" 텍스트를 제공하라.

{3} 마우스를 가져다 대면 링크의 색상이 변하게 하라. 이것은 너무 많은 분류 링크가 서로 가까이 위치하고 있을 때 유용하다. 링크의 색상이 변하기 때문에 독자들이 클릭하려는 것에 대해 더 확신을 갖게 된다.

{4} 마우스가 특정 링크위를 지나갈 때 하위 분류 레벨을 보여주는 드롭-다움 메뉴를 사용하라. 이것은 독자가 원할 경우 웹 사이트의 깊은 곳에 도달할 수 있게 해준다.


   

ALLHOW 본사 : 경기도 안산사 상록구 이호로3길 14-13 1층   기술 연구소 : 서울특별시 금천구 가산디지털2로 98 롯데IT캐슬 1동 607호
T : 031-417-3403 F : 031-417-3404 Copyright by ALLHOW Co., LTD. reserved.

ISO9001 인증업체 한국디자인진흥원 산업디자인전문회사 신기술 벤처기업