滑らかなインターフェイスをデザインする

(音楽)

こんにちは (拍手) どうも ようこそいらっしゃいました 今日のお話は“Designing Fluid Interfaces”です 私はチャン ヒューマンインターフェイス チーム所属です 私の最新の研究は― iPhone Xのfluid gestural インターフェイスです 私 マーコス ネイサンの ３人は これら一連の開発を してきました そのお話をしましょう 私たちが自らに 何度も問いかけたのは― 滑らかな インターフェイスとは何か？ その表現方法は 人によって様々です 私たちがデモを行うと それを見た人は 実際に手に取り 使います “速い”と言う人 “スムーズ”と言う人 感覚がぴったり合い “ナチュラル”と言う人 “魔法だ”とも 結局のところ― こういう物は 実際に触ってみることです 良さを実感できます ジェスチャUIを試せます 多くのジェスチャUIの中で 出来が良くないものは 何か違うと感じます 指がしっくりこないのは なぜか？ フレームレートの問題？ １秒間に60フレームで サクサク動いても 何かが違うこの感覚は 何なのか？ 行きつくところは― “道具を心の延長のように 感じられるか” 心とつながっているかです なぜ それが大切なのか？ iPhoneは道具ですよね？ 情報通信のための 手道具で― 触覚と視覚が密接に 結び付いて機能します 手道具の長い歴史を 受け継いでおり 起源は数千年前に さかのぼります 左側の道具は 15万年前 骨髄の抽出に使用されました 指に沿うように 鋭く伸びています 人々は手道具を 作り続けてきました 最も驚くべきことは 私たちの手は進化し― 道具に順応してきたのです 大きな進化を遂げた 筋肉や神経 血管などが 繊細な動きを表現し 軽い接触も感知できます 私たちはこの触知性の時代に 順応してきました コンピュータの歴史を見ると 以前は動かすための 手順がいくつもありました 操作には様々な知識が 必要だったため 多くの人にとって 遠い存在でした しかし この20～30年の間に 最初は間接操作だった多くの 手順が省かれました 個人が直接扱えるものに 近付いたのです そして 現在― コンテンツに 直接アクセスできるよう 全手順を 省こうとしています コンピュータと感じなくなる 魔法の要素です 自然界の延長のように 感じ始めるのです つまり インターフェイスと 人とのつながりは これまでよりも 古代の形に近付いたのです それでいて高水準です 少しでも違うと感じると 期待は打ち砕かれます しかし うまくいけば 自分の分身のように感じます あなたの考えと共鳴して 楽しく 人との摩擦も少なく 遊び心さえ感じます なぜ そう感じるのか？ しっくりこない時には どうするか？ その答えが今日のお話です 今から４つのお話をします まず 動作原理の策定 そして自身の延長のような インターフェイスの構築 人の体や 様々な物の動きに 合った動作の設計方法 優雅で知性を感じる ジェスチャの設計

これらの原理の上に どう相互作用を構築し どうやって体の一部のように 感じてもらうか？

では 始めましょう 分身のようなインターフェイスを どう設計するか？ 私たちが考えた方法は― 考え方や動き方に インターフェイスを合わせること ここで最も重要な点は― 心は常に 変化や刺激や 思考に反応するということ 心と体は常に 動的変化の状態にあります インターフェイスは 人の滑らかな動きに 反応できる必要があります そう 反応から始まるのです 道具は反応時間の 早さが大切です 道具や楽器を使う際 反応に遅れが出ては 使いづらく大変です 人々は反応時間に 実に敏感です タイムラグが発生したり 突然 反応しなくなったりしたら？ かみ合わなさに ストレスを感じます もはや 分身とは思えません そこで 懸命に 反応時間を削りました 最新のiPhoneでは 反応がより早くなり 微妙な動きも 即座に検知できます iPhoneを 気に入ってほしいので 遅れがないか 入念に探すのです スワイプやタップだけでなく 全ての作用に対して 即時の反応が必要なのです この製品を設計する過程で 頻繁に―

微妙な遅れが出ました 慎重に意識的に 遅れに 注意を払うことが大切です インターフェイスに タイマーを仕込み 常に反応する設定にも できます

インターフェイスを活発にする 反応について話してきました

次に― 方向転換や中断について 考慮することも大切です 私たちの心と体は 絶えず方向転換しています 思考の変化に反応します ステージ脇に歩いていて 忘れ物に気付いたら 端にたどり着く前に 引き返すでしょう 端まで行かないですよね？ インターフェイスは方向転換に 即応することが重要です つながっていると 感じられます そこで iPhone Xに リダイレクト機能を構築しました それは何か？

