スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【GUI Tips】 情報表示は1箇所に

これからGUIの小ネタみたいなものをちょいちょい紹介していきたいと思ってます。

今回のテーマは「情報表示は1箇所に」。

目の前に時計が2つあるとします。
別々の時刻を指している場合、人はどういう判断をするだろう?
自分の感覚と近いほうの時計を信じる、というのが一般的な判断だけど、これには大きな罠がある。
それは、両方の時計が間違っている可能性には気付かない、ということ。

人は二者択一の状況に置かれると、より正しそうな方を選択し、それを盲信する。
自分で選んだという能動的な意識が、それ以外の選択肢を頭から消してしまう。
比較対象がまったく無ければ・・・例えば時計が一つしかなく、それが間違っていたとしたら、人は案外気付くものです。
選択できないという状況に対する不安感が、外界(別の時計)との比較を行わせるから。

この教訓はGUIにも応用できる。
何かの情報を表示させる場合、1つの情報に対して必ず1箇所だけ表示すること。
ソフトのバグなどで複数の箇所の表示が食い違ってしまった場合、ユーザーを前述の罠に嵌めてしまうことになる。

また、食い違った情報の片方が正しかったとしても、ソフトの方で正しい情報を使っているとは限らない。
「こっちは間違ってるけど、あっちが正しいからいっか」
みたいなユーザー心理で処理を実行され、結果をみてビックリなんてシチュエーションはもはやトホホの領域ですw

-----------------------------------------------------
↓「いいねー」と思ったらポチッと。応援励みになります。
にほんブログ村 デザインブログ プロダクトデザインへ にほんブログ村 IT技術ブログ ソフトウェアへ
スポンサーサイト

theme : ソフトウェア開発
genre : コンピュータ

tag : GUI 視認性

【GUI】 グラフィックの力

GUIデザインの方針はしばしば2つの方向に分かれる。
1.テキストベース
2.グラフィックベース

1は文字や数字を主体としたGUI
2は図やアニメーションを主体としたGUI

俺のように産業機器のGUI設計をやっていると、周囲が硬派な人が多いため1寄りのGUIになりがちです。
昔作ったGUIなんて文字と数字が画面上に整然と並べられただけの無機質なものでした。
↓こんな感じ
無機質なGUI
図1.無機質なGUI
この当時、GUIにグラフィックを使いたいなんて言った日には「役に立たないもんに工数使うんじゃねー!」と非難されたもんです。

しかし、最近はPCの性能向上のお陰か、はたまた直感的なGUIの有効性が認められてきたからか、グラフィカルなGUIに寛容的な風潮ができてきました。
ありがたいことです(-人-)

グラフィックの力は数値や観念的な状態を示すときに最大限に発揮される。
例えば速度を示すスピードメーターや機能を示すアイコンなど。
試しにお金をグラフィック的に表示してみる。↓
グラフィック例
図2.お金のグラフィック(上:金額のみ、下:金額&グラフィック)

絵が・・・下手すぎる!!orz もっと綺麗に描けるツール探さなきゃ
いかがでしょう?
下の図の方が金額のイメージをしっかりと把握できると思います。

数字というのは桁の認識が難しく、また入力ミスも頻発します。
コレATMなんかに実装して欲しいなあ・・・。

関連記事:
【GUI】 コントロールの密度 -4-

-----------------------------------------------------
↓「いいねー」と思ったらポチッと。応援励みになります。
にほんブログ村 デザインブログ プロダクトデザインへ にほんブログ村 IT技術ブログ ソフトウェアへ


theme : ソフトウェア開発
genre : コンピュータ

tag : GUI 視認性

【GUI】見えること(認識) -3-

前回から引き続き「視認性」についてまとめますよ。

4.言葉について
ターゲットのユーザーにとって理解しやすい言葉を使うこと。
専門用語、横文字はユーザーの理解を促進できる範囲で使う。日本語で置き換え可能な言葉をわざわざ横文字にすることは、あまり意味があるとはいえない。

5.メリハリをつける
大事な情報は大きく表示して目立たせる。
まとめられる情報はグルーピングして、インデント(字下げ)をしたり枠で囲うなどして、情報の境界を明確にする。

コントロール間に適度な余白をもたせ、必要以上に詰め込みすぎないこと。

6.テキスト配置
テキストの属性により表示形式を変える。
基本、文字情報は左寄せ、数値情報は右寄せにする。
パソコンのディスプレイは横長の文章を読むのに向かないので、文章は適度に改行し、行間も広めに取る。

