UIとデザイン、機能の進化が生み出す「取り残される人たち」

google系アプリのアイコン

Koshiro K / Shutterstock.com

「Google系アプリのアイコン、見分けが付かない問題」

 世の中の洋服の流行は年々変わる。それに負けず劣らず、IT系のデザインのトレンドもよく変わる。少し前に、Googleが提供しているアプリのデザインが変わり、みんな似た感じになって、分かり難くなったと話題になった(Togetter)。  こうした問題に対して、近年のデザインの変遷で説明している記事がある(freshtrax)。まず、1990年代後半に流行した、現実世界の物体の表現をふんだんに取り込んだスキュアモーフィズム。その後、Windows8で多くの人は体験した立体表現を排したフラットデザイン。その行きすぎの反動から出てきて、フラットデザインに若干の立体表現を加えたマテリアルデザイン。そして最近話題になっている平面でシンプルな要素と、現実的立体を組み合わせたニューモーフィズム。Googleのアプリのアイコンは、こうした近年の表現に、カラフルな色を流し込んだものだと言える。  さて、どうして冒頭のようなデザイン変更による不満が出たのか。多くの人は、Googleのアプリのアイコンを、色と形で認識していた。今回のGoogleの変更では、アプリのアイコンから色という情報が削り落とされて、情報量が減ってしまった。  「情報量が減ってしまった」と私が感じたのには理由がある。ITの世界では、時間とともにユーザーインターフェースから情報量が減っていく傾向があるからだ。そうした流れを私は目撃してきた。  今回の変更は、そのうち変更されて、色の情報が戻るかもしれない。しかし、現時点では色の情報が減っている。  こうした、情報量の減少について、いくつかの事例を紹介した上で、どうしてそうしたことが起きるのか、『めもりーくりーなー』というオンラインソフトを開発していた私の経験を交えて書いていこう。

UIとデザイン、経験の積み重ねと複雑化により 切り捨てられる情報

 まず、多くの人が体験したであろう事例を挙げよう。  Windows という OS がある。この OS には、左下にスタートボタンがある。このスタートボタンだが、1995年の Windows95 の頃には、「Windowsアイコン」+「Startの文字」+「立体のボタン」というデザインだった(Wikipedia)。  このスタートボタンは、2007年の Windows Vista でデザインが変わる。「Windowsアイコン」+「丸く大きな立体のボタン」になる(Wikipedia)。スタートという文字の情報が欠落したわけだ。まるで「もう既にスタートボタンだと分かっているから、書かなくてもいいよね」とでも言いたげに、機能を説明していた文字情報が削られた。  このスタートボタンの情報は、2015年の Windows 10 ではさらに減少する(Wikipedia)。「Windowsアイコン」から色がなくなり小さくなる。また「立体のボタン」の表現がなくなり、ボタンであることを伝える枠も消える。  この「1色で表現された4つの四角」がスタートボタンだと知るには、マウスカーソルをこの上にのせて、「スタート」というポップアップを表示させなければならない。「ここに、スタートボタンがあることは、もう知っているよね。概念としての記号だけ置いておくよ」とでも言いたげに、情報は大きく欠落している。  同じような情報の欠落は、Windows のウィンドウの右上にある最大化、最小化ボタンでも起きている(Version Museum)。  最大化ボタンは、古くは「上辺が太い四角形」+「立体のボタン」というデザインだった。しかし、Windows10では、「ただの正方形」になっている。「上辺が太い」という、ウィンドウを表す情報と、「立体のボタン」という情報が欠落している。  最小化ボタンは、古くは「下寄せの横線」+「立体のボタン」というデザインだった。しかし、Windows10では「ただの横線」になっている。「下寄せ」という、ウィンドウがタスクバーに収納されている様子を表す情報と、「立体のボタン」という情報が欠落している。  多くのソフトウェアのユーザーインターフェースでは、最初の時点では説明的であり、徐々にユーザーが慣れることによって過剰な情報と感じるようになり、うるさくないように情報が削られる。長く存在するUI部品ほど、シンプルなデザインになり、情報は具体的なものから、象徴的なものに変わっていく。  このようにデザインがシンプル化して、情報が削られるのには、ユーザーの慣れ以外に、もう1つの要因がある。それは機能の複雑化だ。
次のページ
時間と共に増え、複雑化していく機能
1
2
PC_middleRec_left
PC_middleRec_right
関連記事
PC_fotterRec_left
PC_foterRec_right