パスワードを忘れた? アカウント作成
13403244 story
GUI

フラットUIデザインでは目的のリンクやボタンを見つけるのに時間がかかるとの調査結果 239

ストーリー by hylom
OSのUIはフラットが流行する一方で 部門より
headless曰く、

Nielsen Norman Groupが実施した調査によれば、フラットUIデザインのWebページでは目的のリンクやボタンを見つけるのに時間がかかるようになり、無関係な部分に視線が向くことも多かったそうだ。調査は一般的なWebユーザー71名を対象に実施されたもので、アイトラッキングデバイスで視線の動きも記録している(Nielsen Norman Groupの記事アイトラッキングの結果The Register)。

フラットデザインはすっきりしてモダンな印象を与える一方、リンクやボタンが目立ちにくい傾向がある。調査では実在の6カテゴリー9件のWebページをベースにフラット版とクラシック版の2種類を用意し、合計18種類のWebページを使用。元のWebページがフラットデザインの場合、リンクテキストを青字で下線入りにしてボタンを立体的にするなどしたクラシック版、クラシックデザインの場合は逆にフラット版を作成している。

調査対象者にはフラット版かクラシック版、どちらか一方のWebページを見せ、目的のリンクやボタンを探すように指示が与えられる。たとえばホテルのWebページでは部屋を予約するのが目的だと説明し、クリックする場所が見つかったら知らせるように伝える。指示の内容を理解しやすいよう、事前の練習も行われたとのこと。

その結果、フラットデザインではクリックする場所を見つける時間が平均22%長くなり、ページ内で視線のとどまる場所は平均25%多くなったという。ただし、情報量の少ないページや、目的の要素がよくある位置に配置されているページ、周囲の要素とのコントラストが大きい、または離れているページでは大きな差が出なかったそうだ。

