태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'touch UI'에 해당되는 글 2건

  1. 2012.04.04 [UI 디테일] 아이폰,아이패드의 네이버 지도, 다음 지도는 왜 구글지도 보다 느리고 답답해 보일까? (3) by 無異
  2. 2010.05.24 Touch Gesture Reference Guide (터치 제스쳐 가이드) by 전성진
2012.04.04 18:38

[UI 디테일] 아이폰,아이패드의 네이버 지도, 다음 지도는 왜 구글지도 보다 느리고 답답해 보일까?

아이폰 아이패드에서 가장 유용하게 사용하고 있는 앱 중 하나가 지도입니다.
구글맵은 우리나라에서 길찾기도 안되고 지도 업데이트가 느려 POI도 잘 표시안되어 유용성이 떨어져 잘 쓰지 않습니다.
네이버지도와 다음지도는 서로 장단점이 있어서 어느 하나를 고르기가 어렵습니다. 다음 지도는 예전에 지도 자체의 컬러 스킴이 너무 안 예뻐서 쳐다도 보지 않다가 업데이트 후에 굉장히 미려해졌고 상세 지형,건물 정보도 네이버에 비해 잘 담고 있어서 자주 쓰게됩니다. (다만 개인적으로 힘줄 튀어 나온 것 같은 보라색의 고속도로 표시는 익숙해질만해도 여전히 부담스럽고 안타깝습니다. 노란색 도로에서 갑자기 툭 튀어나온 보라색 고속도로 표시는 정보 디자인 측면에서 최선의 선택을 했다기 보다는 단지 경쟁사와 다르기 위해 차선의 선택을 한 게 아닌가 생각되기까지 합니다.)

터치스크린 지도 드래그 시의 맵 타일 로딩 방식 차이

암튼 아이패드의 지도앱에서 위치를 이동하기 위해 드래그하면 네이버지도나 다음 지도는 터치를 떼야지만 맵타일을 업데이트합니다. 지도를 움직이는 동안 맵이 로딩되지 않은 영역은 텅빈 배경이 따라 움직이게 됩니다. 성능이 안좋은 싸구려 네비게이션에서 지도를 드래그할 때 이렇게 반응해서 답답했는데요. 좋은 아이패드에서도 같은 경험을 하려고 하니 갑갑합니다. 설마하고 구글지도를 살펴보니 제대로 드래그하는 동안에도 맵타일을 로딩하여 자연스럽게 지도를 이동할 수 있었습니다. 천천히 움직일때는 아마 이동 방향을 예측해서 미리 지도이미지를 캐슁하고 있지 않나 싶고요.



기술적인 문제는 아닌것 같고. 설마 맵 서버의 트래픽을 줄이려는것도 아닐테고요. 혹시나 통신비를 아껴주려는 사용자에 대한 배려라면 그렇게 도움이 될 것 같지도 않습니다. 
어떤 사연이 있는지 모르겠지만 다음 업데이트에는 네이버지도,다음지도도 사용자 경험을 위해서 드래그시에도 지도가 보이게 해주면 좋겠습니다.


추가: 이동 뿐 아니라 핀치를 통한 줌 아웃 시에도 화면 밖에 있던 영역의 지도가 표시되지 않습니다. 줌아웃을 하는 동안 불필요한 맵로딩이 발생할 수 있기는 하지만 타이머를 적절히 사용하면 됩니다. 바쁘게 새로운 기능 요구 사항을 반영하는 것도 중요하지만 이제는 찬찬히 인터랙션의 디테일에도 신경을 써도 좋을 단계까지 온 것 같습니다. 



