モバイルサイト構築のユーザビリティいろは

携帯Flashの使いやすさを損なわない、携帯Flashサイトのユーザビリティ基礎(第10回)

モバイル特有の操作を考慮したうえで、Flashを使ってモバイルサイトを制作する際の注意点を解説します

ページ

タイトル画像:モバイルサイト構築のユーザビリティいろは

この連載では、PCのWebサイトとは異なるモバイルならではのユーザビリティに特化して、モバイルサイト構築におけるユーザビリティの基本、成果を出すためにはどうすればいいのか。制約の多いモバイル端末だからこそ求められるモバイルサイトのユーザビリティ、そのポイントをお伝えします。

TEXT:株式会社IMJモバイル モバイルユーザビリティ研究所

前回ではモバイルショッピングサイトのユーザビリティのポイントをご紹介しました。第10回では、IMJモバイルが実施したユーザビリティ調査結果から、モバイルのFlashサイトの問題点とユーザビリティのポイントを紹介していきます。

  1. モバイルのFlashサイトで経験する誤操作、ストレス
  2. メニューの開閉動作によるユーザビリティ比較
  3. フォーカスの違いによるユーザビリティ比較

1.モバイルのFlashサイトで経験する誤操作、ストレス

IMJモバイルが実施したユーザビリティ調査結果よって、モバイルのFlashサイトを閲覧したユーザーの多くが、Flashの誤操作によるストレスを感じていることがわかりました。

Flashサイト閲覧時の経験
図1 Flashサイト閲覧時の経験(単一回答)n=466

なかでも次の4項目については7割以上のユーザーがストレスを感じている結果となりました。

  1. サイトが重くて閲覧を中止した
  2. 誤って前の画面に戻ってしまった
  3. 前の画面に戻ろうとしたら戻りたい画面に移動できなかった
  4. 前の画面に戻るとページの一番上が表示され、使いにくかった

以上、ユーザーがストレスと感じた4項目を踏まえ、その原因と対策を挙げていきます。

今回の記事で使用しているIMJモバイルの調査資料一覧

1-1.サイトが重くて閲覧を中止した

モバイルFlashサイトは、画像の多用、外部ファイルの読み込み、複雑なスクリプトの実装などが原因で、Flash(SWF)ファイルの構造が複雑になると、ページ上に表示するFlashファイルのダウンロードに時間がかかり、携帯画面上での動作が重くなってしまいます。

そこで少し技術的な説明になりますが、「複数のオブジェクトを同時にアニメーションさせない」「1つのSWFファイルで何度も外部ファイルを読み込まない」「複雑なパスデータを保持しない」などに注意し、ファイルのダウンロードにかかる時間を短縮させたり携帯画面上での動作を軽くさせたりすることが必要です。

また、古い世代のモバイル端末と新しい世代のモバイル端末とでは、読み込みや動作のスピードに差が出やすいため、実際にモバイルFlashサイトを制作する場合は、標準となる端末をサイトごとに設定し、その端末でストレスなく読み込んで動作するようにFlashを調整することが大切です。

1-2.誤って前の画面に戻ってしまった

多くのモバイル端末は、左キーは「戻る」、右キーは「進む」という仕様になっています。そのため、モバイルFlashサイトのメニューをフォーカス(選択)したときに、多段階のメニューが右側に展開するようなレイアウトになっていると、右側のメニューに移動したフォーカスを戻そうとして左キーを押してしまい、前の画面に戻ってしまう原因になります。

フォーカスを戻そうとして、誤って前の画面に戻ってしまった
図2 フォーカスを戻そうとして、誤って前の画面に戻ってしまった

フォーカスが左右に移動するサイトでは誤操作が発生しやすくなるため、モバイルのFlashサイトのレイアウト作成時から、必要以上にフォーカスを左右に移動させないように注意する必要があります。

1-3.前の画面に戻ろうとしたら戻りたい画面に移動できなかった

1つのSWFファイルに複数の階層をもったサイトでは、ユーザーが1つ前の階層に戻ろうとして左キーを押すと、1つ上の階層ではなく、1つ前のファイルに戻ってしまいます(ソフトキーの戻るボタンも同様)。

前の画面に戻ろうとしたら戻りたい画面に移動できなかった
図3 前の画面に戻ろうとしたら戻りたい画面に移動できなかった

多くのモバイルユーザーは、今までモバイルサイトを閲覧してきた経験から「左キー=前の画面に戻る」というルールを学んでいるため、1つのSWFファイルで複数の階層を表示させずに、「1階層=1SWFファイル」の構成にするか、ポップアップやタブの様な表現を利用してページ遷移を行わないようにし、「左キーを押したら前の画面に戻る」という基本ルールを考慮した構成にすることが重要です。

1-4.前の画面に戻るとページの一番上が表示され、使いにくかった

HTML/XHTMLのサイトで左キーを押して前の画面に戻ると、前回リンクをクリックした場所にもどりますが、Flashサイトの場合、左キーでFlashページに戻ると、前のページで選択していたリンクの場所に戻らずにページの一番上の部分が表示されてしまいます。

前の画面に戻るとページの一番上が表示され、使いにくかった
図4 前の画面に戻るとページの一番上が表示され、使いにくかった(この図では、次のニュースを見るためには、再度「NEWS」を開いていかなければいけない)

ページ間を頻繁に行き来するサイトでは、前のページに戻るたびにページ最上部から目的の位置までスクロールする必要があるため、ユーザーがストレスを感じやすくなります。そのため、ユーザーのスクロールストレスを軽減するために、ユーザーの操作でメニューの開閉ができるようにしたり、数字キーで目的の位置に移動したりできるようにするなどの工夫が必要です。

また、Flash Lite2.0以降に対応しているモバイル端末は、端末内にFlashの情報を残すことが可能なので、iMenuのようなフォーカスを記憶する仕組みをFlashサイトに持たせるとよいでしょう。

ページ

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]