良いGUIと悪いGUI [Edit]
投稿者：SIHO | 投稿日：2004.03.23 | [ディレクション][制作全般]この二つをわける法則があります。本当によいGUIはこの法則にさらに洗練が加わったものだと思います。洗練はすぐに手に入らないけど、GUIの法則は比較的簡単なことだと思います。
良いGUIとはつぎの大原則を遵守しているかどうかが指標になります。
「定常化している方式から逸脱しない。」
理由は、ユーザーは予想しない動きを嫌うから。
例えば、「→」ボタンをみると、「つぎページ」を予想し、「押すと話の続きが読めるんだ」と思うことでしょう。
仮に、これを実際に押したとき、全く違うページが出て来たら、ユーザーは違和感を覚え、困惑します。
先の大原則を補足すると、「普通」になりつつある方式を用いることは、多くの人にとってその「普通の動き」が予測可能であると言うことです。
この「動きを予測できる」ということはユーザーに安心感を与えます。
他方、これを裏切る動きはストレスになり得ます。
更に、予測できないボタンもまた、不安というストレスの元を植え付けます。
コンテンツ制作の場合、メッセージが伝わりやすい環境を整えるのがGUIです。
逆に言えば、GUIをしくじるとメッセージを伝える前に「閉じる」ボタンを押されてしまいます。ユーザーは本当にあっさりと「閉じる」もの。
良いGUIにする方法は、通常用いられるやり方と比較して、外れないように設計すること。例えば、OSのそれにあわせるとか、普及度の高いソフトウェアにあわせるなど。
逆に悪いGUIの代表例としてあげられるのは下記の3つかな。
1.ボタンがデザインに溶け込んで分からない
2.文字が読みにくい(視読性が低い)
3.クリックエリアが狭い(操作しにくい)
これが仕様設計するときに私が一番大事にしていることです。
あなたがGUIを考えるときに心掛けていることは何ですか？
この記事へのコメント
●1.河合（2004年03月24日 12:14）
特に心掛けているわけではないですが...
# そういえば、新規のGUI設計なんて最近やってない
基本的には左から右へ、上から下へと目線(手順)が流れるように
とは思っています(帳票的発想)。
# 縦書き的な表現だとまた変わりますが、そういう設計は今までないです。
また、アクセシビリティの配慮になると、なかなか一人(のテスト)では
「普通の動き」を具現するのが難しいですね。
>逆に悪いGUIの代表例としてあげられるのは下記の3つかな。
>1.ボタンがデザインに溶け込んで分からない
>2.文字が読みにくい(視読性が低い)
>3.クリックエリアが狭い(操作しにくい)
自由度の高いFlashでは、特に陥りやすい部分ではないかと思います。
・イントロムービーで[skip]が見あたらない/見つけにくい(場所・配色)だったり、
・サイトのタイトルや説明っぽいテキストがでかく表示されているのに
肝心の[enter]が小さく端の方にあったり、
・ボタンのような振る舞い(ロールオーバー等)をする、ただのテキストや画像など
# 首が絞まってる気がするので、この辺で...
●2.ひなかも（2004年03月24日 13:21）
良いＧＵＩで心がけている事を簡単に言えば、『気配り』してます。逆に、悪いＧＵＩができる理由第一位は
『勘違い』 かと。他、特に業務系はお客様のところで大勢が毎日のように使うので、開発でも、とにかく多くの人に使ってもらい、指摘してもらう事でしょうか。
（で、試験時のシステム全体における指摘数の9割がＧＵＩだったりする。ぉぉぉ）
●3.サブリン（2004年03月29日 07:34）
大体言ってる通りかねぇ。
デザインで失敗してる人も多いと思います。
かと言って、→ボタンを超デカク、真っ黄色にしてもダサかったりするんで、
そこらへんはセンスだろうけど。Flashの場合は、紙と違って、デザインだけではなく、
アニメーションで視認性をアップすることもできるんで、お忘れ無くやね。
デザイン自体は溶け込んでいても、アクアの決定ボタンみたいにゆっくり点滅してるとか、
そういう演出でも「クリックしてほしさ」をアピールできますよー