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

サイト構築 -制作

Post on:2019年6月25日

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アウトラインのボタン

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

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

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

薄い色のボタン

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

薄い色のボタン

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

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

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

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

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

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

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