'네비게이션'에 해당되는 글 3건

  1. 2009.01.13 여러분은 어떤 네비게이션을 선호하시나요?
  2. 2008.12.26 깔끔해진 SLR클럽 리뉴얼 (4)
  3. 2008.12.05 UI...이건 좀 아니잖아요?


버번홀릭 Web2009. 1. 13. 16:44

전 세계에서 서비스되는 웹 사이트의 수는 얼마나 될까요?
정확한 정량적 수치를 알 수 없지만 대략 수십억개 이상이며 그 중에서도 대한민국에서 서비스되는 사이트만
수억개가 된다고 합니다. 여러분은 이처럼 수 많은 웹 사이트 중 하나 또는 그 이상을 서비스 받고있는 것입니다.

그렇다면 가상의 공간상에서 서비스되는 웹 서비스를 여러분은 어떤 방법으로 사용하고 계신가요?
어떻게 원하는 컨텐츠를 찾고, 어떻게 이동을 하시나요?

우리가 사용하는 웹 서비스에서 이동, 탐색을 위한 도구를 제공하고 있기 때문에 가능한 것입니다.
검색, 입력, 출력, 이동, 삭제, 등록 따위의 도구 입니다. 그 중에서도 가장 원초적이며 어느 웹 사이트를 막론하고
반드시 있어야하는 이동 기능은 수 많은 웹 사이트를 쉽게 이용할 수 있도록 해주는 고마운 도구 입니다.
우리가 흔히 말하는 '네비게이션'이 바로 그 이동의 도구입니다.

항법 [航法, navigation]
항공기 또는 선박을 어느 한 지점으로부터 일정의 다른 지점으로 소정의 시간에 도달할 수 있게 유도하는 방법.

본래 네비게이션의 의미는 항법이라는 단어로 비행기나 선박 등 광할한 지역을 탐색해 원하는 목적지로 쉽게 찾아갈 수 있도록
도와주는 기계장치를 뜻 하는 말입니다. 항공기와 선박이 이동하는 현실의 공간보다 무한한 공간을 갖고있는 가상 공간에서도
네비게이션이 사용되며 의미도 다르지 않습니다. 그렇기 때문에 웹 서핑을 위해서는 반드시 필요한 도구입니다.

그렇다면 여러분은 얼마나 많은 네비게이션을 보셨고 또 어떤 네비게이션을 선호하시나요?

웹 사이트를 제공하는 사업자가 각기 다르고 서비스를 만드는 사람이 모두 다른 것처럼 네비게이션도 서비스의 특징에 따라
모두 다르게 제공되고 있지만 큰 줄기는 몇가지로 나눌 수 있습니다.
아래에 대표적인 네비게이션 형태를 보여드릴테니 선호하는 네비게이션을 골라보세요.


사용자 삽입 이미지
사용자 삽입 이미지

1. 단일 버튼 형태의 퀵링크 네비게이션

웹 사이트가 만들어지기 시작하면서 제공된 가장 원초적인 네비게이션입니다.
원초적이지만 가장 직관적이고 심플하고 공간도 적게 사용하고 있다는 장정이 있지만 노출되어있는
버튼 외에는 어떤 서비스가 제공되고 있는지 모른다는 단점도 있습니다.



사용자 삽입 이미지

2. 2Depth 가로 배치형 네비게이션
웹 서비스가 발전되면서 네비게이션의 기능도 발전해 만들어진 네비게이션으로
특히 대한민국에서 서비스되는 웹 사이트들은 대부분 사용했을 정도로 보편화된 네비게이션의 형태입니다.
퀵링크 형태보다는 어떤 서비스를 제공하고 있는지 조금 더 자세히 알 수 있다는 장점이 있지만
2Depth를 선택하기 위해서는 마우스를 이동해 원하는 곳을 클릭해야한다는 단점이 있습니다.
특히 마우스 컨트롤이 익숙하지 않은 사용자에겐 쉽지 않은 일이죠.



사용자 삽입 이미지

