반응형 웹디자인 네비게이션 패턴

1. Top nav or “do nothing” approach

상단에 네비게이션을 위치시키는 쉬운 방법중의 하나로서, 이러한 이유로 아마도 가장 많이 사용이 되는 형식이 아닐까 한다.

• 장점

1) Easy to implement – 큰 화면 모습 거의 동일하게 쉽게 구현할 수 있다.
2) No Javascript dependencies
3) No back-breaking CSS maneuvers required – 힘든 CSS 작업이 필요 없다.
4) No tripping over your source order – 화면 flow가 자연스러우며, 메뉴를 찾느라 고생하지 않는다.

• 단점

1) Height issues – 모바일 웹에서 사용자에게 첫번째는 컨텐츠, 두번째가 네비게이션이다. 따라서 가능한 빨리 주요 컨텐츠 정보를 얻기를 원하는데 상단에 위치한 네비게이션으로 인해 화면의 길이가 길어져, 스크롤을 해서 정보를 찾아야 하는 수고가 든다. 이러한 이유로 점차 페이지 상에서 핵심 정보에 집중할 수 있도록 네비게이션이 사라지는 현상이 있다.

2) Not scalable – 새로운 메뉴를 추가하거나, 변화를 줄 수 있는 확장성의 여지가 적다.
3) Fat Fingers – 좁은 영역에 많은 링크들로 인해 잘못터치하여 원치 않는 결과를 얻을 수 있다.
4) Cross-device issues – 디바이스들은 저다마 폰트를 렌더링하는 다른 방법을 가지고 있는데 이를 최적화하는데 문제가 발생할 수 있다.

• 사례

* Yiibu (http://yiibu.com/)
* Trend Walton (http://trentwalton.com/)
* Tim kadlec (http://timkadlec.com/)
* Ethan Marcotte (http://ethanmarcotte.com/)
* Brad Frost Web (http://bradfrostweb.com/)

2. the footer anchor

푸터처럼 항상 사이트의 아랫단에 네비게이션을 위치시키면서, 상단 영역에 푸터 네비게이션을 가리키는 간단한 링크(simple anchor link)를 위치시키는 방식이다.
이 방식은 핵심 컨텐츠를 위한 많은 공간을 확보할 수 있는 동시에, 네비게이션으로의 빠른 접근을 제공할 수 있다.

• 장점

1) Easy to implement – 네비게이션으로의 간단한 링크는 상단에, 실제 네비게이션은 하단에 위치.
2) No Javascript dependency – less testing, better support.
3) Little CSS work required to scale up – 큰 화면에서는 푸터 네비게이션을 상단으로만 올리면 된다.
4) Single button in header – 푸터네비게이션으로 연결시키는 상단의 링크 버튼은 매우 작은 영역을 차지하며, 이는 핵심 컨텐츠를 위해 사용할 공간이 많은 것을 의미한다.

• 단점

1) Anchor jump can be awkward/disorienting – 푸터 네비로의 퀵 점핑은 다소 사용자에게 혼란을 줄수도 있다.
2) Not elegant – 다소 기묘한 인터렉션이 될 수 있다.

• 사례

* Grey Goose (http://greygoose.com/LDA?returnURL=/)
* Contents Magazine (http://contentsmagazine.com/)

3. the select menu

네비게이션을 작은 화면에서 select menu 스타일로 변형하여 위치시키는 방식이다.

• 장점

1) Frees up plenty of space – 수평 또는 수직의 리스트보다 select menu 스타일은 확실히 적은 영역을 차지한다.
2) Keeps interactions in the header – 푸터 네비에 비해 유저에게 익숙한 상단에서 네비게이션의 기능을 이용할 수 있다.
3) Easily Recognizable – 분명하게 “navigation” 또는 “menu”라고 select menu에 라벨링을 해줌으로써 사용자의 인식을 돕는다.
4) Pulls up native controls – 디바이스마다 고유의 처리방식으로 select menu를 다룰 수 있다. 터치 디바이스는 보다 친숙한 터치 방식으로, 다른 디바이스는 나름의 다른 방식으로 효율을 높일 수 있다.

• 단점

1) Lack of styling control – 각각의 브라우저에서 고유의 방식으로 스타일링이 되기에, 브라우저마다 설계를 하지 않아도 된다. 하지만 이로인해 완벽한 통일성을 기대하기는 어렵다. 또한 select menu는 손가락으로 터치하는 환경에서는 다소 불편함이 발생할 수 있다.
2) Potentially confusing – 보통 사용자는 select menu를 어떤 폼을 작성할 때에 선택하는 요소로 생각하지, 메뉴 네비게이션으로 생각하지 않는다. 이로 인해 사용자에게 혼란성을 줄 수 있다.
3) Handling subnav items – select menu안에 내장된 리스트는 다소 기이하다.
4) Javascript dependency

