製品に個性を与える: 感情的なデザインの要素と実例

[編集者注] この記事は、@C7210 によって Smashing Magazine から翻訳され、彼の個人ブログ BeForWeb に掲載されました。この記事で言及されている感情的デザインは、ユーザーが製品と対話する際にポジティブな感情を生み出せるように、ユーザーとの人格レベルでのつながりを確立することを目的としています。

事例では、ユーザーが製品をより良く使用できるようにする方法と、ユーザーがより快適な体験をできるようにする方法を紹介します。これらすべての目的は、ユーザーが積極的にこれらの肯定的な体験を共有し、他の人に広めることを奨励することです。

Flickr はユーザーのために多くの興味深いログイン ウェルカム メッセージを用意しています。これは実際には見落とされがちな詳細ですが、Flickr の全体的なデザイン スタイルと製品の気質も、このような多くの詳細で構成されています。おそらく、これらの詳細が製品から消えたときに初めて、私たちはそれらに気づき、それを懐かしく思うようになるでしょう。

私（英語版の原著者）は、これらの詳細がユーザーの感情的な反応を引き起こす可能性があるため、特に注意を払っています。適切に使用すれば、細部に潜むこれらの小さな悪魔は、よりパーソナライズされた製品を作成し、ユーザーが製品と対話する際に肯定的な感情的反応を示すのに役立ちます。そして、この肯定的な姿勢は、ユーザーが製品を積極的に広め、支持することを効果的に促します。ユーザーとのパーソナリティレベルでのつながりを確立するこのデザインアプローチは、「感情的なデザイン」とも呼ばれます。

ちょっとした理論

「エモーショナル デザイン」という用語は、ドナルド ノーマンが同名の著書の中で作った造語です。 『Designing for Emotion』の中で、著者のアーロン・ウォルターは感情的なデザインをマズローの欲求階層と結び付けています。人間の欲求が生理的欲求、安全欲求、愛と帰属意識、自尊心、自己実現の 5 つのレベルに分けられるのと同様に、製品の特性も低から高の順に、機能性、依存性、使いやすさ、快楽の 4 つのレベルに分けられます。感情的なデザインは「快楽」の最上位レベルにあります。

効果的な感情的デザイン戦略には通常、次の 2 つの側面が含まれます。

ユニークで優れたスタイルコンセプトを作成し、ユーザーから好意的な反応を得ました。

このコンセプトを引き続き使用して、個人的な側面を持つ一連のデザインを作成します。

次に、感情的デザインの構成要素と関連する戦略について学び、これらの側面においてどの製品がより代表的であるかを確認します。また、感情的デザインコンセプトの継続的な使用が製品にもたらす「個人的な魅力」を全体的な観点から感じるために、いくつかのケースを分析します。

感情的なデザインの要素

感情的デザインの目標は、ユーザーが製品とやりとりする際にポジティブな感情を抱けるように、ユーザーとの人格レベルでのつながりを確立することです。この感情は徐々にユーザーの中に楽しい思い出を作り出し、製品を使用する意欲を高めます。さらに、ポジティブな感情の影響を受けて、ユーザーは比較的幸せでリラックスした状態になり、使用中に遭遇する小さな困難や詳細に対してより寛容になります。

エモーショナルデザインは、おおまかに以下の要素から構成されます。これらのポイントから始めて、よりポジティブなエモーショナルな要素を製品に取り入れることができます。ユーザーの最終的な反応は、それぞれの人生背景、知識、スキルによって異なるのは事実ですが、私たちが抽象化したコンポーネントは普遍的に適用可能です。

陽性

サプライズ: ユーザーが期待していないものを提供します。

独自性: 他の類似製品と差別化します。 （関連記事：iOS Wow Experience – ユーザーエクスペリエンスの差別化戦略）

注意: 励まし、指導、支援を提供します。

魅力: 何らかの形で魅力的な人は常に人気があり、製品についても同じことが言えます。

期待感を高める: 次に何が起こるかについて、ユーザーにヒントを与えます。

