【読書録】縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニック
UI制作はGoogleのMaterial DesignやAppleのHIGなどガイドラインが設けられており、それを参考にして作られることが多い。さらに情報設計や構成を練って使いやすいUIに落とし込んでいく。
いわゆる「お手本」について触れている本は多いが、本書はあまり意識されることのないUI制作のテクニックやTIPSがまとめらている。著者のデザイナーとしてのノウハウがふんだんに織り込まれているので、WebサービスのUIデザインをもっと良くするためのヒントになるはずである。
一通りのUIの型は身についたと思うので、小さな工夫とはどのようなものがあるのか気になり本書を読んでみることにした。
本書の構成は以下のとおり。
第1章：色、文字、動きによる見せ方の工夫
第2章：機能表現の工夫
第3章：UIコンポーネントの使い方による工夫
第4章：ユーザーの行動への配慮
第5章：画面と画面遷移の設計
第6章：コミュニケーションとツール
第7章：考察、雑感
この中の「待ち時間」における工夫が興味深かったので紹介しようと思う。
待ち時間をどう表現するか？
アプリやWebページの動作完了には多少の待ち時間が必要になることがある。完了までの時間がわからない状態で動作が処理中であることを示すUIにはスピナーとプログレスバーがよく使われる。
この２種類のUIの使い分けは、一般的に人が待機時間がわからない状態で待てる時間である４秒を基準に分けると良い。もし事前に４秒以上の処理時間がかかることがわかっているのならプログレスバーを使う。
後者の場合、残りの待機時間がわからずとも処理完了までの経過が視覚的にわかるのでユーザーのイライラを軽減させることができる。
なお待機時間は機種や通信環境に左右されるため、なにもできない時間が長引くことはユーザーの不安を招く。
そのため、処理のキャンセルをユーザー自身が行えるようにすることや、サービス側で一定時間が経過したら自動的に処理をキャンセルして、なぜ終了できなかったかのアドバイスを与えるのも良い。
待ち時間の有効活用
機能が許すのなら待機時間に何かしらユーザーが退屈しないような工夫が求められる。
ダウンロード中に他のコンテンツを閲覧できるようにする（バックグラウンド処理）、ちょっとしたミニゲームを用意するなど、工夫しがいがある。
待ち時間を短くするには
「ユーザーにとっての」待ち時間を短くするには、
実際の待ち時間を減らす
実際の待ち時間は減っていないが、減ったように感じる
の２つが考えられる。前者はエンジニアの出番であるが、後者はデザイナーがオーナーシップを持ちやすい。
たとえば、アプリ起動時にコンテンツが表示されるまでに空の状態のコンテンツを表示させるスケルトンスクリーンがある。スピナーやプログレスバーを表示させるほどの時間でない場合でも有効である。
読み込み時間を細分化させて、いまどのような処理が行われているのか伝えるのも有効である。
Googleフォトの例では今アップロードしている具体的なファイルが見えているので、もし処理に時間がかかるなら「長い動画だから時間がかかっているのかもしれない」、「遅ければ分けてアップロードしよう」という認識を与えることができる。
Nintendo Switchの例では、処理の手順と現在地が明確なため処理時間が長くなったりエラーになったりした場合でも原因を特定するのに役立つ。
待ち時間の理由がわかれば不安も消え、ユーザーの行動すら変えることもできる。
この他にもさまざまな事例を参考にして、UIにおける工夫の背景や思想を紐解いているのでぜひ本書を一読してもらいたい。
自分のようなUI / UXデザイナー志望者が読んでも興味深く、UIの工夫についての知識が相当に深まった。手間もそんなにかからない工夫も多かったので自分のデザインにうまく落とし込んでいきたい。
なお、本書の内容は著者が「WEB+DB PRESS」上で連載していた記事を加筆修正したものに新規の記事を追加したものである。元の記事は現在でも閲覧可能である。
この記事が気に入ったらサポートをしてみませんか？