web-dev-qa-db-ja.com

テキストを*クリックできない*ように見せる方法

問題:

現在、下図のような教科書交換サイトを構築しています。ベータテスト中、ユーザーはロゴの下にある3つのテキストスニペット(「6冊の本がリストされた」、「12成功したリスト」、および「2人のアクティブユーザー」)をクリックしようとし続けました。

説明:これらのスニペットは単なるテキストです。クリックするためのものではありません。

明確化2:「成功したリスト」は、売り手/貸し手が買い手と交換した本の数を数えます。オープンリスティングとやり取りできます(特に、自分のリスティングを編集して他の人にオファーを出すことができます)が、統計はWebサイトの有効性を示すためにあります。

質問:

これら3つのテキストを完全にクリックできないようにするにはどうすればよいですか?あなたが見ることができるように、彼らはすでに灰色になっています。

Example


野生での使用:

Instagramは同様の統計リストを使用しており、これらをクリックすることはできません。 Instagram

81
JosephSlote

tl; dr→使い慣れたパターンを使用

  1. テキストオブジェクトをナビゲーションタブコントロールのように見せないようにします。

  2. 要素が不必要に分割されているように見えます。メインヘッダーに検索フィールドを配置します。

  3. 検索を検索のように見せます。

Simplified design suggestion

ポジションの問題

あなたのテスト被験者がそれらのテキストオブジェクトをタップしたくなる潜在意識の要因はポジショニングです。それらはタブ付きナビゲーションのように見えます。モバイルや他の場所で非常に人気のあるマテリアルデザイン仕様のこの例をご覧ください。

Material Design tabbed navigation

ユーザーを再訓練するのは難しい

それらを軽視しようとするあなたの努力にもかかわらず、この立場は、さまざまな見方を探求したいユーザーにとって魅力的です。

どんな本がすでにリストされているのでしょうか?

「成功」リストとは何ですか?

ここでアクティブなユーザーを知っていますか?

少し時間をかけて、これらの質問について慎重に検討してください。調査する価値のある貴重なユーザーストーリーがあると思います。

テスト結果に基づいて繰り返す

enter image description here

誰か、どこかでかつて言った...

作成できるのは1回だけですが、必要なだけ何度でも作成できます。

他の人が述べたように、ユーザーはそれらがナビゲーションであることを望んでいます。上記の私の想像上の質問は、ユーザーがそれらの背後にあるデータに移動することを望む理由をほのめかしています。

すべてのユーザーの要望に答える必要はありませんが、パターンを見始めたとき、何か貴重なものに出くわしたかもしれません。

125
plainclothes

さて、人々はこの情報を操作しようとしているので、私はそれを利点として使用します。 Mattynabibが述べたように、それは本当に理にかなっています。

ただし、何らかの理由で望まない場合の答えは、この情報の断片を同種のメッセージにすることです。現在の状態では、マーケティング要素とインタラクティブ要素(つまりクリック)が混在しているように見えます。したがって、必要なのは、マーケティング面を維持し、この知覚されたアフォーダンスを取り除くことです。そしてそれを行うには、次のように文の情報スニペットを結合するだけです

6冊の書籍が掲載され、12の成功したリストと2のアクティブユーザー

注:これをマーケティングコピーとして本当に使用するかどうかはわかりません。もしそうなら、私はもっと良いものを探します。また、なぜ「上場成功」なのか? 不成功はありますか?もしそうなら、なぜその否定的な側面について暗黙の言及をするのですか?

123
Devin

灰色のテキストは、ヘッダーの他の部分より目立つため、実際にはクリックしやすく見えます。残りのテキストと同じ色(黒)に変更します。

また、「6冊の本のリスト」の代わりに、「本のリスト:6」を使用します。コロンは、「I'm a link」ではなく「here's info」という微妙な意味を含んでいます。

42

ユーザーがそれらの操作を行える場合、クリック可能にする必要があります。

ユーザーに関連するコンテンツを要約したものを表示している場合、そのコンテンツをクリックして基礎となるコンテンツにアクセスできる必要があります。

おそらく、教科書交換Webサイトでは、ユーザーはリストされている本を表示できるはずです。そこで、「6冊の本がリストされています」をクリックして、そのビューに移動します。

「成功したリスト」はサイトのユーザーに関連していますか?その場合は、もう一度クリックして、成功したリストをすべて表示します。

「ユーザー」も同様です。ユーザーはユーザーのリストを表示できますか?その場合は、クリックしてもらいます。

ユーザーがカウントしているものと対話できない場合、なぜそれを表示するのですか?

たとえば、「成功したリスト」がユーザーが操作できるものではない場合、その数を伝える目的は何ですか?それ自体は有用な情報のようには見えないため、リスティングの成功はユーザーとの関連性があり、ユーザーとやり取りできるという期待が生まれます。

