入力フォームの操作性、機種による違いにご注意！

入力フォームの操作性、機種による違いにご注意！

入力フォーム内の項目を横並びにしたり、リンクを追加したりすると、携帯でのユーザーインタフェースに思わぬ影響を及ぼしてしまうことがある。具体的に言うと、機種によってはチェックボックスやラジオボタンを十字キーで選択することが難しくなったりするのだ。

今回は携帯の十字キーの操作性にフォーカスしてみる。

関連記事：

目次

このページの操作性は？

チェックボックスやラジオボタンなどを組み合わせたシンプルなページを用意した。HTMLソースは以下の通り（一部抜粋）。

テキスト1<br />
<input type="text" name="t1" value="" /><br />
テキスト2<br />
<input type="text" name="t2" value="" /><br />
テキスト3<br />
<input type="text" name="t3" value="" /><br />

<hr />
チェックボックス<br />
<input type="checkbox" name="c" value="1" /> AAA
<input type="checkbox" name="c" value="2" /> BBB<br />

<hr />

ラジオボタン<br />
<input type="radio" name="r" value="1" /> <a href="">111</a><br />
<input type="radio" name="r" value="2" /> <a href="">222</a><br />
<input type="radio" name="r" value="3" /> <a href="">333</a><br />
<input type="radio" name="r" value="4" /> <a href="">444</a><br />
<input type="radio" name="r" value="5" /> <a href="">555</a><br />

実機を使ってチェックボックス「AAA」とラジオボタン「111」を選択してみることにする。

すると、上下キーの移動＋決定キーで難なくチェックできる機種も多いけど、一部の機種では十字キーを上下方向だけではなく、左右方向も使わなければラジオボタンをチェックすることができない。

docomo N-06Aの場合

十字キーの「下」キーを押し続けたときの動きは次のようになる。

IMGP1549-s

この機種は上下キーだけではすべてのフォーカスへ移動できない。写真のように、チェックボックスの項目（AAA）にフォーカスが移動せず、右の項目（BBB）にフォーカスが移動してしまう。またラジオボタンにもフォーカスが移動せず、右隣に置いたリンクにフォーカスが移動してしまう。

したがってこの機種で「AAA」を選択するには、まずフォーカスを下キーで「BBB」の位置まで移動した後、左キーで「AAA」のチェックボックスに移動して決定キーを押さなければならない。ラジオボタンで「111」も選択する場合も、「111」のリンクまで下キーで移動した後で左キーを押す必要がある。

上下キーを押すとフォーカスは画面左側の選択項目に次々移動すると思っている人が多い。だから画面左側の項目を選択するために左キーを押すという操作が何だか不自然にも感じる。

SoftBank 932SHの場合

次はSoftBank。これも下キーを押し続けたときにフォーカスがどのように移動するのかを調べてみた。

IMGP1547-s

932SHは横並びしたフォーム部品であれば、その内の１つだけにフォーカスが移動する方式のようだ。チェックボックスはN-06Aと同様に「BBB」にフォーカスが移動する。その後、下キーでラジオボタンの右隣のリンクにフォーカスが移動するところまではN-06Aと同じ。が、リンクにフォーカスがある状態で下キーを押すと、なんと左側にあるラジオボタンへとフォーカスが移動してしまう！奇妙かつ予測不能な動きで混乱は必至。

au G9の場合

au G9ではフォーカスは次のように移動する。

IMGP1551-s

全てのフォーム部品とリンクに左上から順番にフォーカスが移動する方式だ。オーソドックスで分かりやすい動きをする。

十字キーの操作は2種類

そもそもなぜフォーカスの移動方法にこれほどまでの違いがあるのか？大きく分けると、フォーカスの移動方法には上下キーのみを使うタイプと上下左右キーをすべて使うタイプの2種類がある。

フォーカスの移動方法 対象機種
上下キーのみ docomo N905i、N904i

au G9、W61K、MEDIA SKIN など
上下キー ＋ 左右キー docomo N-06A

SoftBank 932SH、920P など

上下キーのみを使うタイプは、上下キーだけですべてのリンクやフォーム部品を選択できる必要があるから、左上から順にそれぞれにフォーカスが移動するようになる。

一方、上下左右キーを使うタイプは上下方向と左右方向の移動でフォーカスを移動する方式だけど、方向の定義付けが難しいために機種による違いが大きくなっているものと考えられる。

上下キーだけでフォーカス移動できるようにするには？

そこでページを工夫して、リンクやラジオボタンをすべて縦方向に並べてみることにした。

すると、上下キーだけですべてのフォーム部品を選択できるようになった。

IMGP1553-s IMGP1554-s

IMGP1555-s

ただし、N-06Aだけは「⇒説明」リンクを選択するのに右キーを押す必要がある。

まとめ

実は先日、とあるサイトで「チェックボックスが選択できない」といったユーザーからの問い合わせがあった。調べてみるとそのページは今回サンプルとして説明したデザインとよく似ていて、かつ使用していた機種は上下左右キーでフォーカスを移動する機種！やはり通常は上下キーのみでフォーカスを移動しているからチェックボックスが選択できなかったようだ。

携帯では上下キーをスクロール操作にも使用するし、事実上、上下キーしか使用しない携帯ユーザーも多いことを考えれば、上下キーのみでフォーカス移動できるようなページ構成にしておくべきだ。

具体的にはHTMLに次のような工夫をしておく。

  • チェックボックスやラジオボタンは横1列に並べない（性別のラジオボタンなど）
  • チェックボックスやラジオボタンの右側にリンクを配置する場合、リンクは次の行に配置する（説明ページへのリンクなど）

もしチェックボックスやラジオボタンを横方向に並べたり、フォーム内にリンクを配置する場合は、上下左右キーでフォーカスを移動するタイプの機種を使い、ユーザーインタフェースを必ずチェックしておこう。

（関連エントリー）

Page Top