この記事から得られること
UI上のボタンを「アイコンのみ」にするとき、UIデザイナーはどのようなことに注意しているかを学ぶことができます。
結論
ボタンを「アイコンのみ」にするとき、UIデザイナーは以下のポイントに注意しながら、UIデザインを決めています。
- ポイント1：そのアイコンは一般的に使用されているアイコンか。
- ポイント2：一般的に使用されているアイコンでも、ユーザーにとって一般的か。
- ポイント3：アイコンの意味を理解しないまま、そのボタンをタップしても、問題無い動作となっているか。（例えば、データ削除などの操作）
- ポイント4：アイコンの下にテキストを表示する領域があり、ユーザーにとって分かりやすいボタンにできないか。
それでは、それぞれのポイントについて、詳しく解説します。
ポイント1：そのアイコンは一般的に使用されているアイコンか。
UIデザイナーは、使用しようとしているアイコンが「他の分野や、他のUIデザインにおいても使用されているアイコンか」を考えています。
例えば、音楽再生のボタンを右向きの三角形にしようとする場合、他の音楽アプリや、音楽プレーヤーのボタンで使用されているアイコンを確認します。
もし、使用しようとしているアイコンが、他の分野や他のUIデザインで見たことが無い場合、ユーザーにそのアイコンを理解してもらえない可能性があるため、他のアイコンにする検討をするのが望ましいと考えます。
また、海外で一般的とされている以下のWebサイトから、使用しようとしているアイコンがあるかどうかを確認してみるのも良いと考えます。
Font Awesome：
https://fontawesome.com/icons?d=gallery
ポイント2：一般的に使用されているアイコンでも、ユーザーにとって一般的か。
ポイント1で一般的なアイコンだと判断したとしても、「そのアイコンを見るユーザーにとって一般的かどうか」を検討します。
可能であれば、ユーザーに近い年齢や属性の方に実際にそのアイコンを見ていただき、そのアイコンの意味が理解できるかをテストするのが望ましいと考えます。
ポイント3：アイコンの意味を理解しないまま、そのボタンをタップしても、問題無い動作となっているか。
場合によっては、ユーザーはアイコンの意味を理解しないまま、もしくは、誤って理解したままボタンがタップする可能性があります。
その場合でも、「データを削除してしまう」といった、ユーザーにとって困ってしまう動作になっていないかを確認します。
もしも、誤操作によってユーザーが困ってしまう動作をそのボタンに割り当てる場合は、「動作を実行する前に、実行確認のダイアログを挟む」、など、ご操作防止のフォローをするのが望ましいと考えます。
ポイント4：アイコンの下にテキストを表示する領域があり、ユーザーにとって分かりやすいボタンにできないか。
表示領域が無い場合は仕方ないかもしれませんが、「アイコンのみ」とはせず、「アイコン＋ラベル（ボタン名）」にして、ユーザーにとって、より分かりやすくできないか、を検討します。
「アイコンのみ」よりも「ラベル」があった方が、ユーザーがボタンを正しく理解する可能性は高まり、より分かりやすいボタンとなります。
まとめ
繰り返しとはなりますが、ボタンを「アイコンのみ」にするとき、UIデザイナーは以下のポイントに注意しながら、UIデザインを決めています。
- ポイント1：そのアイコンは一般的に使用されているアイコンか。
- ポイント2：一般的に使用されているアイコンでも、ユーザーにとって一般的か。
- ポイント3：アイコンの意味を理解しないまま、そのボタンをタップしても、問題無い動作となっているか。（例えば、データ削除などの操作）
- ポイント4：アイコンの下にテキストを表示する領域があり、ユーザーにとって分かりやすいボタンにできないか。
世の中の「アイコンのみ」のボタンに対して、どのような理由で「アイコンのみ」にしているかを考えることは、UIデザインの学びにつながると考えます。「ラベル（ボタン名）を表示する領域が無い」のか、「ユーザーがアイコンのみで理解できる」と判断しているのか、様々な背景や理由があるはずです。
記事の内容が、みなさんのUIデザインの勉強の参考になればうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
