skillup

技術ブログ

UI デザイン

デザイ二ングインターフェイスのまとめ

投稿日:

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ

ユーザーを理解する

  • ユーザーが何をしたいか ・・・ 根本的な目的
    ソフトウェアがなければどのように処理をするか、していたかを聴くと代替行動が見えやすい
  • ユーザーはどのようにそれを使うか ・・ 使う場面のイメージ&デバイス適性
    実際にユーザーの動きをみる or ステップごとに追う
  • ユーザーのスキルはどれくらいか ・・ リテラシー(高いor低い)

ユーザーの行動パターン

  • 安全性  失敗しても戻れる 、初期化、後で
  • 空間的省エネ 習慣パターン 情報は少なく(画面に置く情報は少なければ少ないほど) 複雑な操作は分割せよ
  • 操作的省エネ 習慣パターン 即時性(すぐに)  ショートカット機能(最小の操作数で) リピート機能
    ※全体として正常系だけでなくイレギュラー系だったり、その時同時にやっているほかのことにも注目
    アクティビティ図もあると今ユーザーがどういう状態かわかる

ポジショニング(情報の配置)

1回に見せる情報はできるだけ少なく、分類、階層化を行う
  • 1メッセージ、1マーケット、1アウトカム
  • あれもこれも画面を作らず、わける
    NG 顧客のいうことを全部盛り込み気づくと画面が平坦な項目だらけ。
    OK 情報ごとに分けて1ページの入力欄は少しにする。Amazonをみよ!リンクやメニューなども用途後に分ける。アイコンなども文字と比べ見る負担が少ないのでよい。
  • 情報のグルーピングと階層化 一覧と詳細、カンバスとパレット(アクションのグルーピングと操作画面)
  • 情報の絞り込み  ウィザード、オンデマンド、分岐
  • サポート機能 代替表示、ヘルプ的なもの(参照系の情報はホバー時だけにするなどなるべく画面内の情報を絞ることが大切)

ナビゲーション

情報を構造化(グルーピング)し、分かりやすく表示し、少ないステップ数で全体を行き来させる。
  • 全体一覧性 グローバルナビ ハブとスポーク
  • 移動のしやすさ 明快な入口 、ピラミッド、モーダル、避難口
  • 現在位置表示 シーケンス、パンくず 、色分け

単体ページのレイアウト

グルーピングとコントラスト
  • 情報をグルーピングする(単なる情報だけにはなく、近さや強さ、コントラストにも注意。)
  • メインの情報とサブの情報のコントラストを付ける
  • 枝葉末節の情報は段階的、非表示出来るようにする

アクションについて

  • ボタンのグルーピングとコントラスト
  • 安全性に関して キャンセル、プレビュー、プログレス、アンドゥ

フォームの入力形式のチェック項目

なるべくユーザーの頭を使わせない!

  • 寛容な入力形式
  • 穴埋め
  • 入力ヒント
  • 入力プロンプト
  • オートコンプリート
  • ドロップダウン式の選択
  • 画像による選択肢
  • リストビルダー
  • よいディフォルト値
  • 同一ページ内でのエラーメッセージ

ユーザーの基本的な考え方として

  • 読まない、行動しない
  • 頭を使いたくない
  • 混乱した脳はNoという

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ユーザーの行動パターン

ソフトウェアデザインにおいて必要な要素の列挙 Contents1 安全な探求2 即座の喜び3 最小限での充足4 途中での方針変更5 回答の先送り6 少しずつの組み立て7 習慣化8 空間的な記憶9 展望 …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …