
注釈:Webデザインはより安定しています-平均して、サイトのメインページの約40%が1年の間に変化します(3年ごとに行われる完全な再設計と比較して)。
19年間、私は多くのサイトのメインページの画像を収集し、1年に1回スクリーンショットを撮りました。 ページの現在の状態と1年前の状態を比較すると、メインページのデザインがどの程度変化するかを判断する機会が得られます。
私のコレクションからいくつかの典型的な例を見てみましょう。
1994-1995大きな変更(例:Microsoft)

これらは、Webの始まりの古典的なホームページです。従来のGUI要素のない多くのグラフィック要素です。
また、その時点で、メインページのデザインが新しいバージョンの登場に伴って完全に変更されたことは明らかです。 当時、ウェブデザインは非常に実験的なものだったため、多くの場合、再設計後に変更されなかった唯一の要素は会社自体の名前でした。
2002-2003中規模の変更(例:CNET News.com)

この例の設計変更の数は、 ドットコムバブル崩壊後の数年での一般的な現象を示しています。変更はまだかなり目立ちましたが、重要な要素はある反復から別の反復に移されました。
一般に、ページレイアウトは非常に似ていました(特に縮小サイズで見た場合)。幅の広い左列と狭い右列の上部にあるナビゲーションタブ。 左の列には最も重要な記事が含まれ、その後にそれぞれ見出しと約3行の説明がある10の追加記事が含まれていました。
ただし、ささいなことをより詳しく見ると、2003年の設計は2002年の設計とは異なる働きをするため、変化の程度は70%と推定されました。
どちらのバージョンにも7つのタブがありましたが、新しいデザインではタブがページの幅いっぱいに引き伸ばされ、アクティブなタブの配色が変更されました。 さらに、変更はナビゲーションカテゴリに影響しました。 2002年のカテゴリのリストは、Front Page、Enterprise、E-Business、Communications、Media、Personal Technology、およびInvestorでした。 2003年-フロントページ、エンタープライズソフトウェア、エンタープライズハードウェア、セキュリティ、ネットワーク、パーソナルテック、およびネット。
メインページへのリンクに加えて、パーソナルテクノロジーカテゴリのみが2003年の肉挽き器を生き延びましたが、パーソナルテックに切り捨てられました。
さらに、黄色のバーを保持することで視覚的な整合性が生まれ、デザイン自体が根本的に変更されました。そのほとんどは見出しで見られます。
特性の変更:
- 主な記事の数が削減されました。小さなイラストのある2つの記事から大きなイラストのある1つの記事になりました。
- ページの下部にあるnews.contextエリアの放棄。
- 追加の記事の下に第3レベルの見出しを追加します。
- 共産主義者と彼らの写真には、より顕著な場所が与えられました。
- ビデオはページ上の魅力的な場所ではありません。
- サイトのセクションの検索から、高度な検索の追加機能を備えた単純な検索への移行。
- 一時的なスタンプを絶対(「2002年10月4日1時46分PDT」)から相対(「1時間17分前」)に変更すると、スタンプの色が灰色に変わります(頻繁に更新されるサイトでは、ユーザーを解放するため相対スタンプの方が優れています)タイムゾーンについて考える必要性から);
- 最後の更新の時刻をより見やすい場所に移動する(相対的なタイムスタンプへの移行の結果としての連続的な変更)。
- ユーザーが記事を保存する機能。
- 「速度を上げる」セクションを追加します。
したがって、両方のデザインは一見同一に見えますが、それらを使用し始めると、同じではなく異なるように見えます。
2011-2012中程度の変更(例:Aetna)

メインバナーの色は大きく異なり、新しいロゴが使用されましたが、それ以外は2つのメインページはほとんど同じでした。 両方とも、ナビゲーションバー、メインバナー、ニュース、詳細ナビゲーションの4つの領域に分割され、さらに、すべての領域のサイズとコンテンツはほぼ同じでした。
ただし、ページの使用に関しては、さらに多くの変更が目立ちました。
小さな例として、「見積もりを取得」ボタンが画面の右側から左側に移動しました。 また、2012年バージョンではロゴに神秘的なプラス記号が追加されました(クリックすると、「詳細が異なる」というリンクを含む「異なるように見える」というメッセージが表示されます。この変更をニュースエリアに配置して回避することをお勧めしますわかりにくいプラス)。
ただし、より重要な事実は、メインボタンの「引用を取得」の位置の変更です。
2011年:
- Aetna Navigatorメンバーログイン
- 新規メンバー:登録
- 医者を探す
- 中小企業のオーナー
- 健康保険を購入する
2012年:
- 医者を探す
- フォームを取得する
- 健康保険について学ぶ
- お問い合わせ
- Aetna Navigatorにログインします(「ログイン」という言葉が強調表示されます)
- 今すぐ登録
- IDカードを取得する
- 補償範囲と福利厚生情報を入手する
- コスト見積もりを取得する
- 健康診断を完了する
触れられていない唯一のものは、別の場所に移動された医師の検索オプションです。 認可の新しい分野は明確な改善でした。 会社名よりもキーワードから始める方が良いでしょう 。
結論として、中国語版とスペイン語版へのリンクは2012年に削除されました。これが良いか悪いかは、これらの言語を必要とする顧客の数に依存します。 2011バージョンでは、このために非標準の場所で言語を選択する機会が提供されました(右下、その年に使用されたほとんどのモニターの最初の画面の下 )。
これは、分析に頼って機能の価値を判断することが危険な理由の良い例です。 言語の変更への参照はおそらく2011年にはほとんど見えなかったため、削除されました。 ただし、これが予想される場所にある場合(右上)に使用する方が便利です。
Webデザインの安定性を高める
以下のグラフは、前年と比較した各年の監視対象サイトの平均変化率を示しています。

その傾向は明らかです。ウェブの存在の始まりにおける大きな変化、ドットコムバブルの際の減少、そして近年の40%の安定化。
もちろん、曲線は3つのパラメーターに基づいているため、わずかにジグザグの形をしています。毎年変化する要素の数、これらの要素の重要性、およびそれらがどの程度変化したかです。 ただし、全体像は、 Webデザインが安定していることを示しています。
ユーザーは変化を嫌うため、これは朗報です。 人々はいつものように物を使うことを好みます。 さらに、変更の小さなステップにより、設計チームはこれらの変更をサイトに適用する前に、より多くの時間を考えて調査することができます。 何かをする前に考えてください。 繰り返しますが、これにより、変更をより効果的かつ効果的に行うことができます。
年率40%の変更は、3年ごとの完全な再設計に対応します(2.5ではなく3年、最終バージョンで使用される前に何度か変更されるため)。 もちろん、進歩は止まりません。 毎年同じサイトを見るとポップアップする重要な改善と実験から明らかなように、サイトを改善する必要があります。
翻訳者から
興味のある人のために、ニールセンの記事の他の翻訳が利用できます:
スクロールと注意
インターフェース設計におけるアクションとオブジェクトの近接