7.アフォーダンス
一目で役割の分かるコントロールにする。
例えばボタンにドアのアイコンが付いていれば、そのボタンは何らかの出入り口として使うものだと認識できる。
こういったモノの形状から慣習として使用方法が連想されることを「アフォーダンス」と呼ぶ。
インターフェース設計の根本と呼べる概念なので、是非知っておいてください。

関連記事:
【GUI】 見えること(認識) -1-
【GUI】 見えること(認識) -2-

-----------------------------------------------------
↓「いいねー」と思ったらポチッと。応援励みになります。
にほんブログ村 デザインブログ プロダクトデザインへ にほんブログ村 IT技術ブログ ソフトウェアへ

tag : GUI 視認性

【GUI】 見えること(認識) -2-

ユーザーの認識しやすいGUIにするには?をテーマに語っていきます。
まずは「見やすさ」。つまり視認性をテーマに。

えーと、視認性と掛けて・・・イタコの口寄せと解きます。
その心は・・・

死人Say!
はい、ムシャムシャしてやりました。お腹いっぱいです。

1.文字フォントについて
ユーザーの視力は人によって異なるものであり、デザイナーの視力を基準に文字サイズを決定するのはよろしくない。日本人の視力の平均が0.5程度であることから、やや大き目(Windowsのフォントサイズでいうと10pt~12ptくらい)にするのが望ましい。
ソフトによるけれど、カスタム機能でフォントサイズを変更できるようにすると尚Good。

フォントはゴシック体を使用する。明朝体は文章に使うのは良いが、決して読みやすいフォントではないので、GUIでの使用は避けたいところ。

2.色について
基本的に背景色を明るくし、文字およびコントロールには濃い色を使用する。逆も可。
背景と文字およびコントロールを近い色にするのはNG。コントラストをしっかり取ることが大事。
気付きにくいけれど、色盲の方って結構身近にいるんですよ。軽度の特定の色が見えないとか。
そういう方の為にもコントラストのつけ方には気を使いましょう。

色の役割を慣例に合わせる事。
赤=危険、黄=警告、青=安全というのは信号の例を使うまでも無い慣例ですね。
これらの、色から素直にイメージできる役割を崩さないようにするベシ。

3.文章表現について
文章は簡潔に短く。過度の丁寧語は視認性を落とします。
人は「ナナメ読み」という特殊技能を持っており、文中のキーワードをピックアップして再構築し文脈を理解することができる。
文章に修飾語が多すぎたり、長かったりすると、キーワードのピックアップ効率が落ちて理解しにくくなる。
例えば電車の電光掲示板に下の文章が表示されたとする。
A:「東京行き、次は横浜に停まります。」
B:「この電車は東京行きです。次の停車駅は横浜です。」
一見、Bの方が丁寧に見えるけれども、主語の「電車は~」や「停車駅は~」は状況から容易に推察できるものであり、省略しても構わない。
むしろ邪魔な主語があることにより、「東京」「横浜」というキーワードを見えづらくしている。


視認性は語ることが多いな・・・。続きます。

関連記事:
【GUI】 見えること(認識) -1-
【GUI】 コントロールの密度 -3-

-----------------------------------------------------
↓「いいねー」と思ったらポチッと。応援励みになります。
にほんブログ村 デザインブログ プロダクトデザインへ にほんブログ村 IT技術ブログ ソフトウェアへ

theme : ソフトウェア開発
genre : コンピュータ

tag : GUI 視認性

プロフィール
バリネコ
コメント歓迎であります。

tak

Author:tak

カテゴリ
最近の記事
最近のコメント
最近のトラックバック
CssTagCloud

GUI  デザイン  ユーザビリティ  書評  やさしい  UI  文章  視認性  お気に入り  発明  個人情報  タスポ  コンペ  WEB  アフォーダンス  あるある  アイコン  タバコ  息子  帰省  1000円  喫煙  価値  人間  テレアポ  発明学会  家具  運が悪い  エコバッグ  ライフサイクル  構造化  自由度  ゲーム  ボタン  メンタルモデル  音楽動画  効果音  家電批評  ヒューマンエラー  ブログ  ケータイ  ユニバーサルデザイン  雑学  ソニータイマー  副都心線  

FC2カウンター
人気記事
広告
ブログ内検索
リンク
オススメ書籍
RSSフィード
メールフォーム

名前:
メール:
件名:
本文:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。