ウェブサイトデザイン分析: UI が従うべき 3 つの主要なウェブサイトデザイン原則

テクノロジーが進化するにつれて、Web デザインの技術も進化します。新しいテクノロジーは新しい課題を生み出し、新しい課題には新しい解決策が必要です。私たちは未知の領域で仕事をすることが多く、まったく新しい解決策を考え出す必要があります。 Web デザインの歴史は限られているため、より難しい質問に答えるには、現在の分野を超えて考える必要があります。これを行うには、音楽など、他の無関係な分野の発展の歴史を参考にして、問題の解決に役立つ解決策を見つけることができます。 18 世紀初頭のバッハに関する短い物語です。

バッハと『平均律クラヴィーア曲集』 1972年、バッハは『平均律クラヴィーア曲集』を完成させました。この作品は2巻に分かれており、それぞれに24曲の前奏曲とフーガが収録されています。現在では西洋音楽史上最も重要な作品の一つとみなされています。 当時は、12 の主要なキーそれぞれに音楽を作曲することは不可能でした。しかし、バッハは12音すべてを全体として作曲しました。彼の『平均律クラヴィーア曲集』は、人々に『平均律クラヴィーア曲集』を使って音楽を作曲できることを最終的に証明し、その効果は人々がそれまで経験したことのないほど素晴らしかった。

このプロセスで採用された解決策は、「調和」の概念を再定義することでした。特定の音程を変更することで、各キーは絶対音感からわずかに離れ、すべてのキーで正確な音程で演奏できるチューニング システムが実現します。全体的な効果をより完璧にするために、個々の特性を少し犠牲にすることを「平均気質」と呼びます。 この例は Web サイトのデザインとは関係ありませんが、目標は同じです。つまり、各キーをわずかに不完全にして、キーボード全体が完璧に見えるようにすることです。

UI デザイナーは何をする必要がありますか?

近年、複数のデバイス向けの設計は、Web デザインにおける最もエキサイティングな進歩の 1 つとなっています。かつては、Web サイトが 2 つの異なるブラウザーで適切に動作するかどうかに重点が置かれていましたが、現在では、まったく異なる特性、異なる画面サイズ、異なるパフォーマンス、異なる使用環境、異なるインターフェイスを持つ複数のデバイスで適切に動作するかどうかに重点が置かれるようになりました。 レスポンシブ デザインとデバイス固有の Web サイトのカスタマイズは、さまざまなエクスペリエンスのためのデザインの作成に役立ちますが、統一された決定を下さなければならない場合も依然として多くあります。この時点で、「平均気質」という概念が役立つかもしれません。 この概念を UI デザインに適用するのは簡単なプロセスです。さまざまなデバイスで優れたエクスペリエンスを設計するには、一部のインターフェースに時折生じる不完全さを許容する必要があります。私たちのデザインが他の環境でも適切に機能するようにするには、少し妥協する必要があります。 タッチファーストのデザイン 「タイポグラフィ」特性を持つ Web サイトでは、最近のデスクトップ Web サイトのデザインにすでにタッチ インターフェイスが組み込まれています。 占有面積に関して言えば、指はマウスポインターよりも大きいため、指にはより大きなタッチ領域が必要です。使いやすさを確保するには、インタラクティブな要素を大きくする必要があります。インタラクティブ要素の面積が増加すると、バランスを保つために他の要素もそれに応じて増加する必要があります。これは、margin と padding の 2 つの属性を通じて設定する必要があります。

