見出し画像

手触りのいい UI を Web で実現するために実装者ができることを考える

seya

「手触りのよさにこだわってます！」
なんてフレーズはよく聞きますが、具体的に "手触りのよさ" とはなんなのか、実装者としてはどんなところにこだわるべきなのか、ふと気になったので自分なりの考えをしたためてみました。

手触りのよさって何？

まず言葉の定義がふわふわしているのでここをはっきりさせてみます。
主観的に普段自分がスマホなりを使っていて手触りがいいと感じる要素をあげてみると次のような要素が思い浮かびました。

1. パフォーマンスがいい
レンダリングが重くて動作が遅くなったりしないことや、なんらかアクションを起こした時(なにかをタップしたりした時)にそれに呼応した画面の変化がすぐに行われることが望ましいです。

2. 迷わない
画面の変化が起きた時に、自分が求めている情報がどこに表示されているかすぐに分かることを指します。自分が起こしたいアクションがどこにあるかすぐ分かるか、というのも重要です

3. 直感的
アクションを起こした時の「こうなるだろう」という期待と実際の結果にギャップがないことを指します。UI のお作法を踏襲/不必要に逸脱しないようにするのはユーザの慣れを利用する上で重要です

4. 最小のステップで行える
そのアプリケーションを通じて達成したいことが余計なタップを行わずに達成できることを指します。

5. 触っていてなんか気持ちいい
触っていてなんとなくクールな印象を与えてくれるだとか、審美的な価値を指しています。

まとめると「ストレスなく、自分の思い通りに動くこと」と言えるのではないでしょうか。実現するためにはデザインとインタラクションの実装両方面関わってきますが、それを次の項で考えていきます。

実装者としてできること

では定義をしたところで、実装者としてこの手触りの良さを実現するためにどう貢献できるかを考えていきたいと思います。

デザインにフィードバックをする
これは "実装者" であることとは関係のない話なのですが、作る段階で違和感を感じた部分はどんどんフィードバックしていくといいでしょう。
手触りの良さを実現するには、実装以前のデザインが重要になります。あるページを作る時に、そのページが使われるユーザの文脈に応じて「どんな情報がどんな優先度で表示されているといいのか」や「どんなアクションが実行できるのか」を整理して UI を設計する必要があります。
これをしっかり行うことによって、ユーザが迷いづらく

究極はユーザテストなどで確認するものだとは思いますが、作り手目線でも感じた違和感はフィードバックしていきましょう。

細かい状態の表示にこだわる
これは主に Loading の状態のことを指しています。
Web という仕組みの特性を活用する以上、ある程度操作に対してレイテンシーが存在することは避けられません。ですが、ユーザのアクションに応じてすぐにフィードバックを返さないとユーザは不安にかられてボタンを連打したりしてしまうかもしれません。
なので Loading 中などの細かい状態を手を抜かずに対応することが実装者としては大切になってくるでしょう。その他にも中途の状態のフィードバックにこだわってユーザに常に安心感を抱いてもらうのが大事だと思います。

トランジションのアニメーションにこだわる

これは昔他の記事でも書いたことがあるのですが、私はアニメーションを作る理由の多くは「Cognitive Loadを減らすこと」だと考えています。
https://qiita.com/seya/items/8ffe954a6342c930b430

もっと簡単に言うと、画面の状態が変わった時に何がどう変わったのかユーザが頑張って探さなくても瞬時に理解できることですね。

アニメーションがあることによって「自分の起こしたアクションがどんな変化を起こしたのか」を画面を見ているだけで把握することができます。これによってユーザは余計なエネルギーを使わずに、そのアプリケーションで達成したいゴールにフォーカスすることができます。

また、最近読んだ記事なのですが、こういったインタラクションは実際にユーザのタスク遂行の時間を減らしてくれる模様です。

> The users of the static prototype took, on average, 8.6 seconds and 2.9 interactions to click on the checkout button, whereas the users of the animated prototype took, on average, 6.6 seconds and 1.9 interactions. This translates to an average improvement of 21% with regards to the completion time and a reduction of 30% with regards to clicks.

これはトランジションがあるおかげでユーザが元に見ていた要素がどこに移動したのかを探さなくても把握できるからでしょう。細かいトランジションがきっちり実装されて、あまり考えずに使える状態を実現できれば手触りの良さも向上できるのではないでしょうか。

あとは追加で思っていることとして、ページ遷移のアニメーションがないのが Web がアプリと比較してヌルヌル感が足りない原因なんじゃないかと思っています。個人的にこの辺も Web でのシンプルな実装方法模索していきたいです。

ちゃんと実機で確認する
スマホを対応する場合は特にですが、実機で触りながら確認してみると思ったより使いづらい部分などが発見できます。
機能的な観点でのテストでも実機テストは行うとは思いますが、こういった触り心地をブラッシュアップするためにはユーザが実際に触る環境で行うことが重要です。

参考になりそうなもの

今度ちゃんと全部見る
https://www.youtube.com/watch?v=LJ_32jfx6Hc


この記事が気に入ったらサポートをしてみませんか？