おそらく、あなたはあなたのサイトの使用量をユーザーに印象づけたいだけでしょう。もしそうなら、情報が意味のあるデータではなくプロモーションのように見えることを確認してください。例えば。:

CHTB:インターネットで2番目に大きい本の交換で、1234人のユーザーが5678冊の本を投稿するために使用します(そして数えます!)。

32
user31143

これは、相対的な「クリック感」の問題でもあります。残りをmoreクリック可能にすることで、クリックできない項目をクリック可能にしません。ここでのフレーズは「アフォーダンス」です。

  • クリックできない3つのアイテムの位置は非常に目立ちます。デザインでは、ページの中央にあり、ロゴとペイオフと一体化しています。それは彼らに強いクリックアフォーダンスを与えます。
  • グレー表示は役に立ちませんでした。このデザインでは、このテキストを灰色にするための単なるスタイルの選択として簡単に理解できます。
  • 「検索」入力が十分に明確でない可能性があります。これをsearch-inputのように見えるようにしてください:ボーダー、検索グラス、送信ボタン(たとえば)を追加します。
  • 検索バーの位置と「クリックできない統計」を切り替えて、検索バーをロゴの一部にすることもできます-> Googleのデフォルトページを模倣します。
11
Ideogram

これら3つのテキストを完全にクリックできないようにするにはどうすればよいですか?あなたが見ることができるように、彼らはすでに灰色になっています。

*ため息*

昔は、クリック可能なテキスト(ハイパーリンク)に下線を引くという標準がありました。そして、テキストをグレー表示したもう1つは非アクティブでした。それらの基準はどこまで違反されていますか? Stack Exchange自体をご覧ください。

Clickable links

プロフィールページからのリンクに下線が引かれておらず、灰色になっていることに注意してください。しかし、それらはクリック可能です。クリック可能なものを期待するようにユーザーを訓練したので、その動作を「設計」することはできません。

他の多くの人が言ったように、「6冊の本がリストされています」と言っているので、それらの単語をクリックした場合、それらの6冊の本をリストすることは論理的です。それと戦うな。

10
Nick Gammon

インセットテキストシャドウを使用すると、石のようなものの外観が得られます。

enter image description here

7

enter image description here 「6つの本がリストされている」「12の成功したもの」という数字は、ハイライトのようなものです。

私はこれらのいずれかを試してみて、それをハイライトまたはダッシュボードのような数字のように見せます:

フォントを増やします-それが一種の見出しであることは明白です。各アイテムのパネル、この場合は3つのパネルを用意します。パネルとは、明るい背景とテキストへのパディングを意味します。

上で試したようなものですが、いつでもあなたのデザインに合った色やフォントで遊ぶことができます。

5
Pavithra Olety

数字を大きくし、フォント/色を変更して区別し、それらが説明している情報の上に配置したいとします。たとえば、非常に人気のあるサイトのレイアウトを確認してください(この画像の右下を見てください)。これにより、数値はリンクではなくメーター/インジケーターのように見えます。

From StackExchange

5
glassy

理論的には、テキストを実際にはもう少し「グラフィック」に見せることができます。これは、そのパネルの一種の装飾のようなものです。それ以外の場合は、灰色で表示されているので、クリックしてみても機能しない場合は、おそらく停止します。

しかし、これをテストし、人々が常にクリックしている場合は、それらのスポットをクリックしたときに何が起こるかを調べてから、クリック可能にすることを検討することをお勧めします。 。機会を逃している可能性があります

3
Mattynabib

テーブルとして提示する

リンクは通常、ボタンまたはテキスト行として表示されます。通常、情報は表として表示されます。

したがって、統計をやや表形式で表示すると、ユーザーがクリックするのを妨げることになります。

実例

実際には、独自のInstagramの例で、これを巧妙な方法で実装する方法をすでに確認できます。

Instagramは基本的に、統計情報を3列と2行の表に表示しています。キー数値(わずかに大きい)の1行と説明付きの1行。

enter image description here

2

その理由は:

  1. (おそらく変更するのは難しい)コンテンツは「どちらですか?」人々はそれを知りたいという衝動に従います.
  2. (おそらく変更が簡単です)それらは、可能なリンクマテリアルを示唆するボディタイプフォントです。プレゼンテーションの形式を選択します-おそらくサンセリフ、多分薄いキャップ、多分数字と文字の重さやサイズが違うなど。
1

1行のテキストよりも複雑に見えるようにします。

Twitterの例では、各統計をフォントの太さが異なる2行に分割しています。それは人々が彼らがリンクであると考えるのを思いとどまらせるのに十分でなければなりません:

enter image description here

フォントサイズ、スタイル、色を変更したり、微妙なグラフィック(2行の間にあるかすかなルールなど)を追加したりして、通常1行のテキストよりも複雑に見えるようにすることができます。

0
Tobia