限定: 特定のユーザー グループに特別な特典を提供します。

応答性: ユーザーのアクションに積極的に応答します。

次に、これらの要素がどのように洗練され、実際の製品に適用されているかを見てみましょう。

感情に訴えるデザインの製品例

次の例では、感情的なデザインの要素がさまざまな形でインターネット製品にどのように適用されているかを理解できます。これらの例のデザイン方法は、製品に必要な性格的気質に適していない可能性があることに注意してください。これらを参考にして、実際の状況に基づいて、より適切な感情的なデザインソリューションを検討することができます。

人間の感情を模倣する

笑顔

お互いを尊敬し合う人々は、無意識のうちに相手の行動を真似します。好きな人が笑っているのを見ると、あなたも同じように笑う可能性が高くなります。これをデザインに応用することができます。絵、特に人物や出来事をテーマにした絵は、人の感情や思考に一定の影響を与えます。これら両方のトピックを網羅した製品紹介画像を見てみましょう。

この画像で、ハイライズは幸せな人物と、その人物が同社の製品を使用しているストーリーを伝えています。実際の顧客からの笑顔や賞賛の言葉は、非常にポジティブな宣伝であり、潜在的なユーザーに製品への共感や購入意欲を抱かせることができます。

普通の幸せ

Threadless のショッピングカートには、商品が入っていないときは悲しい表情が表示され、そうでない場合はとても幸せな表情が表示されます。こうした小さなディテールが、あなたに普通で興味深いと感じさせ、思わず笑わせてくれるでしょう。たとえユーザーが最終的に購入しなくても、この素敵なショッピングカートを覚えているでしょう。

ユーザーを維持する

福祉

かつては、Audible のサブスクリプションをキャンセルしようとしてデバイスが動作しないと言うと、適切な読書デバイスを購入してサービスを継続して使用してもらえるよう、Audible から 100 ドルの Amazon ギフト券が送られてきました。たとえユーザーが最終的にサブスクリプションをキャンセルすることを選択した場合でも、彼らはAudibleの誠実さを忘れることはないでしょう。

音楽

Etsy は、ユーザーが登録を解除すると、ポール・ヤングの「Every Time You Go Away」を再生します。このアプローチはユーザーを再び呼び戻すことはできませんが、ユーザーに永続的な印象を残すことができます。ユーザーが Etsy プラットフォームで再び商品を閲覧するとき、おそらくこの興味深い小さなリンクを思い出すでしょう。おそらく、どこでこの曲を聞いても Etsy を思い出すでしょう。

鋭いユーモア

この点で最も典型的な例は、Groupon の有名なジョーク「Punishing Derrick」です。このシーンはユーザーがキャンセルを確認した後に発生しますが、実際のキャラクターと鋭く自虐的なユーモアを通じて、ユーザーを Web サイトに近づけています。この多かれ少なかれ罪悪感を抱かせるジョークの後、Groupon はユーザーに再登録を促しました。これは彼らが仕掛けたトリックであることは明らかですが、ほとんどのユーザーはこのような没入感のあるジョークに直面すると非常に興味を持ち、ポジティブな感情や状態が最大限に発揮されます。

コピーライター

コピーライティングは、商品の個性を表現する最も簡単な方法です。ブランドをより遊び心のあるものにしたい、より真面目なものにしたい、より面白くしたい、またはよりトレンディなものにしたい場合、コピーライティングは目標達成に効果的に役立ちます。

褒め言葉

「Everyday」アプリでは、メディア ライブラリにまだ写真を追加していない場合、システムが「かわいい顔」の写真を何枚か撮ってライブラリに追加するよう、とても親切に促します。簡単な言葉でプロンプト情報や製品のトーン、つまり個性さえも定義します。

対比

Skitch のプライバシー リマインダーは非常に簡潔ですが、2 つのコントラスト要素が使用されています。1 つは、警告効果音をシミュレートするコピー内の「Pssst!」で、もう 1 つは警告を表すテキストの色です。これら 2 つを組み合わせることで、プロンプト情報は、トーンと視覚効果の点でページ上の他のコンテンツと鮮明なコントラストを形成し、ユーザーの注意を感情的に引き付け、情報コンテンツを効果的に伝えます。

