Real Design

웹 내비게이션 디자인 원칙 본문

UI&UX

웹 내비게이션 디자인 원칙

GS Real Design 2013. 2. 1. 10:15

내비게이션 디자인의 가장 기초적인 원칙은 “웹 사이트를 사용하는 독자를 위한 디자인이어야 한다.”이다. 

가장 훌륭하게 디자인된 사이트는 다운로드 속도가 빠르고 다중 경로를 가진 독자 중심으로 디자인된 사이트다.

내비게이션은 독자를 도와주는 것임을 명심하라. 따라서 독자들이 좋아하는 내비게이션 방법을 알아 내려고 

대화하지 않는다면 그들의 니즈를 충족시킬 수 있는 내비게이션 시스템을 디자인할 수 없다.

웹 사이트를 출판물에 비유한다면 내비게이션은 책의 목차와 같다. 전통적인 출판물을 보면 내비게이션을 돕기 

위해 페이지 숫자가 있다. 책을 손에 쥐고서 페이지를 따라 넘겨볼 수 있다. 두꺼운 책이라면 책 뒤에 색인이 붙어있다.

웹 사이트를 손에 쥘 수는 없다. 웹 사이트의 크기나 복잡성을 직관적으로 파악할 수 없다. 웹 사이트를 한 번에 한 

스크린씩 내비게이션한다. 이것은 매우 방향성이 없는 것이다. 쉽게 혼란스러워지고 길을 잃기 쉽다. 

독자가 편하게 느끼고 원하는 콘텐츠를 쉽게 찾을 수 있는 내비게이션 시스템을 제작하는 일은 결코 쉽지 않다.

내비게이션 디자인은 다음을 충족해야 한다.

  • 독자가 원하는 콘텐츠를 빠르게 찾을 수 있도록 도와줘라.
  • 다른 독자들을 위해 복수의 내비게이션을 제공하라.
  • 독자들이 항상 어느 위치에 있는 지 파악할 수 있게 하라.
  • 콘텍스트(context)를 제공하라.
  • 일관성을 유지하라.
  • 피드백과 지원 요소를 제공하라.
  • 독자를 놀라게 하거나 오도하지 마라.

독자들을 가능한한 사이트에 오래 붙잡아 두는 스티키(sticky)한 웹 사이트에 대해 이야기하는 사람들이 있다.

“스티키”란 말은 불쾌하고 불편하게 들린다. 아무도 끈적하게 척 달라붙는 것은 좋아하지 않는다. 

전화번호부를 사용하는 방식을 떠올려 보라. 찾고자 하는 전화번호를 가능한한 빨리 찾기를 원할 것이다. 

가장 인기있는(야후, 아마존, 이베이 등) 대부분의 사이트가 전화번호부와 같다. 이들의 강점은 독자들이 

찾고자 하는 것을 신속하게 찾는 방식에 있다.

내비게이션 디자인은 도로의 교통 표지판을 디자인하는 것과 같다. 최우선적인 디자인 원칙은 기능성이지 스타일이 

 아니다. 웹상의 독자는 자동차 운전자와 같이 빠르게 움직인다.

(수많은 연구가 사람들은 웹 콘텐츠를 훑어 본다는 것을 보여준다)

따라서 내비게이션은 목표가 아니라 수단임을 이해하는 것이 중요하다. 

내비게이션은 독자들이 무엇인가를 찾도록 도와주는 것이다. 독자들이 내비게이션의 존재를 느끼지 못한다면 

가장 훌륭한 내비게이션이다.

만약에 모든 사람들이 동일한 방식으로 콘텐츠 사이를 내비게이션한다면 내비게이션 디자이너의 일이 훨씬 쉬울 것이다. 

불행하게도 그렇게 쉬운 일이 아니다. 연구에 따르면 독자들은 자신이 선호하는 방식을 

기초로 웹 사이트를 내비게이션한다. 따라서 다양한 독자들의 선호도를 수용하려면 다양한 내비게이션 방식을 제공해야 한다.

