web-dev-qa-db-ja.com

モバイルでのロールオーバーのベストプラクティスは?

ほとんどのモバイルブラウザはロールオーバーをタッチ/タップアクションに変換することに気づきました。これは良いことですが、もちろん、ユーザーがアクションを使用できることを示すインジケータはありません。だから私はウェブサイトを開発するときに何が最善のアプローチであるべきか疑問に思っていました:

  1. ロールオーバーを完全に回避する(モバイルおよびデスクトップ)

  2. モバイルでのみロールオーバーを無効にしました。

  3. モバイルでロールオーバーを使用する代わりに、ロールオーバーのコンテンツを横または下に表示します

  4. オブジェクトにロールオーバー/タッチ状態があることを視覚的な手掛かり/インジケーターをモバイルに追加する

  5. その他?

8
gdaniel

デスクトップでのサインインが不十分なロールオーバーを見逃したユーザーの変化は、モバイルと同じくらいあると思います。

私は+記号を使用して、これらのインスタンスでより多くを示しています。時には、より多くの情報を含む一連のロールオーバーがある場合、デフォルトで最初のものを開いて、そこに何があるかをユーザーに示します。

一般的に、ロールオーバーの背後にある情報を非表示にするべきだとは本当に思っていませんが、デザイナーはそれを続けており、それを機能させる必要があります:-)

次に、inspectlet.comを使用して、ユーザーが調査結果を見つけているかどうかを確認し、そうでない場合は変更します。ユーザーセッションは、ビジュアルデザイナーが信じている方法で常に物事を見つけるとは限らないという、信じられないほどのユーザーセッションのビデオにすぎません。

私のメインパーソナルコンピューターはWindows 8タッチスクリーンコンバーチブルラップトップ(MS Surfaceと同様)であり、タッチパッドよりもタッチのほうが私自身が頻繁に操作するので、私はロールオーバーの状態に個人的に非常に敏感です。

とは言っても、ホバーは瀕死の相互作用です。

ハンバーガーの引き出しメニューで見たように、サイト外は気になりません。ハンバーガー/オフスクリーンの背後にインタラクションを非表示にすると、エンゲージメントが低下します。理想的には、ホバー状態を完全に排除します。

モバイルデバイスでは、ホバー状態がないと、特にコントロールにホバー状態と個別のクリックアクションがある場合に、一部のレガシーWebサイトデザインの閲覧が非常に困難になります。

モバイル向けに設計するときは、ドロップダウンやホバーの状態をできるだけ避けようとするので、1番にします。

0
RossF