自己帰属感を意識した GUI の実装を心がけること

usagimaru
usagimaru
May 13, 2016 · 3 min read

「融けるデザイン」で書かれている自己帰属感とは、ユーザーの動作の結果がほぼリアルタイムに近い形でユーザー自身にフィードバックされ、現実世界と画面の向こう側の世界との境界がなくなり、その結果として画面の映像が身体の一部のように感じられるあの感覚のことだと認識しているが、スマホのようなタッチUIでは特にこの感覚をデザインすることがユーザー体験の品質を決定するものになると考えている。

例えばiOSのUIScrollViewは自己帰属感を得られるUIの代表だ。60FPSで描画されるスクロールアニメーション、端に到達したらバウンスバックしたり、指が離れたらその瞬間を初速として滑らかに減速してゆくインタラクション、そしてパフォーマンスを上げるためのセルの再利用機構など、これらすべてがスクロール時の自己帰属感を得るために不可欠な要素となっている。驚くことにiPhoneの第一世代(OS X iPhone)からこれが実装されていたというのだから、Appleのデザインとエンジニアリングを融合した開発姿勢は圧倒的すぎて本当に頭が上がらない。そして9年近くたった今でも、WebView含めUIScrollViewはiOSのGUIの基本要素になっているし、細かいアップデートはあったにせよ基本的な部分は当時から変わった様子はない。iPhone自体のハードウェア性能が比較的低くてもとても滑らかな動作、いわゆるぬるぬる感が得られる所以はここにある。iOSのユーザー体験はUIScrollViewがあってこそのものと言っても過言ではない。

iOSアプリに携わる者としては、ただこれを賞賛してありがたがるのではなく、その設計思想と正しい使用方法を理解した上でアプリに適用していかなければならない。しかし残念ながら自己帰属感の重要性を理解せずになんとなくのUIデザインを行ったり見た目だけのアニメーションを実装してしまっているようなプロダクトが多いのも実情である。


『スワイプしたらそれに合わせて画面がスライドしてビューが切り替わる』

という要件を実装するとき、ダメな開発現場ではこうやってしまう。

まずスワイプジェスチャのイベントを判定する処理を実装する。タッチ開始時点から終了時点までの移動距離や速度やベクトルなどの数値を適当な閾値で抽出して、そのイベント終了をトリガーにしてビューがスライドするアニメーションを改めて描画する。

このアニメーションは指に吸い付くような動きをするわけでもなく、特定の指の動きをただのコマンド入力代わりにして映像を動かすだけのものになってしまっている。PCアプリで特定のマウスジェスチャを入力したらコマンドを実行するような機能があったりするが、あの感覚だ。もっとiOS的に言うとUIPanGestureRecognizerを使わない実装である。意外とこれができていないアプリは多い。そしてこれだけで自己帰属感は失われてしまう。GUIのぬるぬる感が無くなるのはスマートフォンのアプリにおいては致命的と言える。

無駄なアニメーションというのは例のような実装の不手際で無意味化しているものや(私はほぼバグだと認識している)、見た目の格好よさに惑わされて目的を見失っているものを言う。そうではなく、シグニファイアをデザインするため、自己帰属感をもたらすため、しっかりと目的を持ってアニメーションをデザインしなければならない。そしてこれはエンジニアリングが大いに関係してくるところなので、デベロッパーこそがこの概念をよく理解する必要がある。

usagimaru

Written by

usagimaru

Interface Design / Interaction Design / macOS / iOS / Sketch Plugin 🇯🇵