web-dev-qa-db-ja.com

ロックされたスライダーをどのように表示しますか?

スライダー付きのアプリケーションがありますが、スライダーをロックして、ロックされていることをユーザーに明確にする必要があります。単に無効にすることはできません。ロックされているとは、他のアクションを最初に実行するまで変更できないことを意味します。そのアクションは、設定またはアカウントの種類に基づく可能性がありますが、実際には問題の一部ではありません。

現在最も可能性の高いオプションの最初のモックアップ:

enter image description here

視覚的に、スライダーがロックされていることを示す最良の方法は何ですか?既存の例やモックアップは素晴らしいでしょう。

編集1:これはPCとモバイルの両方で機能する必要があるため、ホバーやカーソルに依存することはできません。

編集2:ロックされたスライダーの概念は、スライダーを何かを実行することによってのみアクセスできるロックされた機能であるという意味でより多くなります。この場合、プレミアム会員になることによって。したがって、これは主にマーケティング上の制約です。

ロックされたスライダーを別のページに配置することはできません。他の(潜在的に)ロックされたスライダーと同時に表示する必要があるメインスライダーがあるためです。したがって、メインスライダーを複製しない限り、問題があります。

これらのスライダーがロックされている理由などを説明するテキストがありますが、この質問は、スライダーが無効ではなくロックされていることを視覚的に示す最良の方法について具体的に説明しています。

12
JohnGB

スライダーの上に半透明のボックスを配置し、対角線に「プレミアム機能」というラベルを付けます。

このデザインは、他のコントロールにも適用できます。

7
oefe

無効化されていないロックされたスライダーの概念は、実践する必要があるものではないと思います最初にスライダーを表示しないでください

その手がかりはあなたが尋ねていることです視覚的に、スライダーがロックされていることを示す最良の方法は何ですか?これはこれの最終的な目標ではありません-このロックされたスライダーが提案されている大きな問題があるため、2つの問題があります

代わりに、一歩下がって全体像を見てください。表示する必要があるものを示し、必ず追加のメッセージを追加して、特定の条件が満たされた場合にユーザーが使用できる機能が増える可能性があることを示し、その機能が何であるかをユーザーに知らせますが、ロックされたコントロール自体を表示する必要はありません。

伝えたいrealメッセージをユーザーに知らせるの別の方法を見つけて、このラウンドアバウト交差点よりも直接行うスライダーについてユーザーの頭に疑問を投げかける機能をロックする方法。実際にユーザーに考えてもらいたいことではなく、より多くの機能を取得する方法です。

14
Roger Attrill

スライダーがロックされている場合は、スライダーをまったく表示せず、ユーザーが操作できる場合にのみ要素を表示します。

代わりに、次の値で進行状況バーを表示します。

mockup

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

値は編集できないため、オブジェクトの値をユーザーに通知する必要があります。オブジェクト自体はスライダーではなく、スライダーはオブジェクトを操作するメカニズムにすぎません。オブジェクトを操作できない場合、スライダーはまったく適切ではありません。代わりに、何かを使用してオブジェクトの状態を視覚的に伝えます(進行状況バーなど)。

編集

変更できないコントロールがある場合、それをユーザーに伝える方法は無効にすることです。ユーザーは、無効にされたコントロールとは何か、それが何を意味するかを知っています。

例えば:

enter image description here

ロックをクリックすると、無効になっているコントロールが有効になり、ユーザーはそれらの値を変更できます。

これは、質問で説明したのと同じ使用例のように聞こえます。

あなたの質問は「コントロールを無効にせずに無効にしたようにするにはどうすればよいですか」のようですが、私の意見では適切な答えはありません。

無効になっていないコントロールがある場合、ユーザーはそれが有効になっているように動作することを期待します。追加したもの(アイコン、メッセージ)は、A)標準の規則に従っていないために使用した他のインターフェイスとは異なります。B)追加したアイコン/メッセージは、作成したアフォーダンスを無効にするために追加するだけです。そもそもコントロールを使って。

何らかの理由でコントロールを無効にできない場合は、コントロールをまったく使用しないでください。代わりに、スライダーコントロール以外のものを使用して、設定の値をユーザーに表示します。プログレスバーである必要はありません。これは1つの例です。

