web-dev-qa-db-ja.com

ページ下部のティーザーをスライドしますか?

ますます多くのサイトで、ページの下部に「スライドアウトティーザー」と呼ばれているものが表示されています。ページを下にスクロールして下部に近づくと、小さなボックスがスライドして表示され、通常はウィンドウの右下隅(ページではない)に固定されます。

このように、NYタイムズから:

http://www.nytimes.com/
NY Times teaser slide-out

またはこれ、ui-patterns.comから:

http://ui-patterns.com/
up-next call to action
この実装が(a)スライドではなく表示にフェードインするが、(b)トリガーが少し早すぎるように見えることに注意してください。


このデザインパターンは何と呼ばれ、UXの影響は何ですか?

4
Erics

まず第一に、私はこれがNYTの執行に好意的です。私はしばしばその箱から他の記事に行きました。この実践には厳しい言葉があるようですが、それらはそれがどのように使用(または乱用)されるかについての仮定に根ざしているようです。 「安っぽい、無駄な内容の箱」というデザインパターンはないと思います。

これは、jqueryの実装が容易なために人気が出てきた洗練されたサイト全体に見られる通知パターンに似ています。このページの上部だけを見てください。Stackoverflowは、ログインしたとき、新しいバッジを獲得したときなどに、ページ上部の通知をアニメーション表示します。

とにかく、あなたの質問に-この特定のパターンは、ユーザーが特定のコンテンツの最後に近づいたときに、何らかの追加アクションを提示するという概念に関連付けられているようです。だから私の言葉:アンカーされたアクション。または多分アンカーされたコンテンツのアニメーション

よくできました。メインのコンテンツスペースに干渉しないようにしてください(NYTは右の列とオーバーラップしているだけで、その列のすべてのコンテンツがスクロールされた後でのみ)。優れたUXプロフェッショナルは、重要な情報をナビゲーション/表示するための主要な手段としてそれらに頼らずに、それらを控えめに使用するように設計します。

また、Daniel Newmanが述べたように、これらは特定の画面サイズに依存する可能性があります。モバイルインターフェイスやその他の小さな解像度では、これらを回避する(または少なくとも慎重に行う)必要があります。

1
Voodoo

したがって、パターンの名前付けについて話すとき、パターンの名前には常に2つの要素があるように見えます。 1つはパターン化されるアイテムで、もう1つはその動作/アクションです。したがって、たとえば、「インライン編集」はフィールドを編集していることを示し、編集の動作は「インライン」です(クリックして編集するなど)。一般的な用語は、「インライン」、「ホバー」、「連続」、「ダイナミック」、「プロンプト」、「スポットライト」、「ドラッグアンドドロップ」、「モーダル」などのようです。

この場合、トリガーに基づいて表示されているものがあります-ページ上の位置、ページ上の時間、下にスクロールされた距離(たとえば、ページの一番下まで70%)、などです。実装に応じてフェージング。

SIMILAR機能について私が見た1つの用語は「トースト通知」です。 http://bit.ly/spg3yr および http://bit.ly/st3OLL

私はそれがあなたのニーズに合っていると思います-それは何が起こっているのかを私たちに教えてくれます:「トースト」、つまり何かが所定の時間(トーストの準備ができているとき)にポップアップします。何が表示されているかを示します-「通知」。

通知の代わりにアプリケーションとなる可能性のある別の用語は、「行動を促すフレーズ」です。したがって、トーストの行動を促すフレーズと考えることができます。この場合、ユーザーに何かをしてもらいたいと思います-新しい記事にクリックスルーし、フィードバックを提供し、アプリを評価してください。

使いやすさの点では、この概念はすでにOSXとWindowsの中で目立っています。グロール通知、システムトレイ通知などはすべて、この同じタイプの動作の形式です。動作しているインターフェースの範囲外で、目立った方法で発生したことをユーザーに伝え、ユーザーがそれに対処できるようにします。私は、うんちする人のうち少なくとも何人かが、うなり声を有効にしてOSXを使用していることにも喜んで賭けます。私はバッシングではありません!指摘することは、私たちが思っているよりもユビキタスであることを指摘しています。

したがって、これをトースト通知またはトーストの行動を促すフレーズと呼びます。 「フレーム」または「スコープ」の外側にある作業用インターフェイス/読み取り領域の何かをユーザーに目立つように通知し、ユーザーがそれを操作できるようにする場合に使用します。これには、閉じること、クリックすることなどが含まれます。

お役に立てれば!

9
Mike Earley

通常、それは全体的なデザインが非常にジャンクで役に立たないことを意味し、ユーザーが興味を持つかもしれない何かを置きたいとき、すでにそこにあるすべてのジャンクのために人は単にできません。

そのため、プロジェクトのある時点で、そのようなバナーを追加することをお勧めしますが、デザインから何かを削除し、単純化して、さらに価値を追加する必要があることは良い兆候です。

UXの影響について:

  1. バナーのように見えるため、バナー失明の犠牲になる可能性があります。
  2. ユーザーは通常、自動アクティブ化されたアニメーションを好まない。
6
Nikita Prokopov

私は「userscripts.orgにアクセスしてブロッカーを見つける時間」と呼んでいます。

真剣に、これをしないでください。アニメーションは、ユーザーにとって重要なものに使用する必要がありますnotマーケティング部門。

4
John Y

他の回答からわかるように、一部の人々はこのような相互作用にあまり興奮していません。これは、視聴者が不適切に使用されたときに、視聴者をどのように虐待するかと関係があると思います。

これをアラートメカニズムとして使用すると、Mike Earlyの回答は素晴らしいものになります。これはニューヨークタイムズの戦略ではないようです。プロモーションツールとして使用されます。これは悪いことではありませんが、ユーザーよりも(短期的にはクリック数を増やすことで)会社よりも簡単に利益を得ることができます。

私はこれが数回よく使われるのを見ただけです。 NY Timesそれらの1つではありません。奇妙なことに、そのうちの1つは Khoi VinhのWebサイト にあります。彼はニューヨークタイムズのデザインディレクターでした。

アイロニー?多分それが彼が辞めた理由です。 :)

Previous Post Call to Action

「前の投稿」ボックスがデザインの一部であるように見え、投稿の最後とコメントの最初の横に並んでいることに注目してください。これは、人々が読書を続けるか、何か他のものを探す決定をするかもしれないときです。

Scrolling Previous Post Call to Action

次に、コメントをスキャンしながらページをたどります。この時点までに、コンテンツのほんの少しをスキャンしていると思いますが、ボックスを移動してもそれほど大きな気が散ることはありません。

Stopped Previous Post Call to Action

その後、まだデザインの一部のように見える場所で、コメント領域の最後で停止します。この時点では、フッターの邪魔にはなりません。現在または以前の投稿とは関係のない、さらなる情報を人々が探す可能性があるからです。

これはあなたが言及したような「スライドアウト」ではないことを理解しています。しかし、関連するコンテンツを宣伝するためのツールの適切な使用と誰かの注意を要求することの間に線を引くかもしれないところです。何かの流れに自分自身を挿入する何かは、役に立つとは考えられない方法で人々の注意をそらすでしょう。

私は何度も乱用されるアイデアを守るために本当に一生懸命努力しています...うまくいけば、それはすべて理にかなっています!

1
Dan Ritz