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 dazu ein Eingabesteuerelement wie Texteingabe oder Textbereich.

Aufbau​

Das Muster „Datei-Upload“ enthält eine Beschriftung, Erläuterungstext, eine Schaltfläche und einen optionalen Drag & Drop-Zielbereich, dessen Verwendung nach Möglichkeit 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 dabei vorzugehen ist.
  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 macht dem Benutzer den Zweck des Bereichs für den Datei-Upload ersichtlich. Verwenden Sie eine klare und prägnante Überschrift. Beschränken Sie sich auf eine Textzeile.

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. Unterstützte Dateitypen sind .jpg, .png und .pdf.

Schaltfläche​

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

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

Reaktionsfähigkeit​

Das Muster „Datei-Upload“ enthält eine Schaltfläche mit einer Textbeschriftung, die sich genauso verhält wie andere Schaltflächen und Beschriftungen im Designsystem. Bei Verwendung des Drag & Drop-Zielbereichs wird der Zielbereich so vergrößert, dass der zugehörige Container gefüllt ist, Schaltfläche und Beschriftung werden horizontal und vertikal zentriert. Die Beschriftung wird standardmäßig angepasst, 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 Daten-Uploads bei anderen Unternehmen und in verschiedenen Designsystemen gehandhabt werden, und untersuchten die in den Abläufen verwendeten Muster. 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. Benutzer können so Vorkenntnisse einbringen. Somit verringert sich auch die kognitive Belastung.

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)