it-swarm.com.de

Was ist die am wenigsten verwirrende Benutzeroberfläche für das Angebot, entweder eine URL einzugeben oder eine Datei hochzuladen?

Ich habe ein einfaches Formular, in dem ein Benutzer einen Link hinzufügen oder ein Dokument hochladen kann, das einen Titel und optional einige Notizen hinzufügt.

Was ist die beste Benutzeroberfläche, um entweder eine URL oder eine Datei (aber nicht beide) zuzulassen?

30
Tom Carter

Da dies ein Formular ist, würde ich eigentlich nur zwei Schaltflächen inline bereitstellen, um das Bild auszuwählen, und keinen separaten Dialog oder eine Reihe von Optionsfeldern.

Ich glaube, dies ist tatsächlich besser (in diesem Fall) als eine einzelne Bildschaltfläche, die einen Dialog öffnet, in dem Sie die Option auswählen können, um dann Ihr Bild auszuwählen. Wenn Sie von Ihrem Computer aus auswählen, können Sie über die Schaltfläche im Hauptformular den Dialog zum Durchsuchen von Dateien sofort öffnen, anstatt den Benutzer zu zwingen, einen anderen Dialog zu durchlaufen. Im Gegensatz zu Radioauswahloptionen (wie der StackExchange-Option) sind beide Optionen im Voraus deutlich vorhanden und werden gleich gewichtet.

Ein Beispiel hierfür ist das unten gezeigte imgur-Upload-Steuerelement. Ich könnte es aktualisieren, um klarer zu machen, dass die Schaltflächen "Computer" und "Web" eine Bildquelle sind, indem ich "Vom Computer" und "Vom Web" oder ähnliches anzeige.

enter image description here

30
GotDibbs

Ich denke, ich würde zustimmen, dass eine Option wichtiger sein sollte als die andere, insbesondere wenn eine Option stark bevorzugt wird. Vielleicht kann so etwas funktionieren. enter image description here

10
Anna Rouben

Unser eigener Stack Exchange hat dies relativ gut implementiert (klicken Sie einfach auf das Bildsymbol in der Symbolleiste über dem Antwortfeld):

enter image description here

Ich würde jedoch nur den Wechsel zwischen den beiden Modi verbessern, indem ich die Klickleistung der inaktiven Methode erhöhe (im Moment sieht es nicht klickbar aus).

Der Schlüssel in diesen Mustern ist ein Anschein von Registerkarten: Sie geben deutlich die Methode für den Zugriff auf die Datei an.

8
dnbrv

In diesem Fall verwende ich gerne Konventionen für die Link-Benutzeroberfläche, da der Benutzer genau das tut ... Verknüpfen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

7
Solracnapod

Dies ist eine alte Frage, aber es gibt 2015 einige großartige Lösungen für diese UI/UX ....

StackExchange-Sites einschließlich dieser ...

(enter image description here

(enter image description here

Trello - Upload-Option auswählen oder URL Popover/Modal einfügen ...

(enter image description here


Google Mail Auswahl aus vorhandenem Upload oder Galerie

(enter image description here


Google Mail-Upload vom Remote-Server durch Einfügen einer URL - Die Vorschau wird angezeigt, nachdem die Datei auch für Sie heruntergeladen wurde!

(enter image description here


Google Mail Wählen Sie von der Computerfestplatte oder Drag & Drop, um die Datei hochzuladen

(enter image description here

6
JasonDavis

Ich denke, der Ansatz von TinEye ist großartig, obwohl er viel Platz einnimmt.

TinEye's image uploader

5
kba

Ich war sehr zufrieden damit, wie Pinterest mit diesem Rätsel umging, aber ich dachte, es könnte ein wenig verbessert (und allgemeiner gemacht) werden.

Ich habe das folgende Drahtmodell für einen internen Prozess erstellt und würde es auch für Sie empfehlen. Wo immer "Produkt" steht, ersetzen Sie "Bild" oder was auch immer Sie beabsichtigen. Dieses Drahtmodell war für eine bestimmte Form gedacht, um Produkte in unser System aufzunehmen, aber es gilt für alles.

Beachten Sie, dass es mit zwei klaren Pfaden beginnt, die symbolisch und mit einfachem Wortlaut dargestellt werden. Von beiden Pfaden können Sie zum anderen wechseln. Wenn Sie den URL-Pfad wählen und eine Klärung des hochzuladenden Elements erforderlich ist, kann der Benutzer eine einfache Auswahl treffen.

enter image description here

4
Taj Moore

Ich mag es nicht, klicken zu müssen, um eine Option auszuwählen, aber ich denke, es ist das geringere von mehreren Übeln. Google leistet gute Arbeit mit der Bildersuche:

enter image description here

4
Old Pro

Zwei mögliche Optionen (die eine zusätzliche Auswahl des Eingabetyps vermeiden) sind:

  1. Selektives Aktivieren/Deaktivieren des nicht verwendeten Steuerelements
    Wenn der Benutzer das URL-Feld ausfüllt, deaktivieren Sie den Datei-Upload und umgekehrt. Hier ist es wichtig, die Entweder-Oder-Beziehung klar zu kommunizieren und dem Benutzer eine klar sichtbare Möglichkeit zu geben, seine Meinung jederzeit zu ändern. Wenn Sie das verwendete Feld beispielsweise mit einer speziellen Schaltfläche löschen, sollte das andere Feld wieder aktiviert werden.

  2. Automatische Erkennung von Eingaben
    Ich glaube nicht, dass es eine einfache Möglichkeit gibt, die Eingabe in einem regulären HTML-Feld automatisch zu erkennen und zu entscheiden, um welchen Datentyp es sich handelt, da das Textfeld und das Datei-Upload-Element unterschiedliche Steuerelemente sind.
    Mit der neuen HTML-Drag & Drop-API kann dies möglicherweise umgangen werden, um zu erkennen, wann eine Datei auf eine Texteingabe für Datei/URL gezogen wird. Das Ziehen von Dateien vom Desktop in einen Browser ist jedoch noch kein gängiges Muster und muss äußerst sorgfältig erklärt und implementiert werden.

2
Mel

Eine Sache, von der ich mich persönlich fern halte, ist, beide Optionen gleichermaßen auf derselben Seite sichtbar zu machen.

Allgemein gesprochen würde ich zunächst feststellen, ob aus Ihrer oder der Sicht Ihres Unternehmens eine Option wünschenswerter ist als eine andere. Erwarten Sie, dass eine Option von Ihren Benutzern häufiger als eine andere verwendet wird? Wählen Sie die primäre aus und machen Sie sie zur Standardeinstellung, es sei denn, Ihre und die Ansichten der Benutzer stehen auf schwierige Weise in Konflikt. Natürlich möchten Sie eine klar gekennzeichnete Alternative anzeigen lassen, aber wenn die visuelle Hierarchie stimmt, sollte die Alternative dieser primären Standardoption nachgeordnet sein.

2
user567122

Ich würde Optionsfelder verwenden, um die entsprechende Benutzeroberfläche für beide Optionen anzuzeigen, aber standardmäßig die Option auswählen, von der Sie glauben, dass sie am häufigsten verwendet wird.

1
Todd Sieling