Allgemeine Richtlinien zur Benutzererfahrung

Einleitung

Wenn Sie gerade mit dem Entwerfen Ihrer ersten Anwendung beginnen und keine Designerfahrung haben, benötigen Sie dafür möglicherweise eine Anleitung. Auf dieser Seite finden Sie praktische Informationen, mit denen Sie Ihre Apps erstellen können.

Beispieldatei

Sie können eine vordefinierte Beispieldatei herunterladen, die Elemente enthält, die Sie in Ihrem Design verwenden können und bei der Erstellung nützlicher und benutzerfreundlicher Webanwendungen hilft. Öffnen Sie die Beispieldatei in Apps Studio und kopieren Sie die für Ihr Design benötigten Elemente.

Erstellen eines ersten Designs

Bevor Sie mit dem Erstellen Ihrer ersten Anwendung beginnen, wird empfohlen, Ihre Arbeit im Voraus zu planen. Denken Sie zuerst an Folgendes:

• Was ist der Kontext Ihrer Anwendung?
• Wer sind Ihre Benutzer? Was möchten sie erreichen? In welchem Bereich arbeiten sie?
• Was ist eine typische Situation? Was müssen sie am häufigsten tun?
• Wie messen Sie den Erfolg der Anwendung?
• Welche positiven Auswirkungen werden von Ihrer Anwendung erwartet?

Sobald Sie einen Plan erstellt haben, können Sie ihn einfach mit Ihren Kollegen durchgehen und Änderungen vornehmen. Danach sind Sie bereit für die nächsten Schritte:

1. Berücksichtigen Sie andere Fälle, indem Sie weniger häufige Szenarien in den Blick nehmen. Schreiben Sie sie auf und priorisieren Sie sie.
2. Definieren Sie die besten Medien oder das beste Format für das beste Ergebnis. In diesem Schritt können Sie bereits entscheiden, ob Sie eine Seite, eine Website oder einige Assistenten von einer Seite benötigen.
3. Studieren Sie die Stärken und Schwächen Ihrer Konkurrenten. Ermitteln Sie Lösungsansätze für ähnliche Probleme.
4. Erstellen Sie einen groben Prototyp Ihrer Anwendung. Tauschen Sie sich mit Ihren Kollegen über das Thema aus, um die beste Lösung zu finden.
5. Testen Sie den Prototypen und hohlen Sie Feedback ein. Es wird empfohlen, ihn potenziellen Benutzern zu zeigen – von Ihnen erhalten Sie besonders nutzbringendes Feedback.
6. Beginnen Sie mit dem Entwerfen der endgültigen Version Ihrer Anwendung.

Designprinzipien

Es gibt viele Regeln für das App-Design, die befolgt werden sollten, damit am Ende eine nutzbare, benutzerfreundliche Anwendung entsteht. Für eine optimale Benutzererfahrung halten Sie sich an mindestens eines der folgenden Prinzipien.

Konsistenz

• Verwenden Sie wo immer möglich dieselbe Schriftart und dasselbe Layout.
• Nutzen Sie im Sinne der Benutzererfahrung auf allen Seiten der App dasselbe Design.

Einfachheit

• Verwenden Sie nur die Elemente, die der Benutzer wirklich braucht, um seine Aufgabe zu erledigen.
• Verwenden Sie nicht mehr Elemente als erforderlich.
• Stellen Sie sicher, dass alles klar ist und keine wichtigen Informationen fehlen, nach denen der Benutzer suchen muss.

Farbe

Die Nutzung von Farben ist sehr wichtig bei der Erstellung des Designs für Ihre Anwendung. Die folgenden Richtlinien sorgen für möglichst angenehmes Arbeiten mit der App:

• Elemente desselben Typs sollten in der gesamten Anwendung dieselbe Farbe haben.
• Ampelfarben sollten, wo möglich, vermieden werden. Rot eignet sich für Fehler, Gelb oder Orange für Warnungen und Grün für Meldungen zu positivem Fortschritt.

• Verlassen Sie sich zum Vermitteln von Informationen nicht allein auf Farben. Ergänzen Sie neben dem Objekt stets Informationen im Textformat.

Tipp:

Wählen Sie Farben, die maximalen Kontrast bieten. Sorgen Sie für genügend Kontrast zwischen Inhalt und Hintergrund, sodass Text und nicht dekorative Bilder für alle mit Sehbehinderung bzw. Farbenblindheit gut lesbar sind.

Ausrichtung

Die Elementausrichtung ist ein wichtiger Schritt für ein erfolgreiches Design. Stellen Sie sicher, dass Ihre Elemente konsistent ausgerichtet sind.

Sie können Ihre Elemente einfach über die Registerkarte Stil horizontal oder vertikal ausrichten.

Beispiel

Im Folgenden finden Sie ein Beispiel für ein Element und die Prozedur zum Erstellen.

Schritt	Aktion
1	Öffnen Sie Ihre bereits vorhandene Anwendung oder starten Sie eine neue Anwendung.
2	Fügen Sie Ihrem Design einen neuen Container mit den folgenden Eigenschaften hinzu: Layout: horizontal, oben, links Größe: Breite – 100 %, Höhe – automatisch oder leer
3	Fügen Sie einen Container innerhalb des ersten Containers mit den folgenden Eigenschaften hinzu: Layout: horizontal, unten, links Größe: Breite – 40 %, Höhe – automatisch oder leer
4	Fügen Sie ein Label-Steuerelement innerhalb des Containers mit den folgenden Eigenschaften hinzu: Text: Beschriftung
5	Fügen Sie ein zweites Label innerhalb des Containers mit den folgenden Eigenschaften hinzu: Text: * Stil: Farbe – #c2320c
6	Fügen Sie einen neuen Container innerhalb des Hauptcontainers mit den folgenden Eigenschaften hinzu: Layout: vertikal, links, oben Größe: Breite – 60 %, Höhe – automatisch oder leer
7	Fügen Sie ein Textfeld innerhalb des Containers mit den folgenden Eigenschaften hinzu: Hinweistext: Hinweistext
8	Fügen Sie ein Label innerhalb desselben Containers mit den folgenden Eigenschaften hinzu: Text: Dieses Feld muss ausgefüllt werden Andere Eigenschaften: ausgeblendet Stil: Farbe – #c2320c

Hinweis: Stellen Sie sicher, dass Fehlermeldungen ausgeblendet sind und diese nur bei einem Fehler sichtbar sind.

Nachdem den obigen Schritten sehen Struktur und Element wie in den folgenden Bildern aus.