web-dev-qa-db-ja.com

ボタンとラベルを区別する方法

この質問の言い回しに苦労しました。基本的に、現在のデザインには「スクラブ」スライダーがあり、スライダーを動かすとビデオのプレビューに影響します。

別のコンポーネントを追加しました。スライダーの両側にそれぞれPLUS(+)およびMINUS(-)ボタンがあります。それらをクリックすると、ビデオが一度に1フレームずつ進みます(それぞれ)。

私はいくつかのテストを行いましたが、ユーザーはそれをボタンではなくインジケーターラベルであると考えています。

この問題を解決するための推奨事項は何ですか? UIを損なうことなく

現在のデザイン

enter image description here

以前のデザイン

enter image description here

4
Roi Mulia

ボタンをよりわかりやすく/わかりやすくすることで、これを解決する必要があります。これは2つの方法で実現できると思います。

  1. ボタンのフォーム。 1つのフレームを「移動」していることを明確にするアイコンを探してみてください。他の回答で提案されたアイコンは私には正しいようです。ボタンを 発生ボタン にするテストもできます。他の業界編集ソフトウェアをチェックして、同じ問題がどのように解決されるかを確認してください。

  2. ボタンの位置。スライダーの側面にあるため、ボタンがボタンとして表示されない場合があります。それはボタンが何をするかというロジックに沿っていますが、ラベルであるかのような印象を与えています。ボタンは同じアクションではないため、スライダーから分離できます。それらを別の場所(スライダーの下など)に表示すると、それが異なるアクションであることがより明確になり、それらに注意を引くことになります(これらはアプリの主要機能の1つでもあると言います)。 (ただし、ボタンを動かしたり、スライダーの位置に合わせたりしないでください)

また重要:

  1. 追加情報。ユーザーは、ボタンを使用する前に、ボタンが何をするかを知る必要があります。この場合、表示される次のフレームと前のフレームの時間を表示すると、ユーザーがその目的を理解するのに役立ちます(フレームの時間の代わりに「次のフレーム」を試すこともできますが、時間は大丈夫だと思います)。また、アイコン自体が次のビデオに進むと理解できるので、混乱を減らします。

提案内容を適用した提案書として画像を添付しております。

[〜#〜] edit [〜#〜]:画像を更新して、スライダーの動作をより詳しく説明しました。

ui

4
Alvaro

そのためには、「<|」が表示されることを期待しますこれらのボタンの「|>」アイコン(つまり、「⏸」の一時停止と「⏵」の再生の混合)。

再生デバイスにあるような標準のアイコンを使用すると、ユーザーの満足度が高まると思います。

編集:私の意味を説明するランダムなスクリーンショットを見つけました:

Screenshot of video editor showing previous and next buttons

3
KlaymenDK

プラス記号とマイナス記号は、通常、ショッピングカート内のアイテム数など、画像のズームレベルの量または程度を増減します。あなたの場合、それらはスライダーの進行を増加させると言うことができますが、それはそれをかなり伸ばすでしょう。 2つのボタンの最も直接的な意味は、スライダーハンドルを左右に動かすことです。したがって、プラスとマイナスを左と右の山形(<>)に置き換えると、意味と機能の両方(つまり、インジケーターではなくボタン)を伝えるのにはるかに効果的です。

UIに関しては、アフォーダンスを向上させる方法はいくつかありますが、それらはすべてUIへの何らかの妥協を意味します。例:それらをボックス/サークル内に配置します。スライダーハンドルと同じ紫の色を与えます。ドロップシャドウを使用して少し持ち上げます。しかし、標識を変えるだけでも、長い道のりがかかると思います。

1

これは私には問題ないように見えますが、ユーザーの意見を参照してください。

nextpreviousframe

1
Keno