新しい Gmail のデザインには、多くの空白とボタン用の追加パディングがあります。デスクトップ専用に設計されていますが、タッチデバイスでも問題なく動作します。 iPad は、タッチ インターフェイスとさまざまなサイズのデスクトップ画面の間のギャップを埋めます。 iPad の人気により、デスクトップ インターフェース デザインにおけるタッチ スクリーンの影響が加速しました。 Gmail や Twitter など、最近デザインが一新された有名な製品をいくつか見てみると、Web デザインが大きく変わったことがわかります。より「豊か」に見えます。空白スペースが増え、ボタンのパディングが増え、上部の要素が全体的にかなり大きくなっているように見えます。もちろん、デスクトップ画面サイズの着実な拡大など、他の要因も影響しています。 マウスには「多すぎる」スペースがあり、指にはちょうど十分なスペースがあれば、デザインは完成です。あらゆる可能性のあるエクスペリエンスに対してより良いサポートを得るために、1 つのエクスペリエンスについて標準からの小さな逸脱を許可します。 デスクトップ マウスを使用するユーザーにとって、タッチ対応の UI の方が使いやすいことは注目に値します。タッチしやすいボタンはクリックされる可能性が高くなります。

マイクロソフトのメトロスタイルのデザインはタッチファーストの考え方に影響を受けた

統一されたデザインを実現するレスポンシブデザイン

レスポンシブ デザインに関する議論の多くはレスポンシブ デザイン テクニックに関するものですが、レスポンシブ性自体は最終目標ではありません。それは目的を達成するための手段です。デザインは、他の目的を達成するために応答性があります。これは、さまざまなコンテンツをサポートし、低帯域幅で送信される画像を提供し、小さい画面でレイアウトをより適切に表示するためであると考えられます。また、さまざまなデバイスにわたって一貫したエクスペリエンスを提供することも目的です。 レスポンシブ デザインを採用して、統一されたユーザー エクスペリエンス デザインという目標に到達しましょう。

ボストン・グローブ紙はこの点で素晴​​らしい仕事をしています。

ボストン グローブは、大規模な Web サイトにレスポンシブ デザインをうまく適用しています。レスポンシブ デザイン戦略により、シンプルなデザインを、ユーザーがボストン グローブを読むために使用するあらゆるデバイス (Apple Newton も含む) に適応させることができます。これはフロントエンドエンジニアだけの功績ではありません。この効果は、メディアクエリと JavaScript を併用することでも実現できます。

これまでのモバイルファースト デザインの例では画像デザインに重点が置かれていましたが、平均法則の概念は製品デザイン、ユーザー エクスペリエンス、情報アーキテクチャなど、事実上あらゆるデザイン領域に適用する必要があります。製品デザインとモバイルファーストのデザイン思考について見てみましょう。 モバイル デバイスの観点から設計プロセスを開始し、モバイル環境のさまざまな制約を満たす製品を構築して、製品の最も重要な要素に集中できるようにします。 Luke Wroblewski 氏は次のように語っています。「チームがモバイルファーストで設計すると、最終的には、迂回やインターフェースの断片化なしに、ユーザーが達成したい最も重要なタスクに重点を置いたエクスペリエンスが生まれます。これは、ユーザーエクスペリエンスとビジネスの両方にとって良いことです。」Twitter の最近の再設計は、これらの原則を体現しています。

Twitter の新バージョンではシンプルなデザインを採用し、さまざまなデバイスで一貫したエクスペリエンスを提供します。 Twitter の再設計の目標の 1 つは、コンピューターでもさまざまなモバイル デバイスでも、ユーザーに一貫したエクスペリエンスを提供することです。一貫したルックアンドフィールのエクスペリエンスを実現することは UI にとって課題ですが、さまざまなデバイスにわたって製品全体で一貫したエクスペリエンスを実現することはさらに大きな課題です。モバイルファースト設計は、これら 2 つの課題に対処するのに役立ちます。

