より良いユーザーエンゲージメントのための集中的なインターフェースの設計

ユーザーエンゲージメント プロジェクトごとに異なる方法で達成できるトリッキーな測定基準です。ほとんどのデザイナーは インタフェース 彼らが対話性について話すとき、しかし ページコンテンツ ユーザーとのやり取りも促進できます。より良いユーザーエンゲージメントのために、それは重要です 魅力的なコンテンツを書く, そしてその内容を提示する キャッチーなデザイン.

それは言われたよりはるかに簡単に言われます、しかしあなたがいくつかの基礎を学ぶならばあなたは問題を起こさないでしょう。 優れたコンテンツを備えた集中UI あなたのプロジェクトのために.

この記事では、増やす方法を紹介します。 ユーザーインタラクションとコンテンツエンゲージメント Webベースのインタフェースで。これらは、訪問者を引き付けるための最も一般的な2つの方法です。 経験を最適化する あなたは問題ないページメトリック上のその有利な時間を増やすことがないでしょう.

ノベルティを捉える

の概念 ノベルティ 文脈に基づいて、一般的に新しい、多くの場合非常に新しい、ユニークなイベントや事柄を定義します。. 新しいイベント なぜなら彼らは 目立つ. これは、新規性があると思われる要素を表すインターフェース設計にも当てはまります。 ページから飛び出す.

私は最近、エンゲージメントに関してノベルティの重要性を議論する素晴らしい記事を見つけました。ユーザーは 斬新な体験、インターフェース、そしてUI要素に引き寄せる 彼らは違うからです。異なって設計されているという唯一の事実は、しばしば注目を集めます。.

一般的な例の1つは、ほとんどのランディングページにあるアクションボタンの呼び出しです。また、ノベルティを構築することができます 背景写真、イラスト、またはアプリのスクリーンショット, Uber for Businessのリンク先ページなど.

このページにはアクションボタンへの呼び出しがありますが私の注意はすぐに スクリーンショットに行きます. 最初にロードされたときにアニメーション化されるので、これが組み合わさります 動きのあるデザインの目新しさ 注目を集める.

代わりの方法はGiftRocketを使うことです リンクとして示されているアイコン サイトをさらに掘り下げる.

これら両方の例 彼らの利点に目新しさを使う. あなたはいつもそのサイトに人々を引き込むことはできませんが、あなたが彼らの注意を引くならあなたはより良い結果を見るでしょう 内臓レベルで 最初.

デザインは 最初のもの 訪問者は見ます、そしてあなたは彼らの注意を引く必要があります 数秒以内に さらなる関与を促す.

スキム可能タイポグラフィ

調査によると、ほとんどのユーザー Webページをスキャンする 単語ごとに読むのではなく。あなたはおそらくあなたのコンテンツを読むことに人々を引き込むことを望むでしょう、しかしあなたはそんなにすることができるだけです.

最善の方法は、作成することです。 スキムコンテンツ 見出し、太字のテキスト、そしてあなたが言おうとしていることを説明する写真を使って。私は少なくとも考えることができます 3つの強力なライティングテクニック あなたのコンテンツに採用することができます 読みやすさを向上させる：

コンテンツを分割する 明確な字幕付き
段落を分割する 小さくする
箇条書きリストを使用する ポイントをもっと早く共有する

目標は読者を守ることです ページを下に移動 必要なあらゆる手段によって。コンテンツを小さく保つことによって 一口サイズの塊で あなたは注目を集め、人々をそのサイトにさらに追いやるのにずっと簡単な時間があるでしょう.

この書き方の例については、Quick Sproutブログを調べてください。内容はNeil Patelによって書かれており、彼はしばしば非常に長い形式の内容を書いていますが、彼は 段落を分割する それぞれ1〜3文に.

あなたが持っている場合 適切な見出し, そして使う 画像/箇条書き コンテンツ全体を通して、人々はもっと読みやすくなって読むでしょう。またするようにしてください 空白の量を増やす 段落間. 余白と余白 どちらもレイアウト設計と読みやすさにおいて大きな役割を果たします。.

実際になるようにテキストをデザインする 読むのが楽しい. 退屈なコピーは誘惑しないでしょう、しかしどちらもあまりにも小さいかコントラストを欠いている楽しいコピーをしません.

人目を引く画像

Backlinkoによる最近のケーススタディは、そのページを示唆しています 少なくとも1つの画像を含む 一般的に より高いランク 画像のないページよりも。これはSEOの観点からは素晴らしいです.

しかし、ユーザーエンゲージメントはどうでしょうか。あなたがその1つの画像を保つことができるなら ひだの上 または 一番上に近い また、バウンスする前に訪問者の注意を引くでしょう。斬新なページ要素は引き付ける傾向があることを忘れないでください.

あなたがページの至る所に散らばっているイメージ（または多くのイメージ）があるとき 単調さを解消する テキストブロックを退屈な。ユーザーは 読書を休む 画像を鑑賞するため、または画像と書かれたコンテンツを結び付けるために。しかし、ほとんどの設計手法と同様に、品質は量よりも価値があります。.