어떤 독자들은 지역에 따라 내비게이션하기를 원할 수 있다. 어떤 사람은 주제에 따른 내비게이션을 원할 지 모른다.

어떤 사람은 자신의 검색 결과로 도착한 특정 페이지에서 홈 페이지로 이동하기를 원할 수도 있다. 

어떤 사람은 특정 주제의 최신 기사를 원할 수도 있다. 한가지 내비게이션을 고집하면 다양한 

독자들의 선호도를 충족시킬 수 없다. 따라서 훌륭한 내비게이션 디자인은 독자가 웹 사이트의 어디에 

위치하건 다양한 내비게이션 옵션을 포함하고 있어야 한다.

 

 

 

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

웹 네비게이션은 지도와 교통신호 시스템 사이의 어느 지점에 있다.

여행 중이고 마을의 광장에서 지도를 살펴보고 있다고 가정해 보자. 지도가 잘 디자인됐다면 “현재 위치”란 표시가 

가장 눈에 띌 것이다. 이런 면에서 CNN은 독자에게 편안함을 제공한다. CNN의 엔터테인먼트 페이지의 

좌측 메뉴를 보면 붉은 박스 안에 흰색으로 표시된 “ENTERTAINMENT”란 단어를 볼 수 있다.

이것이 디자인적 관점에서 의미하는 바는 이렇다. 독자가 현재 위치한 페이지를 기술하는 내비게이션 요소는

 페이지에서 가장 눈에 띄는 요소여야 한다. 그러면 독자들이 방향을 잡고 “아… 내가 있는 곳이 여기구나”라고 말할 수 있다.

대체로 내비게이션은 텍스트 기반이어야 한다. 내비게이션을 그래픽 형식으로 할 필요가 있는 곳에선 독자가 

위치한 페이지를 표시해 주는 내비게이션 분류가 다른 분류와는 상이한 디자인을 가져야만 한다.

예를 들어 당신이 특정 웹 사이트의 홈페이지에 있다고 해보자. 내비게이션 요소 중 “홈”이란 분류는 다른 분류와는 

약간이라도 다른 디자인을 가지고 있어야 한다. 그래야 독자에게 특정 페이지에 위치하고 있다는 것을 알려 줄 수 있다.

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

웹 내비게이션 디자인의 가장 기초적인 원칙은 독자가 웹 사이트의 어느 곳에 있었는가를 알려주는 것이다. 

이것이 그래픽 형식이 아닌 하이퍼텍스트 형식으로 내비게이션 디자인하는 주요 이유다.

하이퍼텍스트에서는 링크를 클릭하면 링크의 색상이 변한다. 색상이 변하는 이유는 독자가 방문한 곳과 

방문하지 않은 곳을 구분할 수 있게 하기 위해서다.

대부분의 웹 사이트에서 하이퍼텍스트의 표준 색상은 클릭하지 않은 텍스는 파랑이고 클릭한 

텍스트의 색상은 자주색이다. 이 색상을 바꾸지 말라. 내비게이션은 항상 친밀감을 유지해야 함을 명심하라.

독자들은 이런 색상을 이용해왔다. 색상을 바꾸면 독자들이 혼란스러워지고 방향을 잃게 된다.

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

독자에게 어디로 가는지 알게 하려면 내비게이션 분류가 가능한 스스로 설명하도록 하는 것이 좋다. 