Twitter の再設計で、非常に興味深い点を見つけました。それは、モバイル エクスペリエンスが製品デザイン全体に与える影響です。たとえば、「ツイート」ボタンを除くすべてのアクション ボタンは、「ホーム」、「接続」、「発見」、「自分」という 4 つのラベルの下に配置されています。このシンプルなデザインは、小さな画面のデバイスに最適で、4 つの項目はタブ バー内で調和して「共存」することもできます。 デスクトップ サイトでは、他の機能がいくつか追加されていますが、モバイル バージョンで構築されたシンプルさは依然として維持される必要があります。デスクトップ バージョンにはより複雑なデザインを作成する余地が十分にありますが、一貫したマルチデバイス エクスペリエンスを確保するには、デザインを抑制し、より適応性を高める必要があります。

狼に気をつけろ バッハ以前の調律システムでは、不協和音の音程を同時に演奏すると、耳をつんざくようなうなり声のような音が出ました。ミュージシャンはこの音を「狼の遠吠え」と呼んでいます。 インターフェース設計において、ある体験のために設計された視覚的要素またはインタラクティブ要素が、別の体験環境に移されたときに効果がなくなる場合、この要素を「ウルフ」と呼びます。マウス用に設計された小さなリンクを指でクリックするのに苦労したときのことを思い出してください。あるいは、インターフェイス要素がマウスのクリックのみに依存するタッチ対応のモバイルデバイスで小さなテキストを苦労して読まなければならなかったときのことを思い出してください。これらは UI 上の「オオカミ」です。

これらの記事へのリンクはマウスでのみインタラクティブです。タッチベースのモバイルデバイスでブラウジングする場合、その可能性は低下します。

New York Magazine は、魅力的で優れたドロップダウン ナビゲーション メニューを提供していますが、マウスでクリックすることしかできません。

注: デバイス固有のエクスペリエンスを提供するレスポンシブ デザインは、実際にこれらの問題の多くを解決できます。特定のコンテキストに合わせてボタンのサイズを変更できる場合は、この不格好で全体的なアプローチを受け入れる必要はありません。しかし、サポートする必要があるデバイスの数は増える一方であり、あらゆる可能なソリューションをカスタマイズすることは不可能になりつつあります。 実行レベルでは完璧なデザインをカスタマイズできますが、概念レベルでは調整可能で均一にアクセス可能なデザインについて考える必要があります。

いくつか注意すべき点があります:

● レスポンシブに考える 完全にレスポンシブなデザインを実装していなくても、レスポンシブに考えるだけで、使いやすく一貫性のあるデザインを実現できます。

● タッチファーストの考え方: 指でタッチするように設計されたボタンは、マウスでクリックすることもできます。しかし、マウス用に設計されたボタンは、指で使用するには小さすぎます。タッチファースト設計により、Web サイトやアプリを他の環境にスムーズに移行できます。

● 統一された考え方は「早めにテストし、頻繁にテストする」というようなものです。設計プロセス中に、さまざまなデバイスで設計がどのように正常に実行されるかについて、早い段階で頻繁に検討します。

● モバイルファーストで考えましょう。モバイルファーストの設計により、成功に重要なことに集中できます。最も重要な機能に重点を置くことで、デバイス間で統一されたエクスペリエンスを実現しやすくなります。

● インターフェース間でのインタラクションが均一にサポートされていないことに注意してください。マウスで実行される機能は、タッチデバイスでは問題が発生する可能性があります。タッチで実行できる操作が、マウスでは実行できない場合があります。しかし、これは使用できないという意味ではなく、使用上の制限を認識しておく必要があります。

当社は、ユーザーがさまざまなデバイスで当社の Web サイトやアプリを使用する際にシームレスな体験を実現したいと考えています。また、私たちの努力の成果が、できるだけ多くの環境で活用されることを願っています。

オリジナルリンク: http://uxdesign.smashingmagazine.com/2012/01/17/designing-well-tempered-web/ via: csdn

元のタイトル: ウェブサイトのデザイン分析: UI が従うべき 3 つの主要なウェブサイト デザイン原則

キーワード: ウェブサイト、従うべき、3 つのデザイン原則、テクノロジー、進化、ウェブ、アート、ウェブマスター、ウェブサイトのプロモーション、収益化