web-dev-qa-db-ja.com

スクラバーUXの「最初から再生」のボタン

典型的なビデオ編集スタイルのタイムラインを考えてみましょう:

通常の再生ボタンがあります:右矢印。

通常の一時停止ボタンがあります。2本のバーです。

 -------------- ----------- 
> || 

しかし、「再生しますが、最初から」ボタンが必要です。

「最初から再生したい」場合、次のことを行う必要があります。再生を開始する前に、スライダーを最初に移動します。それは迷惑です。 「再生するが、最初から」ボタンがあればもっといいでしょう。

シンボルはどうあるべきですか?

ギャングを助けて!


非デザイナーからのラメのアイデア...

---(enter image description here

それは誰かを考えさせますか?あまりよくありません:左側にあるものはおそらく「ある意味で循環」を示唆しています。


複雑さ:ほとんどのエディターには、「再生するがフルスクリーン」という概念があり、さらに別の再生関連ボタンがあります。

ボーナス:キーボードがある場合、スペースバーは通常再生/一時停止を切り替えます。 「最初から再生」に適したキーボードUXはありますか?

43
Fattie

この辺りの多くの人に同意しますが、メディアプレーヤーには非常に一般的なアイコンを使用するのが最善の方法です。

しかし、私はあなたが解決しようとする問題を理解しています。両方のアイコンを混在させるのは良い解決策かもしれません。しかし、いつものように;テストは知っている!

可能なミックスのための私の試み:
enter image description here

そして、それが最初から始まることを強調するために...

行を追加します。
enter image description here

または、別の配置を使用します。
enter image description here

実際、これだけが必要です。

enter image description here

5
jazZRo

v1

再生ボタンは常に同じように保つことをお勧めします-三角形が始まり、再生が始まると一時停止します。ただし、再生が開始されると、新しいボタンは次のように表示されます。

enter image description here

簡単に認識できるプレイの三角形をカプセル化する円は、直感的な方向を指しています。つまり、反時計回りに、時間を遡っていることを意味します。ボタンは全体としてplayを意味しますが、矢印を使用して別の意味を推測します。

enter image description here


v2

以下のコメントのJoeBlowで提案されているように、半円形状を使用して最初に「ジャンプ」する2つ目のバージョンを次に示します。

enter image description here

私はここのアイデアが好きですが、すでに述べたように、アイコンを垂直方向に中央揃えすると少し変に見えるかもしれません。しかし、正しいコンテキストが与えられれば、次の例のように、それが何を表しているのかはかなり明確だと思います。

enter image description here


v3

これは、以前の取り組みから引き出したもう1つの例です...

enter image description here

...しかし、評判はよくありませんでした:

enter image description here

前のバージョンからこのバージョンへの進化は、彼の回答におけるクリソフの例の1つによく似ており、これもまた、このデザインの表現に重みを追加します。

enter image description here


v4

コントロールをタイムラインに配置する最後の例を次に示します。それは何よりも少し楽しいですが、アイコンはタイムラインとともに流れ、タイムラインを中断したり、リダイレクトしたりします。これは通常の慣習からの脱却ですが、それでも楽しい思考実験です。

enter image description here

使用例

コメントのKRyanが使用シナリオを求めたので、YouTubeで模擬した例を次に示します。

これは、ビデオの再生が始まる前のビデオインターフェイスの外観です。

enter image description here

動画の再生ボタンの再生が始まると、上記の一時停止ボタンの変化がわかります。 (再生が開始すると)追加のボタンをスライドインして、最初に戻ることができるようにすることを提案します。このような:

enter image description here

76
Chris Spittles

IEC 60417は、電気機器(TV、VCR、洗濯機、MRIなど)に付ける記号の規格であり、ISO 7000はこれらを収集します。それぞれの費用は約100ドルですが、 無料のプレビューPDF があります。 一般的な再生コントロール のようなplay▶️、pausestandard 、play/pause⏯、stop⏹、早送り⏩、rewind⏪、skip/next⏭、prev⏮、record⏺。これらすべてをカバーしています。

標準では、メディアコントロールアイコンの多くに2つのバリアントも提供しています。悲しいかな、実際に使用されているシンボルはどちらかといえば両方の混合です。標準の#5107A/Bのplaybackと同等:通常の実行。通常の速度は、ヘッドasが中空の正三角形である矢印または塗りつぶされた二等辺三角形►ですが、通常は塗りつぶされた正三角形▶が使用されます(すべて右向き)。

⇾ または ►

同様に、記号↪️#5125Recapitulateには2つのバリアントA/Bがあります。

 そして ↪︎

どちらも#5862前の例に従います。前のパートを再生します。これは、⏭#5861とはかなり異なるように見えます。次へ;次のパートを再生

↪| 対 ⏭

これらは両方とも1つのバリアントで提供されますが、異なるNormal runバリアントに基づいています。標準–わかりやすく説明します。

特に業界で多少の自由度を備えた標準が明らかに採用されている場合は特に、標準に盲目的に従うことはお勧めしません。 (ただし、標準の他の部分は、それぞれの領域で厳密に守られています。)また、私が示したように、標準の記号は常に一貫しているようには見えません。

私の実際の提案は、#5459Eject記号を使用することですwould視覚的なスキームに合わせて、四分円を時計回りに、塗りつぶすか、または中空にしました。理由:左側の垂直バーは、以前のキューマークを示します。これは、デフォルトでは現在のトラックの開始位置です。同様のIEC symbol#5471Frame by frame、generalwith two細線があります。⏸#5111BPause; Interruptionは、三角形(またはStop正方形)と同じくらい中空です。

⏏ ⤵︎ turned eject: replay, play again, play from start, recapitulate ≈ ⏸▶️ ≠ ⏸

PS: ホームキー のISO/IEC 9995-7標準記号は⇱です。

関連規格

実際にこれらの詳細を確認することはしませんでしたが、参照用に提供しました。

  • ISO/IEC 18035マルチメディアソフトウェアアプリケーションを制御するためのアイコンシンボルと機能これは非常に適切であるように思われます。セクション6では次のように指定しています。
    1. ダイナミックメディアコントロール(再生、停止、一時停止、再生、逆再生、順方向スキャン、逆方向スキャン、早送り、巻き戻し、順方向ステップ、逆方向ステップ、録音
    2. 動的メディアコントロールの属性(ループ、音量設定、ミュート、スピーカーオン
    3. ナビゲーションコントロール(Go to…開始、前の状態/訪問済みプレゼンテーションセグメント/メディアオブジェクト、アプリケーション内の次のプレゼンテーションセグメント/複合メディアオブジェクト内のメディアオブジェクト、終了/終了
    4. 追加のコントロール(メインメニュー、取り出し、ヘルプ、スナップショット、保存
  • ISO 14915-2マルチメディアユーザーインターフェイスのソフトウェアエルゴノミクス—パート2:マルチメディアナビゲーションとコントロールこの標準は、シンボルよりも概念についての詳細です。

より一般的なもの:

  • ISO/IEC 11581-1、-6ユーザーシステムインターフェイスとシンボル—アイコンシンボルと機能—パート1:アイコン—全般マルチメディアコントロールに関するものではなく、この規格は、オフィスおよび一般的なアプリケーション、例えば開く、保存、印刷、太字
  • ISO 14915-1マルチメディアユーザーインターフェイスのソフトウェアエルゴノミクス—パート1:設計原理とフレームワーク
  • ISO 9241-12、-13、-16ビジュアルディスプレイターミナル(VDT)を使用した事務作業の人間工学的要件
    • パート12:情報のプレゼンテーション
    • パート13:ユーザーガイダンス
    • パート16:直接操作ダイアログ

実際の製品の例

Apple Logic Pro X Microsoft PowerPoint for Mac (presenter view) Adobe Premiere Pro

35
Crissov

再起動/リセットボタンを使用できます。これはYouTubeの例で、左端のボタン enter image description here

34
ThaSaleni

従来、「前のボタン」が使用されています。 1クリックするとクリップの先頭に戻り、ダブルクリックすると前のクリップの先頭に戻ります。開催もジョギングすることができます。

Previous Button

13
Samuel Kelemen

これはどうでしょう。クリップの始まりを意味する00:00を示しています。これはおそらくIMOがループシンボルなどを使用せずに一般ユーザーに理解するのが最も簡単です。

enter image description here

クリソフのコメントを元に編集。

7
PK2016

ここに非常に多くの良いアイデアがあります...最も直感的なものには、再生ボタンと組み合わせたスクラバー/タイムラインの概念が組み込まれていると思います。これが私の見解です:

play button and scrubber

編集:洗練されたバージョン...

enter image description here

これは魅力的な演習です。すばらしい質問です。

6
Matt Smith

再生..「頭のある場所」から再生します。まだ編集中です。

一時停止と再生を切り替える必要があるアイコンを使用する必要があります this

しかし、「再生するが、最初から」ボタンが欲しい。

最初から再起動するには、このアイコンを試してください。 enter image description here

試してみてください。編集の概念を残して(つまり、「ウィジェットが画面から消える」、「全画面に移動する」などのように)、最初から最後まで再生します。最後に、おそらく編集コンセプトに戻ります。

何かが編集されている場合は、チェックボックスを表示するだけですCheck this to save on Play。ユーザーが選択しない場合、変更は失われます。

6
gurvinder372

これは、標準のメディア再生コントロールであるスキップバックコントロールを取り入れたものです。プログレッシブ開示アイコンを後方スキップアイコンに組み込むことができます。開催されると、追加のオプションが表示されます。

例:

  • シングルクリックすると、メインアクションが開始されます。つまり、通常のスキップから開始し、現在一時停止されている場合は一時停止されたままになります。
  • タップ/クリックして押したままにすると、スキップオプションと再生オプションを含む追加オプションのメニューが表示されます。次に、カーソルを合わせて選択したオプションを離すか、タッチスクリーンの場合はタップします。

休息状態:

enter image description here

押したとき:

enter image description here


インスピレーション

隅にあるこの小さな矢印は、Photoshop/Illustratorなどのプログラムで見ることができます。 Appleアプリの実行ボタンのXcodeにも表示されます。保持すると、テスト、プロファイル、分析もオプションとして表示されます。実行はXcodeの主なアクションなので、これが主な特徴です。他の3つのアクションはあまり一般的ではありませんが、クリックして押したままにしてもアクセスできます。

5
Dave Haigh

複数のアイテム(ビデオ、曲など)を再生する製品では、次のようなアイコンが付いたスキップボタンがよくあります。

|<>|

理論的には、これらはアイテム間の移動に使用されます。

実際には、後方にスキップすることは、「現在のアイテムの先頭に移動し、既にそこにある場合は、代わりに前のアイテムの先頭に移動する」ことを意味します。 「すでにそこにいる場合」の部分を削除して、「最初に戻る」ためにそれを使用することができます。

4
Kevin

コメントと回答の一部を読んで、このボタンを最初にスキップして再生を開始して一時停止しても再生したいことに気付いた後、大多数のユーザーが必ずしも必要としないコントロールを発明しようとしていることに気づき(想定)、またUIに要素を追加すると、混乱や混乱が生じる可能性があります。

あなたが現在一時停止していてスキップコントロールを使用しているときの私の経験から、メディアはスキップ後に自動的に再生を開始しません。

したがって、代替のアイデアは、自動再生をオン/オフにするために、UIの設定領域にオプションを提供することです。したがって、スキップ機能の後に自動再生を利用する可能性のあるユーザーはこれをオンにすることができ、従来のスキップが必要で自動再生を行わないユーザーはオフにすることができます。そして、誰もが認識できない場合一部のユーザーに混乱を引き起こす可能性がある真新しいコントロールなしで標準のメディア再生UIを使用するようになります。

例(設定):

enter image description here

4
Dave Haigh

ブレインストーミングに参加します...これは、以前のアイデアのいくつかに対するコメントのように思われます。楽譜と楽譜の始まりの一般的な考え方から借ります。

G-key with trianlge

または、多分正しいかもしれませんが、認識できません(Da capo):

capo sign with triangle

[編集[

それとも「本当の」ノートバーを使っても?

capo sign with triangle and 5 lines

私の意見では、2番目の方法は最も強力に機能し、以前のアイデアに最もよくつながります。

3
Ideogram

キーボードのUXの質問に答えるために、メディアクリップの先頭に移動するためにHOMEがよく使用されます。最初にスキップして再生するのはホームスペースです。

3
TScott

私の考えでは、このボタンについて少し異なる見方ができると思います。

基本的に、私のアイデアはChris Spittlesのバージョンのv1に非常に似ていますが、ボタンには進行状況バーが含まれている必要があります(たとえば、進行状況の約50%の場合、ボタンはv2のように見えますが、90-95に到達すると進行状況の%。V1のように見えるはずです。

もちろん、ビデオを再生するとき、プログレスバーの現在の状態を模倣するために、巻き戻し再生ボタンの「周囲」にあるプログレスバーも変化しているはずです。ユーザーが初めてボタンに気づいたとき、彼/彼女は少し混乱しているかもしれませんが、彼/彼女が後でボタンを見たとき、再生ボタンの周りの円の一部で、それは何の機能であるか非常に明確でなければなりませんボタン。さらに、ビデオの最後に「リピート」ボタンが表示されます:)

「ビジュアル」パート(すべてのクレジットはChris Spittlesに属します):

再生の50%:

50% of playback

再生の95%:

95% of playback

3
Siema Eniu

上記または次のようなものをお勧めします:

|->

「最初から始めてプレイしてください。」または:

enter image description here

編集:私はこれがあなたが望まないかもしれない方法で解釈される可能性があることを理解しています。

更新:「最初から再生」アイコンで画像検索を行ったところ、このページのサンプルの一部だけでなく、次のようなバーを使用した例も確認できました。

enter image description here

ここでは、再生ボタンで再生と一時停止を切り替えることができますが、最初のボタンは常に最初から再生されます。

これらの例は、Diagona Iconsと呼ばれるアイコンのセットからのものです。Copyright(C)2007 Kamiyamane Yusukeしかし、この例に合わせて[最初から再生]ボタンを変更しました。

3
Rick Henderson

アイコンは、クリックされたときに実行されるアクションを視覚的に表す必要があります。

この場合、アクションは次のとおりです。

  1. 戻る(最初に戻る)
  2. 再生(または再生を続行)

下のアイコンは、これら2つのアクションを順番に最も明確に表しています。

Go Back and Play

これは、「プレイ」に直接つながる「戻る」ことを示し、プレイに続くものは何もありません。接続とシーケンスを示さない他のアイコンは、別のアクションを表すものと解釈される可能性があります。 「再生してから繰り返す」。

これをユーザーでテストする必要があります。彼らは余分な再生ボタンが混乱していることに気づき、再生をクリックしてから、開始に戻るボタンをクリックすることを好むかもしれません。

2
Paul S

単純に基本に行きませんか?必要なのはテープレコーダーから存在し、70年代以降のほとんどのビデオプレーヤー(およびウォークマンなどのオーディオデバイス)でも使用されていました。停止ボタンと一時停止/静止ボタン。停止ボタンは最初にあなたを送ります、一時停止/静止ボタンはあなたをその場に保ちます。アイコンや新しいアフォーダンスなどを作成する必要はありません。これは少なくとも40年前のテクノロジーです。

enter image description hereenter image description hereenter image description here

この方法では、通常の再生ボタンだけが必要です。どちらかと言えば、「一時停止」ボタンを強調表示して位置を示します。実績のある古い学校のデザイン。

2
Devin

テキストで「最初から再生」ボタンを検討しましたか?

ここでの提案はすべて、ユーザーテストを実施して分析を収集する価値があります。適切に認識できるものがない場合は、テキストボタンが最適なソリューションである可能性があります。

2
Tin Man

[

開始ブラケット[開始、►演奏。

また、 Home ほとんどのキーボードのボタンは、期待どおりの動作をします。

2
user1306322

私は3つのシンボルを持つことを提案します。他のアクションシンボルがボタンに表示されている場合は、これらの3つのシンボルすべてを1つのボタンまたはボタン(円または(正方形)の長方形)に配置します。

これは少し詰め込みすぎている可能性があり、小さいシンボルを使用することで対処できます。ただし、これらの不利な点は、意味を明確にするという利点によって打ち消されます。これらの記号の使用は 表意文字の答え に似ていますが、楽譜ではなく、段落を読み書きできる人向けに設計されています。

1
TOOGAM

特定のブックマークをデフォルトとして設定する「ブックマーク」パネルを用意し、スクラバーコントロールに「ブックマークを再生」ボタンを用意してみませんか。曲の最初にデフォルトのブックマークがあり、他のブックマークが設定されていない場合、「ブックマークを再生」は最初から再生されます。ただし、他のブックマークがデフォルトとして設定されている場合、「ブックマークの再生」はそこから再生されます。

1
supercat

ボーナスの質問に答えるには:

Youtubeでは、を押してビデオの最初にスキップできます。まだ再生されておらず、他の時点で一時停止している場合は、スラップSpaceするだけです。 ブラウザがトラックバーにフォーカスしたり、ページをクリックしたりして、プレーヤーがそれらのキーを押していないため、スペースを押すと、代わりに「ページダウン」スクロールします。 [〜#〜] k [〜#〜]を押して、代わりに再生/一時停止します。

メディアプレーヤーで、キーボードに再生/一時停止、停止、次、前などの追加のキーがある場合、たとえば次のようになります。

Stopを押してから、Playを押すことができます。

これらの追加のキーがない場合、メディアプレーヤーは通常、Homeキーを押すことを「開始する」と理解します。

したがって、すでにプレイしている場合を除き、一時停止している場合、これは通常2キーのジョブです。

1
user1306322