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

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

インタラクションデザインの発展の歴史を振り返ると、革新的なインタラクションモードが広く受け入れられて標準となり、一方で古いインタラクションモードは絶えず排除されてきた歴史です。したがって、インタラクティブ モデルの開発は「適者生存」のプロセスでもあります。この記事は、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 は偽装したねずみ講であり、ジャック・マーは子会社を解約した

推薦する

クルンはどうですか? 「Three Elite Networks」シリーズのサーバーについての簡単なレビュー

クルンはどうですか?クルンサーバーはどうですか? Kurunは国内IDC市場では比較的有名で、主に米...

米国がドメイン名管理を強化、国内ウェブマスターが海外への「移転」で影響を受ける可能性も

Admin5によると、3月23日、米国政府がここ数カ月間にウェブサイトの差し押さえと閉鎖に関する政策...

#blackfriday# vpsinusa: 年間 25 ドル、4G メモリ/1 コア/20g SSD/2T トラフィック/ロサンゼルス、「無料 IP 変更」

vps-in-usa は、米国西海岸ロサンゼルスで OpenVZ と KVM 仮想化に基づく VPS...

IoT エッジにおける顧客体験

今日、データはコネクテッドカー、ドローン、冷蔵庫、洗濯機、フィットネス機器、さらにはペットの首輪など...

友情リンクの核心はウェブサイト交換リンクと相互リンクにある

ほとんどのウェブマスターは、自分のサイトでリンク交換のプロセスを経験したことがあると思います。また、...

#BlackFive# moonvm: 台湾のダイナミック VPS、月額わずか 12 ドル、Hinet 回線、500M 帯域幅、無料 IP スイッチング

moonvm はブラックフライデー特別プロモーションを開始し、台湾 VPS、台湾ダイナミック VPS...

百の学派が織りなす電子商取引時代:革命への新たな道を選ぶ

近年、電子商取引はホットな話題となっている。薛曼子氏のような多くのネット有名人や知識人は、電子商取引...

ウェブサイトSEOのセキュリティと安定性は無視できない

ビジネス開発とネットワーク最適化のため、多くのウェブマスターは Baidu に対して愛憎入り混じった...

301 永続リダイレクトの実装と 302 リダイレクト

ウェブサイトの構築では、ウェブページのリダイレクトが必要な状況によく遭遇します。たとえば、ウェブペー...

適切な海外プロモーションチャネルと方法を見つけるにはどうすればよいでしょうか?

海外プロモーションを成功に導くには、適切な海外プロモーション方法を見つけることが不可欠です。多くの国...

羅吉思薇の成功から主要クリエイターの解散まで:セルフメディアの人々の未来はどこにあるのでしょうか?

(文/Heven) 数日前、ネット界で大きなニュースが飛び込んできた。Luoji Siweiの主要ク...

韓国サーバー: zenlayer、30% 割引、ソウルデータセンター、10Gbps の超大容量帯域幅、リソースのカスタマイズをサポート、月額 209 ドルから

世界的に有名なデータセンターである Zenlayer は、韓国のソウルにも独自のデータセンターを構え...

プロモーションに活用: 検索結果の最初のページに表示されるウェブページを活用して、長期的なプロモーションを行います。

このプロモーション方法の中心的な考え方は、ランク付けされた Web ページを見つけ、それらのページを...

IOの基本原則を実装する方法

最近、IO の基本的な実装原則を学ぶために、JAVA NIO について読んでいます。 IO に関連す...

杭州における電子商取引ライブストリーミングの現状

電子商取引のライブストリーミングは非常に人気がありますが、その繁栄の裏には業界の深刻な内部状況が隠れ...