どうも上かるびです。
この間「UXデザインの法則」という本を読んだのですが、コーダー・エンジニアとしても学べること・知っておくべきことがいくつかありましたのでご紹介いたします。
ちなみに東京都内のジュンク堂書店でオライリーの本を買うと、オライリーのグッズを１冊につき１つ貰えますよ！
コーダー・エンジニアも知っておきたい３つの「UXデザインの法則」
特に勉強になったものを３つピックアップしました。
その１：スマホでのタッチの正確性について
スマホなどのボタンについて、要素同士は〇〇dp空けないといけない云々、というお話は聞いたことがあるかと思います。
そのスマホでのタッチについて勉強になったのは、
人はスマホの中心部を見たり触ったりすることが多く、中心部がもっとも（タッチの）制度が高い領域になっているということです。
（本の図は引用できないため、本を参考にイラレで作った図です↓）
スマートフォンでのタッチの正確性（スティーブン・フーバーの研究に基づく）
確証はないけどハンバーガーメニューは右上でも右下でも大差ないってことなのかもね…
その２：404ページについて（ピークエンドの法則）
アクセスしようとしたページが見つからない場合、ユーザーはイライラしてしまい結果的にサイトやプロダクト全体にネガティブな印象を持ってしまう可能性があるそうです。
Webサイトでのユーザージャーニーの観点では、対策として404ページが上げられます。
404ページにユーモアがあれば、逆に顧客との関係構築に利用できる可能性もあるとのこと。
以下、本書で挙げられていた404ページです。
この他にもクロネコヤマトの404ページなども有名ですよね。
GoogleやAmazonなどの大手企業もユーモアのある404ページを準備していることから、Webサイト構築の上で欠かせない要素になっているのかもしれません。
その３：応答を0.4秒以内にする（ドハティの閾値）
スケルトンスクリーン
Facebookのスケルトンスクリーン
コンテンツを読み込んでいる時に、スケルトンスクリーンにすることで、サイトの読み込みを速く見せることができるそうです。
またスケルトンスクリーンが各要素の表示領域を事前に確保することにより、読み込まれる際の画面のガタつき（レイアウトシフト）を防ぐこともできますね。
Zennで調べてみたら実装方法を投稿されている方がいらっしゃったので合わせてご紹介します。（Reactです）
ブラーアップ
こちらは画像の読み込みに特化した対処法です。
最初に極小サイズの画像を読み込んでおき、大きな画像が読み込まれたらそれを置き換えていくという方法です。
解像度の低い画像を拡大する時にノイズが目立ってしまうので、ガウスぼかしを適用するのが一般的みたいです。
こちらもスケルトンスクリーン同様、画像の高さを担保することでレイアウトシフトも防げます。
アニメーションの活用
パーセンテージのインジケーター、プログレスバーなども待ち時間の体感速度を減らすことができるそうです。
“The Importance of Percent-Done Progress Indicator for Computer-Human Interfaces”
↓
こちらで原文読めます。
- 処理が進んでいることが伝わると、人は安心感を覚える
- 待たせている間も、興味を失わず見続けてもらえる
- プログレスバーの動きを意識すると、待っているということを忘れ、体感の待ち時間が減る
上記を意識すればプログレスバーでなくてもいろんな手法で体感時間を減らせそうですね。
iPhoneのアップデートとかそういう仕様になってるよね。さすがや！
本書のこちらのセクションの「結論」に書かれていたことが最高だったので大文字で紹介して終わりたいと思います。
パフォーマンスは単にエンジニアが取り組むべき技術的な課題ではなく、デザインの本質的要素だ。プロダクトやサービスを利用している人が可能な限り速く、そして効率的にタスクを実行できるよう手助けすることはデザイナーの責任だ。
コメント