ユーザーを離脱させない！スマートに情報を入力できるjQueryプラグイン！
皆さん会員制サイト等を制作する際、ユーザーに学生や会社員、趣味等ある程度決まった情報を登録してもらいたい時どうしていますか？
こちらが予め用意している情報をチェックボックスで任意に選択してもらってタグ付けをする…こんな感じの登録フォームがまだ多いのではないでしょうか。
タグ登録をリッチにというタイトルなのですが、最近Facebookなんかでは「空のセレクトボックスが用意されていて、ユーザーが何かしら入力をすると候補が表示され選択すると補完してくれる」管理者側が期待する情報をある程度入力して欲しい場合にこの様な仕様に変わっている事が最近では結構みられると思います。
例えばFacebookなんかがこんな感じです。
プルダウンメニューやチェックボックスなんかで入力者に探してもらって選択させるよりは使いやすくていいですよね。
ハッカソンなんかではもしかするとあまり使えないかもしれませんが、開発するサイトをスッキリしたデザインで作る時なんかには便利なのではないでしょうか。
こんな感じのセレクトボックスを実装するjQueryプラグインを3つ紹介させて頂きたいと思います！(セレクトボックスであってますかね…)
taggingJS
taggingJSはフラットなデザインが印象的なjQueryプラグインです。
optionとして禁止ワードを設定することが出来たり重複許容の有無、☓をおした時の動作を編集にするか削除にするか等々簡単に実装することができます。
Tagator
このプラグインは結構シンプルですね。
予め補完させたいキーワードの候補を配列に格納することで、
キーワードとなる単語が1文字でもマッチした場合に候補が表示されます。
Insignia
Insigniaは単語を登録する際のキーの設定まで変更出来たりと細かい所まで設定をすることが出来るjQueryプラグインです。(デフォルトはスペースキー)
このプラグインはtagを取り消す際の動作がしなやかなのと細かい所まで設定できるという所が個人的に気に入っているプラグインです。
bevacqua/insignia · GitHub
いかがでしたか？
ユーザーに値を入力してもらいたい時にラジオボックス等で多くの中からユーザーが自分で探しださなければならないのは時に離脱につながってしまうこともあります。
離脱率を下げるためにもユーザーが少し面倒くさく思うような部分は、少しでもスマートにユーザーが扱いやすく出来るといいですね！
月も変わってハッカソンの情報やインターンの情報も新たに公開され始めています。
HackathonBlogではそういった情報を収集し皆さんに早くお届け出来るよう今後も更新を続けていきますので宜しければHackathonBlogの方もよろしくお願い致します！
