入力フォームのユーザビリティをアップ!

今年も花粉症に悩まされているYu-ichiです:neko:

頭痛とのどの痛みが酷かった日もありましたが、
アレルギー反応が強く出て39度の熱を出した時に比べればまだ今年は軽い方だと思ってます。:cat_8:

さて、Googleが4月21日からスマートフォン対応されたサイトはモバイルでの検索結果で優遇されやすくなることを発表しましたね。:kaoemoji1:
多くのWEB制作会社がスマホ対応に追われているかと思います。
(うちもそんな中の1つ・・・:kaoemoji3:

Googleが言っているスマホ対応とは、機械的に計測した結果で判断しているので
それさえクリアしてしまえば問題ありません。:baikin_1:
ですが、人間の事を考えた場合はそうもいきません。:cat_6:
確かにスマホ対応しているけど、見づらいし使いづらいサイトだよね・・・。:byebye:
と思われてしまっては、二度と見てもらえないかもしれません。:naku:

というわけで、見た目にも機能的にも優れたサイトを作るうえで重要なユーザビリティを上げる方法の1つをご紹介したいと思います。:kaomoji6:

みなさん、フォームの入力がめんどくさいと思っていませんか?:hamster_7:
慣れた人などは、自分のメールアドレスなどを単語登録しておいて変換して入力していたりしますが、多くの人はめんどくさいと思いながら入力しているのではないでしょうか。
実は、HTML側でオートコンプリートを使えるようにする技(?)があります。

<input>タグの属性に「autocomplete」という属性があります。:kaoemoji3:
以前は対応しているブラウザも少なく、使用するケースはほとんどありませんでしたが、
今回、Googleのウェブマスター向け公式ブログで「Chrome」でのサポートを発表しました。:wa-i:

これによって利用するケースが増えるのではないでしょうか?:kaomoji4:
また、「autocomplete」と組み合わせて使うと面白いのが「datalist」タグです。
選択可能でしかも自由に入力できるという「select」と「input」の良いところどりな機能です。
今ならほぼすべての環境で動作するので、お試しください。
詳しい解説はこちらのサイトをご覧ください。
自分が解説するよりわかりやすいと思います。:body_deject:

見た目だけでなく、機能面でもスマホユーザーライクなサイトにしたいですね:neko:

トラックバックURL