同様に、Cupid では、ユーザーが地理的な場所を入力すると、システムが肯定的に応答し、「Ahh」は「OK!」または「わかりました、ようこそ!」という意味を表します。詳細を「本物」に伝えるこの機会をお見逃しなく。

注意事項と手順

Hunch の登録ページのコピーは、私たちが普段目にするものとは違います。メールを入力するテキスト ボックスの横に「スパムは悪魔です。私たちはスパムをしません」と書かれており、メールの購読を選択するときに「これは読む価値のあるメールです。あまり頻繁に届くことはありません」と注意書きも書かれています。これらの非常に一般的な場所に少しの時間と労力を費やし、微妙な違いを作り出すことで、製品への没入感が高まり、ユーザーはより集中してデザインガイダンスに従い、操作目標を達成できるようになります。

Milk の細部への配慮により、ユーザーはニュースレターの購読を希望するようになります。彼らのアプローチは、コピーの中でニュースレターの重要性と、ニュースレターがそれほど頻繁に送信されないことをユーザーに明確に伝えるという点で、Hunch に似ています。

次の例は、私の個人プロジェクトの 1 つです。この製品を試すには、ユーザーが招待コードを必要とします。アプリケーション送信エリアでは、ボタンのコピーとして従来の「送信」ではなく「招待状を受け取りたい！」を使用しました。これにより、ユーザーの感情を動員し、より現実的でターゲットを絞ったやりとりを感じてもらえればと考えています。また、私たちが決してスパムを送信しないことをユーザーに保証するための簡単な声明も作成しました。

エラーページ

特に、重要なことを達成するために製品を必要としているときに、サービスが機能しないことほどユーザーを苛立たせ、イライラさせるものはありません。特定の客観的要因によりこの状況を完全に回避することが難しい場合は、感情的なデザインによって、少なくともユーザーの否定的な感情をある程度緩和することができます。

興味深いコピーライティングのヒント

Flickr がシステムメンテナンスやアップグレードを実施している場合、ユーザーには「Flickr がマッサージを受けています」というメッセージが表示されます。興味のある人は、公式ブログや Weibo で現在の状況を確認することもできます。このようなコピーライティングは、単純で大まかなエラープロンプトよりもユーザーに受け入れられやすいです。

謝罪し、誠実な解決策を提案する

同じくFlickrのケースから。システムでより深刻な問題が発生すると、ユーザーに「あー、パイプが詰まっています」と伝え、非常に口語的な言葉で謝罪します。さらに、ユーザーに対して、現在のページを印刷し、2つの円に色を塗り、写真を撮り、サイトが正常に戻った後にFlickrにアップロードするという小さなタスクも設定しました。Flickrチームが勝者を選び、1年間のプレミアムアカウントを付与します。

申し訳ありませんが...

人生には他にもやるべき大切なことがある。以前 Tumblr がダウンしたとき、Tumblr はユーザーに、問題は緊急に対処中であり、大変申し訳なく思っていると伝えました。また、現時点では他にもより深刻な問題 (2011 年に日本で発生したマグニチュード 9.0 の地震) があること、そしてこの期間中に一緒に何かできるかもしれないことをユーザーに思い出させました。

その他のトラブル

ページの読み込み時間が長いとイライラしますが、ページやその中の特定の機能の読み込みに比較的長い時間がかかる場合もあります。ウェブサイトやアプリケーションがプレゼンテーション用のデータの送信や収集で忙しいときは、ユーザーの注意を引き、応答時間に対する認識を短縮するために、インターフェイスに一時的なプロンプトを配置することをお勧めします。

原題: 製品に個性を与える: 感情的デザインの要素と実践例

キーワード: 製品、人に与える、感情、構成、実践例、編集者、この記事、翻訳、Smas、ウェブマスター、ウェブサイト、ウェブサイトの宣伝、金儲け