web-dev-qa-db-ja.com

トグルボタンの「オン」と「有効」

約1年前から、サイトのいくつかのセグメントでトグルボタンを使用しています。ユーザーインターフェースの一貫性を保つために、すべてのクリック可能なボタンに常に同じ青いボタンスタイルを使用しています。

On/Off Toggle

しかし、私はこのボタンの直観性に偏執的になり、考えられる2つのトレインがあることに気づきました。

「オンが強調表示されているため、オンにする必要があります」

これがデフォルトの期待です。

「オンはクリック可能です。つまり、オンにするにはクリックする必要があります」

アクションを実行するには、通常、実行するアクションのラベルが付いた青いボタンをクリックします。


これは、2つの主要な懸念によって対処される概念につながりました。これにより、両方の状態にボタンの外観があるという事実が取り除かれ、青色のボタンが他のすべての用途と一致するようになりました。

Confusing Status Toggle

次に、「オン」と「オフ」は非技術的なユーザーの観点からは意味がある可能性が高いと私に提案されました。ただし、「オフ」というラベルを付けることはアクションを表すものではないため、「オフにする」と「オンにする」という接頭辞をそれぞれ付ける必要があると思います。つまり、これらのフレーズの否定的な意味合いに気付くまでです。


だから私の質問は、ボタンに何を入れればいいのですか?

オン/オフの切り替えで標準になっているものから逸脱することで、この思考プロセス全体を後退しますか?


更新:

選択した以下の回答に加えて、多数の反復に基づいて、以下はこのユースケースで解決したものです。

Status Toggle

  1. 他のアクションボタンとの一貫性を維持しました。
  2. 状態の色識別により、ステータスをすばやく判別できます。
  3. 「実行中」および「実行されていません」という強い(アクティブな)表現は、これがテストでの「有効」「無効」に対する現在の状態であることを人々が理解するのに役立ちます。
  4. アクションボタンを冗長かつ明示的にする必要があったため、ボタンの「Disable Cron」を横に緑色の文字で「実行中」と表示されていたとしても、無効になっていると想定する人もいました。
26
anthonyryan1

主な問題は、アクションボタンの色が1つで、ステータスを明示的に示していないことです。色は非常に強力な視覚的インジケータであり、行動を促すフレーズよりもステータスにリンクしている可能性が高くなります。

トグルボタンがあいまいです。あなたはアップルスタイルのスライダーを使うことができます

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

またはあなたの家の色のボタンを持ついくつかの他の視覚的なインジケーター。

mockup

bmmlソースをダウンロード

(モックアップでの最初の試み。わかりやすいと思います)

24
Andrew Leach

あいまいさを減らすために、次のことをお勧めします。

  1. アクションをトグルボタンのテキストとして使用して、ボタンが強調表示されていないことを確認します。

  2. マウスオーバー/フォーカスのアクションを強調表示します。

  3. 現在の状態を強調表示します。

例えば...

enter image description here

またはsliders

  1. 現在の状態を強調表示=サムコントロール

例えば...

enter image description here

4
Danny Varod

このようなオプションを使用して、オンオフボタンを単純な選択に置き換えることができます:

  • オン
  • off

誰もがどのオプションが有効になっているかを理解し、誰もがそれを使用する方法を知っています。

3
webvitaly

ボタンに両方のステータスがあると、ユーザーが混乱する可能性があります。そのため、iOSのスライダーが適切に機能します。現在のステータスは明確で、ボタンのデザインにより、他のステータスに簡単に切り替えることができます。それらを現在のUI(タッチなど)に適合させ、ユーザーがスライダーをクリックまたはドラッグしてステータスを変更できるようにすることもできます。

また、ユーザーにとってオン/オフまたは有効/無効がより理にかなっているかどうかについて調査することも価値があります。オン/オフの方が確かに簡単ですが、有効/無効は、オプションにもう少し技術的な味を追加できます。これは、技術者以外のユーザーがセミテクニカル設定を調整している場合に役立ちます。それは彼らが彼らが本当に望んでいるものを調整していることを彼らが再確認するのを助けます。

1
Andrew Shipe

例で示すメッセージとしてボタンにラベルを付ける場合、「技術者以外のユーザー」が懸念事項であるという話を聞いて驚いたのは次のとおりです。

「スロットでの自動ルーチンタスクのスケジューリングを有効にする」とメッセージの名前はChronです。

おそらく、あなたがこのメッセージを読むことを期待している人を明確にすることは価値があります。ダイアログを理解するのに十分な技術を持っている場合は、有効化/無効化を理解しています。それらが技術的ではなく、オン/オフを好む場合、おそらくダイアログメッセージは不十分です。

ボタンに関しては-

タッチスクリーン以外の設定では、スライダーを使用しないことをお勧めします。ユーザーはクリックするだけなのか、クリックしてドラッグするだけなのかわからないため、使いやすさは異なります。タッチスクリーンインターフェイスにはスライダーとの一貫した操作方法がありますが、非タッチスクリーンインターフェイスにはありません。

私の提案は、「自動化オフ」のような何かを示す単一の明示的なボタンを持ち、ボタンをクリックすると、「自動化オン」というテキストが付いたトグル状態に変化することです。トグルされた状態を視覚的にデザインする方法については、ボタンをインセットにしてください(非常に古いテープレコーダーの再生ボタンをクリックして、停止するとクリックして飛び出します)。

1つのボタンで明確な操作ができます。テキストは状態を明確に示します。ボタンの挿入図により、アクションではなく現在の状態を示していることが明確になります。

1
Tom