２つのアプリケーションを 行き来できる機能です ホームにも すぐ戻れます 戻る途中で ２つを同時に見て どちらに行くかを 決められます どちらもやめて ホームにも戻れます 重要と思えないかも しれません しかし この機能がないと どうなるか？

２つのアプリケーションの 行き来だけであれば ホームに戻れば終了で それ以上 何もできません その場合 指を動かす前に したいことを 考えなくてはいけません イベントは １本の線上に並びます ホームに戻るか マルチタスクをするか― 決めてから指を動かし 命令を発します リダイレクト機能の 素晴らしい点は 並行する思考とジェスチャに 対応できること 考えると同時に行動するほうが 行動する前に考えるより速い マルチ画面をジェスチャで 操作できるのです 別々のジェスチャではなく １つのジェスチャで 全てできるのです 別々のものと 考えなくていい そして― 操作していく中で 新たな ジェスチャを発見できます 思考と同時に ジェスチャを 重ねていけるのです どういう意味か？ 例を挙げてみましょう シミュレーションを 見やすくゆっくり再生します スワイプで ホームに戻りながら 次のページに移動できます 同時に ２つのジェスチャが できるのです

他にも アプリケーションを 起動させながら マルチタスキングを 開くことができます 他にもあります 間違ってアプリケーションを 起動した場合 起動完了前に終了できます

さらに こんなこともできます 起動中のアプリケーションを 操作できるのです インターフェイスが 常に反応するのは 非常に重要なことだと 分かりました 常にユーザを 理解することが重要です インターフェイスが ユーザを理解することは 快適な使い心地のために とても重要です

操作開始時だけではなく 操作の途中でも 反応することが求められます 割り込みにも 反応できるのが大事です iPhone Xで マルチタスキングを開くには 画面の下部から 上にスワイプして指を止めます このモーションの変化を 検知するためには どうすればいいでしょうか？ タイマーを使う？ ある速度を一定期間 下回ったら マルチタスキングを 開けばいいでしょうか？ それでは遅すぎます ユーザが期待するくらい 迅速に マルチタスキングを 開く方法が必要です

そこで指の加速に注目します 指を止めたい時 人は 指を迅速に動かします 止まるのが速いほど 鋭く検出できます モーションの変化に 反応したほうが タイマーを使うより 早いのです リダイレクションに 素早く反応する例でした

割り込みと リダイレクションにより 直感的に 操作できるようになります 次です

インターフェイスの 配置について― 紹介します 動作を通して 空間的一貫性を 保つことが重要です その意味は？ 実世界での物体の動作を まねることで スムーズに出入りするように 見せるのです 何かが消えたら 消えた場所から現れますよね もし私があっちに消えたのに 逆から現れたら 驚くでしょう 道理に合いません そこで 人間が持つ一貫した 空間感覚に合わせようとしました

つまり 何かが視界から消えて また現れる場合 画面外への出入りは 同じ経路をたどるべきです iOSの画面遷移が良い例です 項目をタップすると ページは右から現れ 戻る時は同じ経路をたどり 右に戻ります 項目ごとに 場所が決まっているのです 場所を把握していれば 自分でスライドして 戻すこともできます この機能がなかったら？ スライドインしたものが 下に行ったら 一貫性がなく混乱しますよね 送るような感覚です どこかに送るような動作に 見えてしまいます 空間的一貫性を保つことで ジェスチャと同調するように 感じるのです

次は ジェスチャの ヒントについてです 人間は常に 次に起こることを 予測しています これまでの経験を利用して 次の動きを予想するのです インターフェイスでも それができたらいいですよね 例えば 初期と最後の ステートがあったら 中間のトランジションが あるはずです オブジェクトは 初期から最後のステートに スムーズに拡大するのです コントロールセンターが 良い例です モジュールを長押しすると 徐々に大きくなって 最終的にポップアップします

この効果によって ジェスチャを予測できるのです