Mozの事例研究では、高品質の画像は 訪問者を維持する ずっと長い間ページ上に。一方、低品質の画像 うまくいかない そして場合によっては、訪問者に 早くバウンスする 画像なしよりも。少なくとも1つの画像を含めるようにしてください。 コンテンツに関連する そしてそれ 読者に価値を提供する.

TechCrunchは、記事の中で注目を集める画像を使ってこれを行います。 折り目の上の特集写真.

WordPressでは、投稿サムネイル機能を使用して、注目の画像を簡単に追加できます。投稿する投稿ごとに個別の写真を設定して、ページの上部に表示するように強制することができます。これは訪問者に一瞥を与えるのに最適な方法です。 コンテンツの内容, そして増やすクリック率投稿サムネイルも含む関連投稿ウィジェットの場合.

対照的なページ要素

ページ上の特定の領域に注意を向ける必要があるなら 非対称 あなたの親友であります. コントラスト デザインの特定の領域またはコンテンツの特定のブロック間のハードウェッジを推進する.

お客様の自然 コントラストに向かって激怒 違うから。色、サイズ、または空白の大きな並置は目を引きます。 他のすべての型を壊す レイアウト内.

対照的なページ要素の私のお気に入りの例は、おそらくSketchのホームページです。たくさんのコントラストが見つかりました 2つの行動を促すボタンの間, スケッチトライアルをダウンロードするためのものとコピーを購入するためのもの.

購入ボタンはフルバックグラウンドカラーを使用しています はるかに明るい ヘッダーの他の色より。ボタンのテキストも無料試用ボタンに比べて明るくなります。これにより、訪問者は[今すぐ購入]ボタンをクリックできます。 視覚刺激のみから.

あなたは気づくでしょう 同様の手法 Optin Monsterのホームページで。このヘッダには、Get OptinMonster Nowというラベルの付いたボタンが1つだけあります。それは目に見える他の緑の要素がない青色の背景に明るい緑色のボタンです.

色、サイズ、および形状はすべてそれが理由であなたの注意を引きます 他のすべてと対照的 ヘッダーに。ボタンのすぐ横には、ビデオプレビュー用の小さなテキストリンクがあります。それはおそらく素晴らしいビデオであり、それは注目に値するが、トライアル/サインアップCTAボタンほどではない.

ブログの場合、ユーザーエンゲージメントにはさまざまな資格があります。一般的な選択肢の1つは ニュースレター登録フォーム Aeolidiaの例のように.

コンテンツの一番下までスクロールすると、 ファンシーシャマンシーの申し込みボックス ニュースレターのフォーム専用に設計されています。それはページの残りから際立っています ユニークな背景色、楽しいタイポグラフィ、そしてかわいいKing Tritonアイコン.

対照的にデザインするための最善の方法は、例を研究し実験することです。何がうまくいくか、何がうまくいかないかを見る A / Bテストでメトリックを追跡する. あなたがより多くの例を探しているなら、生の非対称的なウェブサイトのヒントとスクリーンでいっぱいのこのCodrops記事をチェックしてください.

ユーザーとの対話を促進する

訪問者をサイトに興味を持たせる方法はたくさんありますが、最も一般的な方法は 彼らにものをやらせる. これは静的ブログと動的ソーシャルサイトの両方に当てはまります。これにはフリーサイズのトリックはありません。あなたはユーザーを作るために何でもすることができます ページに没頭する.

で 静的サイト, あなたはたくさん追加するかもしれません 関連リンク もっと読むために、または含める 画像スライドショー. あなたもすることができます フォームを追加する ユーザーのコメントやEメールニュースレター.

なると 動的インターフェース, このサイトの目的は通常、ユーザーの参加を促すことです。最大のハードルは ユーザーを教える サイトのしくみ、およびインターフェイスと適切に連携する方法.

KissMetricsがユーザーエンゲージメント技術について語っているこの投稿をチェックしてください。私が見つけた最高の戦略の1つは、 ガイドツアーをデザインする それは訪問者を通す 主な機能のそれぞれ.

Twitterの見込みがまったく新しいユーザーにとってどの程度混乱するかについて考えてみてください。誰もフォローしておらず、フォロワーもいない場合、なぜ彼らはツイートするのでしょうか?

の “提案に従ってください” 登録中のボックスは新規ユーザーに役立ちます Twitterのしくみについて詳しく知る. この機能は初心者ユーザーに 参加を開始 プラットフォームと 機能を試す 次のようなツイート、ツイート、プライベートメッセージ.

ガイド付きツアー以外にも必要なことは インターフェースを簡単にする. 主な機能は 1-2クリック ユーザーのダッシュボードまたはメインページから。直感的なインターフェース 説明が必要, そして簡単 注目を集める ずっと早く.

これらのテクニックをすべて理解することで、次のようなインターフェースを簡単に構築できるようになります。 ユーザーの問題を解決する, そして 新規ユーザーの参加を奨励する. もっと探しているなら UXデザインエンゲージメントのヒント これらの関連記事をチェックしてください。

エンゲージメントを高めるためのユーザーオンボーディング戦略 （thinkapps.com）
段階的エンゲージメントの授業 （uxbooth.com）
新しいユーザーがあなたの製品の使い方を学びたいと思ってはいけません （uxdesign.cc）