スポンサーサイト

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

【GUI Tips】 ボタン配置ガイドライン

GUI設計に欠かせないボタンコントロール。
このボタンの配置についてのガイドラインをまとめまする。

例:Windowsの「マウスのプロパティ」画面
マウスのプロパティ

まとめると、以下のようになります。
1.ボタンは影響範囲に応じたグループに配置する。(構造化)
[設定(E)...]はクリックロックにだけ影響するため、クリックロックグループ内に配置されている。
[OK][キャンセル][適用(A)]は画面全体に影響するため、画面下部に配置されている。

2.別の画面に遷移するボタンは、キャプションに"..."を付ける。
[設定(E)...]は設定画面へ遷移するため、"...."が付いている。

3.画面消去を伴うボタン[OK][キャンセル]は左に配置する。
重要なボタンほど左に配置する。
押し間違いのリスクを考慮し、押しやすい右側に[キャンセル]を配置する。

4.ボタンは必要な時のみ押せるようにする。
[適用(E)...]は何かの変更が行われたときに有効にする。一度押されたら、無効に戻る。

5.ショートカットキーを設定する。
設定(Establish)、適用(Accept)のように英語の頭文字を割り当てる。

6.キーボードショートカットを設定する。
[OK]はEnterキー、[キャンセル]はEscキーに対応する。

ちなみに、これはWindowsのガイドライン。
Machintoshでは[OK][キャンセル]ボタンが入れ替わります。
なんででしょうねぇ?ゲイツとジョブスの好みの違い?(笑)

関連記事:【GUI Tips】 構造化

スポンサーサイト

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

tag : GUI ボタン

【GUI Tips】 構造化

なんだかんだ忙しいっすね。このご時勢、忙しいのは喜ぶべきなんだろうけどw

今回のテーマは構造化」。

ああ、お隣の耕造くんのコトねって、人名じゃないですよ。
前々代の首相でもありません。それは晋三。

構造化」とはソフトウェアの分野でよく使われる言葉で、論理的に構成要素を整理することです。
モノゴトは論理的なほど理解しやすくなります。
住所なんか良い例ですね。
神奈川県>横浜市>○○区>○○町
のように大きな括りから序々に細分化されているので、目的地を容易に探すことができる。
この順番がバラバラだったら、どこから探し始めればいいのか混乱してしまう。

GUIも同様で、コントロールの配置は論理的に破綻しないよう気をつける必要がある。
実例を挙げてみよう。まずは悪い例。
構造化悪い例
図1.構造化できていない例

機能A,Bがあり、それぞれの設定項目がグループ化されて、欄外に各実行ボタンと終了ボタンが配置されている。
どこが悪いんでしょう?

それは機能A,Bのグループと実行ボタンが論理的に結合できていない点です。
機能A、Bの実行ボタンはそれぞれのグループA,Bに対してのみ有効であり、例えば機能A実行ボタンが機能Bの設定を使用することはありません。
つまり、実行ボタンは各グループの配下にあるわけで、フォーム全体に作用する終了ボタンと同階層に配置してはいけないのです。
このままでは、ユーザーは設定と実行ボタンの関係が直感的に理解できず迷うことになります。
(この例は単純なので迷わないかもしれませんが・・・w設定が多数になり画面も大きくなった場合を想像してみてください)

このGUI構造化すると、↓のようになります。
構造化良い例
図2.構造化できている例

こちらでは機能Aグループと機能Bグループが完全に独立できており、
フォーム>機能A(B)設定>実行
と大きな括りから小さな括りへとスムーズに認識できます。

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

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

tag : GUI 構造化

【GUI】 感性の解像度

こないだ妻に寺門 琢己氏の「たたかうカラダ」という本を薦められて読んでみたところ、目から角膜が落ちるくらいの発見がありました。
本書は男の生理が主題なんですが、枝葉の論旨として感覚の鍛え方についても触れられてます。

氏曰く
もともと<からだ>は「快感センサー」の解像度をもっと上げたいという要求を持っている。五感の豊かさをいま以上に感じて<からだ>はもっともっと気持ちよくなっていこうとする。だから、視覚で言えば、より見えたい。これは、単純に視力を上げるって意味じゃない。バカみたいによく見えるだけでは仕方がなくて、たとえ視力自体は落ちて多少ボケていても、脳のなかにたくさんの映像データを増やしたいって、<からだ>は求めている。自分の中にそういうデータ、素材が増えてくると、好きなことに対する造詣が深まって、自分の身のまわりの世界を理解する力をいっそう上げられる。
(p67より抜粋)

ようは感覚にも解像度というものがあると。
粗い解像度では物事を大雑把にしか捉えられず、 微妙な違いによる物事の良さを味わうことができないのだと。
好きなことを通じて感覚の解像度を上げることにより、いろいろな物事をより豊かに理解できるようになるのだと。

これは一般論としても味わい深い言葉だけど、特に「作り手」を自認する人種は強くキモに命じる必要があると思う。
味オンチなシェフに隠し味の効いた料理は作れない。そうなると、舌の肥えた客を満足させることなんてできるわけが無い。
ユーザーの感性が作り手のそれより劣っている保証はどこにもなく、ユーザーを満足させるためには、作り手はより高い感性を持ってモノ作りをしなきゃいけない。

このブログのテーマである「使い勝手」についても同じこと。
「使い勝手」に関する感性がユーザーより劣っていては、ユーザーが気持ちよく使える製品なんて作れない。
一人でも多くのユーザーに満足してもらうためにも、俺自身の「使い勝手」に対する感性の解像度を上げる努力を続けないといけないなーと思うわけです。



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

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

