インタラクティブコンポーネントのマイクロイノベーションでウェブサイトのユーザーエクスペリエンスを向上させる方法

インタラクティブコンポーネントのマイクロイノベーションでウェブサイトのユーザーエクスペリエンスを向上させる方法

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

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

1. スクロールバーの革新 [再構築方法]

まず、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の音楽アルバムリスト:アンカーポイントのスクロールバーを追加し、文字をタッチすると、リストが対応する位置までスクロールします

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

2. 複合検索ボックスの革新【複合方式】

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

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

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

Google Reader のような入力操作を備えたドロップダウン メニューにより、ドロップダウン メニューが使いやすくなります。 (このコントロールの組み合わせは、フォント選択コントロールなど、Word や Photoshop などのソフトウェアで非常に一般的です)

2. [ボタン + ドロップダウンメニュー] の組み合わせ

Douban と Flickr では、検索ボタンの後ろにドロップダウン矢印があり、ボタンとドロップダウン選択操作が 1 つに統合されています (Flickr のデザインは、Web サイトのメイン ナビゲーション バーのエクスペリエンスと一致していますが、Douban のデザインは Web サイト全体でやや唐突です)。

元のタイトル: インタラクティブ コンポーネントのマイクロ イノベーションが Web サイトのユーザー エクスペリエンスを向上させる方法

キーワード: インタラクティブ グループ、マイクロ アイテム、イノベーション、方法、Web サイト、ユーザー、エクスペリエンス、強化、概要、ウェブマスター、Web サイトのプロモーション、収益化

<<:  2012 年上半期の Baidu SEO イベントの概要

>>:  Webmaster.com からの毎日のレポート: Pacific Direct Purchase は偽装したねずみ講であり、ジャック・マーは子会社を解約した

推薦する

ルーターホスティング カリフォルニア サンノゼ デュアル G ポート KVM (Windows サポート)

RouterHosting は 2008 年に設立された企業です。主なサービスは VPS とサーバー...

5月から7月までのBaiduアルゴリズムの分析

**これは多くの中小ウェブマスターの心の痛みだと思いますが、結局のところ、彼らはBaiduに依存して...

SEO Taobao: 適者生存、前進しなければ後退する

シングルページのタオバオアフィリエイトは、もはや市場需要がないのでしょうか、それとも将来のインターネ...

hostdare - 38% 割引コード/高速 VPS/Windows/CN2 回線 KVM/Unicom 直接接続

Hostdare は、ロサンゼルス C3 データセンター向けの最新の VPS プロモーションを発表し...

従来型企業が独立系B2Bモールを推進する際に直面する問題

前回の記事「伝統的な企業が独立系B2Bモールを構築する過程で遭遇する8つの大きな問題」が公開された後...

開発者に優しい DevSecOps のヒント 5 つ

ここでは、セキュリティ ツールを使いやすくして、より安全な製品をより早くリリースできるようにすること...

クラウドネイティブインフラストラクチャについて - EventMesh イベントドリブンメッシュ

今日はイベント駆動型メッシュであるEventMeshについてお話します。実際、クラウド ネイティブ ...

2018年トップ5プラットフォームの美容コンテンツ開発レポート

コンテンツ市場における重要な垂直カテゴリとして、美容と化粧品は常にユーザーから大きな注目を集めていま...

G銀行のフルスタッククラウド環境負荷分散サービス機能の実践 - 負荷分散サービスの主要技術の紹介

クラウド コンピューティングとクラウド ネイティブ テクノロジーの発展に伴い、主要なクラウド コンピ...

App.Net: 理想から現実までには長い道のり

[コアヒント] 資金調達の成功は、App.Net にとって最初のステップにすぎません。製品の特性上、...

SEOブロガーとリンクを交換するのは危険

どの業界にも独自の接続交換原則があり、外部リンク構築における友好的なリンクがもたらす SEO 効果は...

ユーザーエクスペリエンスを向上させる10の側面について話す

ユーザーエクスペリエンスは、現代社会において無視できない基準となっていると言えます。注意してみると、...

マイクロソフトのハリー・シャムの自伝: 私のキャリアから学んだ7つの教訓

[[258943]]ハリー・シャム博士 マイクロソフトのエグゼクティブバイスプレジデント、マイクロソ...

「クラウドコンピューティング」は「エッジコンピューティング」に置き換えられるのでしょうか?

最近、「クラウドコラボレーション」という言葉をよく耳にしますが、これはクラウドとエンドが協力し、浸透...

貴州省のビッグデータとクラウドコンピューティングの学部卒業生第1期生が卒業、就職の心配なし

[[235895]] 「入社2日目から業務に慣れ、開発業務に取り組み始めました。」貴州大学省実証ソフ...