당신 회사 사람들에겐 친숙하지만 일반인에게는 친숙하지 않은 불명확한 분류에 기초한 내비게이션을 구축해선 안된다.

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

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

    콘텍스트를 제공하라

    웹상의 5500억 페이지의 전체 문서에서 콘텍스트가 핵심적이다. 연구에 따르면 대부분의 경우 독자들은 자신에게 

    정확히 어떤 콘텐츠가 필요한 지 모른다. 대신에 그들은 일반적인 생각만을 가지고 있다.

    내비게이션은 독자들에게 상호 연관성이 있는 콘텐츠를 보여 준다. 내비게이션은 독자들에게 필요하지만 

    독자들이 인식하지 못하고 있는 콘텐츠에 대해 안내를 한다.

    예를 들어 당신이 IBM이나 Dell의 웹사이트에 노트북을 구매하려고 방문했다. 그런데 사려고 하는 노트북 

    모델이 명확하지 않다고 가정해 보자. 사이트의 내비게이션이 전체 제품에 대한 요약 설명이 있는 노트북 

    섹션으로 안내할 것이다. 예를 들어 Dell Inspiron에 대해 좀 더 많은 정보를 원한다면 내비게이션이 

    당신을 Inspiron 홈페이지로 인도할 것이다.

    Inspiron 링크 홈페이지는 "Awards & Reviews"를 포함하고 있다. 검색을 시작했을 때는 이런 유형의 콘텐츠를 

    찾으려는 생각을 하지 않았을 수 있다. 그러나 일단 이 링크를 보면 이 컴퓨터가 어떤 평가를 받았고 

    어떤 상을 수상했는 지 알고 싶어질 것이다.

    잠재 고객이 컴퓨터를 사려고 살펴볼 때 영업 사원은 최근에 그 제품이 어떤 컴퓨터 잡지에서 상을 받았다거나 

    우수한 평가를 받았다는 사실을 알려준다. 이러한 영업 사원의 업무를 내비게이션으로 대체해야만 한다.

    일관성 유지하기

    운전할 때 당신은 교통 신호 체계가 의미하는 바에 익숙해져야 할 뿐만 아니라 그들의 크기, 모양, 색상 등에도 

    익숙해 져야한다. 만약 급작스럽게 신호 체계의 모양, 크기, 색상이 변화한다면 당신은 혼란스러워질 것이다. 

    고맙게도 지역별로 도시별로 교통 신호 체계를 변경하는 나라는 거의 없다. 웹에서는 그렇지 않다.

     임시방편으로 내비게이션이 변화할 수 있다. 심지어 한 웹 사이트 내에서도 그렇다.

    독자들은 혼란스럽거나 길을 잃게 되면 내비게이션으로 돌아간다. 일관성 없고 낯설은 내비게이션 디자인으로 

    독자를 혼란스럽게 하지 말라. 예를 들어 당신이 내비게이션 메뉴를 홈페이지의 좌측에 두기로 결정했다면 

    다른 페이지에서 내비게이션 메뉴를 오른쪽으로 바꾸지 말라.

    언어의 일관성을 유지하는 하는 것도 성공적인 내비게이션을 위해 아주 중요하다. 예를 들어, 웹 사이트의 

    어떤 페이지에는 "Home"링크를 걸어 두고, 다른 페이지에는 "Home page"라고 링크를 걸지 말라. 

    그렇게 하면 독자들을 혼란스럽게 할뿐이다. 내비게이션에서 사용할 언어와 용어를 결정하라. 

    그리고 당신 웹사이트 전체에 걸쳐서 일관되게 사용하라.

    내비게이션과 분류를 확고부동하게 하라. 그렇게 하지 않으면 단골 독자(고객)을 혼란스럽게 하는 위험에 빠진다. 

    그리고 무슨 일이 있어도 단골 고객을 혼란스럽게 해서는 안된다.

    이런 방식으로 한번 생각해 보자. 당신은 강남역 근처를 정규적으로 방문한다. 당신이 좋아하는 의류 판매점이 

    씨티극장과 ZOO002사이에 위치하고 있다. 만약 당신이 다음번에 강남역 근처를 방문했을 때 완전히 새로운 거리와 

    새로운 가게들이 씨티극장과 ZOO002 사이에 생겼다고 생겼다면 당신이 낯선 느낌을 받지 않을까?

    인간은 본성적으로 습관적이고 보수적이다. 만약 몇 개월마다 웹 사이트의 구조와 내비게이션을 변경한다면 

    예전 구조와 내비게이션에 익숙한 방문자들을 낯설게하는 위험에 빠진다.

    0 Comments
    댓글쓰기 폼