フラットUIデザインでは目的のリンクやボタンを見つけるのに時間がかかるとの調査結果 239
OSのUIはフラットが流行する一方で 部門より
Nielsen Norman Groupが実施した調査によれば、フラットUIデザインのWebページでは目的のリンクやボタンを見つけるのに時間がかかるようになり、無関係な部分に視線が向くことも多かったそうだ。調査は一般的なWebユーザー71名を対象に実施されたもので、アイトラッキングデバイスで視線の動きも記録している（Nielsen Norman Groupの記事、アイトラッキングの結果、The Register）。
フラットデザインはすっきりしてモダンな印象を与える一方、リンクやボタンが目立ちにくい傾向がある。調査では実在の6カテゴリー9件のWebページをベースにフラット版とクラシック版の2種類を用意し、合計18種類のWebページを使用。元のWebページがフラットデザインの場合、リンクテキストを青字で下線入りにしてボタンを立体的にするなどしたクラシック版、クラシックデザインの場合は逆にフラット版を作成している。
調査対象者にはフラット版かクラシック版、どちらか一方のWebページを見せ、目的のリンクやボタンを探すように指示が与えられる。たとえばホテルのWebページでは部屋を予約するのが目的だと説明し、クリックする場所が見つかったら知らせるように伝える。指示の内容を理解しやすいよう、事前の練習も行われたとのこと。
その結果、フラットデザインではクリックする場所を見つける時間が平均22%長くなり、ページ内で視線のとどまる場所は平均25%多くなったという。ただし、情報量の少ないページや、目的の要素がよくある位置に配置されているページ、周囲の要素とのコントラストが大きい、または離れているページでは大きな差が出なかったそうだ。
なお、調査対象者には集中して目的のクリック場所を探すよう指示しているため、現実のWebブラウズとは異なる。現実には目的の内容がそのページにあるとは限らず、ユーザーは他のページに移動するなどしてあちこち見て回ることになる。その結果、ユーザーが存在を知らなかった情報を得られることもある。今回の研究はフラットデザインのユーザビリティーの問題を調べるのが目的ではなく、ユーザーが個別のページでどのように操作するのかを調べるのが目的だったとのことだ。
UI要素の境界がないデザインには欠陥がある (スコア:5, すばらしい洞察)
フラットデザインの場合は、どこからどこまでがUI要素なのかや、重要度がはっきり分かりにくいことが多いです。
例えばiOSのボタンは枠がないので、アフォーダンスや文字色のわずかな違いから、そのテキストがタップできるかどうかを識別しなくてはならないが、これはUIデザイン上の悪手ではないかと思います。
Webでも、単に立体感のあるマテリアルの使用を止めた結果、要素の境界がなくなってしまったり、重要な部分とそうでない部分が混在し見分けにくくなった例が多くみられます。
実際、シャドウやグラデーションを全く使わずに要素を強調するのは難しいのです。
今後はもう少し折衷案が流行って、強調されたり他と区別できるUI要素でもって、確信をもって操作できる画面が増えてほしいと思っています。
Re:UI要素の境界がないデザインには欠陥がある (スコア:4, 興味深い)
マウスオーバー（や、Tabキー連打でフォーカス移動でもいいですが）のように
「操作を直接は発動しないが、その位置に対してフォーカスしていることを示せる」
操作体系と、
iOSなどスマホにおける
「その位置をタップしたら即機能が発動してしまう」
操作体系では、
フラットデザインの弊害度合いは大きく違いますけどね
前者では「マウスカーソルで操作できそうな場所を指してみる」ことで利用者は不意の機能発動なしにそこに何かしらの操作が割り当てられているかどうかを把握することができます
ブラウザなどで昔からマウスオーバーイベントがあるのはこれがとても自然で利用者にとってわかりやすいことの証拠の一つですね
それに対して後者（タップしたら即操作が発動）では、
画面上を適当にそこら中タップしてみるという、非効率かつ誤操作リスク、混乱リスクの大きい操作を強いられます
結果として
利用者はそんな無駄なことはしないため、
フラットデザインにより気づいていない配置機能についていつまでたっても気づくことができない、
特定機能を実行しようとしたときに異なる位置をタップしてしまう、などが多発することとなります
ここにおいては、iOSは非常に重大な選択ミスをしたと断言できるでしょう
Re:UI要素の境界がないデザインには欠陥がある (スコア:1)
わざわざマウスオーバーする時点でめんどくさいという意見ですよ
Re:UI要素の境界がないデザインには欠陥がある (スコア:1)
Androidについては
#3276296 でも書いている通り、独立ボタンが3つある分iOSよりはずいぶんマシです
あとは初心者向けの機種の場合にはシンプルで見やすいホームアプリを使うようなこともできますね
程度の問題として、iOSのほうがより重度の問題状況に陥っているといえるでしょう
Re:UI要素の境界がないデザインには欠陥がある (スコア:1)
全く違うことをいきなりわめき出さなくてもいいですよ
フラットデザインがマウスオーバーのような概念のないタッチ操作体型ではより問題が大きいということは
あなたが喚いていることとは関係なく事実です
Re:UI要素の境界がないデザインには欠陥がある (スコア:3)
iOS（たぶん７以降）では一応「アクセシビリティ」でボタンの形は変更できますが、現行のに見慣れているとかなり違和感があります。
センスの無い奴が考え無しに作ったせい (スコア:3, すばらしい洞察)
フラットUIは配色に気を使ったりやボーダーを引いたり、考えることは多い。
見た目がシンプルな分、アホは自分でもデザイン出来ると思いがちだが、まったくの反対。
ゲームに例えると (スコア:3, すばらしい洞察)
敵を倒して何かアイテムがドロップしても、光りもせずに地面と同化してしまいそうなゲームなんでしょ？
フラットUIデザインはさっさと廃れて欲しい
Re:ゲームに例えると (スコア:2)
ウォーリー（メカじゃなくて赤白ボーダーの方）がゲーム化されそうです。
#たぶんもう出てる
Re:ゲームに例えると (スコア:2)
25年くらい前に温泉のゲームコーナーでプレイしました
フラットデザインじゃなくても (スコア:2)
使い辛いソフトとしてiTunesが挙げられます。作っている人が使っているのか
疑問に思うソフトの最たる例ですね。
今のところ「フラットデザインだから」という理由で忌避する事例は少ないです。
デザイナがクソなだけ。
#iOSのアップデート中が不明、ストアの境界線が不明瞭、検索性が雑、
#ポップアップヘルプやメッセージ領域の不足、不親切さetc,etc
オサレ()なだけで (スコア:1)
情報量も(境界)認識率も低いしねぇ
Re:オサレ()なだけで (スコア:3)
かっこよく感じるかどうか、っていうのは慣れ過ぎてないかどうかってのがかなり大きい。
どんなものでもなれちゃうとあんまりかっこよく感じない
なので「かっこいいものはある程度慣れていないハズで、よって使いにくい」
んじゃないでしょうか
フラットデザインがこなれてきて
スタンダードが決まってきてユニバーサルデザインがどーこーとかまで配慮される様に
なってくるころにはまた飽きが入ってきて入替るのかも
Re: (スコア:0)
メリットは「背景との親和性が高い」だけ、他は全て劣りますね。
Re: (スコア:0)
理論上僅かにでも、フラットデザインの方が軽くないかい？
まあその軽い筈のフラットデザインの上で、個々のデザイナーがグラデーション・背景変換透過などを駆使して無駄にリソースを喰い、角を丸めて希少なデスクトップ面積を浪費し、処理を重たくして措いて、過去との違いにどや顔しているのが、現代のUIデザイナーだが。
Re:オサレ()なだけで (スコア:4, すばらしい洞察)
フラットじゃなくてグラデーションもない角ばった立体感の有るデザインが軽くてわかりやすいですよ。
Windows3.1とかMotifみたいな。
Re:オサレ()なだけで (スコア:1)
旧 Mac OS のことも、たまには [google.co.jp] 思い出して [google.co.jp] やって [google.co.jp] ください [google.co.jp]（震え声）。
Re:オサレ()なだけで (スコア:1)
本当に近年の UI デザイナーの自己満足には酷いものが有る。
悪名高き M$ の Modern（笑）UI に、ガイドラインが細かすぎて（その為に完全準拠しているかどうかの判別が難しい）却って有名無実になってる Googol のマテリアル（笑）デザイン、エンドユーザーも開発者も置き去りにして自分たちの理想ばかりを Web に押し付ける Moz://a の Quantum・・・
見ていて嫌になって来る。
Re:オサレ()なだけで (スコア:1)
Re: (スコア:0)
void オサレ(){}
Re:オサレ()なだけで (スコア:2, おもしろおかしい)
ということにしたいんですね。
ハンバーガーメニューとか (スコア:1)
今はもう慣れたとはいえ初見では一体なんなのかわからん人がほとんどだと思う
というかハンバーガーメニューと聞いてあれを連想できる人自体少なそう
知ってた (スコア:0)
ていうかわざわざ調べなきゃわからんことなのか? UIデザイナーってのは白痴の集まりか?
Re:知ってた (スコア:2)
「そう思った」ことと、
「計測して確認した」ことは、
全然違うからね。
Re: (スコア:0, すばらしい洞察)
フラットデザインがどのくらいUIデザインとして不味いシロモノか、
具体的な数値にしたことに対して価値を見いだせない貴方の方が
余程「白痴」ですよ。
Re: (スコア:0)
フラットデザインがどのぐらい滞在時間を伸ばし、広告収入に貢献する素晴しいシロモノか、
具体的な数値になったってことね。そこには価値を見いだすよ。
Re:知ってた (スコア:1)
UIなんか、切り替え可能なOS設計が前提として考えれば
新機軸は、実験的に配信して
使いたい人にだけ使ってもらえばいいんじゃないのかな?
UbuntuのUnityみたいな例が既にあったわけだし
ほかの選択肢が無いカタチで
新機軸を押し付けることが悪手だと思います。
Re:知ってた (スコア:2, すばらしい洞察)
作り手は仕組みだけ用意して、UIは使い手が選べば良い。
それはデザインの放棄です。
そういう人が作ると、出来ることをメニューにずらずら並べて、なんのポリシーも哲学もないクソUIになる。
Re:知ってた (スコア:2)
形状ぜんぶ丸は下策でしたね
●◆×でも▲■▼でもよさそうなもの
歩行者用信号は絵になってるのに…想定認識距離の問題なんですかねぇ
当初はマスクするのももったいないほど光量が出なかった、とか
白熱灯とマスクにすると光源とマスクがだいぶ離れちゃいますし
真下あたりから見えない、とかに配慮したんですかね
実際のとこ都会のちょっと込み入った交差点とかだと矢印が
信号の役目ほとんど果たしてるようなところも多いですよね
視線が (スコア:0)
ふらっとするんです。
流行りもの (スコア:0)
利便性が一番ではないファッションと同じで時間ともに廃れたり復活したりしそうだ
漫画で考えてみた (スコア:0)
コマ割りがない漫画…うーん。読みづらそう。
絵巻物？
あ！！
ということは、フラットUIデザインは絵巻物風ってことですね？！
Windows8が元凶 (スコア:0)
アンチMSの皆さんが頑張らなかったので、こんなものが流行ってしまったではないか・・・・
Re:Windows8が元凶 (スコア:1)
> アンチMSの皆さんが頑張らなかったので、こんなものが流行ってしまったではないか・・・・
Win8というかModernUI（昔はMetroUIと呼ばれていたもの）でいえば、
あれは表示面積が大きく必要とされる、文字ベースの質素な画面にならざるをえない、
などを除けばフラットデザインの問題は発生しません
なにせ、
「原則として文字やシンプルなモノクロ画像だけで構成、タッチ操作できそうなところは（かなり）大きな文字や強調文字にしたり、タイルで区切ってそこ全体をタッチできるようにする」
という内容なので
・通常のメニュー操作でも大きな表示面積を必要とし、文字ばかりになる。代わりに利用者は視覚上目立つところが操作できそうとすぐわかる
・アプリのメニューなどもシンプルなメニューにする代わりに階層を深くする
・上記でカバーできない複雑な操作体系や画像をふんだんに使った箇所は、そもそもModernUIにする必要がないし、意味もない
となりますからね
また、Windowsの多くの環境ではマウスオーバーという概念のあるマウス操作も併用されるため、
マウスオーバーによりそこに機能が存在することを気づくことや、その時表示されるUI表現によりどんな機能なのかを知ることもできます
今おおきな問題になっているのは、その辺を全部無視して
・何が何でも全部フラットデザイン、しかもタッチ操作だから誤タッチはミスに直結を押し付けているiOSやスマホ向けWebサイト
のほうでしょう
Re:Windows8が元凶 (スコア:1)
でもWin8は現実問題として使いにくいし見にくいよ
Re:Windows8が元凶 (スコア:1)
> でもWin8は現実問題として使いにくいし見にくいよ
いいえ？
フラットデザイン（というかModernUI）＋タッチ操作を前提とした場合、
Win8は十分に使いやすかったですし
チャームなど今からでもWin10で復活させてほしいと思うくらいですよ
（前述したチャームをはじめ）マウス操作との融合性が低かったという問題はありますが、
フラットデザインそのものの話をしているこのストーリーの中においてはそこは論点ではありません
（そもそもマウス操作自体を放棄しているiOSなども話の範疇ですし）
Re:Windows8が元凶 (スコア:1)
~~Vista, 7 , 8と普通に使ってきましたが。
Zune, WP7, Windows 8ときてMSもようやくアイデンティティを確立するに至ったのだと期待していたら、Windows 10での堕落っぷりに大いに失望しました。
Re:Windows8が元凶 (スコア:1)
そんな与太話聞いたことがないわ。
ダウングレード権はProにしか設定されてないことからわかるように、あくまで企業向けの移行のための救済措置だ。
Re:Windows8が元凶 (スコア:1)
フラットデザインって呼ばれるのは同じだけど、UWP とか WindowsPhone のほうは、中間色的な雰囲気のよい感じがなくて、操作対象とそうでない物の間は高コントラストでむしろ強調してる。
Apple が真似するときに、そのまんま真似すれば良いのに、無理矢理オシャレにしようとして、明確に区別させるためのデザインだったのに、その本質を見失ったものを広めてしまったのが問題なんではないかね。
Re:Windows8が元凶 (スコア:1)
Windows8/WindowsPhoneのModernUIではクリックできる要素は線で囲まれていたから、「クリックできる要素」は一目でわかるようになっていた。
Windows以外のWebや他のOSでそういう仕掛けのないデザインが採用されてしまい、それが広まってしまった。
おかげで、Windows10では囲みもなくなったし、糞みたいなハンバーガーメニューも採用された。
Windows10が出てきたとき、Windows8やWindowsPhoneを評価していたユーザーから、嘆きの声が上がっていた。
Re: (スコア:0)
AppleやApple提灯メディアが
OSXやiOSのスキューモーフィズムはダサいと言い始め
Apple原理主義者が
パクリのフラットUIを賞賛したからだろ
Re:Windows8が元凶 (スコア:2)
個人的にはスキュアモーフィズム大好きですが、MacのRetinaディスプレイでGUI部品を見た頃から
「デザインコストが半端ない」と思うようになりました。OS標準の部品はいいけど、自前で用意するとそれぞれに高精細のグラフィックを使ったピクチャを解像度別に複数持つことになるので。しかも視認性に悪影響を与えてはいけない。
OEMにも出さないといけないWindows 8/RTで先に問題化しただけで遅かれ早かれ起こる変更だったのではないかと考えています。
なので「スキュアモーフィズムはダサい」というのがポジショントークなのはわかっていましたが、かといって代替案があるわけでもなく…。
Re: (スコア:0)
つまりGoogleとAppleが頑張らなかったということですね
わかります
Re: (スコア:0)
OSのUIの話なんてしてませんけどね。
GoogleもAppleもYahooもwebのフラットデザインには追従していたし。
Re:Windows8が元凶 (スコア:2)
現状WebもOSもフラットデザインが主流なのでその２つを分けて話す意味はないのでは？
Re:デザイナーが下手 (スコア:2)
『デザイナは分かっているけど、クライアントが変なのを要求する説』なんていうのも有るとか、見たような気がするする。
Re:デザイナーが下手 (スコア:2)
お客様のご要望には二つ返事で従えという、社長直々のお達しが以下略っていうケース。
Re:HUISというソニーのリモコン (スコア:3)
アホな人向けに作りましたって感じの製品に見える。
当人が満足なら、いいことだ。
Re:フラットデザインもユニバーサルデザインも使いにくい (スコア:1)
左はスカートをはいているから女。
右はパンティをはいているから女。
で、正解でいいですか？
Re:iPhoneで困っている人が多いですね (スコア:2)
売れりゃいいんですよ
逆に「どれぐらいまでわかりにくくても見た目スタイリッシュであれば売れるのか」
という事なのかもしれない
シェアが下がってきてるのは慣れてきて目新しさより使いやすさを選ぶからかも?
# はっ、「わかりにくいが慣れればどうってことない」のがiOSだとすれば
# vi 派はiOSなのか‥?