• 사례

* Viljami Salminen (http://viljamis.com/)
* Retreats 4 Geeks (http://retreats4geeks.com/)
* Five Simple Steps (http://www.fivesimplesteps.com/)
* Performance Marketing Awards (http://www.performancemarketingawards.co.uk/)

4. the toggle

the toggle 방식은 footer anchor approach 방식과 페이지 하단의 네비게이션으로 점핑하는 방식을 제외하고는 유사하다. 점핑 다운하는 대신에, 상단의 영역에 메뉴를 나타내는 작은 버튼을 두고 클릭하면 슬라이드되어 열리는 방식을 취햇다.
이 방식은 good-looking과 상대적으로 실행/조작하기에 쉬운 장점이 있다.

• 장점

1) keeps the user in place – 동일한 위치에 네비게이션 또는 그 링크가 위치하고 있어, 사용자 혼란을 예방할 수 있다
2) Elegant – 세련된 접근 방식 중의 하나로서, 부드럽게 애니메이션되어 나타나는 스타일이다.
3) Easy to scale up – css를 활용하여 스케일링하기 부담스럽지 않다.

• 사례

* Starbucks (http://www.starbucks.com/)
* Mobile Web Best Practices (http://mobilewebbestpractices.com/)

5. the left nav flyout

페이스북이 모바일에서 이러한 스타일의(left navigation)을 대중화 하였다. 이 nav는 왼쪽에서 슬라이드 되면서 나타나 main content가 오른쪽으로 over되어 이동되도록 하는 방식으로 상단의 메뉴 아이콘으로 접근할 수 있다.

• 장점

1) Lots of space – 만약에 메뉴 list가 많다면, 효율적으로 사용할 수 있는 방식이다.
2) Good looking

• 사례

* Barack Obama (http://www.barackobama.com/splash/sms?)

6. the footer-only

작은 화면에서는 하단으로 네비게이션 이동/위치
이 패턴은 header 영역에 하단의 네비게이션으로 링크되는 아이콘이 없는것만 제외하고는, footer anchor approach와 유사하다. 이 패턴은 컨텐츠를 첫째로, 네비게이션을 두번째로 고려하는 모델이다. 하지만 사용자가 네비게이션을 사용하려면, 하단 영역으로 스크롤을 해야 하는 단점이 있다.

• 장점

1) Frees up header space – 상단의 네비게이션 영역이 없기 때문에 모바일 환경에서 사용자는 쉽고, 직접적으로 컨텐츠의 내용을 확인할 수 있다.

• 단점

1) Difficult to Discover & Access – 모바일 사용자는 사이트를 둘러보기 위해 네비게이션을 찾으려 할 때 불편함이 있다.

• 사례

* Pears (http://pea.rs/)
* Fray (http://fray.com/issue3/)

7. the “hide n’cry”

작은 사이즈의 화면에서는 컨텐츠, 네비게이션을 화면에 보여주지 않으면서 공간을 확보하여, 작은 화면에 최적화 시킨다.
이 패턴은 “모바일과 같은 작은 디바이스에서 사이트를 방문하는 사용자에게 불편함/불리함을 제공하지 마라”라는 규칙을 따른다. 모바일 사용자는 어떤 확실한 정보를 원하지도, 필요로 하지 않는다라는 개념을 바탕으로 모바일 환경에 맞는 최적의 정보를 제공하는데 초점을 두고 있다.

• 장점

1) Clears up plenty of space – 작은 스크린을 위해 nav를 삭제함으로써 많은 공간을 확보할 수 있다.

• 단점

1) Removes content/functionality for mobile users – responsive design은 컨텐츠의 불균형과 경험에서 비롯되는 불편함들을 제거하는 것인데, 컨텐츠와 네비게이션을 삭제하는것은 좋은 방법이 아니다.
2) Harder to maintain – 큰화면과 작은 화면으로 분리된 네비게이션은 사이트 유지보수에 있어서 어려움을 초래할 수 있다.
3) Adds extra page weight – 반응형 웹디자인은 화면 사이즈가 다르더라도 동일한 데이터를 사용하기에, 화면에 보여지지 않는다고 해서 데이터를 다운로드하지 않는 것은 아니다. 비용 측면에서 다소 비효율적일 수 있다.

• 사례

* Authentic Jobs (http://www.authenticjobs.com/)
* rourkery.com (http://rourkery.com/)