システムにおいて最も重要なのは「使いやすさ」でしょう。いかに、分かりやすく操作が簡単であるかはユーザーの満足度に直結します。そして操作性の良さを高めるにはUIUXに配慮したデザインが必要不可欠です。システムをつくる際には、要素をどのように配置するか、また、配色はどうするかなど、考えるべき部分は沢山ありますが、中でもシステムとユーザーの橋渡し役を担う「ボタン」のデザインは重要といえます。今回はボタンのデザインについてUIの観点からお伝えします。
UIを考えるときには「シンプル」が大きなカギとなりますが、シンプルを求めるがあまり情報が少なく、かえってユーザーを迷わせるデザインになってしまうことも考えられます。ボタンにおけるNGデザイン例として以下の4つを挙げます。
・ボタンである必要性がないボタン
例えば、編集のためのボタンと確認するためのボタンが全く同じデザイン・階層にある場合などです。異なるアクションならば同じボタンで示すよりも編集のみボタンにして確認画面の表示はタブで表示切替にするなどの工夫をするべきです。また、装飾のためだけのボタンも避けましょう。
・どの情報に対するアクションか分からないボタン
情報とボタンが離れていると、どの情報に対するボタンなのかが分からなくなってしまいます。これはデザインの4原則の一つでもある「近接」に関係します。関係のある情報同士を近づけることでグループ化し、わかりやすくするというものです。
・危険度が示されていないボタン
例えば削除ボタンのような、一度押したら取り返しのつかないようなボタンが他のものと同じようなデザインでは困ってしまいます。危険度を一目で伝えるためには赤などの目立つ色を使ったり、他の情報と混在しないように他の要素と離して配置すると良いでしょう。
・使えるように見えるボタン
現段階ではまだ押せないボタンなら、グレー等の目立たない色にするのが無難です。押せるものだと思って押したらエラー表示が出たり、いくらクリックしても何もアクションが起こらないとなるとユーザーにとって大きなストレスとなります。
１．ボタンだとわかるボタンにする
まず、大前提としてボタンらしいボタンであることが大切です。例えば、よく私たちが目にするボタンは四角か丸でしょう。それ以外の形だとボタンだと認識しづらくなってしまします。サイズ、形、色はもちろん、カーソルを当てた際に色が変わったり、クリックした際にへこむようなアニメーションを付けるのもボタンらしさを表現するのに良い手段です。
２．ボタンの位置に気を付ける
どの情報に対するアクションか分からないボタンはNGデザインとしてご紹介しました。特定の要素に対するボタンであれば近くに配置することでわかりやすく、また全体に関するボタン、例えば印刷ボタンなどであれば画面上部に、削除ボタンなどは画面下部に配置すると良いでしょう。
３．ボタンの色を工夫する
危険度を示したり、使えないことを表すためには色の工夫が大切です。削除ボタンは赤、使えないボタンはグレー、登録ボタンは緑、というようにあらかじめ色のルールを決めておくと分かりやすいでしょう。
今回はシステムに重要な「ボタン」のデザインについてご紹介しました。ボタン一つにもUIUXを向上させるための様々な工夫がされています。
エイ・エヌ・エスでは、UIUXの観点から、ユーザー中心設計にてわかりやすく操作性の良い業務システムの構築を行っています。システムやデザインに関するお悩みはお気軽にご相談ください。
