インターフェースの言語: アイコンとコピーライティングのデュエット

インターフェースデザインにおけるコピーライティングの重要性は自明ですが、そのような重要な部分にまだ専用のポジションがないのは残念です。今日は、この間の私の仕事のまとめと、以前まとめた記事をもとに、「コピーライティング」の重要性についてお話ししたいと思います。

Facebook の「いいね！」と Google の「+1」の違いは、最初は重要ではないと思われるかもしれませんが、最終的にはユーザーの行動や選択に影響を与えるには十分です。適切なテキストを使用してコントロールを定義することは、インターフェース設計の最も重要な部分です。 Jason Fried 氏は著書「Getting Real」でコピーライティングの重要性を説明していますが、5 年経った今でも、コピーライティングはインターフェース デザインにおける一般的な「アキレス腱」となっています。

明確さ第一、創意工夫第二

適切な単語を選択することで、デザインがより明確になります。 アイコンは、飼い慣らすことが難しい野生の馬のようなものです。従順なときは、自由に意図や行動を表現できますが、攻撃的になると制御が難しく、ユーザーを傷つける可能性もあります。虫眼鏡は拡大や検索を意味する場合があります。下矢印はダウンロード、保存、または単に「ドロップ」を意味します。逆矢印では、変更が保存されるかどうかはユーザーには明確にわかりません。X は、あるユーザーにとっては閉じる、別のユーザーにとってはキャンセル、さらには削除を意味する場合があります。したがって、アイコンを作成するときは、デザイナーはスキューモーフィズムの原則、つまり現実世界の同等のアクションやオブジェクトを使用して、操作を可能な限り明確に表現するように努める必要があります。

デンマークのデザイナー、ピーター・スティーン・ホーゲンハウグ氏は、いくつかの有名な Web サイトやアプリケーションで「リンクを追加」アクションを表すアイコンを注意深く研究しました。そのデザインは特定のパターンに従っていると思われるかもしれませんが、実際にはそうではありません。

ご覧のとおり、ほとんどの Web サイト管理 (CMS) システムとアプリケーションでは、アイコンにチェーン パターンが使用されています。 唯一違っていたのは Facebook でした。Facebook では付箋とピンが使われていましたが、ピーターはそれがチェーンよりも信頼性が低いと考えました。 次のテストでは、被験者に一連の異なるタスクを与えました。そのうちの 1 つはリンクを追加することでした。この実験には、他にもよく使用されるアイコンがいくつか含まれています。

被験者の一部は、チェーンアイコンを「ものを結びつける」または「異なる要素を接続する」と解釈しました。 この理解は間違ってはいませんが、問題は、結び付けられている「もの」が何であるかを実際に理解していないため、アイコンボタンはテキストボタンほど正確に意味を表現できないことです。 たとえば、被験者は「リンク 2」の地球儀アイコンボタンを、「インターネットにアクセスできます」、「検索」、「インターネットにアップロードします」など、さまざまな方法で解釈しました。

全体として、被験者の 35.29% のみがチェーン アイコンを正しく理解でき、そのうち 25% のみが「リンク 2」を理解できました。 この実験ではユーザビリティを表す最小値は設定されていませんが、いずれにしても 25% はユーザ エクスペリエンスが悪いことを意味することは明らかです。 インタビュー中に、ある被験者はこう尋ねました。

「なぜ WWW を使わないのですか? 地球上の誰もがそれを知っています!」

確かに、彼が言ったように、「WWW」は「インターネットにアクセスする」または同様の動作として理解できます。その後の実験でも、すべての被験者が「WWW」のテキストアイコンを正しく理解できることが確認されました。 多くのアプリケーションやデザインでは最適なソリューションではないかもしれませんが、実際にはリンクを表現するには最適な選択肢です。

明確さ第一、創意工夫第二

上記の例のように、視覚的なデザインでは封筒と矢印のさまざまな組み合わせを試すことができますが、「メッセージを送信」という 4 つの単語以上にこのアクションの意味を直感的に表現できるものはありません。 これは、アイコン コントロールに基づくインターフェイスが必ずしも悪いということではありません。長期的には、インターフェイスの美しさのために、ユーザーの初回体験のスムーズさと一貫性が犠牲になります。これは、シナリオと予算に基づいてデザイナーが行う必要がある難しい決定です。

