http://whitespace.umeshgopinath.com/2012/07/10-trends-for-mobile-user-experience.html
모바일 UX를 위한 10가지 트렌드
(발번역)
요약하면
1. 모바일/웹은 이제 하나로 고려해서 디자인해야 할 때.
- 위로 스크롤하는 기능에 대한 고려
- 플로팅 헤더 고려
- 반응형 웹 고려
- 레티나 디스플레이에 대한 고려 (고해상도 이미지)
2. 모바일만의 특화된 기능 고려
- 좌측 메뉴 숨기기 기능 고려
- 하이브리드앱에 대한 고려
3. 모든 규칙들을 깰 수 있는 새로운 UX에 대한 고민 필요!
1. 위로 스크롤 기능 고려 (Go Up is back)
페이징 컨셉은 웹에서 사라지고 있다.
스크롤 다운함으로써 컨텐츠를 느리게 로딩하는 건 페이지를 너무 길게 만들고 사용자들은 많은 상위로 스크롤(go up)하게 된다.
iOS에서 사용자들은 어색하지 않게 스테이터스바를 탭해서 상위로 스크롤 할 수가 있다.
로고를 선택함으로써 사용자들은 홈으로 갈 수 있고 탑으로 빠르게 갈 수 있는 몇 가지 방법들이 있다.
구글 + 에서 사용자들이 페이지 헤더에서 어느 곳을 클릭하더라도 빠른 애니메이션으로 페이지 스크롤이 된다.
이는 보기에 괜찮아 보일지 몰라도 직관적이지는 않다. 다양한 시도는 패턴이 되고 있다.
Verge에서는 사용자가 스크롤다운하면 우측 상단의 화살표가 나타나고 클릭 시 최상단으로 이동가능하다.
트위터에서는 홈링크를 선택하면 사용자가 홈페이지에 있는 경우 페이지를 전체를 리로드하지 않는다.
나는 페북에서 유사한 기능을 요청하는 사람들을 많이 보았다.
2. 플로팅 헤더(Floating Header) 고려
위와 같은 이유로 내비 버튼과 함께 있는 Floating헤더는 모바일웹에서 하나의 패턴이 되고 있다.
Floating UI요소를 구현하기 위해선 iScroll이라고 불리는 자바스크립트 프레임웍이 필요했다.
그리고 iOS5 사파리가 포지셔닝을 지원하기 시작했다.
이를 실행하기 쉽게 만들 수 있는 스타일을 고정하고 있다.
하지만 잘 구현되지 않는다면 이는 가장 중요한 영역만 차지하게 될 것이다.
숨은 내비는 이를 위한 한가지 방법이다.
다른 패턴은 헤더의 일부를 숨기나 이를 위한 작은 부분을 띄워준다.
예를 들어 구글 모바일웹 헤더.
주요 내비게이션은 헤더에서 숨겨지지 않는다. 하지만 이는 얇은 파트의 프로팅을 유지하기위해 스크롤아웃하게 해준다.
구글은 또한 웹에서 이를 가능하게 해준다.
3. 스크린 아래에서의 빈도높은 액션 고려
모바일 스크린 사이즈가 커짐에 따라 빈도높은 액션을 위해 엄지손가락을 사용해 스크린의 최상단으로 유도하는건 어려운 액션이 되어버렸다.
iOS에서는 아래에 메뉴바와 툴바를 가지고 있으나 상단에 이전버튼이나 자주 사용되는 버튼들이 놓여있다.
안드로이드는 이전버튼이 아래에 있으나 옵션버튼을 제거하고 이를 상단에 넣을 수 있다.
많은 디자이너들이 이를 알고 아래 자주 이용할만한 액션을 제공할 수 있을 것이라 예상한다.
Path는 버튼을 추가하고 메뉴를 튀어나오게 함으로써 시작할 수 있다.
4. 좌측 영역의 바메뉴를 숨기는 것 고려
페북은 그들의 인터페이스를 responsive로 할 것을 전략으로 삼는다고 소개하였다.
그들의인터페이스는 스크린사이즈에 기반하여 사라지거나 나타나는 컬럼을 가지고 있다.
이는 지금 메인 스크린 영역으로부터 메뉴아이템을 숨길 수 있는 좋은 방법으로써 UI디자인 패턴화 되었다.
5. 데스크탑과 모바일 웹디자인의 융합
데스크탑 웹사이트가 점점 태블릿에 친화적이 되고 있다. 유지보수의 용이함 뿐만아니라 보다 사용자 친화적으로 만들기 위해.
깔끔하고 분산되지 않은 인터페이스, 컨텍스츄얼 액션, 보다 높은 해상도 이미지, 터치에 친화적인 버튼, 그리고 링크등.
사람들은 규칙적으로 태블릿을 사용할 것이다. 여행중에도. MS의 서페이스 태블릿을 보면 모토롤라 태블릿과 유사한 컨셉을 가지고 있기도 하다.
6. 모든 종류의 사이즈를 가진 기기에 맞춘 웹 디자인 고려
앞으로 다양한 스크린 사이즈의 기기들이 나타날 것이고 이는 반응형 디자인을 만들게 될 것이다.
로컬 기반의 서비스들은 휴대폰에만 국한되지 않을 것이다.
반응형, 혹은 그렇지 않더라도 이는 보다 많은 사람들이 모든 기기에서 작동할 수 있는 사이트를 만들게 될 것이다.
7.웹과 네이티브는 보다 명백히 통합될 것.
HTML5, 그리고 네이티브는 하이브리드 앱을 이용하여 공존하게 될 것이다.
8.iOS UI 요소들은 웹을 받아들이게 될 것이다.
이미 널리 모바일 웹앱은 사용되고 있다.
보다 많은 iOS UI요소들은 다른 기기에서 역시 사용될 것이다.
요 UI를 보면 어떻게 태블릿에서 유용하게 보여질 수 있을지 알 수 있다.
9. 어디서나 레티나 디스플레이
모든 기기들이 레티나 디스플레이를 지원하게 될것이고 인터넷에서 만들어진 이미지들은 지속적으로 변화해갈 것이다.
인터넷은 무거운 웹사이트를 갖게 될 것이고 웹디자인은 CSS3의 사용과 적은 이미지와 아이콘들로 보여지지 않을 것이다. 보다 큰 이미지들은 레티나 디스플레이에서 빛나게 보이게 됨으로써 남게 될 것이다.
10. 새로운 무언가!
이 분야에서는 매일 새로운 점들이 일어나고 있다.
패턴들은 창조되어지고 Follow되어진다.
우리는 패턴들을 항상 따르는 사람들을 보진 않는다.
새로운 것을 발명할 때이다.
어서 규칙들을 깨도록 하자.