3. 2Depth 세로 배치형 네비게이션
위의 가로형 네비게이션을 보완하는 형태로 만들어진 네비게이션입니다.
마우스를 상하좌우 이동이 아닌 상하이동만으로도 선택할 수 있도록 설계된 네비게이션이죠.



사용자 삽입 이미지

4. 전체 메뉴가 펼쳐지는 가로 풀 다운 네비게이션
하나의 메뉴에서 한가지의 2Depth가 펼쳐지는 점과 가로형의 경우 선택하기가 쉽지 않은 점을
개선해 설계된 네비게이션입니다. 어느 지점을 클릭 또는 롤오버하더라도 모든 메뉴가 펼쳐져
전체 서비스를 탐색하고 쉽게 이동할 수있는 장점을 갖고있지만 공간을 많이 차지한다는 단점이 있습니다.
최근들어 많은 웹 사이트들이 이 네비게이션을 사용하고 있는 추세입니다.



사용자 삽입 이미지

5. 외국에선 많이 사용되는 탭 네비게이션
한국에서는 많이 사용하지 않는 네비게이션이지만 외국에선 네비게이션을 간소화한 탭 형태의
네비게이션을 많이 사용하고 있습니다. 외국에선 탭 인터페이스가 많이 사용되고 있어 선호하는 경향이
있는 것 같습니다. (외국 사이트는 플래시를 지양해 화려한 네비게이션이 별로 없죠.)



사용자 삽입 이미지

6. 종합 쇼핑몰에서 많이 사용되는 세로 풀 다운 네비게이션
위의 가로 풀 다운 네비게이션과 유사하지만 종합 쇼핑몰인 만큰 수많은 2Depth를 노출해야 하는 점과
상품의 노출이 우선이 되어야하는 하는 점이 맞물려 변형되어 설계된 네비게이션입니다.
지마켓이나 옥션은 가로 풀다운 네비게이션을 사용하고 있네요.



사용자 삽입 이미지
사용자 삽입 이미지

7. 2번과 4번이 동시에 지원되는 복합 네비게이션
2번의 장점과 4번의 장점을 지원하기 위해 설계된 네비게이션입니다.
유저의 취향에 맞게 원하는 네비게이션을 지원하고 있습니다.



사용자 삽입 이미지

8. 그 밖에 네비게이션
현재 대한민국에서 서비스되는 WOW의 네비게이션 입니다.
롤 오버를 하게되면 2Depth가 펼쳐지면서 해당 서비스를 간략하게 보여주고 있는 형태입니다.
어떤 서비스인지 조금 더 구체적으로 보여줄 수 있는 장점이 있지만
공간을 많이 차지한다는 단점도 갖고 있습니다.


이 밖에도 수 많은 종류의 네비게이션이 제공되지만 위의 7가지 (8번 제외)의 네비게이션이
거의 대부분일 것 입니다. 여러분은 위의 7가지 중 어떤 네비게이션의 이용이 편한가요?
어떤 네비게이션을 선호하시나요?

Posted by 버번홀릭

댓글을 달아 주세요


사용자 삽입 이미지


사진을 찍는 분들 또는 사진에 관심이 많은 분들에게는 없어서는 안될 사진 커뮤니티 'slrclub.com'이 부분 리뉴얼을 했습니다.
우선 메인 페이지가 사진 커뮤니티 서비스 답게 '사진'을 크게 부각시켜 리뉴얼한 모습이 눈에 띕니다.

제가 처음 가입했던 2003년도와는 너무나도 다른 깔끔한 모습으로 바뀌었네요.
물론 그 당시에도 비주얼보다는 정보 컨텐츠 위주의 흰 여백에 텍스트 기반 서비스라 나름 깔끔한 모습을 하고 있었죠.

