スマートフォンサイトの小さく縦に長いページのユーザビリティを向上するために、画面内にナビゲーションやバナー類を固定表示しているサイトは多く存在します。
しかし、コンテンツを固定表示することが、かえって著しくフォームのユーザビリティを低下させる危険性があり、EFOの観点では非常に注意が必要です。
今回はそんなスマートフォンサイトで要素を固定表示することのメリット・デメリットについてまとめてみます。
そもそも、固定表示とは?
ブラウザ画面上の定位置にメニューやコンテンツの一部を表示することです。
固定表示にしたコンテンツは、画面をスクロールしたり、画面サイズを変更しても動くことなく画面の定位置に表示されたままとなります。
メリット
固定表示にしたコンテンツにはページのどの位置にいてもすぐにアクセスすることができます。
例えば、ページ内リンクを固定表示したナビゲーション内に配置しておけば、縦長のページであってもスムーズに目的のコンテンツ間を行き来することが可能です。
スマートフォンのサイトはどうしても縦に長くなりがちですので、このように画面に固定されたページ内リンクやホームへのリンクをユーザーがうまく活用することができれば非常に有用でしょう。
また、フォームで残り項目数を表示するガイドナビゲーションのように、常にユーザーに見せておきたいコンテンツを表示するためにも使用できます。
実装方法は大きく2つ
そんな固定表示の実装方法は大きくわけて2つあります。
少し専門的な内容となってしまいますので、ごく簡単に触れておきたいと思います。
CSSによる実装
CSSのpositionプロパティを用いる方法で、最も手軽な方法です。画面のスクロール状態に依らず固定の位置に配置するには、「fixed」を指定します。
ただし、これはすべてのスマートフォンで有効なわけではありません。一部のモバイルOSでは、この「position:fixed」が使えないケースがあり、完全に対応しているのは、iOS 5.1.1以上、Android 3.1以上のみとなるようですので注意が必要です。
(※Android 2.3でも設定はできますが、viewportで、content=”user-scalable=no”が設定されていることが条件のようです)
javascriptによる実装
CSSではなく、javascriptを使って実装する方法もあります。
上述のとおりCSSによる実装は未対応OSの存在など完全ではありませんので、javascriptを使うことで補完できます。
代表的なのが「jQuery Mobile」や「iScroll」です。
jQuery Mobile
iScroll 5
固定表示が与える悪影響
一見ユーザーの利便性を向上してくれそうな固定表示ですが、デメリットもあります。
今回は下記の3点のデメリットを紹介させていただきます。
画面領域が狭くなる
ただでさえ小さなスマートフォンの画面が、コンテンツを固定で表示しておくことでさらに狭くなってしまうという点は考慮しておくべきです。
上記の例では、コンテンツの固定表示に加え、ソフトウェアキーボードをアドレスバーが表示された状態です。青色で示された画面の表示領域がかなり狭まっているのがおわかりいただけるでしょうか。
この例では28%も画面領域が侵されてしまっています。
意図せずタップする可能性が高い(リンクの場合)
固定表示するコンテンツがリンクの場合は、誤ってタップする可能性が高いことも予想されます。
リンク等を固定表示する場合、画面の一番上か一番下に配置することが一般的だと思います。
ブラウザの上下にはアドレスバーやソフトウェアキーボード、「戻る」「ホーム」などが密集しており、誤ってタップする可能性がさらに高い場所といえるでしょう。
例えばキーボードに入力しようとして、「ページトップへ戻る」を押下してしまった場合、再び入力中の箇所までスクロールするのは非常にストレスです。
フォーム項目のフォーカス時の挙動が不安定
スマートフォンでの固定表示の最大の問題点と言えるのが、フォーム項目へのフォーカス時に挙動が不安定である点です。
デバイスやOSのバージョンによってもばらつきがあると思いますが、例えば以下のような奇妙な挙動が挙げられます。
例えばiphone(iphone5, iOS7で検証)では入力項目へフォーカス中に画面をスクロールすると、フォーカスした瞬間のまま要素が絶対配置されてしまいます。
また、android(Xperia GX SO-04D, Android4.Xで検証)では、フォーカスした項目の上に固定表示させた要素が重なってしまう現象が起きることがあるようです。またこの場合、ファーカスを外した後もずれた配置がリセットされず、そのまま残ってしまいます。
上記の不具合はいずれもCSSにより固定表示を実装した際に生じるものですが、javascriptを用いた場合でも、完全ではないようです。
※jQueryMobileの場合は、フォーカス時に一時的に固定表示を解除するようですが、挙動がワンテンポ遅いのが気になります。
※iscrollでは、iphoneで固定表示したコンテンツの位置が微妙にずれる現象が確認されました。(ともに上述の検証端末にて確認)
対応策
では、そのような解決策が考えられるのでしょうか。
5点にまとめてみました。
フォームでは極力、固定メニューを使わない
特別な理由がないかぎり、フォームページ上では固定表示のメニューを使用しないことが理想的です。
例えばサイト全体を通してナビゲーションを配置しているような場合でも、フォームのページではそれを取り除くようにしてください。
フォーカス時には非表示にする
フォーム項目へのフォーカス時には、ソフトウェアキーボードが表示されて画面領域が狭くなります。
また、ユーザーにフォーム入力に集中してもらうためにも、余計なコンテンツを表示しないことはEFOの鉄則。
これらの点から、項目フォーカス時には固定表示のコンテンツは非表示にすると良いでしょう。
さらに非表示にしておけば、項目にフォーカスすることによる表示崩れを回避する効果もあります。
javascriptによる実装を行う
どうしてもフォーム内に固定表示コンテンツを設置する必要がある場合は、CSSによる実装ではなく、上述のjavascriptライブラリ等を使用するほうが比較的動作が安定しているのでおすすめです。
画面上側に配置する
固定表示のコンテンツを配置する場合は、画面下側よりも上側に配置するほうが、比較的操作の邪魔をしません。
画面下側に配置すると、入力中の項目を隠してしまうなど、さらにユーザビリティを落とす可能性がありますので、どうしてもという場合は画面上側に配置してはいかがでしょうか。
透過させる
さらに、画面を広くみせるテクニックとして、固定表示のコンテンツを透過させるというのも効果的です。
上記の例では、背景色を透過させているために、文字等が途中で切れていても比較的認識しやすくなっています。
最後に
いかがだったでしょうか。本日はスマートフォンにおける固定表示コンテンツについて、メリットやデメリット、対応策をまとめてみました。
ユーザーのために実装したメニューが、かえって使い勝手を悪くすることほど悲しいことはありません。
あなたのフォームは大丈夫でしょうか?固定表示を採用されているWEB担当の皆様は、今一度使い勝手を実機でチェックしてみることをおすすめいたします。