次は 軽快なタッチ操作の 重要性についてです Multi-Touchの軽さは 過小評価されがちですが 軽い力でスワイプなどができるのは そのおかげです 課題は 軽さを残して 動きの幅を増やすこと 小さな入力で 大きな出力を得ることです 何かを投げるような感覚で 操作できるのが理想です インターフェイスでは 短い操作から始まります 軽く短い操作です ジェスチャのプロファイルを 生成するために 我々の全てのセンサーや技術を 利用します 位置や速度 強さなど 全てを用いて ジェスチャのプロファイルを 生成するのです そしてそれを増幅すると 体の延長のように感じます 軽い操作で満足のいく 使用感が得られるのです スクロールが良い例です 画面上に指があるのは 短い間ですが 強さや推進力が保存され インターフェイスに送られます この機能がなかったら？ スワイプしても あまり動きません

スクロールするには 長くスワイプしなければならず 大きな力が求められ 使いにくいでしょう

ホームへ戻るのも良い例です 画面に触れるのは短時間です 流れるような軽いジェスチャで 操作でき― Multi-Touch特有と 感じられます 画面の下部から指を動かせば SpringBoardに戻ります

スワイプだけではなく タップでも 全ての操作に 高い反応性が必要です インターフェイスと つながっている感覚 その感覚こそが 大事だからです 動きの軽さと幅 についてでした

次は ラバーバンド効果という― インターフェイスの境界を 示す演出についてです

インターフェイスは ページの終わりが近付くと 暗に知らせてきます ユーザを理解しているのです この機能がなかったら？ 雑な印象で 壁に当たったかのようです まるで故障のようで フリーズとの区別もつきません 画面の最上部で 止まるだけです 境界を伝えるのは 大事なことなのです トランジションの場合も 同様です ある動作から別の動作に 移る時もスムーズです Dockをスワイプして アプリケーションを開く時 ぶつかったりせずに 別の動作に移動できます 引き継ぎの動きは スムーズで― 別の動作に移る時に 不快感を与えません

次はスムーズな 動きについてです 上下に動くオブジェクトが あるとします これは 実際に 動いているわけではなく そう見えるだけです 大量のフレームを見て 動いていると錯覚するのです フレームを展開して 時間の推移の中で見てみましょう 懸念するのは ハイライトされた部分です 隣接するフレーム間に 大きな変化があります ここではインターフェイスが ぎこちなくなり ちらつきが起こります ２つのフレームの違いが 大きすぎるからです だから ちらつくのです この例では 両方とも １秒30フレームですが 左のほうがスムーズです 右のほうは速すぎて ちらついています 視覚認識が 追いつかないので スムーズには見えません つまり重要なのは フレームレートだけではなく フレームの内容です では スムーズさを 保ちながら どこまで速く できるでしょうか？ １秒30フレームから 60フレームにすると スムーズさを保ちながら もう少し速くできます ちらつきもありません モーションブラーも使えます それぞれのフレームに 動きに関する情報を足すのです 人間の目は このように機能します 2Dアニメーションや ゲームからも学べます モーションストレッチという 技術を使えば オブジェクトを伸び縮み させることができます

動かすと こんな感じです それぞれの異なる技術が 動きについて より多くの情報を エンコードしようとします モーションストレッチの 技術は iPhone Xで使われています アプリケーションを 起動すると アイコンが拡大しながら 起動します そして終了する時は 逆に縮みます スムーズに見えるように 情報を補っているのです

最後に アニメーションと ビヘイビアについてです 物体は常に動的な状態にあり 外界の作用を受けます アニメーションは違います アニメーションは 現実の影響を受けませんからね そこでアニメーションや ビヘイビアを 会話と考えてみましょう 静的なものから アニメートされたものへの移行を 考えるのです ネイサンが後で説明しますので ここでは簡単に

さて 写真は― 概念上は軽いため 容量が少ないです 一方 アプリケーションは 重く大きいので 容量が当てられています

(拍手) 人間のように考える インターフェイスについて お話ししました

レスポンスから始まり ユーザとつながっているように 感じさせること 空間的一貫性を保って 空間感覚に合わせること 同じ経路で移動すること 予測を助けるため ジェスチャのヒントを出すこと 軽い操作で 最大の出力を得ること 少ない力で 十分なレスポンスを得ること

インターフェイスの境界を 暗に示し 端に来ても 常に反応すること トランジションが自然なこと

そしてスムーズな 動的ビヘイビアを設計すること

インターフェイスを 心の一部にするための 原則をお話ししました ここで同僚のネイサンに 代わります ユーザや自然界の動きに 合った方法で 設計することについて お話しします

(拍手) どうも　チャン 私はネイサンです 動的モーションを使った デザインについてお話しします

