아이폰 웹브라우저 페이지 전환 : adjacent in space

 

아이폰의 사파리 브라우저는 모바일 스크린에서 제대로 웹을 사용할 수 있는 최초의 브라우저라는데 큰 의미가 있습니다. 폰의 작은 화면에서 웹페이지를 보려면 화면의 확대 축소가 꼭 필요하게 되는데, 아이폰의 사파리는 축소한 경우에도 이미지와 폰트를 깔끔하고 읽기좋게 렌더링하여 보여줍니다. 직관적인 핀치 제스쳐나 더블탭을 이용한 자동 폭맞춤은 확대축소 조작의 번거로움을 없애주고요. 폭맞춤 상태에서 스크롤을 하면 옆으로 삐져나가지 않고 상하로만 움직이도록 보정해주는 특허도 작지만 실제 경험적으로는 상당히 편리하고요

 

carousel 방식의 사파리의 페이지 관리

사용 효율보다는 간결하고 학습이 쉽도록 하는 애플의 UI 철학에 공감은 하면서도 폰에서 웹브라우징을 많이하다보니 사파리의 페이지(탭 또는 창) 관리 방식은 불편합니다. 하단 툴바 오른쪽의 페이지버튼을 누르면 화면이 줌아웃되면서 현재 열려있는 페이지들을 선택하는 모드가 됩니다. 이런 UI 디자인 패턴을 carousel 이라고 하는데 여러 요소를 보여주어야 하나 공간이 부족한 경우에 회전목마처럼 돌려가면서 보도록 하는 것이지요. 다른 페이지를 선택하기위해서는 한페이지씩 원하는 페이지가 나올때까지 넘기고 나서 다시 한번 tap해주어야 합니다.

검색에서 새창을 열도록 하면 다시 검색 결과 페이지로 돌아오기 위해서 이렇게 페이지 전환을 하는 경우가 빈번해서 많이 답답합니다.

 

 

오페라 미니의 페이지 전환 방식

http://www.youtube.com/watch?v=OpTCS3g-cBY&feature=player_embedded

 

이번에 아이폰용으로 발표된 오페라 미니는 페이지가 중첩되기는 하지만 한 화면에 보여서 따로 페이지를 넘기지 않아도 됩니다. 물론 썸네일 화면이 작고 제목이나 url을 표시못하는 트레이드오프는 있지만 사실 페이지를 선택하는데는 꼭 이미지가 크지 않아도 구분이 가능하거든요. 

또 오페라 미니는 전체 화면을 축소한 썸네일이 아니라 북마크에서 보이는것처럼 좌상단의 일부를 캡쳐하여 보여줍니다. 화면이 너무 작아져서 구분이 안될 수 있는 문제를 피하는거죠. 또 대부분 페이지가 좌상단에 로고를 넣거나 하여 아이덴티티 영역으로 사용하고 있기때문에 구분하는데 도움이 될것 같습니다.

새로운 페이지를 여는것도 사파리가 페이지버튼을 누른 후에 반대편에 새로운 페이지 버튼이 생기는것에 비해 바로 접근이 쉬운 위치에 생깁니다.

 

iPad의 페이지 관리

 

http://www.apple.com/ipad/features/safari.html

 

이번에 출시되는 ipad에서는 사파리의 페이지 관리가 그리드 형태로 바뀌어서 한번에 선택할 수 있게 되었습니다.

다만 새 페이지 열기가 맨 마지막에 표시되어 페이지 열린 수에 따라 항상 변하게 되는데 ipad에서는 툴바가 상단에 있어서 새페이지를 열기 위해서는 상단에 있는 페이지 버튼을 누르고 손을 많이 움직여줘야 하더라고요. 손목만 까딱하면 되는 마우스와는 달리 팔을 움직여야 하는 터치 태블릿에서는 새로운 스트레스증후군 http://en.wikipedia.org/wiki/Repetitive_strain_injury 이 나타날 수도 있을 것 같아요.

 

추가: 아이패드를 사용해보니까 아이폰에 비해서 편해지긴했지만 이 탭선택 모드로 들어가고 나오는것 자체가 짜증나더라구요. 예상대로 탭선택 버튼이 상단에(멀리) 작은 버튼으로 있어서 선택이 쉽지 않습니다. 탭선택 모드가 된 후에는 아래쪽에서 탭 썸네일을 선택해야해서 움직임이 많고요.

adjacent in space rather than stacked in time

edward tufte http://www.edwardtufte.com/ 는 항상 정보를 공간에 펼쳐놓는 것이 시간에 쌓아놓는 것 보다 좋다고 얘기합니다.

책에서는 정보요소간의 관계를 비교하고 컨텍스트를 이해하는데 있어 하나씩 하나씩 보기보다는 한꺼번에 보여주는것이 좋다는 의미로 쓰였지만 정보디자인 차원 말고도 불필요한 인터랙션을 줄여준다는 점에서 고려해볼 필요가 있습니다.

반복된 조작이 필요한 곳에서 이 원칙만 지켜지면 사용을 좀 더 편하게 할 수 있습니다. 그런데 의외로 꼭 필요하지 않은 경우에도 그냥 트렌드처럼 잘못된 디자인 패턴을 사용하는 경우가 많은 것 같습니다.

꼭 필요한 경우가 아닌데도 정보를 stacked in time 방식으로 잘못 사용된 경우가 또 어떤게 있을까요?

[참고##정보디자인##]