スマートフォン時代のユーザビリティの考え方

第5回 イライラさせないスマートフォンサイト/アプリにするには

この記事を読むのに必要な時間:およそ 5 分

前回はネットワークの速度の問題と,それをユーザーに感じさせないようにデータサイズを減らしたり,通信回数を減らすなど,速度を向上させるための手法を挙げましたが,できる工夫はほかにもあります。それは「遅く感じさせないようにする」ということです。つまり,実際には時間がかかる処理を(仕方なく)実行しているのだけれど,ユーザーが感じる「遅さ」をなくしてあげる,あるいは低減させてあげる工夫によって,ユーザーが感じる「心地よさ」を大きく変えるのです。今回はそこに注目しましょう。

ネットワーク通信で待たされる感覚を軽減する2つの方針

前回見た方法は,基本的にはネットワークでやりとりする回数やデータの量を減らし,それによって速度を向上させるというものでした。しかし,どれだけ努力しても,ネットワーク上にあるデータや機能を利用するウェブサービスやスマートフォンアプリケーションでは必ず何らかのやりとりが発生してしまい,ゼロにすることはできません。したがって,128kbps制限を受けてしまったり,そもそも通信環境の悪い場合の使いづらさはどうしても生まれてしまいます。

これはどうしようもないことなので,実際のデータ量を減らすことのほかに,ネットワーク通信が発生してしまうことを前提に,その中でいかにユーザー体験をの質を低下させないかを考える必要があります。

ネットワーク通信に時間がかかった場合にユーザー体験の質を下げてしまう原因は,⁠やりたいことを行う際に,ネットワーク通信のせいで待たされてしまう」からです。それを軽減するための方針は,大きく分けて2つあります。

  • 待たせ方を工夫して,待ち時間を短く感じさせる
  • ネットワーク通信のタイミングを工夫して,ユーザーが気づかないうちにネットワーク通信を行う

プログレスインジケータで処理中であることを示す

まずは,待たせ方を工夫して待ち時間を短く感じさせる工夫を見ていきましょう。

1つ目は,プログレスインジケータを使って,きちんと通信中であることを表示してあげることです。プログレスインジケータとは,たとえば以下のように「通信中...」といったダイアログを表示するなど,⁠今ネットワーク通信をしているので待ってね」とユーザーにわかりやすく伝えるもののことです。

プログレスインジケータの例

プログレスインジケータの例

たとえばiOSでは,"SVProgressHUD"というとても有名なライブラリがあり,通信中などはこれを表示するアプリケーションをよく見かけます。iOS 7の登場以降は,もう少しiOSよりのMRProgressなども登場していますが,こうした処理中であることを表すインジケータを表示しているケースが多いと思います。ちなみに,HUDは⁠Head-Up Display⁠の略で,もとは戦闘機で操縦士の視界に直接情報を表示するものを表す軍事用語です。今では乗用車でも使われますし,コンピュータゲームなどでは画面上に表示するメニューやステータス情報を指します。

このようなインジケータですが,アプリの世界では比較的よく用いられるものの,ウェブの場合は活用されていないケースがまだ多いように思います。ページ遷移がある場合はブラウザが自動でインジケータを表示してくれたりしますが,非同期通信の場合は,たとえば「保存」のボタンを押しても特に画面上に変化がなく,通信が終わって突然画面が変換する,などのパターンもよく見かけるのではないでしょうか。しかし,それではネットワーク通信が遅かったりすると,ボタンを押しても何も起こらないように見えてしまい,ユーザーとしては気持ちが悪く,不安な気持ちになってしまいます。

2種類のインジケータの表示を使い分ける

インジケータの表示の仕方には2種類あります。

  • アプリのように,HUD形式にする
  • ボタンのラベルが「保存中...」などに変化して,横に小さなインジケータが回転する

どちらを使うべきかは,通信の最中にユーザーがほかの作業を行うことができるかどうか次第で決まります。