人間の心と体 そして 私たちを取り巻く世界は 常に変化の状態にあります そのため インターフェイスも 同様のビヘイビアを期待されます 触覚的になるにつれ 高い忠実性が要求されるのです インターフェイスでは アニメーションが使われてきました ボタンがタップされると 手綱はデザイナーに渡されます デザイナーの役割は 完璧な アニメーションを作ることです 完成すると 手綱は インターフェイスのユーザに戻され 操作が続行されます いわば アニメーションと操作は 時系列に沿って 交互に行われるのです

fluidインターフェイスでは 人の持つ動的性質により デザイナーの手から 主導権が離れます デザイナーは代わりに 操作時に どのような動きをするか 設計します

そして一連の 動的ビヘイビアとして 常に有効にするのです

今日はこの動的ビヘイビアについて お話しします

まず シームレスモーションです この要素のおかげで 動的モーションが 体の延長のように感じられます

特徴も見ていきます アニメーションなしでも インターフェイスに 遊びの要素や特徴 触感を 取り入れることができます 最後に ユーザの動きから どのように意図を解釈するか お話しします ジェスチャを よく分析することで 不確実性を排除し 意図を読み解きます

では まず始めに― シームレスモーションとは 何でしょうか？ 概念をつかむために 例を見てみましょう

車が一定の速度で 進んでいます ブレーキをかけると 減速して止まります

今度は 位置を描写しながら 見てみましょう

まず 曲線は直線的に 右上に向かいます 速度が一定であることを 意味します 不変です しかし その後 ゆっくりと曲がり始め 直線と離れます ブレーキが かかったので 摩擦により減速するのです 曲線の終わりは水平になり 位置が不変になったことを 示します

この曲線はシームレスモーションを 視覚化しています 曲線に切れ目がなく 突然の方向変換もありません

スムーズでシームレスです ブレーキのような 新しい動的ビヘイビアが加わり 車に摩擦が かかった時でもです

車が完全に止まる時も 曲線はスムーズです 車がいつ止まったのか 正確には判別できません

fluidインターフェイスの話で なぜ車の例なのか？ なぜなら 物質界の特性を 応用できると 考えるからです 車の例は 分かりやすいですよね 車のような物体が どのように動くか 共通認識があるからです この点が参考になりました

車の動きを完全に 模倣するわけではありませんが 車の動きを応用できます 物質界での物体の動きを 応用するのです それを動的ビヘイビアで使えば 自然な動きになり 共感や信頼感も 生まれやすくなります

物質界を参照して 動的ビヘイビアを設計することは 以前からiPhoneで 行われています おもちゃの車を押すのと 同じくらい簡単に 子供でも簡単に スクロールできます

スクロールについて 主な特徴は何でしょうか？

１つは 我々の共通認識を 利用していることです 物体の動きや物体への 作用に関する共通認識です

コンテンツの動きは シームレスです 操作時や コンテンツをドラッグする時 体は滑らかなので 動きにも流動性があります コンテンツを離すと 減速し やがて止まります インターフェイスに置く時の 推進力が維持されるためです

スクロールの際の 摩擦量は一定なので 予測可能で 簡単に習得できます

最後に コンテンツは ゆっくりと止まるので 正確には いつ止まったか 分かりません 終わりという感覚がないので 常に コンテンツを 動かせるという感覚があります スクロールが際限なく 続くような感覚があるので 何かが終わるのを 待つ必要はありません

実世界のビヘイビアは 無数の特徴により作られます 今回は １つの 特徴を取り上げます 我々の設計作業で 不可欠となる要素です

花の質感にご注目を 自然が生み出す この繊維の特徴は 元へ戻ろうとする 回復力を持つ点です

圧力や張力がかかっても この回復力があることで 花は元の状態に戻ります 人間の体も 高い回復力を持ちます 我々が 驚くほど長時間 動けるのは 筋力のためではなく 力を抜く能力があるためです 回復できるということです 筋肉を リラックスさせることで エネルギーを維持し 自然な感覚を得ます

iPhone Xも 同様の回復力を有します アイコンをタップすると アプリケーションが起動し スクリーンに表示されます 下部からスワイプすると ホーム画面の 元の位置に戻ります

スクロールも同様で やりすぎると ゴムのように動きます 指を画面から離すと コンテンツが 画面内に収まります これにより 次の スクロールに備えるのです

では スクリーンの裏側で 何が起きているか見てみます

バネがついたボールを コンテンツだとしましょう

