Richtlinien für Benutzeroberflächen mit AnleitungenInstructional UI guidelines

In gewissen Fällen kann es hilfreich sein, Anleitungen bereitzustellen, um Benutzern die Funktionen in Ihrer App zu demonstrieren, die möglicherweise nicht offensichtlich sind, z. B. bestimmte Touch-Interaktionen.In some circumstances it can be helpful to teach the user about functions in your app that might not be obvious to them, such as specific touch interactions. In diesen Fällen müssen Sie Anleitungen auf der Benutzeroberfläche für den Benutzer bereitstellen, damit sie diese Funktionen, die sie möglicherweise übersehen haben, nutzen können.In these cases, you need to present instructions to the user through the user interface (UI), so that they can use those features they might have missed.

Gründe für die Verwendung einer Benutzeroberfläche mit AnleitungenWhen to use instructional UI

Benutzeroberflächen mit Anleitungen sollten Sie sparsam einsetzen.Instructional UI has to be used carefully. Bei übermäßiger Nutzung werden die Anleitungen leicht ignoriert oder verärgern die Benutzer und sind somit wirkungslos.When overused, it can be easily ignored or annoy the user, causing it to be ineffective.

Benutzeroberflächen mit Anleitungen sollten dazu dienen, dass Benutzer auf wichtige und nicht offensichtliche Funktionen Ihrer App hingewiesen werden, wie z. B. Touchgesten oder Einstellungen, die für sie von Interesse sind.Instructional UI should be used to help the user discover important and non-obvious features of your app, such as touch gestures or settings they may be interested in. Sie können auch dazu verwendet werden, Benutzer über neue Funktionen und Änderungen in der App aufmerksam zu machen, die sie andernfalls möglicherweise übersehen.It can also be used to inform users about new features or changes in your app that they might have otherwise overlooked.

Benuteroberflächen mit Anleitungen sollten nur dann zum Vermitteln grundlegender Funktionen Ihrer App verwendet werden, wenn Ihre App von Touchgesten abhängig ist.Unless your app is dependent on touch gestures, instructional UI should not be used to teach users the fundamental features of your app.

Grundsätze für das Entwerfen von Benutzeroberflächen mit AnleitungenPrinciples of writing instructional UI

Gute Benutzeroberflächen mit Anleitungen sind hilfreich und lehrreich für Benutzer und optimieren die Benutzerfreundlichkeit.Good instructional UI is relevant and educational to the user, and enhances the user experience. Dieser sollte wie folgt lauten:It should be:

  • Einfach: Benutzer möchten nicht, dass Ihre Benutzeroberflächen mit komplizierten Informationen unterbrochen werden.Simple: Users don't want their experience to be interrupted with complicated information
  • Einprägsam: Benutzer möchten nicht, dass die gleichen Anleitungen bei jedem Versuch, eine Aufgabe auszuführen, angezeigt werden. Die Anleitungen müssen somit leicht einprägsam sein.Memorable: Users don't want to see the same instructions every time they attempt a task, so instructions need to be something they'll remember.
  • Unmittelbar relevant: Wenn die Anleitungen auf der Benutzeroberfläche sich nicht auf eine Aktion beziehen, die die Benutzer gerade ausführen möchten, sehen sie keinen Grund, diesen ihre Aufmerksamkeit zu schenken.Immediately relevant: If the instructional UI doesn't teach a user about something that they immediately want to do, they won't have a reason to pay attention to it.

Setzen Sie Benutzeroberflächen mit Anleitungen nicht übermäßig ein, und achten Sie darauf, die richtigen Themen auszuwählen.Avoid overusing instructional UI, and be sure to choose the right topics. Stellen Sie sicher, dass Folgendes nicht mithilfe von Benutzeroberflächen mit Anleitungen vermittelt wird:Do not teach:

  • Grundlegende Features: Wenn Benutzer Anleitungen zum Verwenden Ihrer App benötigen, sollten Sie das App-Design intuitiver gestalten.Fundamental features: If a user needs instructions to use your app, consider making the app design more intuitive.
  • Offensichtliche Features: Wenn eine Funktion für einen Benutzer ohne Anleitung offensichtlich ist, wird ihn eine Benutzeroberfläche mit Anleitungen nur behindern.Obvious features: If a user can figure out a feature on their own without instruction, then the instructional UI will just get in the way.
  • Komplexe Features: Benutzeroberflächen mit Anleitungen müssen präzise sein. Benutzer, für die komplexe Funktionen von Interesse sind, sind in der Regel bereit, selbst nach Anleitungen zu suchen.Complex features: Instructional UI needs to be concise, and users interested in complex features are usually willing to seek out instructions and don't need to be given them.

