ウェブサイトデザイン：ユーザーインターフェースデザインにおける「状態」と「アクション」の表現

1. 思考を刺激する質問

少し前に、同僚と小さな要件について話し合っていたとき、「アクション」と「ステータス」を表すボタンの間に矛盾があることに遭遇しました。考えてみてください。この問題は何年も前に議論されたことなので、ここで私の考えを整理して皆さんと共有したいと思います。

具体的なケースはこうです。上図のように、検索カスタマイズ機能を「有効」にしたり「無効」にしたりする場合、このボタンは「状態」を表していますか、それとも「アクション」を表していますか？簡単に言うと、上図の1は現在無効になっていることを意味しますか、それともクリックすると操作が無効になることを意味しますか？答えは明らかに不明です。

どうすれば両者の違いを明確に表現し、ユーザーの誤解を減らすことができるでしょうか。まず、「アクション」、「状態」の定義と両者の関係から始める必要があります。

2. 行為とは何か、状態とは何か

行動とは、特定の動機と目的を持ち、特定の対象に向けられた動きを指します。

状態とは、人または物が示す形態を指します。

要約すると、アクションとは、人や物が特定の状態を変える原因となる動きであり、状態とはアクションの結果です。したがって、この 2 つは密接に関連していることが多く、相互に条件付きである場合もあります。

たとえば、「ラジオを操作する」には、ノブを回したりボタンを押したりしてラジオをオンにする必要があります。アクションが完了すると、ラジオは「オン」の状態になります。ラジオを「オフにする」というアクションの前提条件は、ラジオが「オン」状態であることです。

「それはとても複雑ですね！」多くの人がそう思うでしょう。私たちは毎日の生活の中で同じようなことに直面しているのに、なぜこのように感じることがほとんどないのでしょうか?

おそらく、実際の生活におけるいくつかの例を見れば、このことが理解できるでしょう。

3. 人生における例

1. ライトスイッチ

図1

最も一般的なスイッチの 1 つであるシングル コントロール スイッチは、非常にシンプルな設計になっています。片側を押すとオンになり、もう片側を押すとオフになります。どちら側が開いていてどちら側が閉じているかについては、あまり気にする人はあまりいません。いつも2回試すと正解なので、コストはほとんどかかりません。人々はそれについて悪い気分にはならないでしょう。

もちろん、今ではもっと良いデザインもあります。

図2

2. iPod ホールド

図3

AppleのiPodプレーヤーのキーロック機能「HOLD」。スイッチを「HOLD」側にすると左側に赤色が表示されます。そして反対側にスライドすると、色はなくなります。色が人の心理的特性に与える影響を巧みに利用して、ホールド状態を区別します。

原題: ウェブサイトデザイン: ユーザーインターフェースデザインにおける「状態」と「アクション」の表現

キーワード: ウェブサイト、ユーザー インターフェイス、デザイン、ステータス、アクション、表現、問題、トリガー、思考、少し前、ウェブマスター、ウェブサイトのプロモーション、収益化