接続しているほうの端が 画面に表示される “現在地”です 元に戻ろうとする力により この現在地は 反対側の端“ターゲット”に 引っ張られます これがコンテンツの場所に 影響します

バネが現在地を ターゲットに引き寄せました バネが見せる シームレスな動きは このビヘイビアに備わった 固有の特徴です 滑らかなインターフェイスに 有用な特徴と言えます ビヘイビア自体に備わり 無料で手に入る特徴です

我々も このビヘイビアを 活用します ボールに ターゲットの 場所さえ示せば シームレスに動くのです 一方で スピードや オーバーシュートについて コントロールするには どうすれば？ ボールを大きく 重くする手があります ボールの慣性に 変化を与えるでしょう 動き出したり 停止するタイミングを 遅らせることになります オーバーシュートも 抑えられます

バネの引っ張る力を 大きくする方法もあります ボールに適用される力が 大きくなり ターゲットに速く近付きます

または車のブレーキのように ボール表面の減衰力や 摩擦力を変える手もあります ボールのスピードに ブレーキをかけ オーバーシュートも 抑制します

ボールやバネの 物理的性質は 科学の法則に 従っていると言えます しかしスクリーン上での ビヘイビアに関しては 不便な面もあり 設計上 調整が必要です

そこでツールを使用する 設計者のニーズに応え インターフェイスに 手を加えます 設計上 使いやすくするには どう簡易化すべきでしょうか

バネの基本的な要素である 質量と減衰力は保持し ２つのシンプルな 法則に絞りました １つはオーバーシュートを コントロールする減衰力 オーバーシュートがない 減衰力100％から バネが不安定に揺れる ０％までコントロールします

２つ目の要素は “反応”です 現在地がターゲットに達する 速さを決めます 元に戻ろうとする力について 話す時 “持続時間”という言葉を 我々は使いません 持続的な変化を 強調してしまうためです バネはどこでも 持続的に動くものです 技術的には“減衰比”や “周波数応答”と呼ばれます もし そのほうが 分かりやすければ 専門用語を使ってください

回復力をコントロールする ２つの要素を与えました

しかし他にも 可能性は無数にあります ２つの要素を取り入れるにも 多くの方法があり ビヘイビアも変わります アプリケーションの 特徴を作るための 取り入れ方とは？

“デバイスはツールである”を 念頭に置きます ツールは目的にかなった 使用法をするものです 不要な動きをさせることは 望ましくありません シンプルに考えましょう バネのオーバーシュートは 避けるべきです

減衰力100％で始めるか オーバーシュートが 起きないよう調整します スムーズでシームレスな 動きを得られ 作業中のタスクを 妨げることもありません

では弾む動きは どこで使われるのが適切か？ 動かすジェスチャ自体に 推進力があるなら オーバーシュートとして 反映すべきです

ジェスチャに推進力があり オーバーシュートがない場合 正しい反応がないという 不満感を覚えるでしょう

例えば ミュージックAppです 画面下部に現在 再生中の 曲名などが表示され タップすると 全画面に現れます

タップ自体には 方向を伴う 推進力は発生しないので 100％の減衰力を使い オーバーシュートを防ぎます

スワイプで再生中画面を 閉じると 推進力が発生 減衰力80％で 弾力ある動きを生み ジェスチャに反応します

機能的な面でも 弾む動きは有用です 例えば ユーザに ヒントを与える場合です

iPhone Xの ロック画面にあるのは フラッシュライトと カメラのボタンです

誤操作による起動を防ぐため フラッシュライトの起動には 意図的な動作が必要です しかし その方法を 知らなかったとします タップするとボタンが弾み ボタンが機能していることを 示します また操作に対し 反応していると分かります これによりユーザは もっとしっかり押すことで 起動するという ヒントを得るのです 弾む動きは 何かを暗示するのに便利です

ここまで“動き”によって 物を動かし 質量や画面上での表示を 変化させました 動きは より多様な 変化を起こします 例えば光や色 感触や感覚 音さえもです 我々が感知できる 多くの変化に起因します

我々は この“動き”を もっと活用し アプリケーションに 適用できると考えます 動きへの動的ビヘイビアと 音や触覚への 動的ビヘイビアを結合 インターフェイスの表情を 根本から変えます

ユーザが感知する ジェスチャの結果を変えます ただのスクロールという 挙動から 感触のある インターフェイスになります