なお、調査対象者には集中して目的のクリック場所を探すよう指示しているため、現実のWebブラウズとは異なる。現実には目的の内容がそのページにあるとは限らず、ユーザーは他のページに移動するなどしてあちこち見て回ることになる。その結果、ユーザーが存在を知らなかった情報を得られることもある。今回の研究はフラットデザインのユーザビリティーの問題を調べるのが目的ではなく、ユーザーが個別のページでどのように操作するのかを調べるのが目的だったとのことだ。

  • by schwarz (28506) on 2017年09月09日 7時03分 (#3276240)

    フラットデザインの場合は、どこからどこまでがUI要素なのかや、重要度がはっきり分かりにくいことが多いです。
    例えばiOSのボタンは枠がないので、アフォーダンスや文字色のわずかな違いから、そのテキストがタップできるかどうかを識別しなくてはならないが、これはUIデザイン上の悪手ではないかと思います。

    Webでも、単に立体感のあるマテリアルの使用を止めた結果、要素の境界がなくなってしまったり、重要な部分とそうでない部分が混在し見分けにくくなった例が多くみられます。
    実際、シャドウやグラデーションを全く使わずに要素を強調するのは難しいのです。

    今後はもう少し折衷案が流行って、強調されたり他と区別できるUI要素でもって、確信をもって操作できる画面が増えてほしいと思っています。

    ここに返信
    • by Anonymous Coward on 2017年09月09日 9時53分 (#3276303)

      マウスオーバー(や、Tabキー連打でフォーカス移動でもいいですが)のように
      「操作を直接は発動しないが、その位置に対してフォーカスしていることを示せる」
      操作体系と、

      iOSなどスマホにおける
      「その位置をタップしたら即機能が発動してしまう」
      操作体系では、

      フラットデザインの弊害度合いは大きく違いますけどね

      前者では「マウスカーソルで操作できそうな場所を指してみる」ことで利用者は不意の機能発動なしにそこに何かしらの操作が割り当てられているかどうかを把握することができます
      ブラウザなどで昔からマウスオーバーイベントがあるのはこれがとても自然で利用者にとってわかりやすいことの証拠の一つですね

      それに対して後者(タップしたら即操作が発動)では、
      画面上を適当にそこら中タップしてみるという、非効率かつ誤操作リスク、混乱リスクの大きい操作を強いられます
      結果として
      利用者はそんな無駄なことはしないため、
      フラットデザインにより気づいていない配置機能についていつまでたっても気づくことができない、
      特定機能を実行しようとしたときに異なる位置をタップしてしまう、などが多発することとなります

      ここにおいては、iOSは非常に重大な選択ミスをしたと断言できるでしょう

    • iOS(たぶん7以降)では一応「アクセシビリティ」でボタンの形は変更できますが、現行のに見慣れているとかなり違和感があります。

  • by Anonymous Coward on 2017年09月09日 7時09分 (#3276244)

    フラットUIは配色に気を使ったりやボーダーを引いたり、考えることは多い。
    見た目がシンプルな分、アホは自分でもデザイン出来ると思いがちだが、まったくの反対。

    ここに返信
  • ゲームに例えると (スコア:3, すばらしい洞察)

    by Anonymous Coward on 2017年09月09日 8時44分 (#3276274)

    敵を倒して何かアイテムがドロップしても、光りもせずに地面と同化してしまいそうなゲームなんでしょ?
    フラットUIデザインはさっさと廃れて欲しい

    ここに返信
  • 「目的のリンクやボタン、境界線、今行われている処理」が非常に分かり辛く
    使い辛いソフトとしてiTunesが挙げられます。作っている人が使っているのか
    疑問に思うソフトの最たる例ですね。
    今のところ「フラットデザインだから」という理由で忌避する事例は少ないです。
    デザイナがクソなだけ。

    #iOSのアップデート中が不明、ストアの境界線が不明瞭、検索性が雑、
    #ポップアップヘルプやメッセージ領域の不足、不親切さetc,etc
    ここに返信
  • by Anonymous Coward on 2017年09月09日 6時35分 (#3276231)

    情報量も(境界)認識率も低いしねぇ

    ここに返信
  • by Anonymous Coward on 2017年09月09日 13時30分 (#3276405)

    今はもう慣れたとはいえ初見では一体なんなのかわからん人がほとんどだと思う
    というかハンバーガーメニューと聞いてあれを連想できる人自体少なそう

    ここに返信
  • by Anonymous Coward on 2017年09月09日 6時04分 (#3276227)

    ていうかわざわざ調べなきゃわからんことなのか? UIデザイナーってのは白痴の集まりか?

    ここに返信
    • by firewheel (31280) on 2017年09月09日 11時44分 (#3276358)

      「そう思った」ことと、
      「計測して確認した」ことは、
      全然違うからね。

    • Re: (スコア:0, すばらしい洞察)

      by Anonymous Coward

      フラットデザインがどのくらいUIデザインとして不味いシロモノか、
      具体的な数値にしたことに対して価値を見いだせない貴方の方が
      余程「白痴」ですよ。

      • by Anonymous Coward

         フラットデザインがどのぐらい滞在時間を伸ばし、広告収入に貢献する素晴しいシロモノか、
        具体的な数値になったってことね。そこには価値を見いだすよ。

        • by Anonymous Coward on 2017年09月09日 7時12分 (#3276246)

          UIなんか、切り替え可能なOS設計が前提として考えれば
          新機軸は、実験的に配信して
          使いたい人にだけ使ってもらえばいいんじゃないのかな?

          UbuntuのUnityみたいな例が既にあったわけだし
          ほかの選択肢が無いカタチで
          新機軸を押し付けることが悪手だと思います。

          • Re:知ってた (スコア:2, すばらしい洞察)

            by Anonymous Coward on 2017年09月09日 9時31分 (#3276291)

            作り手は仕組みだけ用意して、UIは使い手が選べば良い。
            それはデザインの放棄です。
            そういう人が作ると、出来ることをメニューにずらずら並べて、なんのポリシーも哲学もないクソUIになる。

  • by Anonymous Coward on 2017年09月09日 6時41分 (#3276232)

    ふらっとするんです。

    ここに返信
  • by Anonymous Coward on 2017年09月09日 7時07分 (#3276242)

    利便性が一番ではないファッションと同じで時間ともに廃れたり復活したりしそうだ

    ここに返信
  • by Anonymous Coward on 2017年09月09日 7時13分 (#3276247)

    コマ割りがない漫画…うーん。読みづらそう。
    絵巻物?

    あ!!
    ということは、フラットUIデザインは絵巻物風ってことですね?!

    ここに返信
  • by Anonymous Coward on 2017年09月09日 7時25分 (#3276253)

    アンチMSの皆さんが頑張らなかったので、こんなものが流行ってしまったではないか・・・・

    ここに返信
    • by Anonymous Coward on 2017年09月09日 10時06分 (#3276311)

      > アンチMSの皆さんが頑張らなかったので、こんなものが流行ってしまったではないか・・・・

      Win8というかModernUI(昔はMetroUIと呼ばれていたもの)でいえば、
      あれは表示面積が大きく必要とされる、文字ベースの質素な画面にならざるをえない、
      などを除けばフラットデザインの問題は発生しません

      なにせ、
      「原則として文字やシンプルなモノクロ画像だけで構成、タッチ操作できそうなところは(かなり)大きな文字や強調文字にしたり、タイルで区切ってそこ全体をタッチできるようにする」
      という内容なので

      ・通常のメニュー操作でも大きな表示面積を必要とし、文字ばかりになる。代わりに利用者は視覚上目立つところが操作できそうとすぐわかる

      ・アプリのメニューなどもシンプルなメニューにする代わりに階層を深くする

      ・上記でカバーできない複雑な操作体系や画像をふんだんに使った箇所は、そもそもModernUIにする必要がないし、意味もない

      となりますからね

      また、Windowsの多くの環境ではマウスオーバーという概念のあるマウス操作も併用されるため、
      マウスオーバーによりそこに機能が存在することを気づくことや、その時表示されるUI表現によりどんな機能なのかを知ることもできます

      今おおきな問題になっているのは、その辺を全部無視して

      ・何が何でも全部フラットデザイン、しかもタッチ操作だから誤タッチはミスに直結を押し付けているiOSやスマホ向けWebサイト

      のほうでしょう

      • by Anonymous Coward on 2017年09月09日 10時24分 (#3276321)

        でもWin8は現実問題として使いにくいし見にくいよ

        • by Anonymous Coward on 2017年09月09日 10時52分 (#3276335)

          > でもWin8は現実問題として使いにくいし見にくいよ

          いいえ?
          フラットデザイン(というかModernUI)+タッチ操作を前提とした場合、
          Win8は十分に使いやすかったですし
          チャームなど今からでもWin10で復活させてほしいと思うくらいですよ

          (前述したチャームをはじめ)マウス操作との融合性が低かったという問題はありますが、
          フラットデザインそのものの話をしているこのストーリーの中においてはそこは論点ではありません
          (そもそもマウス操作自体を放棄しているiOSなども話の範疇ですし)

    • by Anonymous Coward on 2017年09月09日 12時57分 (#3276387)
      Windows の フラットデザインでは、こういう問題ないよね?
      フラットデザインって呼ばれるのは同じだけど、UWP とか WindowsPhone のほうは、中間色的な雰囲気のよい感じがなくて、操作対象とそうでない物の間は高コントラストでむしろ強調してる。

      Apple が真似するときに、そのまんま真似すれば良いのに、無理矢理オシャレにしようとして、明確に区別させるためのデザインだったのに、その本質を見失ったものを広めてしまったのが問題なんではないかね。
      • by Anonymous Coward on 2017年09月09日 20時04分 (#3276552)

        Windows8/WindowsPhoneのModernUIではクリックできる要素は線で囲まれていたから、「クリックできる要素」は一目でわかるようになっていた。
        Windows以外のWebや他のOSでそういう仕掛けのないデザインが採用されてしまい、それが広まってしまった。
        おかげで、Windows10では囲みもなくなったし、糞みたいなハンバーガーメニューも採用された。
        Windows10が出てきたとき、Windows8やWindowsPhoneを評価していたユーザーから、嘆きの声が上がっていた。

    • by Anonymous Coward

      AppleやApple提灯メディアが
      OSXやiOSのスキューモーフィズムはダサいと言い始め

      Apple原理主義者が
      パクリのフラットUIを賞賛したからだろ

      • 個人的にはスキュアモーフィズム大好きですが、MacのRetinaディスプレイでGUI部品を見た頃から
        「デザインコストが半端ない」と思うようになりました。OS標準の部品はいいけど、自前で用意するとそれぞれに高精細のグラフィックを使ったピクチャを解像度別に複数持つことになるので。しかも視認性に悪影響を与えてはいけない。

        OEMにも出さないといけないWindows 8/RTで先に問題化しただけで遅かれ早かれ起こる変更だったのではないかと考えています。

        なので「スキュアモーフィズムはダサい」というのがポジショントークなのはわかっていましたが、かといって代替案があるわけでもなく…。

    • by Anonymous Coward

      つまりGoogleとAppleが頑張らなかったということですね
      わかります

    • by Anonymous Coward

      OSのUIの話なんてしてませんけどね。
      GoogleもAppleもYahooもwebのフラットデザインには追従していたし。

typodupeerror

人生の大半の問題はスルー力で解決する -- スルー力研究専門家

読み込み中...