UX      onHTML5 × Touch UI                     TAKAOKA Daisuke (@dsuket)           2012/07/27 ありえるえりあミニ勉強会#3 ∼Sencha Touch...
About me高岡大介: TAKAOKA Daisuke     @dsuket     dsuketお仕事‣ Free agent engineer                        Inkpod Web‣ カラビナシステムズ ...
Touch UITouch UI の特徴               3
Touch UI の特徴                        Feature                        ✤   Touch Finger                        ✤   Multi-touch...
Touch UI の特徴                         Feature                         ✤   Touch Finger                         ✤   Multi-to...
Touch Position タッチ位置はズレる! 1. 静電容量方式の制限  ✤   ある程度のエリアが必要 2. 指の感覚によるもの  ✤   斜めにタッチ iOSでは補正されている  ✤   上方向へ  ✤   キーボード予測      ...
Touch Feedback★   押せる場所を分かりやすく                                         OK    ✤   視覚的フィードバック    ✤   hoverは使えない        (Xper...
HTML5 × Touch   HTML5のTouch仕様                   7
Touch Events Specification✤   W3Cで標準化が進められている(実はHTML5ではない)    ✤   W3C Candidate Recommendation (勧告候補)                     ...
Touch Events Specification✤   W3Cで標準化が進められている(実はHTML5ではない)    ✤   W3C Candidate Recommendation (勧告候補)✤   現在活動停止中・・・    ✤  ...
Touch Events Specification✤   W3Cで標準化が進められている(実はHTML5ではない)    ✤   W3C Candidate Recommendation (勧告候補)✤   現在活動停止中・・・    ✤  ...
Touch Event Types      Event Type                     dispatch timing    touchstart            タッチ開始時に発生    touchend      ...
Touch Event Interface TouchEvent                  Touch changedTouches: TouchList   identifier: long targetTouches: TouchL...
GestureEvent           (iOS only)ピンチや回転のジェスチャーイベントiOS 独自機能 Event Type      dispatch timing    GestureEvent gesturestart   ...
UX     onHTML5 Touch   HTML5でTouchのUXを実現                   12
1.ボタンは大きく            13
1.ボタンは大きく推奨サイズ ✤   44pt (iOS), 48dp (Android) 以上 ✤   参考:     ✤   iOS human interface Guidelines     ✤   Android Design    ...
1.ボタンは大きく推奨サイズ ✤   44pt (iOS), 48dp (Android) 以上 ✤   参考:     ✤   iOS human interface Guidelines     ✤   Android Design    ...
1.ボタンは大きく推奨サイズ ✤   44pt (iOS), 48dp (Android) 以上 ✤   参考:     ✤   iOS human interface Guidelines     ✤   Android DesignSenc...
Inkpod Webの例(ボタン)ツールボックスのボタン                 メニューバーのボタン46px          35px       46px          43px                        ...
2.当たり判定を調整             15
2.当たり判定を調整✤   アイコンが小さい場合    ✤   透明なDIVなどを置いて当たり判定を広げる                                15
2.当たり判定を調整✤   アイコンが小さい場合    ✤   透明なDIVなどを置いて当たり判定を広げる✤   タッチポイントの補正    ✤   画面上方に補正(Androidの場合)                            ...
2.当たり判定を調整✤   アイコンが小さい場合    ✤   透明なDIVなどを置いて当たり判定を広げる✤   タッチポイントの補正    ✤   画面上方に補正(Androidの場合)✤   動作予測    ✤   次の動きを予測して当たり...
Inkpod Webの例(当たり判定)   詳細ボタン   オブジェクトハンドル                        16
Inkpod Webの例(当たり判定)    詳細ボタン           オブジェクトハンドル         当たり判定エリア透明な要素を重ね、見えている範囲よりも当たり判定を広く取っている。                       ...
Inkpod Webの例(当たり判定)    詳細ボタン            オブジェクトハンドル         当たり判定エリア透明な要素を重ね、見えている      デフォルトから広げることが多範囲よりも当たり判定を広く       い...
3.Click Eventを使わない                     17
3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤   フォーカスリング、凹みなど ✤   デフォルトのタップハイライトは無効に                                17
3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤   フォーカスリング、凹みなど ✤   デフォルトのタップハイライトは無効に                                17
3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤   フォーカスリング、凹みなど ✤   デフォルトのタップハイライトは無効に     -webkit-tap-highlight-color: ...
3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤   フォーカスリング、凹みなど ✤   デフォルトのタップハイライトは無効に     -webkit-tap-highlight-color: ...
3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤   フォーカスリング、凹みなど ✤   デフォルトのタップハイライトは無効に     -webkit-tap-highlight-color: ...
Inkpod Webの例(feedback)         オブジェクトをタッチした時通常時         ハンドルをタッチした時                         18
Inkpod Webの例(feedback)         オブジェクトをタッチした時                  フォーカスリング通常時               を表示         ハンドルをタッチした時           ...
Inkpod Webの例(feedback)         オブジェクトをタッチした時                  フォーカスリング通常時               を表示         ハンドルをタッチした時           ...
4.Dragging / Double Tap                          19
4.Dragging / Double Tap✦ ドラッグ開始までの閾値を入れる ✤   タップとドラッグの切り分け     ✤   6pxくらい?(経験則)                          19
4.Dragging / Double Tap✦ ドラッグ開始までの閾値を入れる ✤   タップとドラッグの切り分け     ✤   6pxくらい?(経験則)✦ ダブルタップ ✤   ダブルタップ判定エリアは広く取る              ...
4.Dragging / Double Tap✦ ドラッグ開始までの閾値を入れる ✤   タップとドラッグの切り分け     ✤   6pxくらい?(経験則)✦ ダブルタップ ✤   ダブルタップ判定エリアは広く取る          Senc...
落とし穴       20
User action event restrictions                                 21
User action event restrictions✦   ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)    ✤   キーボードの表示 (focus)    ✤   VIDEOタグの動画の再生          ...
User action event restrictions✦   ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)    ✤   キーボードの表示 (focus)    ✤   VIDEOタグの動画の再生      text...
User action event restrictions✦   ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)    ✤   キーボードの表示 (focus)    ✤   VIDEOタグの動画の再生      text...
User action event restrictions✦   ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)    ✤   キーボードの表示 (focus)    ✤   VIDEOタグの動画の再生      text...
User action event restrictions✦   ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)    ✤   キーボードの表示 (focus)    ✤   VIDEOタグの動画の再生          ...
Scroller✤   縦/横 スクロールの排他制御    ✤   Mobile Safari で実装 (Android Browser は無し)    ✤   Sencha の Scroller は未サポート        ✤   direc...
Scroller✤   縦/横 スクロールの排他制御    ✤   Mobile Safari で実装 (Android Browser は無し)    ✤   Sencha の Scroller は未サポート        ✤   direc...
Scroller✤   縦/横 スクロールの排他制御    ✤   Mobile Safari で実装 (Android Browser は無し)    ✤   Sencha の Scroller は未サポート        ✤   direc...
Conclusion             23
Conclusion✤   Touch UI の特徴                   23
Conclusion✤   Touch UI の特徴✤   HTML5 × Touch                    23
Conclusion✤   Touch UI の特徴✤   HTML5 × Touch✤   HTML5 × Touch の UX    1. ボタンは大きく    2. 当たり判定を調整    3. Click Event は使わない    ...
Conclusion✤   Touch UI の特徴✤   HTML5 × Touch✤   HTML5 × Touch の UX    1. ボタンは大きく    2. 当たり判定を調整    3. Click Event は使わない    ...
Conclusion✤   Touch UI の特徴✤   HTML5 × Touch✤   HTML5 × Touch の UX    1. ボタンは大きく    2. 当たり判定を調整                HTML5技術コンサルや...
Conclusion✤   Touch UI の特徴✤   HTML5 × Touch✤   HTML5 × Touch の UX    1. ボタンは大きく    2. 当たり判定を調整                HTML5技術コンサルや...
Upcoming SlideShare
Loading in...5
×

