티스토리 뷰

웹 내비게이션 디자인 원칙

내비게이션 디자인의 가장 기초적인 원칙은 “웹 사이트를 사용하는 독자를 위한 디자인이어야 한다.”는 것입니다. .
 내비게이션은 독자를 도와주는 것임을 명심해야 합니다. 따라서 독자들이 좋아하는 내비게이션 방법을 알아 내려고 대화하지 않는다면 그들의 니즈를 충족시킬 수 있는 내비게이션 시스템을 디자인할 수 없습니다.
 
웹 사이트를 출판물에 비유한다면 내비게이션은 책의 목차와 같습니다. 전통적인 출판물을 보면 내비게이션을 돕기 위해 페이지 숫자가 있으며 책을 손에 쥐고서 페이지를 따라 넘겨볼 수 있습니다. 
 
하지만 웹 사이트를 손에 쥘 수는 없습니다. 웹 사이트의 크기나 복잡성을 직관적으로 파악할 수도 없습니다. 그렇기에 고객이 편하게 느끼고 원하는 콘텐츠를 쉽게 찾을 수 있는 내비게이션 시스템을 제작하는 일은 결코 만만치 않습니다. 우리의 웹사이트에서 고객이 헤매지 않고 원하는 정보를 쉽게 얻을 수 있는 나침반을 제공해주어야 합니다. 


독자들에게 방문했던 곳을 알려 줘야 한다.
 
웹 내비게이션 디자인의 가장 기초적인 원칙은 독자가 웹 사이트의 어느 곳에 있었는가를 알려주는 것입니다. 이것이 그래픽 형식이 아닌 하이퍼텍스트 형식으로 내비게이션 디자인하는 주요 이유라고 할 수 있습니다. 하이퍼텍스트에서는 링크를 클릭하면 링크의 색상이 변한는 것을 볼 수 있는데, 색상이 변하는 이유는 독자가 방문한 곳과 방문하지 않은 곳을 구분할 수 있게 하기 위함입니다.
 

독자에게 어디로 가는지 알려 주자.
 
독자에게 어디로 가는지 알게 하려면 내비게이션 분류가 가능한 스스로 설명하도록 하는 것이 좋습니다. 내비게이션이 독자에게 좀 더 명확성을 제공하려면 부수적인 지원 요소가 필요한데 이에는 여러 가지 방법이 있습니다.
 
* 내비게이션 요소가 회사 로고 같은 이미지고 홈 페이지로 링크가 갈려 있다면 ALT 태그에
*  “회사 홈페이지” 따위의 문구를 써 넣어라.
* 텍스트 링크가 충분히 설명적이 못하면 "링크 타이틀" 텍스트를 제공하라.
* 마우스를 가져다 대면 링크의 색상이 변하게 하라. 이것은 너무 많은 분류 링크가 서로 가까이 위치하고
*  있을 때 유용하다. 링크의 색상이 변하기 때문에 독자들이 클릭하려는 것에 대해 더 확신을 갖게 된다.
* 마우스가 특정 링크위를 지나갈 때 하위 분류 레벨을 보여주는 드롭-다움 메뉴를 사용하라. 
* 이것은 독자가 원할 경우 웹 사이트의 깊은 곳에 도달할 수 있게 해준다.


일관성 유지하기
 
한 사이트에서 모양, 크기, 색상이 일관성 없이 변화한다면 누구나 이에 혼란스러워움을 느낄 것입니다. 
 
독자들은 혼란스럽거나 길을 잃게 되면 내비게이션으로 돌아가게 됩니다. 일관성 없고 낯설은 내비게이션 디자인으로 고객을 혼란스럽게 해서는 안됩니다. 예를 들어 당신이 내비게이션 메뉴를 홈페이지의 좌측에 두기로 결정했다면 다른 페이지에서 내비게이션 메뉴를 오른쪽으로 바꾸는 것은 자체해야 합니다..
 




Recent Comments