하지만 리뉴얼을 하면서 비주얼도 나름 신경을 쓴 것 같습니다.
우선 플래시로 제작된 그날의 사진 썸네일 컨텐츠는 예전의 조그마한 썸네일 대신 조금 더 커진 썸네일로
눈에 확 들어오게 함으로서 사진 커뮤니티임을 강조하고 있고
수많은 질 좋은 정보 컨텐츠가 쌓여서 그런지 3단 구조의 레이아웃을 사용하고 있습니다.
커다란 플래시를 사용해서 그런지 페이지 로딩 시간이 조금 길어지기는 했습니다.

네비게이션도 모양과 기능이 한 층 업그레이드 된 모습입니다.
예전에는 서브 메뉴가 가로로 놓여지면서 5개 이상의 메뉴는 선택하기가 약간? 어려웠으나
세로로 놓여지면서 선택하기가 쉬워졌네요.

검색 기능도 강화 될 예정인 것 같습니다.
다음 검색과 연동이 될 예정인지 다음 로고와 게시판, 웹, 카페, 블로그라는 검색 조건 선택 창도 붙어있어
검색이 강화되었다는 점을 알 수 있습니다.
아직은 개발중인지 검색을 하면 '검색 페이지 개발중'이라는 메시지 창이 뜨고 있습니다.

서브 페이지는 큰 변동사항은 없네요.
아직은 불편한 점이 있기는 하지만 (포럼에서 브랜드를 선택한 후 브랜드 포럼 페이지로 이동하게 되면
다른 브랜드는 다시 페이지를 나와 브랜드 선택을 해야 하는 점) 새해를 맞아 산뜻하게 변화된 메인 페이지가
새롭게 느껴집니다. 오래된 대문이 새롭게 바뀐 느낌이랄까요?

사용자 삽입 이미지



이 곳도 가입한지 6년이 되어가는군요.
사실 광고와 인화를 빼면 거의 비영리에 가까운 서비스지만 그래도 때마다 컨텐츠 추가와
약간의 비주얼 변화로 지루하지 않게 찾아오는 손님을 맞아주고 있는 모습이 앞으로 더 기대되게 하네요.
실시간 장터 기능에서 나름 많은 아이디어도 얻었던 곳인데.... ^^

그날의 사진이 작품성보다는 옷을 조금 덜 입은 여자 사진으로 도배되는 것만 고쳐지면
100점 만점에 100점 일텐데요. ^^;;

사용자 삽입 이미지



Posted by 버번홀릭

댓글을 달아 주세요

  1. 제일 맘에 드는 건 SLR Times예요...개인적으로는 ...(메인에선 보이지 않고 포럼 클릭해야 보인다는...)
    스르륵의 이모저모를 알수 있어서 좋더군요...^^;;;

    메인의 1면 썸네일에 촬영자 정보가 노출되는 건...그닥...^^;;

    2008.12.26 19:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 아~! 그런기능이 있었군요. ㅎㅎ 대충 훑어봐서
      레이어로 노출되던 촬영정보는 없어진 것 같네요.
      나오지 않는 것 보니...^^

      2008.12.26 21:49 신고 [ ADDR : EDIT/ DEL ]
  2. 언젠가 부터 1면이...
    누드, 장비 사진으로 채워지는게..
    정말 이거만 아니면 최고인데 말이죠

    2008.12.26 21:02 신고 [ ADDR : EDIT/ DEL : REPLY ]

버번홀릭 Web2008. 12. 5. 13:39
사용자 삽입 이미지

↓↓↓↓↓

사용자 삽입 이미지



위 이미지는 한 게임 웹진의 메인 페이지 중 일부 화면을 캡쳐해온 이미지 입니다.
게임 웹진의 특성상 게임 서비스의 광고가 주를 이루고 있고, 내용 또한 90% 이상 게임과 관련된 내용입니다.
하지만.....

위의 홈페이지를 접속하면 첫 페이지의 한 가운데에 저렇게 커다란 플로팅 광고가 게재됩니다.
물론 사용자의 의도와는 무관하게 노출됩니다. (어느 광고가 그렇듯이...)