アプリケーションを作る際 考えるべき最後の１点は 特徴に結合性を 感じられるかどうかです

説明します

同じアプリケーションや システム内で 同種のビヘイビアが 保たれることは大切です 例えばスクロールです ページを下に送るのは スクロールビヘイビアです ステータスバーをタップし 上部にスクロールするのは 回復のビヘイビア ２つの場合で 動きに 差が出てはいけません 異なる２つの ビヘイビアを用いて 動きを起こす場合も同様です

１つの相互作用だけでなく アプリケーション全体に 適用されるべきです 設定したアプリケーションの 特徴を 全体を通じて踏襲します そうすればユーザは ビヘイビアを 簡単に習得できます 我々は繰り返しから学び それを他に適用するからです

続いて お話しするのは 意図を伴う 動的モーションについてです

例えばボタンの場合 ジェスチャの意図は 明らかです 画面に異なる ３つのアイコンがあります 何を意図するか明らかですね

スワイプはどうでしょう 意図が 即座には 分かりません モーションは意図を 記号化しています ですから意図を解釈し そのモーションへの 対応を決めることが大切です

例を見てみます FaceTime通話を かけるとします 画面の端に 自分が映った 小さなウインドウが現れます これが 相手に 見えている映像です “ピクチャ･イン･ピクチャ” 略して“PIP”です

浮いているように見せ 移動できることを暗示 軽いフリックで 好きな コーナーへ移動できます

“再生”“停止”など 先ほどの３つのボタンと比べ 何が違うでしょう

この場合 目に見えない ４つの区画が存在します タップできるような 明らかな表示はありません ジェスチャを通して 起きたモーションに注目し どの区画へ行くべきか 意図を読み取ります ３つの区画は “ジェスチャの終点”です PIPにおける我々の目標は 正しい終点を見つけること そして意図に応じた終点と 結び付けることです

１つ目は PIPをドラッグし １番近い終点と結ぶ方法

隣の区画に PIPを移動できました しかし場所が少し遠くなると 問題が発生します

希望の区画と結ぶため PIPを画面の半分以上 ドラッグする必要があります これではユーザの意図を 読めていません ここでフリックしてみると 意に反し １番近い区画に 戻ってしまいます 問題は 位置だけを見て PIPの推進力を 無視している点です 速度も考慮していません 正しい終点を見極めるのに 推進力を活用する方法を 考えます

いったん終点は忘れて 一歩引いて見てみましょう 問題をシンプルに考えます

画面上でコンテンツを 移動するのが最終目的なら スクロールという強力で 最適なビヘイビアがあります

使わない手はありません スクロール時に どこまで コンテンツを動かすか 直観的に理解しています

そこで今度は PIPをスクロールしてみると 滑るように動き 止まります スクロールと同じ 減速の方法を使っています 他で習得した特徴を 適用するという メリットを利用しています 同一システムで 同じビヘイビアを用いる― メリットですね

このPIPの位置の話は 実際の話ではありませんから インターフェイスを お見せしません ここでは“予測”を行います PIPがフリックされると その速度と減速率を 掛け合わせます スクロールで進むであろう 位置を予測するのです

１番近い終点を 探すのではなく 予測される位置を計算し 移動する方法を使いました

これにより対角の区画へも 軽いフリックで 期待通りに移動します

推進力を予測する考え方は かなり有用です コーディングの一例を ご紹介しますので ぜひお試しください PIPの初期速度と 減速率を― まずは与えます それらの値を元に 動きの終点が取得できます 簡単ですね

FaceTimeでのパン操作の コーディング例です

“UIScrollView. DecelerationRate”を使っています 一般的なスクロールの感覚に 合わせているわけです それを使って 予測を行っています PIPの速度と減速率から PIPの位置を仮想し―

得られた位置から 最寄りのコーナーを特定します そしてそこに PIPを送ります

今のように移動の終点を 算出する際に― 予測を行う手法は とても便利です ジェスチャの推進力を 尊重できます この予測の関数は “位置”だけでなく― “スケール”や“回転” ２つの組み合わせにも使えます かなり万能なツールです これを使えば 動的モーションが 自分の延長のように 感じられるはずです

以上が動的モーションを 意識した設計です ビヘイビアと インタラクションは シームレスであるのが 理想です

みんなが持っている 物理的な直感を頼りましょう 子供の頃に学んだ “物体はどう動くか”こそが 動的なインターフェイスの 要となります

