Zum Hauptinhalt springen

Datei-Upload

Überblick​

Das Hochladen einer Datei ist eine wesentliche Aufgabe in vielen Benutzerabläufen. Das Muster Datei-Upload bietet mit Anleitung und Schnellstart eine größere Flexibilität bei der Implementierung dieser Funktion in Produkten, als dies mit einer Komponente möglich ist.

Zu verwenden​

Wenn Benutzer Dokumente, Daten- oder Bilddateien hochladen und übermitteln müssen.

Nicht zu verwenden​

Zur Eingabe von Text. Verwenden Sie ein Eingabesteuerelement, z. B. eine Texteingabe oder einen Textbereich.

Aufbau​

Das Muster für den Datei-Upload enthält eine Beschriftung, Erläuterungstext, eine Schaltfläche und einen optionalen Drag & Drop-Zielbereich, der soweit möglich empfohlen wird.

Aufbau des Musters „Datei-Upload“

  1. Beschriftung: Informiert Benutzer über den Zweck des Upload-Bereichs.
  2. Erläuterungstext: Erläutert Benutzern, was hochzuladen ist und wie.
  3. Schaltfläche: Öffnet ein Systemfenster zum Suchen und Auswählen von Dateien.
  4. Drag&Drop-Ziel: Definiert den Bereich, in den Benutzer Dateien ziehen und ablegen können.
  5. Dateistatus-Container: Zeigt Statuselemente für den Datei-Upload an.
  6. Kopfzeile des Dateistatus-Containers: Zeigt den Fortschrittsstatus und den Erweiterungsauslöser an.
  7. Dateistatuselement: Zeigt den Namen der hochgeladenen Datei, die Dateigröße und die Fortschrittsanzeige an.

Allgemeine Richtlinien​

  • Fügen Sie das Drag&Drop-Ziel wann immer möglich ein.
  • Informieren Sie den Benutzer über den Status und das Ergebnis der einzelnen Uploads und der gesamten Upload-Sitzung.
  • Verwenden Sie geeignete Validierungsmechanismen in der Benutzeroberfläche mit Validierungsmeldungen, in denen der Benutzer Informationen sowie Hinweise zur Fehlerbehebung erhält.

Ermöglichen Sie Benutzern Folgendes:

  • Verwenden des Dateiauswahlmechanismus ihres nativen Betriebssystems
  • Abbrechen eines begonnenen Uploads

Interaktionen​

  • Der Benutzer klickt auf die Schaltfläche Datei hochladen, dann öffnet sich das Dateiauswahlfenster seines nativen Betriebssystems. Von hier aus kann er zu den Dateien navigieren, die hochgeladen werden sollen, sie auswählen und den Upload-Vorgang starten.
  • Alternativ kann der Benutzer ausgewählte Dateien in den Zielbereich ziehen, um den Upload-Vorgang zu starten.
  • Der Benutzer wird über den Status jedes Datei-Uploads informiert.
  • Bei einem Fehler kann der Benutzer anhand der Validierungsmeldung die entsprechenden Schritte ausführen und den Vorgang für die betroffenen Dateien wiederholen.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Beschriftung​

Die Beschriftung informiert den Benutzer über den Zweck des Abschnitts „Datei-Upload“. Verwenden Sie eine klare und prägnante Überschrift. Beschränken Sie sich auf eine einzige Zeile Text.

Beispiel: Schadenfalldokumente

Erläuterungstext​

Der Erläuterungstext enthält Anweisungen und wichtige Angaben, z. B. zu zulässigen Dateitypen und -größen.

Beispiel: Die maximale Dateigröße beträgt 500 MB. Es werden die Dateitypen .jpg, .png und .pdf unterstützt.

Schaltfläche​

Öffnet ein Systemfenster zum Suchen und Auswählen von Dateien. Verwenden Sie eine Beschriftung, die den Zweck der Auswahl widerspiegelt. Als Standardtext wird Datei hochladen angezeigt.

Orientieren Sie sich an den bei Schaltfläche angegebenen Schreibrichtlinien.

Reaktionsfähigkeit​

Das Muster für das Hochladen von Dateien enthält eine Schaltfläche mit einer Beschriftung, die genauso reagiert wie andere Schaltflächen und Beschriftungen im gesamten Designsystem. Wenn der Drag&Drop-Zielbereich verwendet wird, wird der Zielbereich so vergrößert, dass sein Container ausgefüllt ist, Schaltfläche und Beschriftung werden horizontal und vertikal zentriert. Die Beschriftung wird standardmäßig bei Bedarf umbrochen, sodass sie für den Benutzer vollständig sichtbar ist.

Theming​

Im Muster „Datei-Upload“ wird standardmäßig eine sekundäre Schaltfläche und eine Beschriftung verwendet. Für das Drag&Drop-Ziel werden standardmäßig neutrale Farben für den Hintergrund und ein gestrichelter Rahmen verwendet. Alle diese Elemente werden bei Änderungen von Themes, die sich auf ihren Stil auswirken, entsprechend angepasst.

Informationen zur Gestaltung von Produktoberflächen mit Design-Token finden Sie im Überblick über Design-Token.

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten, wie andere Unternehmen und Designsysteme mit Datei-Uploads umgehen, und überprüften die Muster, die sie in ihrem Ablauf verwenden. Sie suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Dies führte zu der Entscheidung, den Ablauf des Datei-Uploads so einfach wie möglich zu halten und den Dateiauswahlprozess des nativen Betriebssystems zu verwenden. So können Benutzer ihre bisherigen Erfahrungen nutzen und dadurch die kognitive Belastung reduzieren.

Komponenten​

Muster​

Drag & Drop

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)