ウェブサイトデザイン分析: フラットインターフェースデザインでユーザーを引き付ける

[編集者注] この記事は Speckyboy Design Magazine から @C7210 によって翻訳されました。従来の Web 開発や、モバイル デバイスの現在のデザインでも、複雑で派手な効果は製品には適さない場合があります。

特にモバイル デバイスでは、過度に複雑なエフェクトはユーザーをアプリケーションに引き付けることはほとんどなく、むしろ、ユーザーの視覚疲労を引き起こし、製品インターフェイスの最も基本的な機能に対する認知障壁を作り出すことがよくあります。したがって、私たちのデザインでは「フラット」な美学を参照する必要があります。

フラットデザインとは何ですか?

実際には、「フラット デザイン」という用語は、長年にわたって人気があったグラデーション、影、ハイライトなどのリアルな視覚効果を放棄し、より「フラット」に見えるインターフェイスを作成することを指します。

Layervault の設計者である Allen Grinshtein 氏は、HackerNews の記事で次のように述べています。

「長い間、ウェブサイトのインターフェース スタイルは同じデザイン美学に従っているようです。誰もがベベル、グラデーション、影などの効果を使用して、インターフェース要素のテクスチャを強調しています。デザイナーにとって、このような「かわいい」要素を作成することはルール、または名誉になっています。ただし、私たちや他の数人のデザイナーにとって、この一般的な方法は必ずしも正しいとは限りません。」

Layervault を見て歩き回ってみれば、シンプルさの中に追求された視覚的な美しさがわかるでしょう。私たちが慣れ親しんできたビジュアル スタイルが、ますます多くの Web サイトやモバイル アプリケーションで微妙に変化しつつあるのも興味深いことです。他にもいくつか例を挙げます。

スクエアスペース

Squarespace の新しいバージョンでは、ほぼ全体的にフラットなビジュアル スタイルが採用されており、重要なインタラクティブ要素を強調するために、一部の詳細部分でのみ比較的従来の方法が使用されています。実際に使ってみると、彼らの製品は機能ロジックの面では非常に複雑であることがわかりますが、これらすべてはシンプルでわかりやすいインターフェースの背後に隠されており、デザインチームの努力を本当に感じることができます。

関連記事: シンプルさを最優先にしたWebデザイン - クリエイティブな要素とデザインテクニック

フェイスブック

もう一つのよく知られた例は Facebook です。

「Facebook はフラットなインターフェース デザインの素晴らしい例です。わずかに傾斜したいくつかの主要なアクション ボタンを除いて、他のすべてはフラットです。何年もこのスタイルを続けていることを考えれば、少なくとも Facebook には合うスタイルです。」 - Ian Storm Taylor (Segment.io)

ラジオ

Rdio の最新バージョンの Web サイトと製品インターフェースでは、徹底したミニマルでフラットなデザイン スタイルが採用されています。影やグラデーションなどの効果を使用するインターフェース要素を見つけるのは困難です。

関連記事: 最小限のユーザビリティ設計

ネスト

私はかつてフロントエンドエンジニアとしてNestのウェブサイトの開発に参加したことがあります。その際、同社のデザイナーたちがフラットスタイルに熱中していたことを今でも覚えています。同社の Web サイトでは、実際の製品と関連するアプリケーション環境の写真が、フラット スタイルのメディア キャリア (Web サイト自体) に「リアル」な要素として統合されています。仮想と現実の組み合わせにより、訪問者は Web サイト インターフェイスの視覚要素に気を取られることなく、製品に簡単に集中できます。

ビフォーウェブ

翻訳者のステーションはこちらです... 翻訳者 @C7210

スキューモーフィズムに対する反撃

20 世紀の建築におけるミニマリスト運動と同様に、フラット デザイン スタイルの段階的な台頭は、長年にわたる過剰にデザインされ、過剰に細工されたインターフェイス スタイルに対する反撃と見ることもできます。特に最近では、Apple の長年にわたるスキューモーフィック スタイルがかなり厳しく批判されています。

Wikipedia では、スキューモーフィズムを次のように定義しています。

元のオブジェクトの特定の必須フォームは新しいデザインでは不要になりましたが、新しいデザインは古いフォームを模倣して、新しい外観を親しみやすく親しみやすいものにしています。

たとえば、実際のボタンにはこれらの視覚的な特徴があるため、たとえこれらの効果がインターフェース要素の機能にとって実際的な意味を持たないとしても、インターフェース内のボタンにグラデーションや影の効果を追加することがよくあります。たとえば、一部の天気予報アプリケーションでは、温度計を使用して温度を表示します。現実世界では、このようなエンティティの存在は必要ですが、アプリケーション ソフトウェアでは、温度計の画像は純粋に装飾的なものです。

カレンダー アプリの革の質感は必要ですか? ボタンに 3D テクスチャが使用されていなくても、ユーザーはボタンがクリック可能であると認識できるでしょうか? 装飾要素は本当にどの程度必要ですか?

「実生活では、ボタンを押すと弾力があることをはっきりと感じることができますが、デスクトップやモバイル ディスプレイでは、その物理的なフィードバックを感じることができません。物理的に見えても物理的なフィードバックを感じられないものは、少なくとも私にとっては、非常に不自然で意図しない体験です。」 – Allan Yu (svpply / eBay)

形態は機能に従う

20 世紀の建築におけるミニマリスト運動では、「形態は機能に従う」や「少ないほど豊か」など、今日でも話題になる有名なスローガンがいくつか提唱されました。また、私は個人的に、ミケランジェロがダビデ像をどのように作ったのかと尋ねられたときの答えが大好きです。

「簡単です。不要な石を削り取り、役に立つ石を残すだけです。」

