ウェブサイトのインタラクションデザイン分析: インタラクティブコンポーネントのマイクロイノベーション

インタラクションデザインの発展の歴史を振り返ると、革新的なインタラクションモードが広く受け入れられて標準となり、一方で古いインタラクションモードは絶えず排除されてきた歴史です。したがって、インタラクティブ モデルの開発は「適者生存」のプロセスでもあります。この記事は、2009 年に炭酸飲料に関するカンファレンスで行われた共有セッションに基づいています。当時紹介された革新的なものは、現在では広く利用されています。このテーマは、イノベーションを促進するという現在の UX プラットフォームの目標と一致しているので、もう一度投稿します :)

インタラクション デザインはクリエイティブな仕事です。革新的な方法を使用して製品の問題を美しく解決することが、インタラクション デザイナーの価値を反映しています。革新的なインタラクティブ デザインがユーザーに認められ、業界の同僚に学ばれると、プロとしての大きな満足感が生まれます。こうしたイノベーションは、必ずしも世界を揺るがすような革新的なデザインである必要はありません。インタラクティブなコンポーネントにおける小さなイノベーションは、製品エクスペリエンスを大幅に向上させることができます。今日は、インタラクティブ コンポーネントにおけるイノベーションの一般的な 4 つの方法について、いくつかの事例を通してお話しし、皆さんと共有したいと思います。

まず、PDF ドキュメントを読むときにスクロールする 2 つの方法を思い出してみましょう。1. ハンド ツールでドラッグする 2. スクロール バーです。

以下の情報を表示するには、ハンドツールを上にドラッグし、スクロールバーを使用して下にドラッグします。この 2 つの操作方法の原理は何ですか?

ドキュメントを可視領域 A と全体領域 B に分割します。スクロール バー スライダーは、ドキュメントの表示領域 A に対応します。したがって、スクロールバーは表示領域 A をドラッグしますが、ハンドツールは領域 B 全体をドラッグします。2 つの操作方法はドラッグする対象が異なるため、方向は正反対になります。

スクロール バーは、ドキュメントの垂直方向のサムネイルとして理解でき、スライダーは、表示領域の現在の位置と、表示領域と全体の領域の割合を示すことができます。ドキュメント全体の領域が拡大し続けると、表示領域の割合が小さくなり、スライダーの高さも減少し続けます。 IE、FF、Office などのよく使われるソフトウェアの統計によると、スライダーの高さが 8 ピクセルに達すると、一般的に縮小が停止することがわかりました。スライダーの高さが 8 ピクセルしかない場合、スクロール バーのドラッグ操作は非常に悪くなります。

Google Wave はスクロールバーに大胆な革新をもたらしました。

1. 上下ボタンがスライダーに接続されている（利点：スライダーから上下ボタンまでのマウスの移動距離が短くなる、問題：上下ボタンをクリックしてもスライダーが動きに追従しない）

2. スクロールバーのスライダーの高さは固定されたままです（利点：スライダーが極端に小さい問題を解決します。問題：表示領域の割合を示すことができません）

これら 2 つの変更により、従来のスクロール バーの問題は最適化されますが、スクロール バーの基本的なプロパティ (「位置」と「比率」) に問題が発生します。新しい問題を解決するために、Google Wave のスクロール バーには 2 つの新しい要素が導入されています。

1. 半透明の灰色のブロック（上下のボタンをクリックすると、スライダーが動きに追従できず、半透明の灰色のブロックが動きます - 位置の問題を解決します）

2. エンド バー (波のコンテンツが増加すると、エンド バーが下に移動し、コンテンツ全体の高さを示します。これにより、比率の問題が解決されます。残念ながら、このエンド バーの視覚効果により、ドラッグ可能であるとユーザーに思わせてしまい、混乱を招きやすくなります。)

Google Wave はスクロール バーの革新に多大な労力を費やしてきましたが、スクロール バーの複雑さによって生じるユーザーの習慣の問題にも直面しています。個人的には、このスクロール バーの革新は製品のニーズによって実現されたと思います。Wave ページには同時に 4 つのスクロール バーが表示される場合があります。ページに 4 つの従来のスクロール バーが同時に表示されたときの効果は想像がつくでしょう。 Wave スクロールバーは、視覚的にもインタラクティブ的にも非常に「軽い」デザインであり、製品全体によく適合します。

====================================================

Apple によるスクロール バーの改良は、アンカー ポイントを追加するというシンプルで効果的なものです。

Mac公式サイト：水平スクロールバーにアンカーポイントを追加し、アンカーポイントをクリックすると、スライダーが対応する位置までスクロールします

iPhoneの音楽アルバムリスト：アンカーポイントのスクロールバーを追加し、文字をタッチすると、リストが対応する位置までスクロールします

アンカー ポイントを追加すると、スクロール バーにナビゲーション機能と正確な位置決め機能が追加され、使いやすくなります。

一般的な条件付き検索ボックスは、「入力ボックス + ドロップダウン メニュー + ボタン」の 3 つのコントロールで構成されます。コントロールを適切に組み合わせると、より良い結果が得られます。

1. [入力ボックス + ドロップダウンメニュー]の組み合わせ

Sina Weibo の検索ボックスでは、ドロップダウン オプションが入力ボックス プロンプトに統合されており、検索範囲の選択がより便利になっています。

原題: ウェブサイトのインタラクションデザイン分析: インタラクティブコンポーネントのマイクロイノベーション

キーワード: ウェブサイト、インタラクション、インタラクション グループ、マイクロアイテム、イノベーション、概要、計画、開発履歴、ウェブマスター、ウェブサイトのプロモーション、収益化