Flatデザインの入力フォームをデザインする

http://alistapart.com/article/flat-ui-and-forms

1 comment | 0 points | by Jshiike 4年弱前


Jshiike 4年弱前 | ▲upvoteする | link

フラットデザインは、ユーザのアクションを促す表現がどうにもこうにも難しいですが、その解決策が紹介されはじめたので、助かります。Jessica Endersが、入力フォームのベストプラクティスを解説しています。



フラットデザインは、目立たせることが難しいので、ユーザにとってアクションを決める情報が少なくなることを意味する。


一方、入力フォームのUIは、


  • ユーザはタスクを完了させなくてはいけない

  • ユーザは入力フィールドにフォーカスして作業する

  • ユーザの導線は、入口と出口は1箇所であり、順路がある場合が多い

  • 入力完了と失敗の区分がはっきりしている

  • 一度しかやらない作業である場合が多い

という点で、他のコンテンツのUIとは違うデザインの制約がでる。


解決策としては、


同じ画面において、優先順位の高いアクション(例えば「提出する」)はボタンで、優先順位の低いアクション(例えば「キャンセル」)はリンクにすることがお勧め。


目立たさせる工夫としては、カラーと形、もしくは、カラーとサイズなど、2要素を変えることで、色の識別が苦手なユーザの方にも対応できる。

[事例1]


悪い例では、そもそも、CancelリンクがSubmitリンクよりも前に配置されているのがよくないことをさておいても、良い例のようにSubmitをボタンに変えるだけで、ユーザはアクションの優先順位がすぐわかる。


[事例2]


悪い例では、個数が変更できること、ボタンを押すと購入できることがまったくわからない。解決策は、個数の変更フィールドは、1pxでもよいのでborder or shadowを入れ、背景色をなくして凹みを表現すること。ボタンは、少しだけdrop shadow/rouded corners/gradient/borderのいずれかを用い、異なる背景色を使って凸状に見せる。


[事例3]


悪い例に対して、 中間の例ではborderを追加し、良い例では背景色を取ることでユーザがアクションをとるべきことを促している。


[事例4]


Facebookはグラフサーチの機能にユーザが気づいてくれないUIを、背景をなくしshadowを追加することで凹みを明示し、改善した。


当初     変更1     変更2     最終形


[事例5]


悪い例のボタンの形を良い例に変更し、アクションが必要であることを明確にした。


[事例6]


複数ボタンの事例では、最優先のアクションの色を変更。




ワザノバ TOP100 アクセスランキング [8/25-10/12]



#フラットデザイン #デザイン #ui #ux

Back