[참고##UI 디테일##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 3
Ad Test...
2010.05.24 01:20

Touch Gesture Reference Guide (터치 제스쳐 가이드)

by Luke Wroblewski

누군가 했더니 Site Seeing : A Visual Approach to Web Usability 의 저자였군요.

터치 인터페이스를 가진 화면기획서를 만들때 항상 문서 앞 부분에 정리하던 터치 제스쳐 관련한 정리입니다. 제스쳐 UI의 역사가 짧아 제스처의 이름이 조직마다 달라 곤란한 적이 있었는데 Core Gesture라는 표현으로 핵심적인 제스쳐를 분류했네요. 또 감동적인 것은 플랫폼에 따라 어떤 제스쳐의 이름이 있고 설명이 있는지, 그리고 이것이 어떤 core gesture와 매칭되는지를 한눈에 보기좋게 정리했습니다. 일단 정리가 잘 됐으니 잘 읽어보구요 실무를 하면서 고쳐야 할 것이 있다면 이 분에게 의견을 드려도 좋겠습니다. ^^


The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures


PlatformPlatform GesturePlatform DescriptionCore Gesture
iPhone OS Tap A user gesture used to press or select a control or link (analogous to a singleclick in a desktop application). To tap, users make a quick up-and-down motion with a finger, lightly striking the screen. Tap
iPhone OS Double Tap A user gesture used to zoom in or out of content or an image. A double tap consists of two quick taps. Double Tap
iPhone OS Flick A user gesture used to scroll or pan quickly. To flick, users place a finger on the screen and quickly swipe it in the desired direction. Fling
iPhone OS Drag A user gesture used to scroll,move the viewport, or pan. To drag, users place a finger on the screen and move it in the desired direction without lifting it from the screen. Drag
iPhone OS Pinch Open A two-finger user gesture used to zoom in. To pinch open, users place the thumb and a finger (or two fingers) close together on the screen and move them apart without lifting them from the screen. Spread
iPhone OS Pinch Close A two-finger user gesture used to zoom out. To pinch close, users place the thumb and a finger (or two fingers) a little distance apart on the screen and move them toward each other without lifting them from the screen. Pinch
iPhone OS Touch and hold A user gesture used to display an information bubble, magnify content under the finger, or to perform specificactions in built-in applications and features. To touch and hold, users touch the screen, leaving their finger motionless until the information is displayed or the action occurs. Press
iPhone OS Two-finger scroll A user gesture used to scroll content in an element with overflow capability or a scrollable inline frame element. A two-finger scroll is a drag performed with two fingers moving together in the same direction. Drag
(Two-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Windows Phone 7 Tap Actions on an item in a two step process. Stop a list from scrolling. Single touch on the screen. Tap
Windows Phone 7 Double Tap Toggle between "in" and "out" zoom states of a control or application. Double Tap
Windows Phone 7 Touch and hold Shows options (context menu) for an item Press
Windows Phone 7 Pan Moves content via direct manipulation (content sticks to finger and follows). A pan can reorder or move a specific item. Drag
Windows Phone 7 Flick Moves content Fling
Windows Phone 7 Pinch Continous zoom Pinch
Windows Phone 7 Pinch Continous zoom Spread
PlatformPlatform GesturePlatform DescriptionCore Gesture
Palm webOS Tap invokes an action or opens an item. Position the insertion cursor Tap
Palm webOS Double Tap to perform actions like zoom in/out Double Tap
Palm webOS Flick to scroll through lists, or quit an application Fling
Palm webOS Swipe to the right in lists, to delete items Drag
Palm webOS Touch & Drag to scroll Drag
Palm webOS Touch & Hold to enter "reorder" mode. Then drag items to move them. Press
Palm webOS Spread using 2 fingers, to zoom in/out on a web page or a picture Spread
Palm webOS Pinch using 2 fingers, to zoom in/out on a web page or a picture Pinch
Palm webOS Rotate Touch with 2 fingers and rotate - to rotate content Rotate
PlatformPlatform GesturePlatform DescriptionCore Gesture
Android Tap None provided Tap
Android Double Tap None provided Double Tap
Android Flick None provided Fling
Android Drag None provided Drag
Android (only 2.1) Pinch None provided Spread
Android (only 2.1) Pinch None provided Pinch
Android Touch and hold None provided Press
PlatformPlatform GesturePlatform DescriptionCore Gesture
OSX (trackpad) Scroll Scroll up and down a page Drag
(Two-finger)
OSX (trackpad) Swipe Flip through your photo libraries Drag
(Three-finger)
OSX (trackpad) Swipe Show your desktop, view all open windows, or switch applications Drag
(Four-finger)
OSX (trackpad) Pinch Zoom in and out Pinch
OSX (trackpad) Expand Zoom in and out Spread
OSX (trackpad) Two-finger rotating Rotate photos, pages, and more. Rotate
OSX (trackpad) Tap Press or select a control or link Tap
OSX (trackpad) Click & Drag Move content. Drag
OSX (trackpad) Secondary Click A Right-click Tap
(Two-finger)
OSX (trackpad) Secondary Click B Right-click Tap
(on specific area on trackpad)
PlatformPlatform GesturePlatform DescriptionCore Gesture
OSX (Magic Mouse) 360° scroll Brush one finger along the surface to scroll in any direction and to pan a full 360 degrees. Fling
OSX (Magic Mouse) Screen zoom Hold down the Control key on your keyboard and scroll with one finger on surface to enlarge items on your screen. Drag
OSX (Magic Mouse) Two-finger swipe Using two fingers, swipe left and right along the surface to advance through pages in Safari or browse photos in iPhoto. Drag
(Two-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Microsoft Windows 7 Drag Touch and slide your finger on screen. Like dragging with a mouse, this moves icons around the desktop, moves windows,selects text (by dragging left or right), etc. Drag
Microsoft Windows 7 Scroll Drag up or down on the content (not the scrollbar!) of scrollable window to scroll. Scrolling is available with one or more fingers. Drag
Microsoft Windows 7 Zoom Pinch two fingers together or apart to zoom in or out on a document. Spread
Microsoft Windows 7 Zoom Pinch two fingers together or apart to zoom in or out on a document. Pinch
Microsoft Windows 7 Two-Finger Tap Tapping with two fingers simultaneously zooms in about the center of the gesture or restores to the default zoom – great for zooming in on hyperlinks. Tap
(Two-finger)
Microsoft Windows 7 Rotate Touch two spots on a digital photo and twist to rotate it just like a real photo. Rotate
Microsoft Windows 7 Flicks Flick left or right to navigate back and forward in a browser and other apps. Fling
Microsoft Windows 7 Press-and-hold Hold your finger on screen for a moment and release after the animation to get a right-click. Press
Microsoft Windows 7 Press-and-tap with a second finger To get right-click, just like you would click the right button on a mouse or trackpad. Press and Tap
Microsoft Windows 7 Tap Touch and release to click. This is the most basic touch action. Tap
Microsoft Windows 7 Double Tap To open files and folders. Double Tap

이 외에도 Wacom Bamboo, MS Surface 등의 OS도 정리해 놓았군요.
자세한 것은 사이트에 들어가서 확인하시기 바랍니다.

http://www.lukew.com/ff/entry.asp?1071

2013.02.26 그 사이에 카드 등 여러 가지가 추가되었네요. 꼭 원 사이트에 들어가셔서 확인해 보세요! 
[참고##제스쳐##] 

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...