Zum Hauptinhalt springen

Kartenansicht

Überblick​

Die Kartenansicht ist ein Mechanismus zum Anzeigen und Bearbeiten kleinerer Datensätze. Jede Karte entspricht einem Objekt mit zusätzlichen allgemeinen Details.

Zu verwenden​

  • Wenn sich der Benutzer beim Ausführen einer Aufgabe auf ein Objekt konzentrieren soll.
  • Wenn die Reihenfolge, in der Daten präsentiert werden, nicht von Bedeutung ist und der Benutzer keine Kontrolle über die Sortierung der Daten benötigt.
  • Wenn in der Benutzeroberfläche weniger als 10 Karten angezeigt werden und/oder zu viel Leerraum in der Benutzeroberfläche den Benutzer ablenken könnte.
  • Wenn die für den Benutzer dargestellten Daten sehr einfach und leicht zu erfassen sind.
  • Wenn der Anwendungsfall keinen Vergleich von Daten erfordert.

Nicht zu verwenden​

  • Wenn Benutzer Daten zwischen Karten vergleichen müssen. Dies beeinträchtigt den Benutzer durch erhöhte kognitive Belastung und gleichzeitige Beschränkung der Anzahl der sichtbaren Datensätze. Verwenden Sie stattdessen die Tabellenansicht.
  • Wenn für Benutzer komplexe Daten angezeigt werden müssen. Verwenden Sie stattdessen die Tabellenansicht.

Formatierung​

Aufbau​

Aufbau einer Kartenansicht

  1. Titel (obligatorisch): Kurze Angabe, worum es in der Kartenansicht geht, mit optionalem Zähler, der die Anzahl der Karten in der Ansicht angibt.
  2. Untertitel (optional): Der Untertitel enthält bei Bedarf zusätzliche kontextbezogene Informationen.
  3. Steuerelemente der Kartenansicht (optional): Eine Reihe von Steuerelementen, mit denen die Anzeige von Daten bearbeitet werden kann. Verwechseln Sie die Steuerelemente der Kartenansicht nicht mit den Aktionen der Kartenansicht.
    1. Suchfilter (optional): Verwenden Sie diese Option, um den Datensatz durch die Suche nach Schlüsselwörtern zu filtern.

    2. Filter (optional): Umfasst eine Reihe erweiterter Mechanismen, um den Datensatz nach verschiedenen Parametern zu filtern.

    3. Ansichtsauswahl (optional): Verwenden Sie diese Option, um die Visualisierung der Daten zwischen der Tabellen- und der Kartenansicht zu ändern.

  4. Aktionen der Kartenansicht (optional): Ermöglicht die Durchführung von handlungsrelevanten Aktionen für den Datensatz, entweder für den gesamten Satz oder für ausgewählte Datensätze in der Kartenansicht.
  5. Kartenansicht (obligatorisch): Zeigt Karten in einer in der Anwendung definierten Reihenfolge an.
  6. Einzelne Karte (obligatorisch): Zeigt Daten im definierten Format an.

Layout, Größenanpassung und dynamischer Umbruch​

Kartenansicht mit hervorgehobener einzelner Karte

Layout, Größenanpassung und dynamischer Umbruch der Kartenansicht

  • Die Karten werden so konfiguriert und angeordnet, dass der Platz bestmöglich genutzt wird. Das Layout kann an die Anzahl der verfügbaren Karten angepasst werden.
  • Bei der Bearbeitung kleinerer Datensätze sollten die Optionen zur Größenanpassung verwendet werden, um übermäßigen Leerraum zu vermeiden.
  • Es ist auf einen angemessenen Abstand zwischen den Karten zu achten, um das leichte Erfassen für Benutzer zu gewährleisten.
  • Beim Hinzufügen oder Löschen von Karten im Layout lassen sich die Karten entsprechend den zugrunde liegenden Rastereinstellungen neu positionieren.
  • Nach der Größenänderung bleibt die Breite einer Spalte so lange erhalten, bis der Benutzer sie ändert oder auf den Standardwert zurücksetzt.

Ausrichtung​

Ausrichtung der Kartenansicht

  • Die Ausrichtung von Karten kann je nach Anwendungsfall konfiguriert werden.
  • Bei längerem Text und mehr als drei Feldern sollte anstelle eines horizontalen ein vertikales Kartenlayout verwendet werden.
  • Vertikale Layouts eignen sich besser für Karten mit Bildern oder Symbolen.

