ボタン

ボタンは、ユーザーがアクションを起こし、システムが処理を実行するトリガとなる基本的なパーツです。GUIの登場よりもずっと前から実在世界に物理的に存在しているものを視覚的に表現したもので、その長い歴史ゆえにユーザーの持つ慣習的なルールに基づいた配置とスタイルに従って、見つけやすく意味を理解しやすいようにそのふるまいがデザインされる必要があります。

目立つCTA（Call to Action）ボタン

CTAボタンは基本的にひとつの画面につきひとつ、その画面でのフローを完結させる役割を持ったメインのアクションのためのボタンです。後述するようにその画面での目的達成のための主要フローであることを示すPrimaryカラーで、最も目立つベーシックなボタンスタイルを持つことで、明確に最重要な役割を持つボタンであることを示します。

そして、画面の中の最右下に配置します。後述のボタンの左右位置についての説明でも触れますが、画面の中で視線の流れは左上から右下へと流れていきます。読む順序で最後にあり視線の終着地点である右下に完了のためのボタンがあるのが感覚的に自然です。また、対角線バランス（Diagonal Balance）という考え方に基づき、左上に位置するタイトルやロゴと対角線で逆の位置には置くことで、視覚的な重みづけのバランスをとっています。

Windowsの標準では伝統的にこれとは左右が逆になっていますが、これはマウスではなくキーボードのタブキーの操作でアクション箇所まで移動しEnterを押すというUIが一般的だったMS-DOS時代からの名残と言われています。いまでも業務システムによってはキーボードのタブキーによる移動を主とするケースもありえますが、Webやスマートフォン、タブレットでは進行・肯定を右とするのが主流となっている現在、操作体験の一貫性を保つためにも、ABUIではこれからのシステムに左を進行・肯定の配置は採用しません。

ボタンの文言

シンプルに

ボタンの文言は、動詞や動詞句を使って、ボタンを押した時のアクションをなるべくシンプルに記述します。「する」や送り仮名が省略できる場合は省略し、文言が長くならないようにします。

ボタンのスタイル

画面のなかでユーザーのアクションはひとつでなく、複数ある場合がほとんどです。アクションのトリガとなるボタンは、そのアクションの意味や重要性、ユーザーの目的達成のための一連の流れの中での位置付けに応じて自然な誘導と視覚的なヒントの提供ができるようにいくつかの種類とスタイリングが用意されています。

ユーザーの目的達成のための一連の流れの中、あるいはいち画面のなかでのそのボタンの優先度や役割をそれとなくユーザーに視覚的に伝えるために、ボタンの種類と色を使い分けます。

主要フローのアクション

通常、その画面の中でのメインの目的達成のためのフローの最終的な決定とともに前進するアクションのためのボタンを「ベーシック・Primary」とします。

メインの目的達成のためのフローに沿ったサブ的なアクションのためのボタンを「反転・Primary」や「枠なし・Primary」とします。「枠なし」にくらべ「反転」のほうが枠線があるぶん目を引く度合いが高まります。

傍流の、または独立したアクション

それなりに重要ではあるものの、その画面の中でのメインのフローではないアクションのためのボタンには「ベーシック・Default」が適切です。同じ様な位置付けでそれより少し弱いものは「反転・Default」にすると良いでしょう。

逆行・離脱のアクション

画面を離脱し、ひとつ前の画面に戻るためのボタンは「枠なし・Default」です。

破壊的なアクション

削除や取消など復帰困難な破壊的な処理をともなうアクションのためのボタン色には「Danger」を指定します。画面の中でのメインのアクションに該当するなら「ベーシック」で、サブ的なら「反転」に。他にメインのアクションのためのボタンが存在するなら「Hoverで色」「Hoverで色 - 反転」とし一段目立たないようにすることでユーザーにアクションの優先度を自然に伝えることができます。