【携帯サイト制作】第十回 ケータイサイトの検索フォームユーザビリティ
ポータルやコンテンツが多い携帯サイトだと、検索フォームがとっても役立ちます。PCサイトに比べても検索窓を使う頻度って多いと思います。
そんななか、携帯サイトの検索フォームユーザビリティについて考えてみることにしました。au3Gでのお話です。
普通に書くとこんな感じになると思います。
<form action=”xxx.php” method=”post”>
<input type=”text” name=”xxx” value=”" />
<input value=”検索” type=”submit” />
</form>
この四角い枠はなんだろう？
この場合、極端な話、「この四角い枠は何だろう？」と検索窓をスルーして、「検索」というボタンらしきものを押してみる。という遷移を辿る場合があるようです。ユーザビリティはヨクナイということに。
レイアウトも、２行に分かれてしまって縦スペースがもったいない感じです。
ということで、１行にしてみましょう。
１行にしてみたらこの四角い枠の意味が少し理解しやすいかも
１行にしたことで、先程よりはこの四角い枠について理解しやすいようです。縦スペースも節約できました。
ソースは以下の通りです。
<input type=”text”size=”20″ name=”xxx” value=”" />
<input type=”text”style=”width:180px;” name=”xxx” value=”" />
こんな感じでsizeを指定したり、styleでwidthを指定したりと。
PCの場合、CSSを読まない場合も考慮して両方書いておいたりすることもあるかと思いますが、モバイルサイトではstyleで指定しておけば大丈夫かもしれません。
ここでちょっと気になるのはきちっとしたデザイナーさんでしょうか。
テキストの四角い枠と検索のボタンの高さが微妙に違うのがきになるかもしれません。
じゃぁ。ってことで、submitのinputにstyleで高さを指定してみます。
<input style=”height:18px;” value=”検索” type=”submit” />
そうすると以下の通り。
高さを統一してみましたよ。
整って、気持ちもスッキリ。
高さはそれぞれ違うかもしれませんので数値は調整の必要がありそうです。
でもあと一息。
もうちょっと見た目で「検索」と解りたいところです。
ここは簡単に、携帯の便利な機能である絵文字を活用します。
サーチ絵文字を入れてみましたよ。
サーチの絵文字を入れるだけで理解度が大幅にアップするようですよ。
以下のように、先頭にサーチの絵文字を入れると更に良さそうです。
が、普通に入れますと、文字サイズやフォームのサイズによってキレイに整いづらいことがあるようです。
モバイルサイト検索フォームのユーザビリティ
ちょっと細かいことではありますが、その積み重ねがモバイルサイトの繁栄を支えると思います。
何方かのご参考になれば幸いです。
▼関連記事も是非ご覧くださいませー