워낙에 많이 봐온 광고라 스스럼없이 'Close' 버튼을 클릭하지만
이 넘에 광고는 없어지지 않고 아래의 그림과 같이 사이즈만 작아져 비슷한 위치에 머물게 됩니다.

여기까지는 그냥 애교로 봐줄만한 단계이며 화가 나거나 이 사이트를 벗어나고 싶다는 생각이 들지는 않습니다.
하지만 사용자의 마우스 이동선을 방해하기 시작하는 순간부터 사용자의 생각은 틀려지게 됩니다.

무의식적으로 작아진 광고에 마우스가 지나가게 되면 순간적으로 원래 크기의 광고로 변신하게 됩니다.
롤오버 플로팅의 특성으로 원 위치를 찾은 광고물은 서비스가 제공하는 콘텐츠의 일부를 가리게 되며
다시 Close 버튼을 눌러야 하는 귀찮음을 유발시키게 됩니다.
작아졌다해도 광고는 콘텐츠위에 남아 아직도 가리고 있게 됩니다.

사용자의 무의식적인 행동으로 발생하는 결과가 즐거우면 감성의 자극이 되지만
결과가 원치않는 귀찮음이 된다면 이탈의 이유 중 하나의 요소로 작용하게 됩니다
.

아래의 사례는 위의 웹진 사례 처럼 심각한(?) UI 문제는 아니지만
불편한 UI를 제공하고 있는 유명 웹 서비스 사례 입니다.

사용자 삽입 이미지

위의 이미지는 다른 웹진의 메인 페이지 중앙의 모습 입니다.
앞서 말씀드린 웹 사이트와 동일하게 플로팅 광고를 사용하고 있습니다.

우선 2가지 문제점이 보이는데
하나는 광고가 하나의 콘텐츠를 전체를 가리고 있는 모습이고
또 하나는 위, 아래 광고가 동일한 광고라는 것 입니다.

마찬가지로 광고를 닫아야지만 뒤에 숨겨져 있는 콘텐츠를 구경할 수 있지만
뒤에 숨어 있는 콘텐츠에 대한 단서가 전혀 존재하지 않기에 광고를 닫지 않는 이상
뒤에는 무엇이 있는지도 인지할 수 없습니다.



사용자 삽입 이미지

다음은 유명 중고 자동차 매매 서비스의 GNB 입니다.

가로로 길게 뻗어있는 서브 메뉴를 볼 수 있는데 여기서의 문제점은
마우스 포인트가 위 또는 아래로 조금만 벗어나도 서브 메뉴가 닫힌다는데 문제가 있습니다.


마우스 컨트롤에 능숙한 사람은 이동이 쉽지만
그렇지 않은 사용자에겐 여간 쉽지 않은 이동 구조를 띄고 있습니다.



위의 3가지 사례들은 너무나도 많이 봐왔으며 문제 인지 또한 하고 있지만 고쳐지지 않는 문제점입니다.
(특히 광고는 수익성이나 광고주의 압박으로 잘 고쳐지지 않는 듯 합니다.)

그나마 위의 문제들을 인식한 서비스 제공자들이 이를 개선하고자 UI에 대한 연구가 되고있으며
많은 부분 개선이 되어 가고 있습니다.
(예로 전체가 펼쳐지는 GNB, 반투명 레이어 광고, 광고 옵션 개선 등)

크게는 인간 공학으로서의 인지 능력과 사용성 연구부터 작게는 하이퍼텍스트의 비주얼까지 연구까지
다방면으로 인간에서 조금 더 유익한 환경을 만들고자 많은 연구원 또는 종사자들이 연구개발을 하고 있는
상황이고 웹의 무한함은 당분간 끝이 없을 것이라는 판단하에 연구는 계속 될 것 입니다.


조금 더 쉽고 빠르게 보고싶은 정보를 볼 수 있는 웹 환경이 올 날을 기다리며...^^;



위 사례에 출현한 서비스 담당자 님들아~
저것 좀 고쳐주세요~너무 불편해요~

Posted by 버번홀릭

댓글을 달아 주세요