web-dev-qa-db-ja.com

発見しやすいデザインパターン

一見して情報や機能が一目でわかるとは限らないが、段階的に公開することでインターフェイスを使用して発見できる、UI/UXでの発見可能性の実証済みの真のデザインパターンは何ですか?インターフェイスに検出可能な要素があることをどのように通知できますか?

32
Virtuosi Media

次のリンクされた記事全体は興味深いですが、次のセクションは適切であり、実際のパターンを提供していなくても、この質問のコンテキストに含める価値があると思います。

スコット・バークンの 発見の神話 から(2003)

実際に何かを発見可能にするにはどうすればよいですか?

デザイナーは、物事を強調し、それらに注目を集めるためのリソースをいくつか持っています。

  • 不動産:特定の量のピクセルを好きなように使用できます。大きいターゲットが最初に配置される可能性が高く、再び見つけやすくなります。大きなターゲットは簡単なターゲットです。
  • 注文:左から右、上から下に特定の順序で物事を配置できます。言語(左から右、右から左など)。
  • フォーム:色、フォント、形状、影、合成、およびその他のグラフィックデザイン構造を使用して、所有している不動産を活用できます。
  • 期待とフロー:上記の使い方に応じて、何らかの形で人々に馴染みのあるフォームまたはパターンに物事を入れることができます。最も明白な例は、印刷された新聞と、列、改行、および見出しの使用方法です。これは、別のWebサイトから、または現実世界の何かから別のデザインをエミュレートすることによって達成される場合があります。
  • 一貫性:画面を一貫した方法で使用すると、特定の場所で特定の種類のコマンドを探すように人々に教えることができます。予測可能であることによって、いくつかの発見可能性ポイントを獲得できます。これは、多くの場合、利用可能な規則を使用し、ユーザーがすでに持っている知識を活用しようとすることで支援できます。

使い慣れたすべてのメタファーやパラダイム(GUI、Windows、Mac、Amazon.comなど)は、不動産、注文、フォームを使用して、その結果を実現しています。優れたシステムは、簡単に再利用できる要素を発見可能にするためのいくつかの基本的な構造を提供します。

20
Roger Attrill

1つのアイデアは、発見したい機能を既存のユーザーの行動に合わせるです。 (私はただ1つの例を念頭に置いているので、正直に言ってこれを「パターン」と呼ぶことはまだできません。)

このメソッドの例は、ユーザーがTwitterまたはrss iphone/ipadアプリでさらにスクロールしようとする傾向があることに気付いています。特に、Twitter/rssストリームが定期的に更新され、上部に追加される傾向がある場合はなおさらです。 「スクロールせずに見える範囲」で未読の更新がない場合でも、動作がnullイベントではなく、手動で更新することに注意してください。そして今、あなたは「引き下げてリフレッシュ」している。発見可能。

入力または編集後に一時停止するたびに、開いているドキュメントでCtrl-SまたはCmd-Sを押すという、ユーザーの再帰的な別の動作に気づきました。 1分後にCtrl-Sを押すと、ドキュメントをスクロールしたり、あちこちで少し読んだり、電話に応答したりすることさえあります。つまり、保存する変更はありませんが、Ctrl-Sを押します。それは習慣です。さて...もしいくつかのソフトウェアアプリがそれでインテリジェントなことをするなら、それは素晴らしいことです。


Yahooパターンライブラリ で、実際に文書化されたパターンをいくつか見つけました。彼らだけを「発見可能性パターン」とは呼びません。

招待デザインパターン

デザイナーは、インタラクティブ機能が存在することをユーザーに知らせる必要があります

Cursor Invitation -デザイナーは、オブジェクトを操作できることをユーザーに合図する必要があります。

ドロップ招待 -デザイナーは、ドラッグアンドドロップ操作中に有効な候補ドロップサイトを示す必要があります。

ホバー招待 -マウスがホバーされたオブジェクトでクリックされたときに何が起こるかについてデザイナーはユーザーに合図する必要があります。

Tool Tip Invitation -ホバーされたオブジェクト上でマウスをクリックした場合に何が起こるかについてデザイナーにユーザーをキューする必要があります。


そして、私はこの答えを書いている間に発見につながる別のデザインソリューションを観察しました。小さなヘルプアイコンをクリックしてヘルプメニューを開いた場合、そこにあるヘルプトピック(たとえば、スタイル/見出し)をクリックすると、ヘルプトピックが表示されている間、上のアイコンの一部が1回または2回バウンドするのを確認してください。

今、私はそれらのアイコンのいくつかまたはほとんどが何であるかを知っていましたが、それらの1つがblockquote用であることを知りませんでした。 「Blockquotes」のヘルプトピックを開いたとき、アイコン/ボタンがバウンスされました。

OK、アニメーション関連オブジェクト設計ソリューションのいくつかの例を見つけることができれば、それもパターンと呼ぶことができると思います。 (Yahoo Drop Invitationパターンは、このサブパターンである可能性があります)。

15
Erics

新しいユーザーは、オプションや機能が多すぎて圧倒されますが、経験豊富なユーザーは、すでに持っている以上のものが必要になる可能性があります。これの解決策はプログレッシブリベレーションか、必要に応じてトレジャーハントです。

新しいユーザーがアプリケーションを使い始めるとき、-基本を説明します彼らは物事を成し遂げるために必要であること-他はすべて隠します。そうすれば、彼らはゼロから短時間で効果を発揮し、アプリケーションに自信を持ちやすくなります。

彼らがある程度の使用を達成した後(これにはポイントを使用します)報酬として、別の機能を明らかにしますとし、それを新規または最近ロック解除されたものとしてマークします。これにより、この1つの機能以外に、アプリケーションをよく理解できる立場に置かれます。もう1つ学ぶことは簡単で、それが彼らにとっても有用なものであれば、体験に最適です。

この方法で機能を明らかにし続けると、顧客は徐々に学習しながらアプリケーションに圧倒されることはありません。

もう1つの追加のボーナスは、これがメカニズムであることを人々が理解すると、新しい機能をアンロックするためのアプリケーションを探索し、それによって学習する可能性が高いということですゲーミフィケーション効果

編集:さまざまな用途の複雑なアプリケーション(Wordなど)では、ポイントや機能に視覚的なヒントを与えたり、機能を表示したり、ロックを解除する方法のヒントを提供したりできます。

9
JohnGB

ああ!もちろんクリッピーを使用してください。あなたがする必要があるのは、ユーザーがあなたのプログラムで何かをしようとし、彼がやりたいかもしれない他のものを提案しようとするたびにポップアップするある種のインタラクティブなアニメーションキャラクターをプログラムすることです。これを適切に語ることは非常に重要です。そのようなすべてのヒントを「私はあなたに気づいた...」から始めて、発見可能な機能を追加します。

アニメーションは重要です。さもなければ、ユーザーは自分がやっていることに集中する可能性があり、あなたの発見に気を取られないからです。安全側になるには、モーダルにするだけのほうがいいです。

さらに良いオプションは、毎日のヒントを表示することです。ユーザーがアプリケーションを開いて、いくつかの作業を完了しようとしました、BAM!あなたは彼がまだ使いたいと思っていない機能についての知識で彼を爆破します。日刊紙が死ぬまでに行われているので、私はあなたが時間ごとのヒントに行くことを提案するかもしれません。これにより、機能が24倍発見しやすくなります。

3
Assaf Lavie