表紙

検索フォームを作るときに気をつけること

仕事で検索フォームは作ってないのですが、いつか作るだろうと思って勉強しました。たくさん勉強したので、デザイナーとして検索フォームを作るときに気をつけたいことをまとめてみました。

1、適切な位置に配置する

検索フォームは一般的には、画面の上部に配置されています。ユーザーが普段使い慣れている位置に習って配置をした方が、どこに検索フォームがあるのか認識しやすくなります。

2、適切なサイズにする

検索フォームはゆったりと余裕を持ったサイズにします。小さい検索フォームはテキストの一部しか見えず、ユーザーにストレスを与えてしまいます。また、検索内容を見直しなどのアクションもしづらくなります。

3、どこに検索フォームがあるのかはっきりさせる

検索フォームがどこに設置されているのか、ユーザーがすぐ分かるように検索フォームは目立たせます。ユーザーが「検索したい」と思ったとき、すぐに検索フォームにアクセスできるよう白で塗りつぶすなど、周りの色とコントラストを付けて目立たせます。

4、シンプルな検索フォームにする

どこに検索フォームがあるのかはっきりさせることは大切ですが、検索フォームはなるべくシンプルなものにします。目立たせたいからといって、カラフルで派手なものにするとユーザーがテキストを打つ時の障害になります。

5、虫眼鏡のアイコンをつける

検索フォームに虫眼鏡のアイコンを配置します。アイコンを配置することで、ユーザーが検索フォームであることを認識しやすくなります。このときサイトの雰囲気を壊さないシンプルな虫眼鏡アイコンを選びます。

6、何を検索できるのかをプレースホルダテキストに明記する

プレースフォルダ内に具体的な検索内容を明記しておくと、どんな単語で検索をすれば良いのか、ユーザーの指標にもなります。しかし、あまり長い文章を表示してもユーザーは読まないので、分かりやすい短い単語などにします。

7、検索ボタンを設置する

検索フォームをさらに良いものにするためには、検索ボタンを設置します。検索ボタンを押したら検索が始まるということが伝わりやすいからです。

8、自動予測機能や過去の検索結果を表示する

検索内容が曖昧なとき、ユーザーは何と検索すれば良いのか分からないことがあります。なのでユーザーが入力した文字列に基づいて、ユーザーの求める検索内容を予測するようにします。これはオートサジェスト、オートコンプリート機能と言います。
また、過去の検索内容を表示することで、ユーザーへのリマインドになります。

検索フォームって奥が深いですね!おわり。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでくださりありがとうございます。大学時代にやっていた陶芸が恋しいので、サポートして頂いたお金は、信楽粘土を買う代金にあてる予定です。

谢谢♡
5

カヨコ

武蔵美の工デを卒業したよ。今はUI/UX/プロダクトデザインをしているよ。すごいデザイナーになりたいなぁ…Twitter/https://twitter.com/kayo_design

エンジニア->デザイナー

エンジニアからデザイナーになりたい、エンジニアでデザインを知りたい人向けキュレーションマガジンです。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。