web-dev-qa-db-ja.com

これらのリンクをクリックしてわかりやすくするにはどうすればよいですか?

私は歯科技工所のウェブサイトの再設計に取り組んでいます。

ユーザーがホームページをテストしている間、サブナビゲーションのリンクをクリックしたことはありません。彼らはメインページへのリンクにある大きなボタンをクリックしました。

ワイヤーフレームを作成したときの前提は、ユーザーが必要な操作に基づいて説明リンクをクリックすることでした。彼らが意図したアクションをクリックするだけのリストを用意しておくと非常に便利だと思いました。

このサイトは歯科医と歯科助手を対象としているため、テストにひどい欠陥があった可能性が高いと認めますが、最初のテストグループの人々はオフィスワーカーでした。私はそれを考えすぎず、特定のタスクを達成するためだけに説明しようとしました。しかし、彼らは審美的なフィードバックを与え続けたので、私はそれがプロトタイプであることを説明するのに時間を無駄にしました、そして私はグラフィックスへのアドバイスを必要としませんでした(もちろん丁寧に)。

また、これは大したことではないかもしれないことも認めます。 screenshot of homepage middle section

編集:ここで他の専門家からいくつかの提案を受けた後、別のリビジョンを作成しました(まだユーザーでテストされていません)。そして、これは追加のコンテキストのページのより多くを示しています。

Version 3

私はビジュアルデザイナーではありませんので、「デベロッパアート」はご容赦ください。コンテンツファーストのデザインアプローチを取る。レイアウトをテストするために一緒に投げました。

8
JGallardo

あまり読みたくないユーザーは、ボタンが十分に明確ではなく、主ボタンが目立ち、注意を引くことがわかるでしょう。

2つのオプションを提案できます。

  1. 以下の画像のように、リンクごとに微妙なボタンを作成します
  2. 他のボタンと同じ矢印を使用して強調表示し、ユーザーがリンクであることをすばやく識別できるようにします-識別した言語を使用します

アイデアは、ユーザーにマウスを動かして見つけなくてはならないものとクリックできないものをユーザーに示すことです。

一貫性が鍵となります。ボタンに矢印を使用する場合は、すべてのボタンに矢印があることを確認してください。 1番目のレベルのボタンの背景が青色の場合、2番目のレベルのボタンの背景は灰色になる可能性があります。どのデザインを選択する場合でも、サイト全体で一貫性を保つようにしてください。

buttons

9
Rosie

おそらく何が起こったのか、あなたの被験者はページをスキャンして、目標に向かってナビゲートするための論理的な次のステップを見つけました。ボタンはあなたに飛びつき、サイトの構造への論理的なステップのように見えます。このような明確なアクションが開かれていると、ユーザーは通常、このページで他に何をすべきかを理解するのに多くの時間を費やすことはありません。他のリンクで使用されている専門用語の多くを理解していないために、被験者がコンテンツに関与していなかった場合、他のリンクを試さなかったのは不思議ではないと思います。リンクは正常に見えます。リンクはクリックできないコンテンツとは異なる色であり、青色であり、クリックできることを示す十分な表示があります。

それらは、リピーターがサブセクションにジャンプできるようにするクイックリンクのように見えます。それが彼らが行うことになっているのであれば、彼らが機能しているかどうかを確認するために、より持続的なテストを行う必要があります。

ただし、次のことをテストしてみてください。

  • これらのリンクをクリックすることが可能であることを彼らは理解しましたか
  • クリックすることで何が起こるか理解していたか
  • リンクはコンテンツに関連して意味がありますか
5
Koen Lageveen

「例のページにあるその他のオプション」という文には驚かされます。上記のリンクのいずれかをクリックすると、間違いを犯す可能性があります。私は行き止まりにたどり着くことができました。その後、私は戻る必要があります。私は時間を失っていただろう...私は常に概要ページを通して安全なルートを選びました。

次に、一般的なページからより具体的なページに移動するのに慣れています。現時点では、私の選択肢が逆に提示されているか、十分に説明されていません。

1つのオプションは次のとおりです。

サムネイルの下に1つまたは2つの文を記述し(コンテンツはそこにあると思います)、「サンプルページの詳細」、ボタンの順に記述し、「人気のあるページに直接アクセスする」などのように記述してから、リンクを記述します。

3
John

リンク間に垂直方向の空白をさらに追加します。ページの残りの部分からのこのわずかな分離により、リンク列に簡単に区別できる一意の視覚的階層が与えられます。空白は、リンクを読みやすくし、支配的にします。

2
Kenny Rosenberg

テスターは当然、あなたのウェブサイトで受け取るユーザーとは異なります。ウェブサイトにアクセスするユーザーは製品やサービスに関する情報を探すためにそこに行きますが、テスターは機能をテストしてウェブサイトの流れを確認するためだけにそこにいます。主ボタンは、サブナビゲーションよりもはるかに目を引くものであり、Webサイト全体を進めるための次のステップとして明白です。

リンクはクリック可能であることは明らかですが、問題は、ユーザーを十分に引き付けないことです。ただし、あまりにも多くの変更を加える前に、まず他のユーザーとさらにテストを行うことをお勧めします

2
Serberuss

ここでの問題は、デザインがWebナビゲーション規則に従っていないことだと思います。

一般的な永続的なナビゲーションはありません。

  • まず第一にそれは私によく考えさせますそれは簡単なはずですが
  • locationは標準ではありません。私はそれがトップページまたは左側にあると予想しますが、ホームページの中央にはありません(それがホームページの場合...)。ホームページのナビゲーションの一部(つまり、クイックリンク)を複製できますが、これがWebサイトをナビゲートするための唯一の手段ではありません。
  • プライマリナビゲーションアイテム、つまり「サービス」はセカンダリナビゲーションアイテム、つまり「BruxZir」、「IPS e.max」ですが、論理的には階層構造であるため、である必要があります。もちろん、タイトルも黒で表示されていますが、クリックできないようです。ナビゲーション要素ではなく、パネルのコンテンツの単なる説明です。
  • 主なナビゲーション項目はボタンですが、リンクである必要があります。ボタンをアクションに関連付け、リンクを場所に関連付けます。それらを混合すると混乱します
  • セカンダリナビゲーションアイテムは下線なしなので、ホバーするまで、それらがリンクであることを示すものは何もありません(見つけにくい)

別の人がサムネイルの下にもっと多くのテキストを勧めていました。私はあなたに反対のアドバイスをします不必要な言葉は省いてください。ナビゲーションが簡単ではない場合は、ハッピートークでそれを改善することはできません。

そして命令は死ぬ必要があります。ユーザーはとにかくそれらを読むのではなく、すばやくスキャンするだけです。

TL; DR:これらのリンクがコンテンツをナビゲートする唯一の方法でなかったとしても問題はありません。慣例に従っていないため、混乱を招きます(設計のために使いやすさが犠牲になっています)。

0