다음 모바일웹 좌우 페이지 플리킹 fail

다음 모바일 웹 페이지는 메인 화면의 컨텐트를 수평적인 페이지로 나누고 좌우 플리킹을 통해 네비게이션 할 수 있는 UI 를 선보였습니다. 

3배 더 즐거운 모바일웹서핑! m.daum.net 이 또한번 변신합니다.

접근도 좋고 디바이스의 특징을 잘 살려보려는 시도도 좋지만 실제 써보면 오히려 불편합니다. 의도한대로 움직이지 않기도 해서 잘못 다른 링크가 클릭되기도 하고요. 

좌우 페이지 플리킹과 상하 스크롤을 함께 사용하고 있기 때문인데요. 가급적 한쪽 방향으로만 스크롤을 제한하는것이 좋습니다. 인지적으로 헷갈리기도 하고 몸도 조작 방향을 바꾸는 것 보다는 그냥 한방향으로 쭉 스크롤 하는게 더 편하거든요.

Allows people to make the fewest possible gestures to do what they want. For example, people might scroll horizontally through a carousel of existing documents and open the desired one with a tap.

iOS Human Interface Guidelines

Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

The page should lay out so that simple repeated scrolling in the same direction (axis) allows the user to experience all its content. However some content (such as maps and other images) cannot be displayed without secondary scrolling.

Mobile Web Best Practices 1.0

가로로 페이징되는 페이지 안에 또 가로 carousel 형태 뉴스 섹션이 중복되어 포함되어 있는것도 좀 어색한 느낌이 듭니다. 

오히려 이런 정형화된 뉴스 페이지에 가로 플리킹 제스쳐를 사용하는건 괜찮은것 같고요.

참고 뉴스캐스트 리디자인 

제안.

1. 상하 스크롤이 생기지 않도록 페이지를 잘 분할 하고 가로 페이징을 유지한다.

모든 페이지에 검색창이 필요할 것 같지도 않거든요. 꼭 필요하다면 현재 다음 모바일 앱에서처럼 검색 아이콘으로 검색으로 접근하게 할 수 있을 것 같고요. 상하 스크롤이 없어지면 조작이 자연스러워집니다. 

2. 상하로 긴 페이지 구성을 가지고 서브섹션을 좌우 플리킹을 사용한다. 

공통된 영역을 빼면 실제로 그렇게 길지도 않은것 같습니다. 그냥 익숙한 세로 스크롤을 하도록 하고 뉴스같은 서브 섹션에 제스쳐를 지원하는것도 좋을것 같습니다. 

이때는 좌우 swipe 이벤트가 있을때 상하 스크롤 이벤트를 제한하도록 하는게 조작할때 좀 더 자연스럽습니다. 현재처럼 수평으로 똑바로 swipe 하지 않으면 상하스크롤도 되면서 좌우 플리킹이 되면 이상하거든요.