web-dev-qa-db-ja.com

行動を促すフレーズではなく、ユーザーの注意を引くために使用される新しいデザインパターン

Seek.comの求人Webサイトでは、ナビゲーションの上部に興味深い小さな文字があります。

enter image description here

このキャラクターにカーソルを合わせると、小さなインタラクション/アニメーションがあります

enter image description here

これは基本的に、キャリアアドバイスナビゲーションメニュー項目の選択領域を拡張します。

このデザインパターンには、プライマリUI要素の補助UI要素であるが、明示的にそのようにラベル付けされていない用語があるかどうか疑問に思っています。

10
Michael Lai

UIマスコット

...繰り返しの多いタスクは、ユーザーの維持に苦労することがよくあります。人々は退屈を感じ、退屈は単に刺激の欠如であるため、ユーザーを放棄します。 humormovement、ユニークアート、ゲームの要素、および関連性のある文字ユーザーに別の方法を感じさせることができます—より興奮し、気を散らすことが少なくなり、最終的には幸せになります。

From Design Emotional Interfaces


このタイプの要素は正確な名前を持っているとは思いませんが、おそらくそのすべてのコンポーネントを分析すると、グローバルなアイデアが浮かぶかもしれません。 スマッシングマガジン にはいくつかの優れた記事があり、グラフィックとUIデザインのコンセプトが含まれていますが、それらはすべて同じ目的を持っています。

  • 動機付ける
  • 言い聞かせる
  • 刺激する

マスコット

グラフィックデザインでの「マスコット」の使用は新しいものではなく、その意味は非常によく知られています。ユーザーを親しみやすい方法で製品に近づけることです。いくつかの例があります Bibendum 、Energizer Bunnyなど。

ユーモア

ユーモアは、効果的なUXの重要な要素である、ユーザーにとってより深い感情的な体験につながる可能性があります。

出典: Incorporating Humor In Web Design

この記事では、ユーモアの種類の中に、 Personification について説明するセクションがあります。質問のインターフェースの例は、ほとんどボタンの擬人化です。

アニメーション

ほぼすべてのインターフェイスがアニメーションの形式を使用しています。これは、ある状態から別の状態に移行する自然な方法です。しかし、UIのアニメーションは、状態の変化を示すよりもはるかに多くの目的を果たすことができます。これらは、静的な視覚よりも直接注意を促し、何が起こっているかを伝えるのに役立ちます。またはこれまでにできたコピー。動きは視覚と運動感覚の両方の学習を刺激します。つまり、ユーザーは集中力を維持し、モノの使い方を理解する可能性が高くなります。

出典: Designing emotional interfaces

ゲーミフィケーション

ゲーミフィケーションとは、ゲームのような設定を使用してユーザーのモチベーションを高めることです

出典: ゲーミフィケーションと現代の説得の関係

特に、ゲーミフィケーションはアニメーションでのみ表示されます。この場合、ボタンをアクティブにした後、インタラクティブ性を超えてアクションがないため、そのボタンをクリックするように求められます。


要約すると、アニメーションマスコットはインターフェースの退屈さを壊すと思いますhumorを使用して、gameとしてインタラクティブに参加するようにユーザーを刺激する。

Seekインターフェースプレーンを想像してみてください。

enter image description here

これらすべての概念をまとめると、UIマスコットについて話し合うことができますか?

4
Danielillo

そのためのドイツ語の単語があります(グラフィックデザインにおけるこの非常に特殊な目的のため): "Störer"。私はeye-catcherに翻訳して見ました。

目的は単に破壊的なマーケティングであり、コンテンツの自然なスキャンを妨害することです。

個人的な逸話:目をそらすことは難しいので、マーケティングマネージャーは絶対にそれを愛しています。しかし、注意してください。使いすぎるとユーザーが抑止され、ユーザーフローが中断されます。

以下はYouTubeの例です: Youtube Screenshot with eye-catcher visible over video

4
KMSTR

注目を集めるのは、イラストがフレームから外れるパターンだと思います。実装するのは難しいですが、見栄えがよく、主要なアナウンスでうまく機能するはずです。

enter image description here

リンク: https://dribbble.com/shots/11298443-Finezjo-Dashboard

1
Mike Mark

名前があるかどうかはわかりませんが、ここでは2つ使用されています。 1は、実世界の対応物を使用するため、スキューモーフィズムとして分類できます。 2つ目は、類似するオブジェクトのグループの1つを異なるものにすることで、強調を追加することです。

Trelloもこの方法をいくらか使用して、ユーザーに新機能があることを知らせています。

enter image description here

新しいタグを使用した非変形形態の例

enter image description here

1
Ameen Akbar

これは素晴らしい質問です!私もこの種の相互作用を探しました、そして良い結果に対応するいくつかの検索クエリは以下を含みます:

  1. onHoverアニメーションイラスト
  2. mouseOverアニメーションイラスト
  3. CSSホバー効果のイラスト

ここでチュートリアルと同じの例を見つけました: https://www.mockplus.com/blog/post/best-animated-websites

0
harshikerfuffle