Appleが主催するWWDC2018の中で「Designing Fluid Interfaces」というセッションが発表されました。
Fluid Interface（フルイドインターフェース）をそのまま日本語にすると、「流れるような接点」という意味になります。
人間とデバイスの接点を上手くデザインすることによって、流れるような操作性が生まれ、使いやすさや使い心地の向上に繋がり、優れたユーザビリティを提供することができます。
今回は、AppleがiPhone XのUIデザインでも重要視したFluid Interfaceについてご紹介していきます。
INDEX
Fluid Interface(フルイドインターフェース)とは
Appleが主催するWWDC2018の中で「Designing Fluid Interfaces」というセッションが発表されました。その中で、AppleのデザイナーがFluid Interfaceについて詳しく紹介しています。
セッションの内容は、AppleのWebサイト上で公開されているので、気になっている人はぜひチェックしてみてください。
思考の拡張（Extension of your mind）
Appleのデザイナーによるセッションの中で、「思考の拡張（Extension of your mind」という言葉が使われています。インターフェイスが人間の思考や動きに追いついた時、そこにデバイスを操作しているという感覚が消え、自分の体の一部のように扱うことができるという考え方です。
「思考の拡張」だけでなく、「現実世界の拡張」というワードもセッションの中で登場しています。
例えば本をめくるとき、私たちはページを指で掴み、横書きの本であれば手を右から左へ動かすことによって次のページへ移ります。
その動きは様々なスマートフォンアプリの中で取り入れられています。例えば、iPhoneの「写真」アプリでは、写真の表示中に左右へスワイプすることによって、前後の写真を表示することができるようになっています。
つまり、「ページをめくる」という現実世界の動作をデジタルデバイスの中で再現しているのです。
デジタルデバイスの中に現実世界の拡張という考え方を取り入れることによって、より直感的に、分かりやすく操作を行うことができます。
より直感的に、流れるような操作性を実現することによって、人間とコンピューター距離が限りなく近づき、「思考の拡張」が実現します。
ホームボタンとホームバーの違い
iPhone8までは当たり前に使われていたホームボタンですが、iPhone Xからはホームボタンが撤廃され、その代わりに「ホームバー」が登場しました。
これまでホームボタンで行われていた「ホーム画面に戻る」という動作は、ホームバーを上にスワイプするというアクションに置き換えられました。
それに合わせて、iPadでもiOS12から「画面下部を上にスワイプ」というアクションによってホーム画面を押した時と同じアクションが行われるようになり、2018年10月に発表されたiPadからはホームボタンも消えてしまいました。
ホームボタンを押すと、アプリの画面が縮小し、ホーム画面が表示されます。そこに中間の概念はなく、ボタンを押したらホーム画面へ戻る。押さなければ何も起きない。という0か1かのアクションを取ることになります。
それに対して、ホームバーは画面の下端を上へスワイプすると、徐々に表示中のアプリが小さくなっていき、一定幅を超えた所で指を離すとホーム画面へと戻ります。
アプリを閉じようと思って下から上へスワイプしたタイミングで、「やっぱりやめよう」と思ったら指を下へ戻すとそのアクションをキャンセルすることができます。つまり、ホームバーを使ったアクションでは、0か1かではなく、その中間で動作を止めたり、引き返したりすることができるようになりました。
人間の考えるスピードにデバイスのスピードがついていけるようになった時、そこにデバイスを操作しているという感覚が消え、「現実世界の拡張」が実現します。
UIデザインに与える影響
では、デザイナーはFluid Interfaceをどのように取り入れていかなければならないのでしょうか。もう少し詳しく見ていきましょう。
最適な操作方法を考える
スマートフォンでは、様々な操作によってアクションを取ることができますが、分類すると下記に分けられます。
- タップ
- ロングタップ
- スワイプ
- ピンチイン
- ピンチアウト
上記以外にも、端末の傾きや振動なども取り入れることができるでしょう。スマホ上で何かアクションを行う時、デザイナーは様々な方法でその手段を提供することができます。
どのような操作がどのようなアクションに繋がるのべきなのかを考えることによって、流れるようなユーザー体験を提供するためのヒントが見つかるかもしれません。
先程も紹介したように、従来のiPhoneでは物理的なホームボタンが備えられており、それを押すことでホーム画面に戻るというアクションを実現していましたが、iPhone X以降の端末ではホームバーを上にスワイプすることによってホーム画面に戻るというアクションを提供しています。
また、上記の中でも特に重要となるのが「スワイプ」による操作です。
物を掴んで、離すという普遍的な行動をスマホの世界の中で再現することができ、スワイプを上手くデザインに活用することによって、Fluid Interfaceが目指す流れるような使い心地を実現することができるようになります。
フィードバックの重要性
現実の世界で物を持ち上げる時には、徐々に手にかかる重さが増えていき、ものが持ち上がるタイミングでその重さは一定になります。
このように、私達は無意識のうちに色々なフィードバックを受けることによって、様々な行動を行っています。
iPhone Xでホーム画面を表示する時に、ホームバーを上にスワイプすると徐々に画面が小さくなっていくことで、「ホーム画面を表示する」というアクションに対してなめらかなフィードバックを与えています。
また、スクロールできる領域の最後まで達した後、さらにスクロールしようとスワイプ操作を行うと、コンテンツが画面の外からバネで引っ張られているかのようにスクロール速度が低下して、指を離すと元の位置まで引っ張られて戻されます。
このアクションによって、これ以上スクロールすることができないということを、人間に直感的に伝えることができます。
このように、スマホの世界の中でも流れるようなフィードバックを与えることによって、現実世界が拡張したかのうような、流れるような操作性を生み出すことができます。
まとめ
ここまでFluid Interfacesについてご説明してきましたが、どうすればユーザーにとって使いやすいデザインにすることができるかを考えるということが最も重要です。
そのサービスに慣れている人が使いやすいようにデザインを行うことは重要ですが、初めてそのサービスに触れる人でも操作方法が分かるようにデザインしなければ、ユーザーが付いていくことができなくなってしまい、結果として離脱の原因となってしまいます。
ダイアログを閉じるという操作を例にすると、ダイアログの範囲外をタップすることで閉じることができる他にも、「✕」ボタンを用意して初めてそれに触れる人でも分かりやすいデザインを提供することができます。
iPhoneの写真アプリでも、画像をスワイプして一覧画面へ戻るという選択肢の他に、画面左上に戻るボタンが用意されていて、それをタップすることによって同じアクションを取ることができるようになっています。
新しいインターフェイスの考え方を取り入れていくことはもちろん大事ですが、過渡期には従来型の操作方法も提供していかなければ、ユーザーを置いてけぼりにしてしまい、「使いづらいサービス」というレッテルをはられてしまうことになってしまいます。
大事なことは、「使いやすいUIデザイン」とは何かを考えることです。サービスのUIデザインを行う際には、最新のインターフェイスデザインのトレンドを取り入れる時には、「それがユーザーにとって使いやすいか」を考えてデザインするようにしましょう。
