ここで作業中のUX部門で、UIにホバー状態が必要かどうかについて話し合っています。 。 2つの引数は次のとおりです。
反対（ディスカッションを開始）：
私は個人的にホバー状態を持たない傾向がありました…私にとって、それは非常に限られた状況を除いて実際には何の利益もなく視覚的なノイズを追加します。モバイルの世界から来て、ロールオーバー状態のようなものはありません、そして私はこれを見逃したり、基本的なアイテムに利用できることを望んでいませんでした。 PCソフトウェアは以前はロールオーバーを使用していませんでしたが、テストしたところ、現在は頻繁に使用されていることがわかります。しかし、Mac YouTube Lionの動画をいくつか調べたところ、ホバー状態を使用していないようです。
（最初の応答）の場合：
簡単な答えは、はい、ホバー状態が必要ですインターフェイスのすべてのボタンにあります。そして、私は通常、クリック可能なもの（リストボックスアイテム、リンク（ただし、無料で提供されます）、およびホワイトボードノードやテーブルセルなどの他のカスタム要素）に拡張します。私もその考えに頭を悩ませ、ホバー状態がまだ追加されていない場合は通常、追加するように強制します。
これは非常に標準的なものであり、疑問視されることはありません。私が掘り下げることができるほとんどの研究は、ホバーを使用する必要があるかどうかをテストするのではなく、適切なホバー処理と関係があります。これまで使用されていなかったのは確かですが、それはUIテクノロジーの欠陥でした。確かに、ユーザーがそれを期待している可能性があるため、この手法は事実上の要件になっています。さらに、ホバーがないことは時代遅れとして出くわす傾向があります。これらの理由と、ホバー状態がユーザビリティに悪影響を与えるとは思わないという事実と相まって、常にホバーを使用する必要があると私が言う理由です。
よくわからない視覚的なノイズ成分。私は常にデザイナーにホバーを非常に微妙にするように促します（選択した状態の60〜80％など）。それらが正しく行われると、コントロールが何かを行うという視覚的なフィードバックをユーザーに提供します。また、インターフェースがユーザーと通信するのにも役立ちます。これは、アプリケーションがリッスンしていることをユーザーに通知するかのようです。
これが会話への私の追加です（私はプロホバー状態です）：
特に非伝統的なUI要素でホバー状態が本質的に必要だと思います。[送信]ボタン、リンク、リストアイテムを使用すると、クリック可能であるという期待と想定があると思います。キャンバスなどの他のアイテム/ draggable要素は「自然な」UI要素ではないため、ユーザーはそれらのオブジェクトに関連付けられた基本的なアクションがあることを必ずしも知っているとは限りません。
カーソルの変更（通常からポインターへの変更）で十分な識別子です。何かがクリック可能であることを私は知っていますが、ほとんどの人はこの区別を理解していません。それは形の微妙な変化であるため、十分に視覚的ではありません。矢じりに焦点を合わせない限り、ほとんどnになりません。
一方、ホバー状態は、脳が形の変化よりも色の変化に自然に速く反応するため、より高い視覚刺激を提供します。
ホバー状態に関する皆さんの意見を聞きたいです。使っていますか？いつ必要だと思いますか？それとも単なる視覚的なノイズですか？
コメント
- これらのホバー状態に含めることについて、どのようなコンテンツについて話し合っていますか？ホバーオーバーの視覚的なフィードバックだけですか？ヒント、または’他の方法ではアクセスできない実際のハードデータコンテンツを含めたいですか？
- 一般的な視覚的なフィードバックだけです。
回答
「はい」と投票します！確かに、ホバーイベントはタッチデバイスが非常に人気があるため、依存すべきではありません。ただし、ジョンはボタンの視覚的なホバー状態について質問しているようです。これは少し異なります。
視覚的なホバー状態は「クリック可能性」を提供します。何かをクリックして調べる必要はありません。ボタンの場合。ラップトップやデスクトップのユーザーは、ホバー時に「クリック可能な」ものが反応することを期待しています。ボタンを「点灯」させると便利な手がかりになります。
プログレッシブエンハンスメント 。使用できるユーザーに便利です。それ、そしてできない人には無害です！
コメント
- 実際、私は’デスクトップでそれを言っています。ブラウジング環境では、カーソルが変わるだけで何かがおかしいとユーザーが思うかもしれません。私たちは変更をホバーすることに慣れてきました。
- それが私の最も強い議論/考えでした。私たちは’それに慣れてきたので、’それがないのは奇妙なことです。
- 良い点プログレッシブエンハンスメントについて。 ‘
"You shouldn't have to click something to find out if it's a button."にもう1つ追加します。 ‘ボタンが’であるかどうかを確認するために、何かにカーソルを合わせる必要はありません。 li> - ボタンに視覚的なホバー状態を追加すると、ユーザーの行動や精神的な賞の感覚に対する肯定的なフィードバックが得られるとも言えます。
- ホバー状態に大きく依存していたWindows7から移行しました。 “メトロ” divでどちらでもないことが多いWindows8では、ボタンを示すためにアウトラインやパネルがよく使用されます。 >スタイルのインターフェイス、’ Win8を使用するのは非常にイライラすることがあります。これは、MSが設計者にWin 8用にコーディングしてほしいものかもしれませんが、IMXは’これを行うのは明らかに正しくありません。
回答
デザインでホバー状態をできるだけ避けるようにしています。その主な理由は、タッチデバイスでは意味がないためです。
モバイル向けに設計していない場合は当てはまらないように見えるかもしれませんが、多くの人がタブレットやその他のタッチデバイスを使用して同じウェブサイトを閲覧するか、従来はマウスを搭載したコンピューターでのみ使用していたものと同じアプリケーションを使用します。
自分自身を制約するホバーイベントを使用しないようにすると、使用しているデバイスに関係なくエクスペリエンスが向上するだけでなく、後でタッチ固有のネイティブアプリケーションを簡単に作成できるようになります。
コメント
- ホバー状態はモバイルウェブサイトでも引き続き役立ちます。 CSS
:hoverは、モバイルデバイスで表示すると、事実上:activeとして扱われます。これにより、ユーザーの’の指がターゲットに当たったという視覚的なフィードバックが得られます。このフィードバックは、視差があるため、モバイルデザインではるかに役立ちます。視線が画面の垂直線から外れると、タップミスの可能性が高くなります。 - @JoJoホバー状態はモバイルでは検出できません’ 、タップすることは、コンピュータをクリックすることと同じです。
- ジョン、私が’モバイル上のデスクトップ用に設計したサイトを表示した経験では、 JoJoは、ホバー状態が[時々]アクティブ状態として機能すると言っているのは正しいです。 ‘少し気難しいので、’常に表示されるとは限らないので時々言います。
- @Jon I ‘ mはそれがどのように翻訳されるかについて議論していません、私は’どのように翻訳することが理にかなっているのかについて議論しています。ホバーがアクティブになった場合、どのように選択しますか？ダブルタップ？タッチパラダイム全体を壊します。
- @JoJo常にではありません。’ Android上のChromeがホバー状態を起動するとは思わないので、Safari ‘ホバー状態はしばしば厄介です
回答
の出現によりタッチはソフトウェアと対話するための主要な方法であり、ホバーベースの対話は現在「拡張機能があればいい」に追いやられていますが、ソフトウェアと対話するための要件であってはなりません。
回答
：focusの：hover状態を複製することがよくあります。これは、キーボードのみのユーザー（WCAG2を満たすために必要）のフォーカスを示すための便利な方法です。 ）これは、ユーザーがまだ開始することを決定していないアクションをトリガーするクリックイベントを必要とせずに、アイテムが何らかの方法でインタラクティブであることを示します。 ：hoverなしで：focusのスタイルを設定することもできますが、私の意見では、2つのアクションの意図は同じであり、実用的な場合は常に同じ視覚効果をもたらすはずです。
回答
また、ホバー状態はプログレッシブエンハンスメント。それを少し明確にしたいと思います。
モバイルファーストの観点から見ると、ホバー状態は実際には何の目的も果たしません。したがって、UIは、ホバー状態のないクリック可能なオブジェクトに対してクリック可能な動作を提供するほうがよいでしょう（つまり、ボタンは見えるはずです）。ボタンのように）。
モバイルデバイスでその概念をサポートできる場合は、ホバー状態が導入される前でも、デスクトップ/ラップトップデバイスでも同じ概念がサポートされます。
ホバーをサポートするデバイス（ラップトップ、デスクトップなど）にホバー状態を含めると、特定のUI要素が実際にクリック可能であるというユーザーの既存の認識が確認されます。
要約すると：
- クリック可能なUI要素を構築して、どのデバイスでもクリック可能な動作を提供できるようにします。
- ホバーをサポートするデバイスでホバー状態を使用します。要素がクリック可能であるという概念をさらにサポートします。
回答
+1で、プログレッシブエンハンスメントについて言及します。
UIを強化する有用性を提供する場合は、ホバー状態を使用することをお勧めしますが、タスクを完了するためにホバー状態が必要になることはありません。
たとえば、ユーザーがナビゲートする前に、画像にカーソルを合わせたときにアイテムに関する情報を提供するために製品リストページでそれらを使用すると、その情報は製品ページ自体でも利用できるようになります。したがって、を損なうことはありませんタッチスクリーンユーザーの経験ですが、 を見る人にとってはさらに便利です。 🙂
回答
「デスクトップとモバイルの両方を対象に設計している」からといって、設計が同じ。モバイルユーザーが慣れている可能性のあるインタラクションは、デスクトップユーザーには明らかでない場合があります。
たとえば、右側にキャレットが付いた白いカード。モバイルユーザーにとって、これは明らかにあなたがタップできるものです。デスクトップユーザーにとっては、それほど多くはありませんが（特に、カードがデスクトップ上で幅が広い場合）、ホバーしてホバー状態を確認すると、クリック可能であることが突然明らかになります。
特に今ではそのアニメーションますます一般的になっているホバー状態は、ユーザーが「意図したとおりに実行している」というフィードバックをユーザーに提供する基本的なアニメーションです。
デスクトップにホバー状態を使用しないのは怠惰で、人々を悲しませます。
回答
:hoverの状態が不可欠だとは思わない。デスクトップ上のUI要素は、それらがなくても永遠に対処し、クリックできるように明確に設計されたオブジェクト（UX.SEの[Post Your Answer]ボタンなど）は、私自身の経験で問題なくテストされます。それは「役に立たない」と言っているわけではありません 。必須ではありません。
ただし、:focus、特に:activeの状態は必須です。後者は特に、あまりにも多くのサイトで無視されているように見えます。明確なアクティブ状態は、ボタンのクリックがすぐに登録されたことをユーザーが知るのに役立ちます（これは、ユーザーがはUIでオブジェクトを直接操作しています）。ボタンやメニューなどのシステムコントロールもすべてその状態を期待しているため、それらを忘れることはさらに許されません。
回答
ホバー状態は、問題の要素がインタラクティブであるというユーザーの期待に肯定的なフィードバックを提供し、それによって疑問や曖昧さの否定的な感情の可能性を排除することをお勧めします。
デザインは、要素がインタラクティブであるという多くの手がかりを提供します-形状、サイズ、位置、色、下線など。ユーザーが異なれば、必要な手がかりも異なります。 s、そしておそらく要素がインタラクティブであることを認識（そして自信を持って）するための、異なる数の手がかりの累積効果。ホバー時に要素を変更することは、より多くの手がかりを提供する機会です。
ほとんどの（すべてではないにしても）ブラウザは、カーソルをポインタに変更することにより、デフォルトでホバー時にキューを配信します。もちろん、これを制御でき、この効果を削除することでホバー状態を削除できます。しかし、私たちのほとんどにとって（想像してみてください）、これは私たちのブラウジング体験に重大な疑問をもたらすと思います。ブラウザ（および設計者）は、ホバー時に追加のキューの前例を設定しているため、キューを配信しないと、要素がインタラクティブであるという以前に認識されていたキューとは大きく矛盾します。
ブラウザのデフォルトの削除したがって、キューはホバー状態の値の有用な例です。したがって、私にとって問題は、ホバーでの双方向性の視覚的なキューが価値があるかどうかではなく、どれといくつのキューが最適であるかということです。
いくつかありますよく知られている便利な前例ですが、この質問への回答は、アプリケーションと対象ユーザーによって異なります。
回答
お勧めしますボタンにアイコンがないときにホバーします。ボタンにカラフルなアイコンがある場合、ボタンにホバー状態を指定する必要はありません。例：Googleボタンを使用してサインアップします。
回答
オンラインで適切な応答が必要なすべてのウェブサイトでは、ホバーが必須です。私はいくつかのウェブサイトを使用しました。私のラップトップでホバーステータスを捨てました、そしてそれは非常にイライラしました。優れたデザイナーなら誰でも、オンラインの人々が欲しいものを見つけようと急いでいることを知っています。ボタンがボタンであるかどうかがわからない場合は、新しいタブで開く必要があります。これは大きな問題です。失敗！
正解です。モバイルでは、ホバーは必要ありません。ただし、モバイルではいつでも無効にすることができます。また、モバイル用のボタンはオンライン用のボタンよりもはるかに大きくする必要があることを忘れないでください。そして、とにかく2つの異なるスタイルシートで作成されたのではないでしょうか。
コメント
- Webサイトの場合、カーソルスタイルを手（または同等のもの）に切り替えることは、私が作用するホバー効果です。
- ウェブをできるだけリアルに機能させたいので、ホバーを表示する必要があると思います。実際の生活の場合はクリックすると、ユーザーが混乱します。また、ストラテジスト’の観点からは、ウェブサイトの安全性を高めたいと考えています。’詐欺サイトは’ホバー効果をわざわざインストールしません。したがって、ユーザーが’効果を確認できないと、内部で奇妙に感じ始めます。