要素の点滅、バウンス、点滅
私はソフトウェア開発会社のUI/UXを担当しています。
私が不在の間に、一部の開発者は、ウェブサイトのボタンに「バウンス」効果を実装することを決定しました。
基本的に、このボタンは10秒ごとにジャンプして注意を引きます。ボタンは、ソフトウェアのヘルプコンテンツを指します。
私は通常、煩わしく煩わしいアニメーションには反対ですが、このトピックについて詳しく知りたいのですが。私は個人的に、この解決策は非常に煩わしく気を散らすものだと思います。
点滅、バウンス、回転、ズームの効果をどのように処理すればよいですか？ベストプラクティスはありますか？
私の本では、コントロール要素のすべてのアニメーションは、ユーザーアクションによってのみトリガーされる必要があります。たとえば、大きなフォームやフルスクリーンのワークフローでは、何かが完了したら、次のステップの追加の視覚的な合図としてアニメーションを使用できます。 This Than That（ifttt.com）が良い例である場合-Nextをクリックすると、ページが次のステップに自動スクロールします。
ランダムなアニメーションは、現在のタスクからユーザーをそらし、その メンタルフロー を壊します。これは特に、手元のタスクのワークフローに影響を与えない要素に関係しています（例のヘルプボタンなど）。
コメントでジョジョが言ったように、ヘルプシステムにリンクするボタンにユーザーの注意を引く必要がある場合、根本的に何か問題があります。ヘルプページにリンクだけでなく目立つボタンがあるという事実は、ユーザーエクスペリエンスに問題があることを示しており、誰かがより目立つ必要があると感じているという事実-10代の若者が必要とするように揺れ動く Ritalin -どこかで何かが致命的に壊れていることを示します。
より広い質問の観点から言えば、はい、動きは注目を集める有効な手段です。私は、ウィンクボタンを実装して、それに注目を集めました。ただし、バナーの失明の問題はここで非常に重要です。ほとんどの通常のWebユーザーは、揺れ動くボタンが広告であることを想定しているため、クリックしないでください。また、同じことが多くの「賢い」アニメーション技術にも当てはまります。それらは非常に優れて適切である可能性がありますが、ユーザーの期待は、何かを宣伝する必要があるということです。
IMOは、ヘルプへの有効で適切なリンク、またはむしろ、現在のタスクに関連する詳細情報を強調表示する必要がある場合、別の色またはサイズを使用するか、色を簡単に変更することも目的に適しています。
私はほとんどdnbrvに同意しますが、製品のパーソナリティが「生きている」、または熱狂的で制御されていない場合、おそらくトリガーされないアニメーションの場所があると思います。たとえば、子供向けの本の次のページのボタンは、シーンに適している場合は息をのむ、またはけいれんを起こしているように見える場合があります。また、必死の動きや気晴らしの多い子供向けのゲームショーのサイトにある場合もあります。それらの場合、それは実際に製品の周囲の特徴に追加されているので、それはメンタルフローから気を散らさないかもしれません。ただし、たぶんユーザーが行き詰まっている可能性があると考える正当な理由があり、インターフェースに他の側面がある場合を除いて、小さな微妙なTwitchを除いて、ヘルプボタンには表示しません。個性-10秒に1回ではありません。
少なくとも、ユーザーが1回クリックした後、バウンドを停止するようにします。それがユーザーの気を散らすものである場合、ユーザーにそれを停止する機会を与えます。
ただし、ヘルプの内容が非常に重要なので、誰もがクリックする必要があるとは思えません。誰もが読む必要があるものがある場合は、それをページに正しく配置しないでください。
それはすべて異なります。少し跳ねるボタンが適切であるシナリオを想像できます。
特定のUI要素に注意を引くのに役立つ3つの基本的な心理的メカニズムがあります。
- 突然の動き
- コントラスト
- サイズ
私たちは最後の2つをよく知っています...場合によっては最初の1つを使用しないのはなぜですか？
どちらがあなたのケースに適していますか？これは、定性テストと定量テストの両方で問題になります。仮定とステレオタイプだけに基づいてそれを拒否するつもりはありません。
上記の答えを補足するために、アニメーション化されたUI要素は目立たなくすることができます！、私は Boagworlds がほとんど認識できないCSSアニメーションを使用する方法についてPaul Boagのポッドキャストを聞いていて、ポッドキャストが非常に興味深いことがわかりました