弾む動きは 目的を持って使い― 本当に必要か 見極めてください 何か特徴や感触を 付け加える際は 実用性を考慮します

最後に 推進力の予測でしたね 位置以外にも 使える情報を全て使い ユーザの意思に沿った モーションを実現させましょう

もう少し深く 滑らかなレスポンスについて 同僚のマーコスが 掘り下げます ありがとうございました (拍手)

良かったよ

ありがとう ネイサン

こんにちは マーコスです 滑らかさがいかに大切かを これまで見てきました その多くは インタラクションから生じます そこで 私からは― ジェスチャの検出方法を 紹介したいと思います 続いて効果的なジェスチャの 設計方法を説明します

まずは主要なジェスチャの 設計ポイントを見てから― インタラクションの 原則についてお話しします ジェスチャが複数の時の 処理法も説明します

手始めに 極めてシンプルな タップの設計です “タップに設計など 必要ない”と思いますよね？ 意外とそうでもないんです ボタンのタップを例に 見てみます おなじみの計算機ですね

タッチされた瞬間に ボタンはハイライトされます ボタンが問題なく 反応している証しです でも指を離さないと タップは検知されません

タップ領域には 余裕を持たせています タップが より快適になりますし 誤操作によるキャンセルも 回避できます

チャンも言っていましたが 操作途中で考えが 変わることもあります タップ領域の外で指を離せば タップは中止できます

逆に スワイプで領域内に戻れば タップ操作は継続されます

次のジェスチャは― スワイプです iOSの主要なジェスチャの １つであり スクロールを始め 多くの動作に使われています しかし 使い道や呼び方に関係なく 根本的な原則は同じです 画像のドラッグに スワイプを使った例です 画像に触れた瞬間 インタラクションが始まります

でも このジェスチャが スワイプだと認識させるには 一定の距離の移動が必要です “ヒステリシス”と呼ぶ距離で iOSでは10ポイントです

この距離に届くと スワイプが始まります この時 スワイプの向きも 判断します 横か縦かといった具合です 例は挙げませんが 時として非常に役立ちます

スワイプが検出され 開始位置が定まりました 以降は指と画像が 一緒に動く必要があります ドラッグポイントは 画像の真ん中ではありません ドラッグ中は 位置を記録しておきます 終了時に 最終位置は使いません 動きの履歴を使って 滑らかな動きを実現します

大事なのは 指の動きとコンテンツを １対１で連動させることです コンテンツがジェスチャを 離れてはいけません iOSの原則の１つです スクロールできるデバイスは 快適ですね

１対１の連動が途絶えれば 私たちは瞬時に それに気付きます スクロール中なら― それはコンテンツの 終わりを意味します

タッチスクリーン以外でも 同じです Apple TVのインターフェイスが 良い例です 指で直接 触れなくても大丈夫 操作とインターフェイスが 連動していれば 快適な動作が 実現されるのです

もう１つ大事なのは 常に フィードバックを行うこと あらゆるインタラクションに 言えることです フラッシュライトボタンを 再度 見てみます 指の圧力に応じて 大きさが変化します システムがジェスチャに 反応していることと― 強く押せばライトが つくことを教えています

Apple TVのフォーカスエンジンも 良い例です Siri Remote上の動きは 常に画面に反映されます おかげで 選択中のアイテムや― 選択対象の変化 動きの向きも ひと目で分かります

ジェスチャ中は必ず 反応を返す必要があります そのため ジェスチャの検出が遅れる― UISwipeGestureRecognizerの 使用は避けましょう 代わりに UITouchや 他のジェスチャリコグナイザを 使いましょう 位置 速度 強さなど あらゆる情報を使うためです

でも 大抵の場合 ジェスチャは複数ですよね 充実した アプリケーションほど ジェスチャが多くて複雑です

例えばScroll Viewを使う時 大抵 他のジェスチャも 併用します この例では 連絡先のスクロールや プレビューが可能です

フィードバックなしに 最後のジェスチャを待つと 遅延が生じます もはや レスポンシブとは言えません

だから ジェスチャは 開始時点で全て検出し― 意図が読めた時点で 不要な分を止めます

連絡先の例です １件押し始めてから スクロールしたくなりました 直ちに3D Touchを中止し ジェスチャを切り替えます

ただ 防げない遅延もあります 例えば ダブルタップと タップが共存する場合です どちらか判断するため 待つしかないのです

