web-dev-qa-db-ja.com

リンク付きのボタン:理解できるか、混乱するか?

一部のWebアプリケーションのタッチスクリーンバージョンの設計に取り組んでいます。これはタッチスクリーンなので、クリック可能なすべての要素をかなり大きく、簡単にタップできるようにしたいと思います(シンプルなキオスクなので、マルチタッチやズームは機能しません)。

標準のハイパーリンクはよく認識できますが、かなり小さいです:

enter image description here

ボタンはもっと大きくなる可能性があります:

enter image description here

しかし問題は、通常、ボタンはナビゲーションのアクションやリンクに使用されることです。そして私が思ったよりも:私がこのようなボタンにリンクを配置するとどうなるでしょう:

enter image description here

そして、そのようなハイブリッドをナビゲーションに使用した場合、それは機能しますか?それは周りの大きなクリック可能な領域とのリンクですか、それとも単に混乱して混乱するものですか?どう思いますか?

11
Kostya

私の意見では、リンクがテキスト/ sentence、paragraph /に配置されていない場合はボタンアプローチを使用を行う必要があります。とはいえ、ボタンの背景とリンクの色を使用しますが、下線は使用しません。

ただし、エンドユーザーがリンクとボタンを区別することはほとんどありません。

6
Yordanov

これらはキオスクスタイルのタッチスクリーンであり、タッチエリアはかなり大きいため、テキストの使用だけに制限されません。おそらく、適切なアイコンが付いた大きなボタンですか?

Button example with expanded text and icon

(粗雑なデザインとは異なり、ここにはまともな画像を作成する機能がありません)。

この方法は、それがボタンであることを明確に示しています。利用可能な追加の不動産を使用して、ユーザーに詳細情報を提供し、ボタンが実際に何をしているのかをユーザーに知らせることができます。

5
JonW

私の経験では、人々がリンクやボタンを表示するかどうかを考えさせないのであれば、人々は本当に気にしません。たとえば、ほとんどのビジュアル広告にはリンクとして機能しますが、ボタンがあります。

問題は、両方を使用する必要があるページがある場合です。この場合、プライマリアクションボタンとセカンダリリンク/ボタンの間に明確な階層を持たせる必要があります。それでも、サイジング、スタイリング、配置でこれを実現できます。

また、タッチ領域を常にテキストよりも大きくすることができます。これにより、視覚的な階層が維持され、使いやすさが向上します。

4
Zoltán Gócza

下線が引かれたテキストのボタンがわかりにくいのですが。たぶん、次のナビゲーションを示す矢印の付いたボタンを使用することをお勧めします。

また、非常に重要な要素は、ボタンの実際のテキストです。ボタンが「Go to Google」と表示されている場合、アクションはかなり明白です。 「検索」と読み替えると、ユーザーはWebページへのリダイレクトを期待できません。

2
Jozef

このページ自体の「タグリンク」は、リンク(マークアップ内)の良い例であり、リンクのように動作します(現在のページの代わりに別のページを表示し、他の副作用はありません)。ボタンに非常に似ています。

通常、コンテキストは完全に理にかなっていると思います。たとえば、フォーム内のボタンのようにぼんやりと見えるものはボタンとして解釈されます。フォームの外のあいまいなリンクのようなものは、リンクとして解釈されます。したがって、フォーム内にリンクを含める場合は、常に細心の注意を払っています。

特に:hoverに相当しないタッチスクリーンデバイスでは、リンクのタッチ/クリック領域を示すのが妥当だと思います。したがって、リンクに微妙な背景を追加することは、私には合理的に思えます。

2
Bobby Jack

マウスではなくタッチすることを念頭に置いて設計してください。キオスクを操作する人々の観察を行ったり、タッチデバイスの設計のためのベストプラクティスを確認したりしましたか?

Linksは、マウスの操作精度が高いため、マウス操作に適しています。
ボタンは、ヒットするターゲット領域が大きいため、指(タッチ)の操作に適しています。

  • まず、ユーザーがクリックできるようにします-私の意見:ボタンを使用します(太い指には大きなターゲット)
  • 次に、ユーザーは、クリックするときに何が起こるかを理解する必要があります。したがって、ボタンのテキストは重要です。

この議論の後、テキストに下線を引くかどうかは、不器用な指とユーザーをガイドする説明テキストの大きなターゲットを提供することほど重要ではないと思います。

2
JeroenEijkhof

組み合わせても大丈夫だと思います。

ボタン全体が1つのリンクで囲まれていることを確認してください。このように、ユーザーがボタンの任意の場所にカーソルを合わせると、適切なホバーフィードバック(例:下線)を有効にできます。

このスクリーンショットを参照 Appleの現在のiPhoneページから取得した例。

2
eknown

ナビゲーションとコマンドアクションの両方でリンクとボタンを同じように使用し続けると、ユーザーと コミュニケーションの大きな機会を失う になることに同意します。ナビゲーションとコマンドを区別するために、コマンドのコントロールをできるだけボタンのように見せます。

  • 黒いテキストでラベルを付けます。

  • 作業領域と対照的な影付きの背景。

  • 「隆起」した3Dの外観。

また、ナビゲーションのコントロールをできるだけリンクのように見せながら、タッチスクリーンの大きなターゲット「ホットゾーン」を区切る方法を見つけます。

  • 色付きのテキストでラベルを付けます。

  • 下線付き。

  • 白っぽい背景は作業領域と同じ色。

  • あなたが逃げることができるように、ホットゾーン境界の微妙なマーキングとして。

最後の箇条書きでは、ある種の「オープン」マーキングを試し、Gestaltの閉鎖原理に基づいて長方形のターゲットホットゾーンとして表示されるようにします。たとえば、リンクを次のように囲みます。

  • 大括弧。

  • ホットゾーンの長方形のコーナー(ただし、これらは選択の「ハンドル」と混同しないように注意してください)。

  • 上下の水平方向のルール。

最後のルールでは、テキストとルールの間に大きなギャップがある場合でも、下のルールが下線を提案するため、テキストに下線を引く必要がなくなる可能性があります。実際には、リンクラベルが起動しやすくなります。

1