skillup

技術ブログ

UI

アクションとコマンド

投稿日:

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。

なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのではないでしょうか。ここではそのボタンの配置に関してのスキルです。

ボタンのグループ

関連のあるアクションを縦か横に整列した小さなボタンの集まりとして表現する。3つか4つより多いアクションがある場合には、その集まりを複数作る。

ボタンの名称は明確な動詞や動詞句を使い、同じ幅と高さにすべし。

すべてのアプリケーションのボタン

アクションパネル

メニューを用いる代わりに、リッチな構成で常時表示されるUIパネルの中に、関連するアクションを含む大きなグループを表示する。

ボタンのグループにするには多すぎるぐらいの、多数のアクションを表示する必要がある場合。

目立つ完了ボタン

ページの保存や送信や決済など処理を完了するためのボタンは大きく、わかりやすいラベルの付いたわかりやすいものにする。

プレビュー

あるアクションを実行したら何が起こるかについて、プレビュー画面または概要をユーザーに示す。

印刷画面やブログの保存、購入処理などの自分が「正しい」処理をしているかどうかの判定を必要とするケース

プログレス表示

時間を要する処理について、どれくらい進行したかをユーザーに示す。

時間を要する処理全般(大量データの更新やダウンロードなど)

キャンセル機能

時間を要する処理を副作用を起こすことなく即座にキャンセルする方法を用意する。

時間を要する処理が約2秒間以上UIに割り込んだり、バックグラウンドで実行される場合。

マルチレベルのアンドゥ

ユーザーが実行した一連のアクションを、逆の順序で簡単に戻せる方法を用意する。

Photoshopの履歴ウィンドウ画面

操作の履歴

ユーザーがアクションを実行するのに従い、何が実行されたのか、何に対していつ操作が行われたのかを視覚的に記録しておく。

ユーザーがGUIまたはコマンドラインを用いて、長く複雑な一連のアクションを実行する場合。

操作のマクロ

マクロはより小さな別々のアクションで構成された単一のアクションである。

連続するアクションやコマンド実行を要求されるような操作

-UI

執筆者:


comment

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

関連記事

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

ユーザーの行動パターン

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

no image

情報アーキテクチャの分類

今回は情報の分類に関して。 ようはソフトウェア上に情報をどのように配置するかということについてです。 参考書では情報を大きく4つに分けています。 Contents1 オブジェクトのリスト2 アクション …

no image

ソフトウェアデザインの目的

本日からのお勉強のお題は、UIの設計などについて。 参考図書:デザイニングインターフェイス Contents1 ソフトウェアとは目的達成の手段である2 ユーザー調査の基礎3 ユーザーの学習意欲・リテラ …

no image

検索ページの遷移に関して

検索ページの遷移に関してメモ。 基礎だが実際全部完全に網羅できているかというと不安な部分が多い。 Contents1 基本仕様: 以下のようなページ構成を想定2 想定しないといけない遷移状態3 よくあ …