Googleのマテリアルデザインとその関連ウェブサイトの小さな批評


この記事の最新バージョンをチェックすることができますlobotuerto's notes - A little critique of Google's Material Design and its associated websites.
私はSpecについて述べるために2、3の意見を持っています.
  • material.io/guidelines
  • material.io/icons
  • トグル機能のガイドライン


    私はトグルについて考えると、ユーザーにあなたのポイントを横断する1つの方法を選択する必要があります.
    そして、それに関して一貫していて、混合信号を送らないでください.
    ここでは、私のビューで-矛盾した振る舞いを示す例がいくつかあります.

    膨張パネル


    For expansion panels —またはリスト、アイコンarrow_drop_up/arrow_drop_down ) パネルの状態を表しません、しかし、ユーザーの意図-私がそれを押すならば、何が起こりますか?

    ガイドラインの例では
  • 閉じたときには、矢印を表示する必要がありますが、ユーザーに通知する場合は、それを展開すると、それを押してください.
  • 開いたときには、矢印を表示する必要がありますそれを押すと、拡張パネルを閉じるユーザーを通知します.
  • ここで、視覚的な手がかり(矢印)は状態ではなく意図を表す.

    パスワード


    On password redaction それは他の方法です.


    ガイドラインの例では
  • 目が開いているときにパスワードが表示されます.これは、cuestionでものの状態を示しているだけです.
  • 目が閉じられるとき、パスワードは「隠れます」.再び、これは意図の代わりにコンポーネントの状態を示しています.
  • ここでは、視覚的な手がかりは、意図しない状態を表しています.

    スイッチボタン


    他方、スイッチは大きなトグル制御です.なぜなら、彼らが何をしているかは、彼らが関連付けているどんなラベルに対しても状態と意図を示しているからです.
    だからここで、それは本当に素晴らしいUXのための偉大なラベルを見つけるために開発者にです.
    例:
    <o--> Crushing it! (this is off, meaning we are not crushing it)
    <--o> Crushing it! (this is on, meaning we are crushing it now)
    
    (私のアスキーアートを許してください)
    スイッチがスペックを利用して、それがオンのとき、明らかにユーザーに信号を送るのは、大いに役立ちます.

    意図対状態


    デザイン言語や仕様は全体として一貫している必要があります.
    上記の観測から生じたいくつかの質問
  • アイコンは状態または意図を示すべきですか?
  • このように仕様を明確に文書化する必要がありますか?
  • 第2の質問のために、答えははいでなければならないと思います.
    最初の1つについては、材料設計はどちらか一方の方法で行ってください.

    マイ解像度


    私の見解では、specの精神を考慮に入れて、行く方法はアイコンの意図を意図する.
    もう一つのより少ない主観的な理由は、この方法を行くことです
    アクションの一連の1つの変更のアイコンを使用して連鎖する-かどうかをこれを行う必要があります議論することはできません、ポイントはあなたがすることができます-あなたは常に次の場合は、それをクリックすると、次の来る知っているユーザーをさせることです.
    次の状態だけでアイコンを見て知られていないことができますので、あなたは、現在の状態が何であるかを知ることができるので、状態を示すためにアイコンを使用して、この情報を伝えることはできません.
    それにもかかわらず、非対応のアイコンを現在の状態に使用するとOKです.
    結局のところ、
    拡張パネルは、現在の方法を維持し、どのようにパスワードの赤のアイコンのアイコンの動作を変更します.
    スイッチボタンはそのままです.
    私は、この主題がタフなものであるということを知っています.古くから議論されている.
    ジェフラスキンは、数年前にこの問題について書いていましたThe Humane Interface: New Directions for Designing Interactive Systems , 2000年4月8日からのアディソンWesley専門出版物.
    アランクーパーも、彼の本でこれを議論しますAbout Face: The Essentials of Interaction Design Wileyは2014年9月2日に公開されました(1995年8月25日からです).

    Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive options with a single control. The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don’t use them. Not on buttons and no on menus!


    この問題についてはかなりの議論があるhere and here on StackExchange UX .

    ウェブサイト


    さて、マテリアルデザインに関連したウェブサイトについて話しましょう.AKAの機会エリア-私はそれらを使用しているときに発見した.

    材料設計指針


    ページMaterial Design guidelines 簡単なリンクのためにセクションヘッダーにアンカーを含めなければなりません.それは彼らがそうでないように迷惑です!
    良い解決策は、セクションヘッダー、副ヘッダまたはタイトルをホバリングするとき、アンカーが表示されることになっています.
    良いUX -または便宜のコストであまりにも物質的な設計であることを試みることは良くありません.
    私はそれのためのアンカーがないので、私はパスワードのredsectionセクションにリンクできませんでした!

    素材デザインアイコン


    私は、基本的に他のものと同じであるアイコンが彼らの別名を見せないという少しイライラすることを見つけます.
    たとえば、これらは同じアイコンですが、あなた自身のために見つけなければなりません.
  • color_lens , palette
  • create , mode_edit
  • block , do_not_disturb_alt
  • その他
  • 私はそれが意味論の利益でなければならないと思います、しかし、私を信じてください、そして、ユーザー-私のように-私たちが必要とするもののように見えるアイコンを使って、彼らが名前をつけられるというわけではありません.我々はそれらを検索する名前を使用します.
    私はユーザーのステータスを表示するためのフリックサークルのアイコンが必要な場合は、私はfrashfiber_manual_record アイコン!
    本当にイライラするCTRL + F アイコンが動的にページに読み込まれるので動作しません.だから、そのためのウェブサイトの独自の検索バーを使用する必要があります.
    If FontAwesome ちょうど彼らのすべてを示している罰金をしています2,791 icons 私は、あなたがちょうど900 +を示すことをすると思います.

    結論


    私は、私の最大の批判は、時々、それが他の方法でなければならないとき、物質的なデザイン原則が良いUXを犠牲にして適用されるように見えるということです.
    理想的には、材料設計はこのトレードオフが決して来てはならない点に達するべきです.

    2018 / 05 / 08更新


    Googleはちょうどその材料設計仕様を更新しました、そして、私が上で提供したリンクと解説のいくらかはもう適用されません.それにもかかわらず、私は歴史のためにそこにそれらを残すつもりです.
    彼らが彼らのサイトで提供する改善と新しいガイドラインのセットをチェックしてください:material.io/design .
    もう一つの良いことは、我々は現在使用可能な材料デザインのアイコンのサイトがあることです!
    行ってみてください.material.io/icons