ウェブサイトの中には、コンテンツ、ユーザビリティ、デザイン、機能性が新鮮なだけでなく、インタラクションデザインのディテールやアニメーションがさらに際立っているものもあります。いくつかのモデルの経験を共有し、なぜこのようなシンプルなモデルがうまく機能するのかを分析します。
デジタル製品をデザインする場合、PhotoshopやSketchなどのソフトウェアを使用するのが一般的です。この業界で数年の経験を積んだ人の多くは、デザインとは単なる視覚的コミュニケーション以上のものであることを明確に理解しています。それにもかかわらず、スティーブ・ジョブズが言うように、静的なデザインを続ける人もいます：
製品の体験や印象は多くの要素の組み合わせから生まれますが、その基本的な役割を果たすのがインタラクションです。ユーザーインターフェイスを静的なデザインとして考え、インタラクションの魔法を後から加えることは不可能です。むしろ、インタラクションは早い段階で追加し、プロセスの自然な一部として扱う必要があります。
さりげなくアニメーション化され、ユーザー体験をエレガントに向上させる巧妙なインタラクションのいくつかを見てみましょう。
アニメーションスクロール
ハイパーリンクは常に複雑な祝福をもたらすもので、リンクをクリックすると、文脈が失われ、生のジャンプになることがあります。
ウェブサイト、特に長いウェブサイトでは、リニアスクロールアニメーションを追加することで、ユーザーエクスペリエンスを向上させることができます：
以下、比較対照してください：
デフォルトの動作とアニメーションの動作を比較すると、コンテンツをスキップするのはもはや無意識の行為ではなく、決断なのです。実際、このHope Lies at 24 Frames Per Second」の記事のメニューボタンにはアニメーションが一切なく、何が起こっているのかを正確に理解するのに1分以上かかりました。
ポイント：突然のインターフェイスの変更は、ユーザーにとって適応しにくいものです。
ステートフルスイッチング
別の例として、メニューの切り替えを見てみましょう。ユーザは「+」記号をクリックしてコンテンツを追加したり、要素を拡張したりします。それを45度回転させることで、プラス記号は十字になり、これは広く「閉じる」を意味すると理解されています：
単純な変形がアイコンの意味を完全に変えます。この小さなディテールは、ユーザーに次に何が起こるかを推測させ、アイコンの意味を理解させるよりもずっと簡単です。この切り替えはとてもユーザーフレンドリーです。さらに、プラス記号の回転は常にコンテンツと同じ方向にとどまり、情報の流れを高めます。
要点：ウェブサイトの要素のすべての状態を理解できるようにすること。
#p#
ポイント：プログレッシブ・プレゼンテーションは、UIコンポーネントの表示を減らし、ユーザーが必要なときに表示します。
プルでリフレッシュ
iPhoneの登場に伴う最もエキサイティングなインタラクションのひとつが、Loren Brichter氏によって提唱された「pull to refresh」です。ユーザーは、スクロール可能な時系列タイプのコンテンツを更新することができます。この効果はTwitterアプリで見ることができます。
なぜそんなにうまくいくのでしょうか？更新を表示させるためには、ユーザーはブラウザの更新ボタンをクリックして、より多くのコンテンツを読み込まなければなりません。より多くのコンテンツを発見したいというユーザーの欲求を更新動作にリンクさせることで、明示的なクリック動作は古き良きものになります。
要点：意図と行動を結びつけることで、体験がよりシームレスになります。
粘着ラベル
スティッキーラベルは、ユーザーインターフェイスと意味のあるトランジションの、繊細かつ実用的な組み合わせです。 Edenspiekermannこの」テクニックの使い方 ご覧ください。
項目ラベルは、次の項目が表示されるまで、コンテンツの左に固定されたままです。このエフェクトはiOSのアドレス帳に似ており、長いエリアに対してコンテキストを提供します。トランジションエフェクトは、方向感覚を追加するだけでなく、コンテキストベースの説明も提供します。
ポイント：長いエリアに付加価値のある情報の要約やタイトルは、付箋タグを使用することができます。
#p#
アフォーダンス遷移
自己説明の概念は認知心理学から派生したもので、ユーザーをガイドするために使用されるオブジェクトの特性を指します。
ユーザーインターフェースデザインの文脈では、EUのウェブサイトのユーザビリティユーザビリティの語彙 中で、自己説明的であると定義されています：
稜線はしばしば自己解釈を向上させるために使われます。ボタンの周りの稜線は、そのボタンが操作可能であることを意味します。このUXテクニックは、iOSのカメラアプリで広く普及しています。
iOS 6ではロック画面の横にカメラアイコンがあり、ドラッグできるようになっていました。ボタンをドラッグすると、ロック画面がポップアップし、カメラが下に表示されます。ユーザーを機能へ誘導するための素晴らしいテクニックです。
ポイント：インターフェイスでは、要素に高度な自己説明性を与え、ユーザーに機能を指し示します。
コンテキストベースの隠蔽
iOSのGoogle Chromeには、起動時にコンテキストベースで非表示にする機能があります：
基本的な考え方は、ユーザーがページを下にスクロールすると、ブラウザのナビゲーションパネルは自動的に非表示になります。ユーザーが再びページを上にスクロールすると、コントロールパネルが表示されます。このアプローチは、コンテキスト体験を向上させるだけでなく、利用可能なスクリーンスペースを増やします。スクリーンスペースは、モバイルデバイスでは特に重要です。
まず、ユーザーは常に興味のあるコンテンツをブラウズすると仮定します。閲覧を止めた場合、コンテキストが変わる可能性があるため、ナビゲーションパネルを再度表示する必要があります。このテクニックは、ある仮定がテストケースを超えていないことをチェックしながら、スクリーンスペースを節約します。
iOSでは、ページの最下部に到達するとコントロールパネルが再表示されるなど、この処理がはるかに優れています。これは、ユーザーのニーズをダイナミックに統合した素晴らしい例です。
要点：コンテキストベースの非表示を使用することで、ユーザーの注目度を高め、スクリーンスペースを節約します。
焦点の移行
キーボードからナビゲートする場合、ユーザーはTabキーを押し、フォーカスがどこに移動したのか混乱することがよくあります。そこで、アニメーションでページ上の特定の場所に誘導します。遷移は微妙ですが、ユーザーを誘導する上で大きなインパクトがあります。
要点は、ユーザーがどのようにナビゲートしても、道を示すことです。
要するに
これらはほんの一例に過ぎません。この記事のポイントは、最新でクールなインタラクションのテクニックを披露することではなく、些細なインタラクションのディテールによってユーザーエクスペリエンスが大きく向上することを強調することです。
より良いデジタル製品をデザインしたいのであれば、現在の信念に挑戦し、どのようなインタラクション・パターンがよりユーザーフレンドリーであるかを確認する必要があります。図書館を何度も何度も作れとは言いませんが、探求を止めないでください。コンフォートゾーンから抜け出し、探求し続け、実験してください。