インターフェースのデザインについても同じことが言えます。37signals のスタッフはインターフェースのデザインに優れています。フラット デザインの美学を実際に効果的に実装するには、デザイナーとして、視覚的なプレゼンテーションの問題を考慮するだけでなく、製品の機能に重点を置く必要があります。

フラットかスキューモーフィックか？それは単なる選択の問題

少なくとも、スキューモーフィック ボタンの方がクリック数が多いことを示す調査レポートは見たことがありません。確かに、視覚的なコントラストが強いインタラクティブ要素の方がユーザーの注意を引き付けやすいことを証明する理論的かつ実践的な結論は十分にありますが、状況によっては、平らなオレンジ色のボタンのコントラスト効果は、隆起したボタンよりも高くなると私は考えています。したがって、ここではコンテキスト、つまり特定の製品の特定のインターフェース環境が重要な要素となります。他のデザイナーの意見をいくつか見てみましょう。

「ファッションに少し似ています。あるスタイルが普遍的になると、デザイナーとして目立つためには、その逆のことをしなければなりません。」 – チェムレ・ギュンゴル (Branch)

「『スキューモーフィズムは悪いデザインだ』と誰かが言ったら、それは『紫は醜い色だ』と言っているようなものです。まったく意味がありません。」 – Sacha Greif

「なぜ、本当の証拠もないのに、あるデザイン スタイルを下げて別のデザイン スタイルを上げるのでしょうか。製品の実際の機能や全体的なエクスペリエンスを考慮せずにデザイン スタイルを追求するのは、刺激的でも楽しいものでもありません。」 – Geoff Steams (YouTube)

デザインの質は「美学」で決まるものではない

デザイン スタイルの選択は、最終的には特定の製品の実際の状況によって決まります。私の意見では、スキューモーフィズムに対するフラット スタイルの利点の 1 つは、情報や物事の仕組みをよりシンプルかつ直接的に表示できるため、認知障壁が軽減されることです。

スタイルに関係なく、優れたインターフェース デザインは、いくつかの共通のデザイン原則に従う必要があります。

一貫性

一貫したデザイン パターンとビジュアル スタイルを通じて、ユーザーに対して完全かつ一貫したメンタル モデルが確立され、製品が使いやすくなり、全体的なエクスペリエンスが向上します。

対比

色、サイズ、レイアウトを調整して、クリック可能なインターフェース要素を他の要素と視覚的に対照させます。

レイアウト

960gs のようなグリッド レイアウトを使用してインターフェイスの視覚的な基準を設定すると、ユーザーの目がコンテンツ自体によって定義されたパスに沿って自然に動くようになり、インターフェイスの視覚的なバランスが向上します。

階層

最も重要なものは、それほど重要でない物よりも簡単に見ることができます。このトピックについて記事を 1 つ書くこともできますが、簡単に言うと、コア機能と一般的なユースケースに関連するインタラクティブな要素に重点を置き、他の操作要素を二次的な位置に配置すると、インターフェイスを最もターゲットを絞ったシンプルなものにすることができます。

「私の個人的な経験では、フラットかスキューモーフィックかは問題ではありません。最も重要なのは、ユーザーが情報と機能の階層関係を最短時間で明確に識別でき、次に何をすべきかが簡単にわかるインターフェイスであることです。」 – キャロライン・キーム

対象ユーザー

ユーザーのタイプによって好むインターフェース スタイルは異なります。建築、デザイン、ファッションなどの分野のユーザーはフラット スタイルをより受け入れやすい一方、その他の「普通の」ユーザーは比較的伝統的なスキューモーフィック インターフェースを受け入れる可能性が高くなります。

フィードバック

クリックが発生したら、ユーザーに即時かつ明確で明示的な視覚的なフィードバックを提供します。アニメーション遷移効果は、一般的なフィードバック形式です。たとえば、ユーザーが操作を実行した後、回転するアイコンを使用して、システムが応答していることをユーザーに通知します。

おすすめの読み物: ユーザーの成功した行動に対して肯定的なフィードバックを提供する

摩擦を減らす

使用されるビジュアル スタイルに関係なく、ユーザーが目的を達成するために必要な操作を減らし、よりスムーズなインタラクティブ エクスペリエンスを実現するために、インターフェイスは可能な限り簡素化する必要があります。障害や余分な手順があると、運用コストが増加し、機能の複雑さが増し、コンバージョン率が低下します。

関連記事: フォームデザインとコンバージョン率の向上

探索を奨励する

ターゲットユーザーが製品をどのように探索する可能性があるかを理解します。ユーザーが製品のインターフェースと基本機能に慣れ、「上級ユーザー」段階に移行し始めると、探索と学習の行動に対して必要なガイダンスと「報酬」のフィードバックを与える必要があります。

プロトタイプ

スタイルに関係なく、インターフェースの形式は実際の機能によって異なります。優れたデザインソリューションは、製品の初期計画作業、特にスケッチやワイヤーフレームのプロトタイプによる検討と切り離すことはできません。最も重要なユースケースの要件を特定し、プロトタイプを使用して継続的に試行および検証し、その後のインターフェース設計作業のための強固な基盤を築きます。

「フラット スタイルの人気が高まっているのには確かに理由がありますが、本質的にはデザイン美学の 1 つにすぎません。アンティーク、高光沢、金属の質感、木材などの視覚効果と同様に、視覚スタイルの選択は、適切な情報アーキテクチャとインタラクション モードに基づいて行う必要があります。」 – Mike Cuesta (carecloud)

元のタイトル: ウェブサイトのデザイン分析: フラットなインターフェースデザインを使用してユーザーを引き付ける

キーワード: ウェブサイト、フラット、インターフェース、デザイン、誘致、ユーザーを引き付ける、編集者、この記事、翻訳元、Sp、ウェブマスター、ウェブサイトのプロモーション、収益化