web-dev-qa-db-ja.com

リンクされたページをより明確にしますか?

以下に示すようなポートフォリオがあります。私がポートフォリオを見せた人の1人が、ゲーム/ Webページのライブバージョンを実行するか、それのビデオを撮れるかどうか尋ねました。これは、リンクである実際のタイトルをクリックしたときに私が持っているものとまったく同じです。 テキストをクリックして別のページにリンクできることをより明確にする良い方法は何ですか?

enter image description here

4
ComputerLocus

テキストコンテンツの良い点ですが、リンクの下線に同意する必要があります-現在の慣習ではリンクに下線を付けることはないと思います。確かにあなたが基本的にそうであるサイトのコンテンツ内でリンクするときはまだです(それはまだあなたのコンテンツです)。

テキストに下線を付けると次の問題があります 読みやすさ

おもしろいスマッシング雑誌は、下線をより微妙にすることでこれに対処しています...私はこれがうまくいくと思います(他の場所は点線を使用しています): subtle grey underline from smashing magazines website

真実はグーグルはさておき、あなたはウェブ上で下線をますます少なく見ています。これは主に美的理由によるものだと思います。彼らが同じことを言うだろうほとんどのグラフィックデザイナーに尋ねます。これは慣例となっています。下線はデータインクを作りすぎます。うるさいです。

代わりに、一部のサイトでは、このサイト(StackExchange)およびAppleのように、ホバーの下線を使用しています。その時点までに、おそらくユーザーは通常、すでにクリックする意図を持っている(他の人の考えを知ることに興味がある)ので、これの価値については本当にわかりません。

ほとんどのWebサイトは、リンクを示すためにカラーシフトを使用し、選択された色は、サイトのグラフィック規則に依存します。 Facebookは、Googleが 青いリンクがより頻繁にクリックされる )であることが判明した最終的なテストを実行したと表明しているため、署名色として青を選択することを選択しました。

私のWebサイトの個人的な経験則では、クリック可能なすべてのものを同じ色(ボタンやリンクなど)にし、それがサイトの主要な色の1つになります。

Webアプリケーションでは、より複雑になる可能性があります。たとえば、StackExchangeについて書いているように、一部のサイトでは、さまざまな機能をさまざまな色に関連付けています。灰色のテキストはWebアプリの機能部分へのリンクで、青色のテキストはコンテンツへのリンクです。いつものように、コンテキスト/複雑さを考慮して設計する必要があります。

したがって、この例では、オレンジの2つのリンクのタイトルテキストを強調表示します。

更新画像に再生ボタンを追加することもお勧めです(下記のPhilWのコメントで示唆されています)。多くの研究は、人々はテキストを読むのではなく、画像に注意を向ける傾向があることを示しています。

2
Lisa Tweedie

ユーザーは、下線と色付きのリンク(通常はブラウザーのデフォルトの動作であるため、青色)に慣れているため、アフォーダンスを伝える最も明白な方法です。リンクにホバー状態を与える(それがフォントの色を強調することを意味する場合でも)ことも、有用な手がかりになります。

これらのタイトルに下線と色を付けることが問題である場合(たとえば、選択したビジュアルデザインでそれが許可されていない場合)、他の戦略にはホバー状態での下線のみが含まれます(可能な場合はデフォルトで青色のタイトル色を使用しようとします)。リンク内のテキストを確実にすると、より多くのリソースにつながることが示唆されます。

もう1つのアイデアは、リンクしているリソースを前もって持ってくることです。写真がある場合は、ギャラリーの存在を示すことができます。動画の場合は、ライトボックスまたはモーダルウィンドウで大きなビューポートを開く小さなビデオプレーヤーを表示することを検討してください。これにより、コンテンツが見つけやすくなるだけでなく、関連するコンテンツを提供していることが既に証明されているため、ユーザーがさらにメディアリンクをクリックする価値をすぐに推測できるようになります。

4

まあ、あなたが行うべき最も明白な変更はあなたのリンクに下線を引くことです。 2004年に書かれましたが、Jakob Neilsenの記事 リンクを視覚化するためのガイドライン は依然として非常に適切です。

これらのガイドラインにはいくつかの例外がありますが、テキストリンクには、色付けし、下線を付けて、クリック可能なアピアランスを最もよく理解できるようにする必要があります。

ただしそれは1点だけです。タイトルwereに下線を引いても、リンクtoが明確ではありません。ボディコピー内に実際のリンクを追加する必要があります。「このゲームの実際のビデオを見る」または「このゲームのデモを再生する」リンクをビデオ/ゲームのデモにリンクして追加してください。サイトの訪問者に考えさせ、リンクをできるだけ明確にして、明確にするwhatリンクがユーザーを引き寄せるようにする必要はありません。

3
JonW

Baymard Instituteによる「UI:非表示要素の適切なインジケーター」というタイトルのこの投稿は、すばらしいリソースです。

http://baymard.com/blog/trigger-indicators

0
Max