2013年10月18日 10:08Fujii

名札が無くなる時

IMG_4175

省略の技法

UIの要素では省略をする。

ボタンやアイコンなどが代表的。

GUIは視覚的なUIなので、現実世界ではどうなのかを考えてみよう。

現実世界の省略とは

ある人がいて、その人の名前はわからない。

そんな時に名札が生まれる。

名札をみればその人が誰かわかる。

慣れてくると名札はいらなくなる。

つまり、形が残り、テキストが無くなるのが現実世界なのかもしれない。

名札と距離感

小学校の子供が名札がついた運動着やゼッケンを着る時は、つまり、誰なのかがわからないということである。

誰にとってわからないかというと先生であったり、運動会の審判であったり、記録係であったりだ。

慣れれば覚えるので、同じクラスの中であれば名札やゼッケンは必要ないだろう。

名札とは距離が離れている時に必要なのだ。

2013年10月01日 09:53Fujii

UIデザインは省略のバランスの設計の連続

IMG_4089

UIデザインは省略の設計の連続

ユーザーに使ってもらいながら慣れてもらうと、省略ができて、いいことがあります。

ある意味、UIデザインとは省略を設計することの連続と言えるでしょう。

例えばボタンの省略では

以前にボタンひとつにしても、配置、色をつける、線で囲う、陰影をつけるなど表現のレイヤーが幾つも重なっていると書きました。

学習をするためには一貫性が必要で、例えばボタンの配置などを厳しく一貫させれば、表現レイヤーを多少省略しても学習したユーザーはボタンであることが予想できます。

これは一方で、一貫させることができなければ省略も難しいことを意味します。

これらの考え方は入り口にすぎず、実際には、ある3つの表現レイヤーは減らしたけれど、別のひとつの表現レイヤーは重ねる、さらに見た目のすっきりさとトレードオフでデメリットは認識つつも許容する方針にする、といったこと行ってはじめてひとつのボタン表現となります。

省略するとすっきりする

さて、省略するといいことがあると書きましたが、ひとつは見た目がすっきりすることです。

UIのユーザビリティテストからの改善を考えたときに、なぜかごちゃごちゃして失敗する理由のひとつは、「見た目がスッキリする」という視覚的なことが抜けているからです。

近年UIと言われているものは、視覚的なUI、つまりGUIです。

なので、グラフィカルな表現としてどうなのかを常に考えるのは必要です。

試写をして、アイデアを出し、映画を変えようとしたときに視覚表現を考えないで作る人は1人もいないことと似ています。

なぜよいのか?

見た目がスッキリするというのは、余白が生まれ、要素の数が減り、それぞれを把握しやすくなるます。

UIは歴史が浅いのでピンとこない人もいるかもしれませんが、映画の主人公が三人も四人もいない方が把握しやすいのと似ています。