UX on HTML5 x Touch UI

5,897

Published on

説明: http://dsuket.hatenablog.com/entry/2012/07/27/154303

補足記事を書きました:
http://dsuket.hatenablog.com/entry/2012/07/28/084740

Published in: Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,897
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • jQuery Blogの話\n
  • jQuery Blogの話\n
  • jQuery Blogの話\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Tips?\n
  • Tips?\n
  • Tips?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • UX on HTML5 x Touch UI

    1. 1. UX onHTML5 × Touch UI TAKAOKA Daisuke (@dsuket) 2012/07/27 ありえるえりあミニ勉強会#3 ∼Sencha Touch 1
    2. 2. About me高岡大介: TAKAOKA Daisuke @dsuket dsuketお仕事‣ Free agent engineer Inkpod Web‣ カラビナシステムズ http://inkpodweb.com 2
    3. 3. Touch UITouch UI の特徴 3
    4. 4. Touch UI の特徴 Feature ✤ Touch Finger ✤ Multi-touch ✤ Gesture ✤ Virtual keyboard 最重要ポイント Many touch devices 4
    5. 5. Touch UI の特徴 Feature ✤ Touch Finger ✤ Multi-touch ✤ Gesture ✤ Virtual keyboard 最重要ポイント 指の精度は高くない! Many touch devices 4
    6. 6. Touch Position タッチ位置はズレる! 1. 静電容量方式の制限 ✤ ある程度のエリアが必要 2. 指の感覚によるもの ✤ 斜めにタッチ iOSでは補正されている ✤ 上方向へ ✤ キーボード予測 http://www.nikkeibp.co.jp/article/column/20120420/306320/ 5
    7. 7. Touch Feedback★ 押せる場所を分かりやすく OK ✤ 視覚的フィードバック ✤ hoverは使えない (Xperia Sola の floating touch technologyという例外も)★ 指はじっとしていない ✤ マウスより段違いにブレる ✤ 不安定な場所での利用が多い 6
    8. 8. HTML5 × Touch HTML5のTouch仕様 7
    9. 9. Touch Events Specification✤ W3Cで標準化が進められている(実はHTML5ではない) ✤ W3C Candidate Recommendation (勧告候補) 8
    10. 10. Touch Events Specification✤ W3Cで標準化が進められている(実はHTML5ではない) ✤ W3C Candidate Recommendation (勧告候補)✤ 現在活動停止中・・・ ✤ Touch Events PAG (Patent Advisory Group) の報告待ち ✤ Appleの特許公開をうけて影響を検討中 8
    11. 11. Touch Events Specification✤ W3Cで標準化が進められている(実はHTML5ではない) ✤ W3C Candidate Recommendation (勧告候補)✤ 現在活動停止中・・・ ✤ Touch Events PAG (Patent Advisory Group) の報告待ち ✤ Appleの特許公開をうけて影響を検討中 Event 標準 対応状況 Apple Touch Event W3Cのベース iOSで採用 Google Touch Event ほぼW3C準拠 3.0からマルチタッチに対応 Microsoft Pointer Event 旧Mozillaベース IE10,Windows 8でサポート 8
    12. 12. Touch Event Types Event Type dispatch timing touchstart タッチ開始時に発生 touchend タッチ終了時に発生 touchmove タッチ移動時に発生 touchcancel システムによる割り込み(着信、アラーム等)で発生✤ DOM要素にリスナーを登録 dom.addEventListener(‘touchstart’, function(event) { // do something. }, false);✤ 基本はマウスイベントと同じ 9
    13. 13. Touch Event Interface TouchEvent Touch changedTouches: TouchList identifier: long targetTouches: TouchList clientX/clientY: long touches: TouchList pageX/pageY: long rotation(*1): float screenX/screenY: long scale(*1): float target: EventTarget preventDefault() stopPropagation() *1: iOS独自仕様 10
    14. 14. GestureEvent (iOS only)ピンチや回転のジェスチャーイベントiOS 独自機能 Event Type dispatch timing GestureEvent gesturestart ジェスチャー開始時 rotation: float gesturechange ジェスチャー変更時 scale: float gestureend ジェスチャー終了時発生タイミングと、touchesが無いことに注意 11
    15. 15. UX onHTML5 Touch HTML5でTouchのUXを実現 12
    16. 16. 1.ボタンは大きく 13
    17. 17. 1.ボタンは大きく推奨サイズ ✤ 44pt (iOS), 48dp (Android) 以上 ✤ 参考: ✤ iOS human interface Guidelines ✤ Android Design 13
    18. 18. 1.ボタンは大きく推奨サイズ ✤ 44pt (iOS), 48dp (Android) 以上 ✤ 参考: ✤ iOS human interface Guidelines ✤ Android Design 13
    19. 19. 1.ボタンは大きく推奨サイズ ✤ 44pt (iOS), 48dp (Android) 以上 ✤ 参考: ✤ iOS human interface Guidelines ✤ Android DesignSencha Touch の場合 ✤ ボタンのデフォルトは 39px (iOS) ✤ 独立したボタンの場合はもう少し大きくてよいかも 13
    20. 20. Inkpod Webの例(ボタン)ツールボックスのボタン メニューバーのボタン46px 35px 46px 43px Buttonコンポーネントもカスタムボタンは大きめに デフォルトより少し大きく 14
    21. 21. 2.当たり判定を調整 15
    22. 22. 2.当たり判定を調整✤ アイコンが小さい場合 ✤ 透明なDIVなどを置いて当たり判定を広げる 15
    23. 23. 2.当たり判定を調整✤ アイコンが小さい場合 ✤ 透明なDIVなどを置いて当たり判定を広げる✤ タッチポイントの補正 ✤ 画面上方に補正(Androidの場合) 15
    24. 24. 2.当たり判定を調整✤ アイコンが小さい場合 ✤ 透明なDIVなどを置いて当たり判定を広げる✤ タッチポイントの補正 ✤ 画面上方に補正(Androidの場合)✤ 動作予測 ✤ 次の動きを予測して当たり判定を変える 15
    25. 25. Inkpod Webの例(当たり判定) 詳細ボタン オブジェクトハンドル 16
    26. 26. Inkpod Webの例(当たり判定) 詳細ボタン オブジェクトハンドル 当たり判定エリア透明な要素を重ね、見えている範囲よりも当たり判定を広く取っている。 16
    27. 27. Inkpod Webの例(当たり判定) 詳細ボタン オブジェクトハンドル 当たり判定エリア透明な要素を重ね、見えている デフォルトから広げることが多範囲よりも当たり判定を広く いため、外側に当たり判定を多取っている。 く取っている。 16
    28. 28. 3.Click Eventを使わない 17
    29. 29. 3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤ フォーカスリング、凹みなど ✤ デフォルトのタップハイライトは無効に 17
    30. 30. 3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤ フォーカスリング、凹みなど ✤ デフォルトのタップハイライトは無効に 17
    31. 31. 3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤ フォーカスリング、凹みなど ✤ デフォルトのタップハイライトは無効に -webkit-tap-highlight-color: rgba(0,0,0,0) 17
    32. 32. 3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤ フォーカスリング、凹みなど ✤ デフォルトのタップハイライトは無効に -webkit-tap-highlight-color: rgba(0,0,0,0)2. レスポンスが遅い (click delay問題) ✤ 0.5sほど遅れる 17
    33. 33. 3.Click Eventを使わない1. touchstart で視覚的フィードバックを与える ✤ フォーカスリング、凹みなど ✤ デフォルトのタップハイライトは無効に -webkit-tap-highlight-color: rgba(0,0,0,0)2. レスポンスが遅い (click delay問題) ✤ 0.5sほど遅れる Sencha Touch なら ✤ touchstart時に自動でハイライト ✤ clickイベントを高速にエミュレート 17
    34. 34. Inkpod Webの例(feedback) オブジェクトをタッチした時通常時 ハンドルをタッチした時 18
    35. 35. Inkpod Webの例(feedback) オブジェクトをタッチした時 フォーカスリング通常時 を表示 ハンドルをタッチした時 18
    36. 36. Inkpod Webの例(feedback) オブジェクトをタッチした時 フォーカスリング通常時 を表示 ハンドルをタッチした時 タッチしたハンドル の色を変更 18
    37. 37. 4.Dragging / Double Tap 19
    38. 38. 4.Dragging / Double Tap✦ ドラッグ開始までの閾値を入れる ✤ タップとドラッグの切り分け ✤ 6pxくらい?(経験則) 19
    39. 39. 4.Dragging / Double Tap✦ ドラッグ開始までの閾値を入れる ✤ タップとドラッグの切り分け ✤ 6pxくらい?(経験則)✦ ダブルタップ ✤ ダブルタップ判定エリアは広く取る 19
    40. 40. 4.Dragging / Double Tap✦ ドラッグ開始までの閾値を入れる ✤ タップとドラッグの切り分け ✤ 6pxくらい?(経験則)✦ ダブルタップ ✤ ダブルタップ判定エリアは広く取る Sencha Touch なら ✤ drag, doubletap など便利なイベントが沢山! (場合により問題有り) 19
    41. 41. 落とし穴 20
    42. 42. User action event restrictions 21
    43. 43. User action event restrictions✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS) ✤ キーボードの表示 (focus) ✤ VIDEOタグの動画の再生 21
    44. 44. User action event restrictions✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS) ✤ キーボードの表示 (focus) ✤ VIDEOタグの動画の再生 text field Edit 21
    45. 45. User action event restrictions✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS) ✤ キーボードの表示 (focus) ✤ VIDEOタグの動画の再生 text field Edit✦ タイマーやDOMイベント、CSSイベント 21
    46. 46. User action event restrictions✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS) ✤ キーボードの表示 (focus) ✤ VIDEOタグの動画の再生 text field Edit✦ タイマーやDOMイベント、CSSイベント 21
    47. 47. User action event restrictions✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS) ✤ キーボードの表示 (focus) ✤ VIDEOタグの動画の再生 text field Edit✦ タイマーやDOMイベント、CSSイベント✦ Sencha Touch のイベントでこれらは制御できない! (* ver: 1.1) ➡ タイマーやカスタムイベントを多用 ➡ 自前でがんばる! 21
    48. 48. Scroller✤ 縦/横 スクロールの排他制御 ✤ Mobile Safari で実装 (Android Browser は無し) ✤ Sencha の Scroller は未サポート ✤ directionLock は入れ子対策用 ✤ iScroll 4 が使える 22
    49. 49. Scroller✤ 縦/横 スクロールの排他制御 ✤ Mobile Safari で実装 (Android Browser は無し) ✤ Sencha の Scroller は未サポート ✤ directionLock は入れ子対策用 ✤ iScroll 4 が使える✤ ピンチ/2本指スクロール の排他制御 ✤ 拡大縮小とスクロールの判断(Drawツール) ✤ 2つのタッチのベクトルを見て判断 22
    50. 50. Scroller✤ 縦/横 スクロールの排他制御 ✤ Mobile Safari で実装 (Android Browser は無し) ✤ Sencha の Scroller は未サポート ✤ directionLock は入れ子対策用 ✤ iScroll 4 が使える✤ ピンチ/2本指スクロール の排他制御 ✤ 拡大縮小とスクロールの判断(Drawツール) ✤ 2つのタッチのベクトルを見て判断 22
    51. 51. Conclusion 23
    52. 52. Conclusion✤ Touch UI の特徴 23
    53. 53. Conclusion✤ Touch UI の特徴✤ HTML5 × Touch 23
    54. 54. Conclusion✤ Touch UI の特徴✤ HTML5 × Touch✤ HTML5 × Touch の UX 1. ボタンは大きく 2. 当たり判定を調整 3. Click Event は使わない 4. Dragging / Double Tap 23
    55. 55. Conclusion✤ Touch UI の特徴✤ HTML5 × Touch✤ HTML5 × Touch の UX 1. ボタンは大きく 2. 当たり判定を調整 3. Click Event は使わない 4. Dragging / Double Tap✤ 落とし穴 23
    56. 56. Conclusion✤ Touch UI の特徴✤ HTML5 × Touch✤ HTML5 × Touch の UX 1. ボタンは大きく 2. 当たり判定を調整 HTML5技術コンサルやってます! 3. Click Event は使わない 4. Dragging / Double Tap✤ 落とし穴 23
    57. 57. Conclusion✤ Touch UI の特徴✤ HTML5 × Touch✤ HTML5 × Touch の UX 1. ボタンは大きく 2. 当たり判定を調整 HTML5技術コンサルやってます! 3. Click Event は使わない 4. Dragging / Double Tap✤ 落とし穴 End 23
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×