テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか

テキストをボタンにするのはデザインに手間がかからないので、簡単に設置できます。しかし、ユーザーはそのテキスト ボタンのテキストを読んだり、認識したり、タップすることに苦労を強いられます。

テキスト ボタンがスマホのユーザビリティを損なう理由、代わりに何を使えばいいのか、テキスト ボタンはどんな場合に適しているのかを紹介します。

サイトのキャプチャ

Why Text Buttons Hurt Mobile Usability

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

ボタンに必要なユーザービリティの基準は、スマホアプリの方がデスクトップアプリより高くなっています。スマホは画面と指によるナビゲーションがより小さいため、スマホのボタンはタップ・読み取り・認識が簡単でなければなりません。

ソリッドタイプのボタンのほとんどはこの基準に満たされていますが、テキスト ボタンは満たされていないのが現状です。
スマホでテキスト ボタンを使用する際に、注意すべきポイントを解説します。

テキスト ボタンはタップしにくい

通常、指はマウスのカーソルよりも大きいです。指を小さなターゲットの上に置くことは、ユーザーにとっては扱いにくいです。ユーザーの指はボタンのテキストを覆ってしまい、アクションが成功したかを確認する視覚的な手がかりはなくなります。

テキストのラベルが十分に長ければ、ユーザーは視覚的な手がかりを得ることができますが、それでもターゲットにヒットしたことを確認するには十分な手がかりではありません。

ボタンのタップ

テキスト ボタンだとタップがうまくできたか半信半疑に

テキスト ボタンのサイズが小さいと、ユーザーは正確に指を動かしてターゲットに当てる必要があります。精度を上げるには、ユーザーの努力が必要でしょう。テキスト ボタンをタップすることを確実にするためには、指とターゲットに集中しなければなりません。

ボタンに直線的なエッジがないと、境界線を区別しにくく、ボタンをターゲットにするのは難しくなります。その点、ソリッド ボタンはターゲットが大きく、エッジが直線的なので、この問題は発生しません。

すべて大文字のテキスト ボタンは読みにくい

テキスト ボタンのタップに関する問題に対処するために、一部のデザイナーはテキスト ボタンをすべて大文字にしています。このスタイルはGoogleのMaterial Designで促進されているものですが、欠点があります。

すべて大文字にすると、テキスト ボタンのエッジは直線的になり、ターゲットは大きくなります。しかし、ターゲットのサイズはわずかに大きくなるだけで、テキストの読みやすさが低下するため、それほど良くはなりません。

すべて大文字のテキスト ボタン

直線的なエッジになるけど、タップしにくい

すべて大文字のテキストは、特に失読症のユーザーにとって読みにくいものです。ユーザーは文字の形によって単語を識別します。大文字は上付き文字と下付き文字が区別できないため、文字が読みづらくなります。

文字の形の比較

すべて大文字だと文字の形が同じなので、読みづらい

テキスト ボタンは認識しにくい

テキスト ボタンとテキストの違いは、色だけです。特に色覚異常のあるユーザーにとって、テキスト ボタンは認識しにくくなります。明確な形がなければ、ユーザーはテキスト ボタンを見落としてアクションを見逃す可能性が高くなります。

テキスト ボタンとテキストの比較

テキスト ボタンとテキストの違いは、色だけ

テキスト ボタンの代わりに何を使えばいいのか

多くの場合、2次的なアクションにテキスト ボタンを使用して、そのボタンの優先順位が低いことを示しているでしょう。しかし、スマホでのユーザビリティを損なわないより良い方法があります。

アウトラインのボタン

1つ目の方法は、テキストの周囲にアウトラインをつけ、アウトライン ボタンにすることです。これにより、ボタンの境界線は明確になり、ユーザーはより大きなターゲットをタップできます。アクションするために、ユーザーは指をアウトラインの上でも内側のどこでもタップできます。

アウトラインをつけたボタン

アウトラインをつけたボタン

アウトライン ボタンには背景色がないため、メインのアクション ボタンと競合することはありません。テキスト ラベルと競合しないようにするには、アウトラインを明るくするのが理想的です。

薄い色のボタン

2つ目の方法は、薄い色のボタンです。これもアクション ボタンと競合することはなく、ボタンの枠と背景を区別します。背景に溶け込みますが、薄い色は十分なコントラストを維持して表示されます。

薄い色のボタン

薄い色のボタン

視覚的に重みが大きいのは

アウトラインのボタンと薄い色のボタンはどちらも2次的なアクションとしてうまく機能します。ただし、薄い色のボタンの方が若干視覚的な重みがあり、タップしやすくなっています。ボタン自体に薄い色の背景があることによって、細いアウトラインよりもしっかりとしたターゲットになります。

3つのボタンの視覚的重みの比較

3つのボタンの視覚的重みの比較

テキスト ボタンが意味をなすとき

テキスト ボタンが意味をなす場合があります。
2次アクションのためではなく、3次アクションのために使用します。3次アクションは通常タップ数が少なく、目立つ必要もありません。1次と2次アクションは重要で、視覚的な重みをより必要とします。

テキスト ボタンの使用例

赤点線枠の3次アクションにテキスト ボタンを使用

テキスト ボタンが意味をなすもう一つのケースは、ユーザがアクションを実行するためにヘルプが必要な時です。ユーザーが最適な選択肢を選択できるように、状況に応じた情報を提供する必要がある場合にテキスト ボタンを使用します。テキスト ボタンは他のボタンと競合しないため、ユーザーがそのヘルプをアクションとして認識するのを防ぎます。

テキスト ボタンの使用例

赤点線枠のヘルプにテキスト ボタンを使用

テキスト ボタンを乱用しない

テキスト ボタンはデザインに手間がかからないので、簡単に設置できます。しかしその結果、ボタンを読んだり、認識したり、タップすることにユーザーは苦労を強いられます。

手間がかからないからという理由で、テキスト ボタンを乱用しないでください。アクション ボタンにはテキストが含まれるかもしれませんが、常にボタンのように見える必要があります。

サイトのキャプチャ

Why Text Buttons Hurt Mobile Usability

sponsors

top of page

©2019 coliss