この例では ダブルタップで 拡大や縮小ができる分― タップによるメニュー表示が 約0.5秒遅れています こういったケースも 考慮しつつ 可能な限り 遅延を防ぐ努力をしましょう

まとめます 主要なジェスチャの 設計法を説明しました コンテンツと指の動きは― １対１で連動させるのが iOSの原則でしたね フィードバックは 常に行い― ジェスチャが複数の時は 全て始めから検出します

それでは そろそろ チャンにマイクを戻します ありがとうございました (拍手) お疲れ

皆さん ただいま 滑らかでインタラクティブな インターフェイスの 作り方を見てきました だいぶ分かってきたところで ここからは fluidインターフェイスの 使い方です まずは“教える”ことです ジェスチャ中心の インターフェイスの弱点は 瞬時に操作方法が 見えないことです 優しく魅力的な形で 賢くユーザを導く必要が あるのです

１つは“視覚的な ヒントを示す”手法です そこら中で見かける この物体 どこにあっても 上手に使えますね ひと目で使い方が 分かるからです

iOSでも 同じことを目指しました 例を挙げます スクロール画面では あえて最後を隠し― 続きの存在をほのめかし 下へ誘導しています 複数ページのコンテンツでは インジケータを使って ページの存在を示します 画面をつかんで スライドできることを示すには このようなバーを使います

インタラクティブな要素を “別の次元で示す”のも手です １つ上の平面に引き上げて 他の要素と差別化します オン／オフスイッチが 良い例です 白い丸は動かせると 示すため 丸を少し浮かせました 視覚的に分離することで 性質を示したのです インターフェイス上の 浮き上がった要素は “動かせる要素”なわけです

次です 使い方を“教える代わりに 見せる”手法もあります アニメーションで ジェスチャを伝えるのです Safariの例です Safariでは タブ左上の“X”を押すと タブが左にスライドして 消えます “スライドで消せる”と ヒントを与え ジェスチャを 習得させることができます アニメーションと ジェスチャを並べれば “お手本”を示せるのです

あとは “説明する”手法ですね 使い方を ストレートに教えるんです この方法は多用を避け― 頻出するジェスチャにのみ 使いましょう そして 一度使ったら 使い続けて効果を高めること レアなジェスチャに使っても 記憶に残りません ここで… 楽しみと遊び心について 少し話します fluidインターフェイスが もたらす― 重要な産物だからです でも それらが得られるのは― 今日たくさんご説明した fluidインターフェイスが 確実に実現できた時だけです インターフェイスとの 一体感が生まれてくると 学んでいる意識が消え 発見する喜びを感じ始めます 遊びながらインターフェイスを 発見できたら最高です とにかく“楽しい”はず 人は何かで 遊ぶのが大好きです 天性の娯楽好きな素質を 利用すればいい “遊び”こそが心と インターフェイスをつなぐ鍵です まずは とにかく 作ってみることです 自分で遊んでみて 人が遊ぶ様子も見てください そして何を追加すれば より良くなるか考えるんです

遊べるインターフェイスは 多くの可能性を秘めています

道具としての滑らかさは どのように構築するのか？ インタラクションを適切に 設計する必要があります

まず 両者の関係は 切り離せないものにします インタラクションを 後付けにするのではなく― インターフェイスと 同時に設計します デモを作ることも大切です 人に見せる目的もありますが インターフェイスの本質を 自ら確認するためでもあります

見本を用意しておくことで 作り込みながら 新たな発見もできるのです iPhone Xも 同じ手法で設計しました 実装への 目標設定にも役立ちます 優秀なエンジニアが多い Appleだからこそ なせる技ではあります

見本は本当に貴重な存在です 自分で作ったものが 実際はどんな感じか 知ることができるのです それって実はすごく 大事なことだったりします

さらに… 形になったアプリケーションは コピーされにくく 独自性も守られます

ところで…

みんな Multi-Touchが 大好きですよね 触るだけでコンピュータと やり取りできる 素晴らしいですよね

本日お話した指針は いずれも― iPhone Xの設計の 中核を成すものです 操作に機敏に反応する インターフェイス 動的モーションと 洗練されたジェスチャ fluidインターフェイス そのものなのです インターフェイスが 思考や動きと一致すると 不思議なことが起きます コンピュータの感覚は 消え― 自分の延長のように 感じ始めます

これからの インターフェイスには 人間らしさを取り込むことが 大事だと思うんです それは決して 負担ではなく― 楽しみと喜びに 満ちたことなのです ありがとうございました (拍手)