web-dev-qa-db-ja.com

URLを入力するか、ファイルをアップロードするために提供される最も混乱の少ないUIは何ですか?

ユーザーがリンクを投稿したり、タイトルとオプションでメモを追加したドキュメントをアップロードしたりできるシンプルなフォームがあります。

URLまたはファイル(両方ではない)を許可するための最良のUIは何ですか?

30
Tom Carter

これはフォームであるため、実際には画像を選択するための2つのボタンをインラインで提供するだけで、個別のダイアログやラジオボタンのセットは提供しません。

これは、実際には(この場合)ダイアログを開いて画像を選択するためのオプションを選択する単一の画像ボタンよりも優れていると思います。コンピューターから選択する場合は、メインフォームのボタンを使用すると、ユーザーに別のダイアログボックスを表示するのではなく、ファイル参照ダイアログをすぐに開くことができます。また、ラジオ選択オプション(StackExchangeオプションなど)とは異なり、両方のオプションは明らかに前に存在し、等しい重みが与えられます。

この例は、次に示すimgurアップロードコントロールです。 「コンピュータ」および「Web」ボタンが「From Computer」および「From Web」または類似の何かを示すことによって画像ソースであることをより明確にするために、それを更新する場合があります。

enter image description here

30
GotDibbs

特に1つのオプションを強く希望する場合は、1つのオプションを他のオプションよりも目立つようにする必要があると思います。おそらく、このようなものが機能します。 enter image description here

10
Anna Rouben

私たち自身のStack Exchangeはこれを比較的適切に実装しています(回答フィールドの上にあるツールバーの画像アイコンをクリックするだけです)。

enter image description here

ただし、非アクティブなメソッドのクリックアフォーダンスを増やすことで、2つのモード間の切り替えを改善するだけです(現在のところ、クリックできないように見えません)。

このパターンの重要な点は、いくつかのタブに似ています。これらは、ファイルへのアクセス方法を明確に示しています。

8
dnbrv

この場合、リンクUIの規則を使用するのが好きです。なぜなら、それがユーザーが行っていることだからです...リンク。

mockup

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

7
Solracnapod

これは古い質問ですが、このUI/UXには2015年にいくつかの優れたソリューションがあります。

これを含むStackExchangeサイト...

enter image description here

enter image description here

Trello-アップロードオプションを選択するか、URLに貼り付けます/ポップオーバー/モーダル...

enter image description here


既存のアップロードまたはギャラリーからのGmailの選択

enter image description here


URLを貼り付けてリモートサーバーからGmailにアップロード-ファイルをダウンロードした後もプレビューが表示されます!

enter image description here


Gmailコンピューターのハードドライブから選択するか、ドラッグアンドドロップでファイルをアップロードします

enter image description here

6
JasonDavis

TinEye のアプローチは、多くのスペースを必要としますが、素晴らしいと思います。

TinEye's image uploader

5
kba

私は Pinterest がこの難問をどのように処理したかに非常に満足していましたが、少し改善できると思いました(そしてより一般的にすることができました)。

私は内部プロセス用に以下のワイヤーフレームを作成しましたが、あなたにもそれをお勧めします。 「製品」と書かれているところはどこでも、「イメージ」など、意図した要素に置き換えてください。このワイヤーフレームは、特定のフォームが製品をシステムに追加するためのものでしたが、すべてに適用されます。

これは、アイコンで表され、単純な表現で表された2つの明確なパスで始まることに注意してください。どちらのパスからでも、もう一方に切り替えることができます。また、URLパスを使用する場合、アップロードする要素の説明が必要な場合は、ユーザーが簡単に選択できるようにレイアウトされています。

enter image description here

4
Taj Moore

オプションを選択するためにクリックする必要がないのは好きですが、それはいくつかの悪の少ない方だと思います。グーグルは彼らの画像検索入力で良い仕事をします:

enter image description here

4
Old Pro

2つの可能なオプション(入力タイプの追加の選択を回避する)は次のとおりです。

  1. 未使用のコントロールを選択的に有効/無効にします
    ユーザーがURLフィールドに入力するときに、ファイルのアップロードを無効にします。逆も同様です。ここでは、どちらか一方の関係を明確に伝え、ユーザーがいつでも自分の考えを変えるための明確に見える方法を提供することが重要です。専用ボタンなどを使用して使用済みのフィールドをクリアすると、他のフィールドが再び有効になります。

  2. 入力の自動検出
    テキストフィールドとファイルアップロード要素は別個のコントロールであるため、通常のHTMLフィールドの入力を自動検出し、それがどのタイプのデータであるかを判断する簡単な方法はないと思います。
    新しい HTMLドラッグアンドドロップAPI を使用して、ファイル/ URLテキスト入力にファイルがドラッグされたことを検出する方法があるかもしれません。ファイルをデスクトップからブラウザにドラッグすることはまだ一般的なパターンではありませんが、非常に注意深く説明して実装する必要があります。

2
Mel

私が個人的に遠ざけていることの1つは、両方のオプションを同じページに等しく表示することです。

一般的に言えば、最初に、あなたの見方またはあなたの会社の観点から、ある選択肢が他の選択肢よりも望ましいかどうかを判断すると思います。ユーザーは、あるオプションを別のオプションよりも頻繁に使用することを期待していますか?あなたとユーザーの視点がいくつかの難しい方法で矛盾していない限り、主要なものを選び、それをデフォルトにします。もちろん、明確にラベル付けされた代替案を表示する必要がありますが、視覚的な階層が正しい場合、代替案はこのデフォルトのプライマリオプションの2番目に見えるはずです。

2
user567122

ラジオボタンを使用して、どちらの選択肢にも適切なインターフェイスを表示しますが、既定では、ユーザーが最もよく使用するオプションを選択します。

1
Todd Sieling