コントロール ボタンを設計しているときに、次のような状況に遭遇しました。特定のインターフェイスにおけるボタンの操作は言葉で表現するしかありませんが、アイコンを使用するとインターフェイスをより美しく統一感のあるものにすることができます。 このプロジェクト サイクルに残された時間があまりないことを考慮して、2 つの解決策を思いつきました。1 つ目は、最も直感的なテキスト ボタンを使用することです。今後の反復で、視覚的に美しく巧妙なアイコンを作成できれば、2 番目の解決策を使用してアイコン ボタンを使用します。 良いアイコンは一度に作成することはできないため、デザイナーのひらめきだけでなく、少しの幸運も必要です =P。

ユーザーの視点から、真にユーザー中心

QQ ブラウザ for Mac のブックマーク同期インタラクションを設計する場合、ユーザーがログインすると、ブックマーク バー上のローカル ブックマークがネットワーク ブックマークに置き換えられます。 ローカルブックマークを多数持っているユーザーや、しばらくQQブラウザを使用した後にQQアカウントを登録またはログインしたユーザーにとって、使い慣れたブックマークバーの変更は、必然的にユーザーエクスペリエンスに悪影響を及ぼします。 現時点では、ローカル ブックマーク ファイルを Web ブックマークにマージできるようにするためのプロンプトをユーザーに提供したいと考えています。とてもシンプルな黄色のバーのプロンプトですが、そのコピーライティングのせいで頭皮を掻きむしりそうになりました。

上記は、当時のコピーライティングの代替案のほんの一部です。デザイナー自身にとって問題を非常に明確かつ明示的に説明するものもありますが、原則として、ローカル ブックマークとネットワーク ブックマークの違いを強調して、ユーザーの認知的負担を増やすことは望ましくありません。 （Chromeのように、ユーザーがローカルまたはオンラインのブックマークを使用するのは悪いことではないのかと尋ねる学生もいるかもしれません。残念ながら、さまざまな理由により、現在のQQブラウザはChromeの同期ロジックを採用しません）現時点では、明確さが第一、巧妙さが第二の原則はまだ適用できますか？視点を変えて、ユーザー自身から始めましょう！

この場合、ユーザーに表示されるのは、元のブックマーク バーのコレクションが消え、Web ブックマークに置き換えられた状態です。この時点で、ユーザーは「ブックマークはどこにあるの？」とパニックに陥るかもしれません。これまでのコピーライティングではユーザーを安心させることができず、「ネットワーク ブックマークとローカル ブックマークとは何ですか？」「ローカル ブックマークを使用したいのですが、大丈夫ですか？」など、さらに多くの質問につながる可能性があります。

QQブラウザが現在使用しているコピーを見てみましょう。「ログイン後、ローカルブックマークが表示されませんか？ローカルブックマークをウェブとマージできます。」これはまだ最善の解決策ではないかもしれませんが、以前のコピーと比較すると、ユーザーが最も必要とするときに安心できます。使い慣れたブックマークが消えてしまいましたか？心配しないでください。私たちは理解しており、ローカルブックマークをウェブとマージするという解決策を提供しています。この方法では、ほとんどのユーザーは「マージ」を選択し、マージ後は元のローカルブックマークファイルもウェブブックマークに含まれるようになります。 これにより、以前の設計目標も達成されます。

言葉以上のもの

オグルヴィはかつてこう言った。「見出しを書くまでに、1ドルのうち80セントを費やしていることになる。」 広告業界のこの有名な格言は、インターフェースデザインにも当てはまります。 この記事を読んでいるデザイナーのほとんどはDribbbleを知っていると思います。私はグラフィックデザイナーではないので、作品の光の使い方が上手いのか下手なのか、グラデーションを調整すべき箇所はどこかなど、はっきりとは分かりませんが、美しいボタンやドロップダウンメニュー、あるいはインターネットで見たこともないようなUI要素を見ると、とても興味をそそられます。 多くの場合、最初に考えられるのは、特定のインターフェースで使用した場合にこれらの作品の意味が明確であるかどうかです。 ボタン、ドロップダウン、ナビゲーション、ラベル、アイコンなどのコントロール要素は、ユーザーが明確かつ明確に理解できる必要があります。アイコンのインスピレーションを得るために Dribbble を閲覧するとき、私はよく「この作品はインターフェースでアクション、意味、またはヘルプを明確に伝えていますか？」と自問します。

最後に、コピーライターが専用のDRIBBBLEを持っている場合は=]

参考記事: http://contrast.ie/blog/the-language-of-interfaces/#more-2402

（この記事はTencent CDC Blogからの引用です。転載の際は出典を明記してください）

元のタイトル: インターフェースの言語 - アイコンとコピーライティングのデュエット

キーワード: インターフェース、アイコン、コピーライティング、ダブル、プラン、セックスは暗黙の了解、とても重い、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、お金を稼ぐ