본문으로 바로가기


웹 네이게이션의 중요성


"사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다."

위 문장은 부인할 수 없는 사실이다.


모니터를 인터넷으로 구매하려고 한다고 생각해보자. 구글이나 네이버 같은 검색 엔진에 검색을 하고 링크를 따라 쇼핑몰로 이동하게 될 것이다.

쇼핑몰로 오긴 했는데 도무지 사용법을 모르겠다. 상품의 상세 정보는 어떻게 볼 수 있으며, 심지어는 뭘 눌러야 구매를 할 수 있는것인지도 모르겠다. 

실제 현실에서 쇼핑몰에 들어갔는데 코너를 안내하는 표지도 없고, 직원도 없으며 계산대도 없고 제품이 어딨는지도 못찾는다면 어떨까? 만약 그곳이 인근에 있는 '유일한' 쇼핑몰이라면 어떻게 해서든 찾아 내서 구매를 할지도 모른다.

하지만 지금 2017년의 웹 세계에서 가까운 쇼핑몰은 수천 수만개가 훨씬 넘는다.

들어가자 마자 10초 안에 내가 원하는 정보를 얻는 방법을 알아낼 수 없다면 사용자들은 과감없이 뒤로가기를 누를 것이다.

특히, 대 검색시대에 살고있는 요즘은 더 심각하다. 특정 사이트의 '홈페이지'를 통해 들어가는 경우보다 검색엔진을 통해 그냥 사이트의 한 가운대로 툭 떨어지는 상황이 훨씬 많다. 툭 떨어지자 마자 내가 지금 어디에 와 있고, 원하는 정보를 어떻게 얻을 수 있는지를 명확하게 알려주는 웹 네비게이션은 매우 중요하다.



현실과 웹 세계의 물리적 차이


웹 사이트에서나 실제 현실 세계에서나 사람이 원하는 정보를 찾는 과정 자체는 비슷하다. 하지만 현실 세계에서 공간과 정보를 가늠하기 위해 활용하는 도구나 단서들 중 대다수가 웹 세계에는 없다.


웹이 현실과 다른 특이성은 아래와 같다.

- 규모에 대한 감각이 없다 : 실제 세상에서 쇼핑몰에 들어오면 한눈에 규모를 알 수 있고, 내가 원하는 제품을 찾기 위해 얼마만큼의 걸음을 걸어야 하는지를 대충 파악할 수 있지만, 웹 사이트에는 그 규모가 어느정도 되는지 파악하기 매우 어렵다.

- 방향 감각이 없다 : 웹사이트는 3차원의 구조를 2차원적 평면으로 보여주기 때문에 현실세계와는 달리 상하좌우에 대한 방향감각이 없다고 볼 수 있다.

(다만, 앞으로의 미래에 VR, AR등의 기술 발달로 어떻게 변화할지는 잘 모르겠다고 생각한다. 5년안에 이 포스팅 내용을 수정해야 할지도 모르겠다.)

- 위치 감각이 떨어진다 : 웹사이트에서는 내가 사이트 중 어느 위치에 와 있는지, 어떻게 해서 여기까지 도달했는지에 대한 감각이 매우 떨어진다. 그래서 바로가기나 즐겨찾기 기능이 매우 중요하다.




웹 네비게이션을 잘 디자인하자.



1. 관례를 적극적으로 사용하.


네비게이션의 가장 중요한 목적은 사용자가 원하는 것을 쉽게 찾아주고 사용자가 지금 어디에 있는지를 알려주는 것이다. 따라서 사용자들이 일반적으로 생각하는 관례를 절대 무시해서는 안된다. 사람들은 보통 웹 페이지에서 그 사이트의 명이나 로고가 왼쪽 상단에 있을 것이라고 생각하고, 그 로고를 클릭하면 홈페이지로 이동할 것이라고 당연하게 생각한다. 아무리 더 예쁜 디자인 아이디어가 있더라도 홈페이지의 로고를 오른쪽 하단에 두는 것과 같은 실수를 해서는 안된다.



2. 고정 네비게이션을 활용하라


모든 페이지에서 같은 위치에 동일한 형태로 존재하는 네비게이션은 사용자의 움직임에 큰 도움이 된다. 이뿐 아니라 고정된 네이게이션은 사용자가 단 한번만 구조를 이해해도 되기 때문에 활용성이 크다.



3. 검색을 제공하라


사이트에 들어와 훑어보고 구조를 확인한 후, 하나하나 클릭해서 찾아가는 사용자도 있겠지만 키워드를 검색해서 바로 원하는 정보를 얻는 것을 선호하는 사람들이 더 많다. 검색창의 모양은 모든 사람들이 예상 가능한 정도로 제공하는 것이 좋다.



4. 페이지의 이름을 명확히 제공하라


모든 페이지는 이름이 필요하며, 페이지의 콘텐츠 전체를 아우르는 역할을 할 수 있는 눈에 띄는 위치에 존재해야 한다. 또한 해당 페이지의 이름은 내가 클릭한 것과 동일해야 한다.



5. 현재 위치를 표시하라.


메뉴나 탭 등에서 현재 들어와있는 페이지를 두드러지게 표시하는 것이 좋다. 또는 Bread-crumb(빵부스러기)도 사용자에게 현재 위치를 알려주는 매우 좋은 방법이다. (ex. 구매 > 식품 > 과일 > 사과 )



참고서적 : Don't Make Me Think [Steve Krug]


 Other Contents 

댓글을 달아 주세요

  1. SONYLOVE 2017.02.03 10:49 신고

    스킨 수정할때 참고해섶적용해야겠네요. ^_^

    • Catchup 2017.02.03 11:03 신고

      감사합니다 :)
      방문해보니 이미 어마어마한 스킬의 블로그를 보유 중이신걸요 ㅎㅎ 제가 많이 배워야할듯합니다

티스토리 툴바