デザイン

デザイン

UXデザインのスマホで見やすいテキストボタンとは? クリックしやすいボタンデザインを考える

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、Why Text Buttons Hurt Mobile Usability
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

220 views

読了時間 : 約2分36秒

一般的に、モバイルアプリのボタンはデスクトップのものよりも読みやすいものです。画面が狭く指で操作するため、押しやすくて見やすいように出来ています。ベタ塗りのボタンは問題ありませんが、テキストボタンは違います。アプリ開発の前に、そのことを頭に入れておきましょう。

 

テキストボタンは押しづらい

 

マウスのカーソルよりも指の方が大きいため、小さいボタンに指を乗せるとボタンが隠れてやや違和感を感じます。操作が完了したのかどうか、はっきりとは判断出来ません。長い文字であっても、きちんと押せたかどうか分かりづらいです。

 

 

テキストボタンが小さければ小さいほど、指で押す位置は限定されます。ユーザーもその方が分かりやすく、指先に集中することが出来るでしょう。

 

また、直線で縁取られていない限りボタンだと区別されません。ベタ塗りのボタンであれば問題ないでしょう。

 

大文字だけのボタンは読みにくい

 

押しやすさの問題に対し、デザイナーは様々なスタイルを試みてきました。Googleのマテリアルデザインシステムもそのスタイルを推奨してきましたが、別の問題も発生しています。

 

全て大文字にすれば、ボタンはより幅広くなり直線に見えますが、ボタンの面積がやや大きくなっただけで、見づらさは変わりませんでした。

 

 

このようなボタンは、視力の悪いユーザーには特に認識しづらいです。彼らは文字の形を頼りに単語を認識しているので、上の画像では上下の違いが一目ではなかなか分かりません。

 

テキストボタンは認識しづらい

 

文字とボタンの唯一の違いは色です。これが類似していると、色覚の弱いユーザーにとってさらに見づらくなる原因となります。形で区別しなければ、テキストボタンは見逃されやすく、ユーザーにアクションを起こさせる機会を減ってしまいます。

 

 

テキスト代わりにどんな工夫をボタンに施すか

 

ボタンに文字が使われるのは、ユーザーに次のアクションを引き起こすきっかけとして導入される場合がほとんどです。ユーザビリティを維持したままそれを行うには、次の方法があります。

 

 

輪郭のあるボタン

 

一つは、文字の周りにアウトラインをつけることです。境界線で区切ることで、大きく見やすいボタンにすることが出来ます。アウトラインの内側であれば、どこに指を置いてもボタンは反応します。

 

 

背景の色が透明であれば、メインボタンと喧嘩することもありません。シンプルではっきりとした見やすいものが理想的で、文字を損なうこともありません。

 

薄い影付きのボタン

 

もう一つの方法は、薄い影を付けることです。背景とボタンの境界線があるので区別がつきます。色が薄いので背景に馴染んでいますが、見やすさはそのままです。

 

 

どちらが見やすいか

 

輪郭のあるボタンも影付きのボタンも、次のアクションを起こすには効果的です。後者の方が、ややビジュアル的に見やすくて押しやすいかもしれません。ベタ塗りのボタンは、輪郭のあるボタンよりもはるかに背景との区別がしやすいでしょう。

 

 

 

テキストボタンが効果を発揮するとき

 

中には、テキストボタンの方が良いケースもあります。セカンドアクションとしてではなく、その次のアクションとして利用するのです。何度も押したり無理に目立たせたりする必要はありません。ファーストアクションとセカンドアクションの方が強いビジュアル要素を求められ、より重要な要素です。

 

 

他にも、ユーザーが何かに対して助けを必要としている場合は文字ボタンの方が効果を発揮します。文章で情報を伝えたい場合は特に便利で、テキストボタンは他のボタンとも調和し、ユーザーはCTAボタンと間違えることもないでしょう。

 

 

テキストボタンの乱用禁止

デザインするのが簡単、という理由からインターフェースに大量のテキストボタンを用いるのは簡単です。ですが、読解や視覚に問題を抱えるユーザーにとってそれはストレスの原因にもなりかねません。ラクだからといって、テキストボタンばかりを使用しないよう注意しましょう。テキスト要素で出来ていても、上手くボタンのように見せる工夫が必要です。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