13
Charles Wesley

私の直感では、スライダーハンドルに南京錠のアイコンを表示することは悪い考えです。 これはあいまいで、スライダーがその特定の値でロックされていることを伝えようとすることもできます(スライドメカニズムがロックされているのとは対照的に)。

南京錠のアイコンを表示したい場合は、スライダーの左または右に表示してください。

あらゆる種類の無効化された入力の一般的な標準は、それらを灰色にすることです低コントラストの灰色。さらに、次のことができます。

  • ホバー/タッチ時にツールチップを表示する
  • 無効なスライダーの横/下に情報テキストを表示する
  • ロールオーバー時にカーソルを変更するマウスフォームを無効化(デスクトップのみ)
7
kontur

そのシステムのデフォルトの「スライダー」ウィジェットを使用します(または、可能な限りそれに類似したものです。Webサイトの場合は、よく知られた一般的なスライダーデザインを選択して、その動作を模倣します)。これらのデフォルトウィジェットには「ロックされた」状態(読み取り専用と呼ばれることもあり、「無効」と呼ばれることもあります)があり、その状態を明確に伝えます(スライダーがグレー表示されているなど)。

この動作はユーザーによく知られており、ほとんどのユーザーはグレー表示されたスライダーを「このスライダーを有効にするために何かを変更する必要があります」と関連付けます。このため、非標準的な方法でホイールを再発明するのではなく、この動作を使用する必要があります。カスタムスライダーがある場合でも、それを明確にグレー表示(たとえば、彩度を落とした配色と50%の不透明度に設定)は、ほとんどすべてのユーザーによく理解されます。

「無効にするだけではオプションではない」とは、「それを表示せずに移動できないようにする」ことを意味すると思いますが、言うまでもありません。 「デフォルトの移動不可/無効なスライダー動作/外観を使用することはオプションではない」という意味の場合、よく知られているUI標準から逸脱するために必要なvery理由を聞きたいです。

3
Jan Schejbal

スライドボタンのロックされたオプションを保持することは良いオプションです。それに加えて、スライダーとスライドボタンの不透明度を下げることも役立ちます。 (ロックアイコンと###%の不透明度を下げないでください)

アプリがタッチフレンドリーではなく、ユーザーがマウスを使用している場合、カーソル領域をスライダー領域にホバーするとブロックされたサインに変更できます。

1

単にハンドルではなく、垂直線または「I」バーとして表示します。線がまだ位置を示していることは明らかですが、ドラッグできません。

アイデアを強調するために、ほとんどの無効なフォーム入力のように、それをグレー表示または挿入することができます。

0
trisweb

スライダートラックを縮小して、所定の位置にロックされているように見せることもできます。これにより、より小さなサイズのスライダーハンドルを維持できます(ロックアイコンが必要ないため)。ロックスライダーが他のアクティブなスライダーの隣にある場合は、ロックダウンされたトラックが明らかです。

0
ckaufman

現在のデザインでは、南京錠のアイコンはスライダーの目的を示すことを目的としていると思います。たとえば、現在のスライダーは、何かが70%ロックダウンまたは70%安全であることを意味する場合があります。これは明らかに、スライダーの位置がロックされていることを示すという目的とは対照的です。

この問題を解決するには、南京錠をより現実的にすることをお勧めします。たとえば、ロックする物理的なスライダーを作成する場合、スライダートラックとスライダーノブにはおそらく穴があり、ピンがノブをトラックのいずれかの位置にロックすることができます。したがって、ロック解除されたバージョンは次のようになります。


ロック解除されたスライダー:

Unlocked Slider

次に、スライダーを特定の位置でロックしたい場合は、ピンを適切な穴とノブに通してスライドさせ、ピンを南京錠で所定の位置にロックします。したがって、ロックされたバージョンは次のようになります。

ロックされたスライダー:

Locked Slider


サイドノート: ロジャーは非常に良い点を示しています ですが、ロック可能なスライダーを表示するための有効な使用法はまだあると思います。たとえば、一部がロックされ、一部がロック解除されているスライダーを使用して多くのデータを入力した場合、ロックされた値をロック解除された値と同じように表示することは視覚的に一貫しています。

0
Briguy37