スポンサーサイト

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

【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 構造化

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

tak

Author:tak

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

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

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

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

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