ボタンアイコンを使ったUI作成について

  • このエントリーをはてなブックマークに追加

押すことで何が起こるかわかるボタンを作る

ボタンを使って操作する場面って、よくありますよね。身近な部分ではテレビやキーボードなんかがそうです。
あれらにはボタンがギッシリと詰まっていますね。そしてそのボタンを押すことで画面が切り替わったり、画面に何か表示させたりすることができます。
「1」を出したいなら「1」と書かれたボタンを押すことで表示させることができますね。

もしも何も表示のないボタンだったら、何が起こるかわかりません。
それが何かのアトラクションやゲームならワクワクするのかもしれませんが、日常で使う物の場合はなんだか怖いですよね。
思ってもいない画面に切り替わってしまうかもしれませんし、突然ホラー映像が始まるかもしれません、または爆発するかもしれません。まぁそんな突飛もないことは起こりませんが・・・

何したい事を思いついて、ボタンを目で見て、したい事を実現させるボタンを選んで、押して実行する事で操作ができます。
なんだか当たり前の事ですね・・・

でもこんな場合はどうでしょう

再生・停止を知らせる表示と、ボタンが一体になっているパターンです。
これは再生中なのでしょうか、それとも停止しているのでしょうか・・・
またこの「三角アイコン」をクリックすると再生するのか、停止するのかもよくわかりませんね。

ボタンだとするならば、三角アイコンをクリックすると再生が始まります。なので現在は一時停止中という事になりますね。
今の状態を表示しているとするなら、現在は再生中、クリックで一時停止という事になります。

あまり気にならないような部分かもしれませんが、操作性という点においては重要です。
これに追加して、下にボタンの一覧でも設けてあればあまり問題にはなりません。

でもデザイン的にボタンをあまりたくさんつけたくない、配置するスペースがない、という場合には難しいですね。
どうしても操作ボタンを配置するスペースが設けられない、設けたくないという場合には、現在の状態を表示するアイコンとボタンが一緒になるのは仕方ありません。その時には「ボタン」という認識で作る方が、ユーザーにとって理解しやすいものになります。

なので現在が再生中なのか停止中なのかを表示する項目ではなく、操作を促すボタンとして扱うようにしてデザインを入れましょう。
再生している音声を止めたいのに、停止アイコンではなく再生アイコンしかなければ操作に困ってしまう方が多くいるかもしれませんので、注意が必要です。
また作り手からすれば、どのボタンを押せば何が起こるかわかるかもしれませんが、初めて見た人にはわかりません。
そもそもボタンなのかすらわからない場合もあります。何か操作をしてほしい部分には、より注意して考える必要があります。

ボタンについて考える

・アレをしたいからこのボタンを押す。
・あのページを見たいからこのボタンを押す。
普段何気なく操作しているものですが、根本はこのような考え方になります。
ボタンを目で見て、得たい効果を選んで、そのボタンを押す。ボタンを押すにはこういった動作があります。

息の仕方とか、歩き方とか、習慣のように身についたものは意識しなくてもできてしまいます。
それと同じことで、普段何を考えてボタンを押すのか、という事について強く意識しないと、この根本を忘れてしまいがちです。

どういう操作をしてもらいたいのか、この表示で本当にわかるのか、誤操作を招かないか・・・常にこういった観点を忘れないようにしてください。
また何度も作っているから、以前と同じで大丈夫!と安心するのも危険です。もしも初回で大きな間違いをしてしまっていたら、その後も間違えた認識で作り続けてしまうことになるので、「もっとよくならないか」という意識が大切です。
また、「利用頻度の高いボタンは大きくする」「重要なボタンはそれぞれ色を変える」「主要なボタンとそうでないボタンで形を変える」こういったデザインも時には有効かもしれません。
まずは手元にあるリモコンを手に取って、どういう構造になっているのかを考えてみるのも面白いですよ。

まとめ

・ボタンに表示されている内容を得たいから、そのボタンを押すという根本を忘れない
・押すことで何が起こるかわかるボタンデザインを考える
・操作性について、ボタン毎に大きさ・色・形を変えてみるのも有効

  • このエントリーをはてなブックマークに追加

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301