Details einer Karte​

Details einer Karte der Kartenansicht

  1. Symbol/Bilder (optional): Visuelle Angabe der Kartendetails oder des Kartentyps
  2. Titel (obligatorisch): Kurze Angabe zum Inhalt der Karte
  3. Infobeschriftung (optional): Gibt gegebenenfalls den Status eines Objekts an.
  4. Kartendetails (obligatorisch): Zeigt die mit der Karte verknüpften Daten an.
  5. Kartenaktionen (optional): Bietet die Möglichkeit, Aktionen für das Kartenobjekt durchzuführen.
    • Primäre Aktion (optional): Verwenden Sie eine primäre Aktionsschaltfläche für die Hauptaktion für das Objekt. Eine Karte kann nur eine primäre Aktion enthalten.
    • Sekundäre Aktion (optional): Zu verwenden für unterstützende Aktionen.
    • Tertiäre Aktion (optional): Zu verwenden für destruktive oder weniger wichtige Aktionen.
    • Überlaufmenü (optional): Zu verwenden, um weitere mit den Objektdaten verbundene Aktionen anzuzeigen.

Alle Karten in der Kartenansicht müssen dieselben Datentypen enthalten. Fügen Sie in einer Karte keine Details ein, die die anderen Karten nicht haben.

Allen Details muss jeweils eine Beschriftung zugeordnet werden, es sei denn, sie sind für Benutzer sofort ersichtlich.

Verwenden Sie Symbole nur, um zusätzlichen Kontext für Daten anzuzeigen. Verwenden Sie nur leicht erkennbare und geläufige Symbole, wenn kein begleitender Text vorhanden ist.

Inhalte einer Karte

Der gesamte Inhalt einer Zelle muss sichtbar sein. Längerer Text wird in die nächste Zeile umbrochen, mit der Möglichkeit, weitere Informationen in einer Detailansicht (Drawer, neue Seite, modales Fenster) anzuzeigen. Kürzen Sie Text auf Karten nicht.

Funktionen der Kartenansicht​

Zustand „Leer“ und Zustand „Wird geladen“​

  • Wenn keine Daten angezeigt werden können oder wenn Bedingungen die Anzeige von Daten verhindern, informieren Sie die Benutzer unter Verwendung des Zustands „Leer“. In der Meldung müssen das Problem und die Mittel zur Behebung des Problems klar angegeben werden.
  • Wenn Daten abgerufen werden, wird der Benutzer mit dem Zustand „Wird geladen“ informiert. Die Nachricht muss eindeutig mitteilen, dass die Daten geladen werden, und erklären, warum der Benutzer warten muss.
  • Über Aktionsschaltflächen kann bei Bedarf ein Neuladen der Seite ausgelöst werden.

Zustand „Leer“ der Kartenansicht Beispiel für den Zustand „Leer“ einer Kartenansicht

Zustand „Wird geladen“ der Kartenansicht Beispiel für den Zustand „Wird geladen“ einer Kartenansicht

Reaktionsfähigkeit​

Die Kartenansicht ist auf Tablets und auf Mobiltelefonen vollständig responsiv. Zellen können entfernt, neu geordnet oder so kombiniert werden, wie es für Benutzer sinnvoll ist.

Reaktionsfähigkeit der Kartenansicht auf Desktopgeräten, Tablets und Mobiltelefonen Von links nach rechts: Kartenansicht auf Desktopgeräten, Tablets und Mobiltelefonen

Filter der Kartenansicht​

Filtern bietet die Möglichkeit, bestimmte Datensätze zu bearbeiten. Die Filterung kann über den Filterbereich erfolgen, wobei verschiedene Datensätze als Filter dienen. Es gibt auch einen Suchfilter, mit dem Benutzer den Datensatz durch Eingabe eines Schlüsselworts eingrenzen können.

Filterung in Kartenansicht

Auswahl von Karten​

In der Kartenansicht kann je nach Anwendungsfall die Einzel- oder Mehrfachauswahl von Karten aktiviert werden.

Auswahl von Karten

Ressourcen​

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

Jutro-Musterbibliothek (19.6 MB)