HUD形式でモーダルダイアログ的にプログレスインジケータを表示する場合は,ほかの作業ができないようにするべきです。たまに,HUDが出ているにもかかわらず,後ろのボタンが押せてしまうアプリなどを見かけますが,HUDはほかの要素を覆うように表示されているので,操作できてしまうのは直感的ではないですし,誤動作を引き起こしかねません。

一方で,ボタンにインジケータが出るなど,インジケータが画面全体を覆わないものは,その通信中もほかのユーザー操作を行うことができる感じがするので,そのようなタイプの通信に利用すべきです。

ウェブで使われる送信中/読み込み中を表すインジケータの例

ウェブで使われる送信中/読み込み中を表すインジケータの例

これの例はLadda UI for Bootstrap 3ですが,このようにかんたんにローディングボタンを組み込めるCSSのライブラリも存在しています。

ユーザーがなにか行動をしたら,きちんと反応する

いずれにせよ,ユーザーの視点に立ってみると,ボタンを押した時に反応があるのとないのでは,大きく違いがあることは容易に想像できるでしょう。したがって何らかの形でプログレスインジケータを表示することはとても重要です。最悪なのは,通信中になんのインジケータも表示されないのに,ほかの作業ができなくなり,画面上のどこをタップしてもうんともすんとも言わなくなるという状況で。それは,最悪のユーザー体験と言えます。

「ユーザーがなにか行動をしたら,きちんと反応する」というのは,ユーザー体験を向上させる重要なポイントの1つです。たとえば,ボタンやその他クリック可能(スマートフォンの場合はタップ可能)な場所を押すとちゃんと押した感じになるとか,何らかの処理中でユーザーが待たなければならない時には「今は待ってほしい」後どれくらい待てばいいのか」といった情報をきちんと表示することは,ネットワーク通信だけでなくとても重要です。

できれば「後どれくらい待てばいいのか」を,⁠40%」⁠60%」などの%で示すなどするほうが親切です。ただし,ネットワーク通信の場合は,後どれくらいかかるのかが計算できない場合も多く,具体的な数値で示すのは難しいかもしれません。ある程度概算で表示してあげることもできますが,ネットワークの速度が思ったより遅かったりして,⁠90%まではどんどん進むのに,90%で処理がピタッと止まって,それ以上は全然いかない」といったことになると逆効果な面もあります。たとえば,ダウンロードするファイルが10個あって,⁠3/10 ダウンロード完了」のように表示できるのでもなければ,慎重に対処する必要があります。

インジケータをきちんとアニメーションさせる

具体的な進捗を表示しない場合でも,やったほうがいいことがあります。それは,⁠インジケータをきちんとアニメーションさせること」です。アニメーションしていないインジケータとアニメーションするインジケータでは,アニメーションしたほうが明らかに安心感もあり,ユーザーとしても待ちやすいことは直感的にもわかると思います。

そして,アニメーションする場合も,早くアニメーションさせたほうがなんか処理が早く進んでいる感じがするという研究結果もありますので,そのあたりもふまえてインジケータを表示するようにしましょう。

なお,インジケータ以外にも,ユーザーの気を紛らわすために,アプリケーションのTipsや広告などを表示するケースもあります。PCだと航空会社の空席検索などで見かけますが,スマートフォンの場合はFlashが使えないとか,そもそも画面サイズが小さいなどの問題もあるので,あまり流行っていないのかもしれません。

著者プロフィール

水野貴明(みずのたかあき)

ソフトウエア開発者兼技術系ライター。飽きっぽい性格だがプログラミングだけは小学3年生でに初めて触れて以来飽きることなく続いているのでつくづく性に合っていると感じてる。最近はウェブサービスやゲームのサーバサイド,スマートフォンのアプリケーション開発などが中心。訳書に『JavaScript: The Good Parts』(オライリー・ジャパン),『サードパーティJavaScript』(KADOKAWA/アスキー・メディアワークス)など。保育園児の息子とともに眠り,早朝起きて仕事をする生活を実践中。

URL:http://takaaki.info/

コメント

コメントの記入