Flat 2.0＆Flat Designのユーザビリティ問題をどう解決するか

フラットデザインは、国際活版印刷スタイルが開発された1950年代という早い時期から出回っています。最近では、マイクロソフトの新製品の発売以来、広く普及しています。 ジオメトリとタイポグラフィに焦点を当てたMetroデザイン 最初に2010年に新しいWindows Phoneで、次に2012年にWindows 8で.

フラットなデザインは、 立体感と光沢のある視覚要素の欠如 達成するために 清潔、ミニマリズム, そして 明快さ. それは、以前は主流だったデザインスタイル、実際の3Dオブジェクトを模した光沢のあるボタンやイラストを利用したskeuomorphismに反します。.

フラットデザインは、Webサイトの合理化、コンテンツへの注力、より直感的なインタラクションの提供、そしてより迅速で機能的なユーザーエクスペリエンスの提供を主な目的としています。レスポンシブデザインのために、そのシンプルなボックスのような要素、およびグリッドベースのレイアウトを使用するのも簡単です。.

フラットデザインのユーザビリティ問題

フラットなデザインは私たちにすばやく雑然としたWebサイトを提供するための多大な助けと素晴らしいツールキットを提供しますが、それは特にそれが使い古されたとき、ある種のユーザビリティ問題を引き起こす可能性があります。.

クリッカビリティの視覚的な意味がない

私たちが三次元効果を使うならば、それは当然私たちのデザインに深さの錯覚を与えます。これはユーザーを素早く助けます インタラクティブな要素を見つける, ボタンやアイコンのようにクリックすることも、フォームフィールドのように入力することもできます。フラットデザインに関する主な関心事の1つは、それがユーザーにとって難しいことです。 クリック可能な要素を認識する.

フラット時代の前は、Webデザイナーは通常、次のようなビジュアルソリューションを使用してクリック可能性を示していました。 グラデーション、テクスチャ、隆起、またはドロップシャドウ ボタンやその他のクリック可能なオブジェクトを押したように見せる.

フラットデザインはこれらの視覚的な意味を欠いており、はるかに小さいツールセットで同じタスクを解決する必要があります。 色、形、近接, そして 文脈要素.

なぜこれが問題なのでしょうか。実験してみましょう.

下のスクリーンショットを見てください。このスクリーンショットに基づいて、どの要素がクリック可能かを推測してみてください。あなたが最初に考えるのはそれではありません。私たちは他の多くの似たようなユーザビリティの問題をウェブ上で見つけられる.

Z軸がないため発見可能性が低い

実生活の人々は物を見つけ、3つの次元、x、y、z軸に沿って動きます。彼らが3D効果なしでミニマルにデザインされた、フラットなウェブサイトに遭遇するとき、彼らは彼らがこれまで慣れていたものとは異なる経験を得ます.

これは彼らがする必要があることを意味します オブジェクト間の関係を発見するためにもっと努力をする, そして 視覚的な階層を理解する サイトのたとえば、マイクロソフトのデベロッパーネットワークのホームページでは、情報を視覚的にデコードし、サイト上のさまざまな要素の目的を詳しく調べる必要があります。.

UXデザインの経験則は、ユーザビリティを最大化するために、常にユーザの認知的負荷を最小限に抑えるようにすることです。よく見られるように、これはフラットデザインでは必ずしも発生しません。.

低い情報密度

UXの専門家であるNielsen-Norman Groupによって、フラットデザインは低い情報密度の危険性についても批判されています。.

彼らは、Windows 8のユーザビリティに対する批判として、Windowsストアアプリの例とLos Angeles TimesのWebサイトを使用して、 低い情報密度 （最初の画面にストーリーがほとんどない、要約のない見出し、ほとんど認識できないグループ化など）は、使い勝手の観点から考えられます。.

別の側面からは、注意をそらすことなくユーザが重要なことだけに集中できるようにするための情報も少なくてすみますが、ミニマリズムをやり過ぎると、サイトの主な目的、つまり情報を視聴者に変えることが簡単に犠牲になります。.

フラット2.0の台頭

ますます多くのデザイナーがフラットデザインの使いやすさの欠陥を認識するにつれて、それの新しい、より成熟したバージョンが生まれました。 “フラット2.0” または “ほぼフラット” 設計。 skeuomorphismからflatへの変更は急進的でしたが、flatデザインの進化ははるかにとらえどころのないです.

新しいスタイルはまだフラットですが、それは デザインに少し三次元を追加します の形で 微妙な影、ハイライト, そして 層. Flat 2.0 - うまく使えば - 合理化されたWebサイト、明快さ、より速いページ読み込み時間などのミニマリズムの利点を保ちながら、少しリアリズム（skeuomorphism）を取り戻し、深さと詳細を加えることによって前述のユーザビリティ問題を解決できます。.

材料設計

Material Designと呼ばれるGoogleの新しいデザイン言語は、おそらくFlat 2.0スタイルの最も注目すべき例です。 Googleは2014年にAndroid Lと共にMaterial Designをリリースしました。Material Designはフラットデザインの主な特徴を保持していますが、物理学からの特定の比喩を使用してユーザーが現実の世界とデジタルの世界の類似性を素早く見つけられるようにします。.

材料設計はz軸を使い、 微妙な深さ 設計に、そしてスマートに層を利用する ドロップシャドウでそれらを分ける そして アニメーション. Googleはそれがどのように機能するかについての過冷却記述を持っています、そしてそれはその主要な原則と規則を理解するためにそれを通して読む価値が本当にあります.

結論

優れたデザイナーは常にユーザーのエクスペリエンスの向上を目指しているため、Webデザイン業界は常に変化しています。平らな設計はすぐにskeuomorphismを取り替えました、 グリッドベースの最小限のレイアウトと単純な要素 それは最近ウェブをオーバーランさせました（これはウェブデザインが退屈になるか死にさえすることについてのいくつかの話を生成しました、しかしそれは真実からそれ以上であることができませんでした）.

Flat 2.0はフラットデザインの認識された問題への答えを与えます. それは機能性、美学、そしてユーザビリティの間の賢い妥協です。もちろん、マテリアルUIキットを使う必要はありません。 どこにでも, しかしその背後にある哲学を理解することは私達にについての確かな背景を与えることができます 自分のスタイルをどのように発展させるか ユーザーエクスペリエンスデザインの最新の調査結果に従って.