Vermeiden Sie es, die Benutzererfahrung durch Ihre Benutzeroberfläche mit Anleitungen zu beeinträchtigen.Avoid inconveniencing the user with your instructional UI. Vermeiden Sie Folgendes:Do not:

  • Überdecken wichtiger Informationen: Benutzeroberflächen mit Anleitungen sollten niemals anderen Features Ihrer App im Weg stehen.Obscure important information: Instructional UI should never get in the way of other features of your app.
  • Benutzer zum Teilnehmen zwingen: Benutzer sollten in der Lage sein, Anleitungen auf der Benutzeroberfläche zu ignorieren und mit der Verwendung der App fortzufahren.Force users to participate: Users should be able to ignore instructional UI and still progress through the app.
  • Wiederholte Anzeige von Informationen: Belästigen Sie die Benutzer nicht mit der wiederholten Anzeige von Anleitungen auf der Benutzeroberfläche, auch wenn diese bei der ersten Anzeige ignoriert wurden.Displaying repeat information: Don't harass the user with instructional UI, even if they ignore it the first time. Das Hinzufügen einer Einstellung, mit der Anleitungen erneut auf der Benutzeroberfläche angezeigt werden können, ist die bessere Lösung.Adding an setting to display instructional UI again is a better solution.

Beispiele für Benutzeroberflächen mit AnleitungenExamples of instructional UI

Unten sind einige Fälle aufgeführt, in denen eine Benutzeroberfläche mit Anleitungen für Benutzer sinnvoll ist:Here are a few instances in which instructional UI can help your users learn:

  • Unterstützen der Benutzer beim Kennenlernen der Interaktionen per Toucheingabe.Helping users discover touch interactions. Der folgende Screenshot zeigt eine Benutzeroberfläche mit Anleitungen, mit deren Hilfe ein Spieler lernt, wie er im Spiel „Cut the Rope“ Touchgesten verwenden kann.The following screen shot shows instructional UI teaching a player how to use touch gestures in the game, Cut the Rope.

    Screenshot aus dem Spiel, der die Meldung „Slide across to cut the rope“ (Führen Sie zum Trennen des Seils eine Ziehbewegung aus.) der Benutzeroberfläche mit Anweisungen zeigt.

  • Erzielen eines ausgezeichneten ersten Eindrucks.Making a great first impression. Beim ersten Starten von Movie Moments wird der Benutzer mithilfe von Anleitungen auf der Benutzeroberfläche dazu aufgefordert, mit der Erstellung von Filmen zu beginnen, ohne dass seine Benutzererfahrung beeinträchtig wird.When Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies without obstructing their experience.

    Startbildschirm für die App „Movie Moments“

  • Führen der Benutzer zum nächsten Schritt einer komplizierten Aufgabe.Guiding users to take the next step in a complicated task. In der Windows-Mail-App werden die Benutzer mithilfe eines Hinweises am unteren Rand des Posteingangs zu den Einstellungen für den Zugriff auf ältere Nachrichten geleitet.In the Windows Mail app, a hint at the bottom of the Inbox directs users to Settings to access older messages.

    Zugeschnittener Screenshot der Windows Mail-App, der eine Meldung einer Benutzeroberfläche mit Anleitungen zeigt

    Wenn der Benutzer auf die Meldung klickt, wird auf der rechten Seite des Bildschirms das Einstellungen-Flyout der App angezeigt, in dem der Benutzer die Aufgabe ausführen kann.When the user clicks the message, the app's Settings flyout appears on the right side of the screen, allowing the user to complete the task. Diese Screenshots zeigen die Mail-App vor und nach dem Klicken auf die Meldung der Benutzeroberfläche mit Anleitungen durch den Benutzer.These screen shots show the Mail app before and after a user clicks the instructional UI message.

    VorherBefore DanachAfter
    Screenshot der Windows-Mail-App Screenshot der Windows Mail-App mit einem erweiterten Einstellungen-Flyout