tag : 書評

【GUI】 自由度の罠

いやぁぁ、寒いっすねえぇぇ。
ここ数日の寒さには冬嫌いの俺は凹みます。本当に寒い。
本当に本当に本当に本当に・・・ライオンだー!(壊

さて、気を取り直して今回のテーマは自由度の罠」です。
自由度って言葉はソフトウェアの使い勝手を語る上で大事な要素である。
一般的には自由度が高い、低いという使い方をしますね。もちろん、低いより高い方が使い勝手は上という意味になります。
だがしかし、この自由度も高ければ良いかというと、そうとも言えない。

この間会社で久しぶりに説教くらいました。
俺はエラーの履歴を管理するソフトを担当してるんですが、このソフトには1つ欠点があるのです。
ソフトは起動時に過去30日分のエラーを表示するんですが、短期間にエラーが頻発すると、エラーファイルの読み込みに時間が掛かってしまい、起動が極端に遅くなってしまうというもの。
この問題の解決方法を相談していたときのことです。

俺は解決策として、起動時のエラー表示期間をユーザーが選べるようにしてはどうか?と提案しました。
ソフトの問題を解決し、かつソフトの自由度も向上させる一石二鳥の案、のつもりでした。
が、手厳しい反論に会い、あえなく沈没。
その時の反論の要約を書きます。

↓↓↓↓↓↓↓ ここから ↓↓↓↓↓↓↓
表示期間を設定させるって、ユーザーに?
どうして?表示期間が、どのくらいが妥当かなんてユーザーには分からないじゃない。
ましてやソフトが動作するための最適な設定をユーザーに決めさせるなんておかしい。
それは、開発者の怠慢じゃないの?
↑↑↑↑↑↑↑ ここまで ↑↑↑↑↑↑↑

いやもう仰るとおりですorz
ソフトの方で負荷を自動計測して、ストレスの無い期間を自動設定するのが最適解です。
分かっちゃいながらも、上手く作りきる自信が無く、ユーザーに丸投げしちゃってました。

と、このように某Tさんの失態を取り上げてみたわけですが(笑
自由度という言葉の便利さにすがり、開発者が決めるべきパラメーターをユーザーに丸投げしてしまうケースは割りとよくあるのではないかと思います。
もちろんパラメーターを設定できること自体は良いことなのですが、「最も妥当」なデフォルト値は開発者が責任をもって決定するべきでしょう。
ソフトによってはあらゆるパラメーターを設定可能にする必要に迫られるかもしれませんが、そういった場合は簡易/上級のようなモード切り替えを設け、簡易モードではデフォルト値で十分な操作性を提供するのが良いと思います。

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

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

tag : GUI 自由度

【GUI Tips】 タイトルの付け方

ちょっと更新期間が空いちゃいました。ごめんちゃい。
師走というだけあって、残業やら忘年会やらでスケジュールいっぱいです。
もう3年分くらい忘れた気がする。
最近のデータでは、忘年会をやりすぎて過去30年の記憶をなくし、幼児退行してしまうサラリーマンが増えているそうです。
ウソです。飲みすぎには気をつけましょう。

さて、今回のテーマは「タイトルの付け方」です。
タイトルとはアプリケーションのタイトルバーに表示されるテキストのこと。

Windowsではタイトルの命名規則を以下のように定めています。
 モジュール タイトル - [操作] [オプション]msdn
モジュールタイトルは「画面でやろうとしていること」を指し、[操作][オプション]は「画面の情報」を指します。
少し分かりにくいので下のように言い換えた方がいいかな。
 画面の目的 - アプリケーション名

いくつかの主要なWindowsアプリケーションを例に出してみる。
タイトル例Windows
図1.Windowsのタイトル例(for Vista)

上がIE7.0のタイトル。
左に表示しているサイトのタイトル、右にアプリケーション名を配置している。
真ん中がメールブラウザのタイトル。
左に開いているフォルダーの名前(受信トレイ)、右にアプリ(略
下がメモ帳のタイトル。
左に編集中のファイル名、右に(略
と、このように方式が統一されている。

このようにする利点は2つある。
1.画面でやるべきことがすぐにわかる
画面の目的を一番見やすい場所に置くことで、ユーザーになにをするべきかを伝えることができる。
上の例では受動的な情報になっていたが、例えば「パスワード入力」というタイトルが表示されていれば、ユーザーは何をするべきか即座に理解できる。

2.タスクバーで画面を見つけやすくなる
GUIでは複数のアプリケーションを一度に立ち上げて操作する場面が多々ある。
また、1つのアプリケーションを複数同時に立ち上げて操作することもある。
そうした場合、タスクバーに大量の画面が表示されてしまい、目的の画面を見失うことになる。
その時、タスクバーで縮小された画面に目的が書かれていれば、ユーザーは容易にそれを見つけ出すことができる。
タスクバー
図2.タスクバー

上はIE7.0の画面をタスクバーに並べた例。
もしタイトルが「Windows Internet Explorer - (サイト名)」だったら、どちらも「Windows ...」としか表示されず内容が判別できない。

と、このようにタイトル1つでも使い勝手を向上する工夫はされています。
GUIデザインに是非取り入れてくだされ。

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

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

tag : GUI ユーザビリティ

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

tak

Author:tak

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

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

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

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

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