Entwerfen der BenutzeroberflächeDesign the user experience

gilt für: SDK v4APPLIES TO: SDK v4

Sie können Bots mit einer Vielzahl von Features erstellen, beispielsweise Text, Schaltflächen, Bildern, im Karussell- oder Listenformat angezeigten Rich Cards usw.You can create bots with a variety of features such as text, buttons, images, rich cards displayed in carousel or list format, and more. Letztlich bestimmt aber jeder Kanal (z. B. Facebook, Slack usw.),However, each channel such as Facebook, Slack, etc. wie Features von seinen Messaging-Clients gerendert werden.ultimately controls how its messaging clients render features. Auch wenn ein Feature von mehreren Kanälen unterstützt wird, kann jeder Kanal das Feature etwas unterschiedlich rendern.Even when multiple channels support a feature, each channel may render the feature in a slightly different way. Wenn eine Nachricht Features enthält, die ein Kanal nicht systemintern unterstützt, versucht der Kanal möglicherweise, Nachrichteninhalte als Text oder statisches Bild abwärts zu rendern, was erhebliche Auswirkungen auf die Darstellung der Nachricht auf dem Client haben kann.In cases where a message contains feature(s) that a channel does not natively support, the channel may attempt to down-render message contents as text or as a static image, which can significantly impact the message's appearance on the client. In einigen Fällen unterstützt ein Kanal ein bestimmtes Feature möglicherweise überhaupt nicht.In some cases, a channel may not support a particular feature at all. GroupMe-Clients können beispielsweise keinen Eingabeindikators anzeigen.For example, GroupMe clients cannot display a typing indicator.

Umfangreiche BenutzersteuerelementeRich user controls

Bei umfangreicheren Benutzersteuerelementen handelt es sich um geläufige UI-Steuerelemente wie Schaltflächen, Bilder, Karusselle und Menüs, die der Bot dem Benutzer anzeigt. Mit diesen Elementen kann der Benutzer eine Auswahl treffen und seine Absichten übermitteln.Rich user controls are common UI controls such as buttons, images, carousels, and menus that the bot presents to the user and the user engages with to communicate choice and intent. Ein Bot kann entweder mehrere UI-Steuerelementen verwenden, um eine App zu imitieren, oder sogar als eingebettetes Element in einer App ausgeführt werden.A bot can use a collection of UI controls to mimic an app, or can even run embedded within an app. Wenn ein Bot in eine App oder eine Website eingebettet wird, kann er beinahe jedes UI-Steuerelement darstellen, indem er die Funktionen der App nutzt, die er hostet.When a bot is embedded within an app or website, it can represent virtually any UI control by leveraging the capabilities of the app that is hosting it.

Jahrzehntelang haben Anwendungs- und Websiteentwickler UI-Steuerelemente eingesetzt, um es Benutzern zu ermöglichen, mit ihren Anwendungen zu interagieren, und diese Steuerelemente eignen sich jetzt auch ausgezeichnet für Bots.For decades, application and website developers have relied on UI controls to enable users to interact with their applications and these same UI controls can also be very effective in bots. Beispielsweise sind Schaltflächen eine ausgezeichnete Möglichkeit, den Benutzer eine einfache Auswahl treffen zu lassen.For instance, buttons are a great way to present the user with a simple choice. Es ist einfacher und schneller, wenn der Benutzer auf die Schaltfläche Hotels klickt, wenn er nach Hotels sucht, als wenn er das Wort eingeben muss.Allowing the user to communicate "Hotels" by clicking a button labeled Hotels is easier and quicker than forcing the user to type "Hotels." Dies gilt insbesondere für mobile Geräte, denn die Menschen tippen lieber nur auf das Display als Wörter einzugeben.This especially holds true on mobile devices, where clicking is greatly preferred over typing.

CardsCards

Mithilfe von Karten können Sie den Benutzern verschiedene visuelle Nachrichten, Audionachrichten und/oder auswählbare Nachrichten anzeigen, wodurch der Konversationsfluss verbessert wird.Cards allow you to present your users with a variety of visual, audio, and/or selectable messages and help to assist conversation flow. Wenn ein Benutzer eine Auswahl aus verschiedenen festgelegten Elementen treffen muss, können Sie ein Kartenkarussell anzeigen lassen, in dem jede Karte ein Bild, eine Beschreibung und eine Schaltfläche für eine einzelne Auswahl enthält.If a user needs to select from within a fixed set of items you can display a carousel of cards, each containing an image, a text description, and a single selection button. Wenn der Benutzer für ein einzelnes Element zwischen verschiedenen Möglichkeiten wählen kann, können Sie ein kleines Einzelbild und mehrere Schaltflächen mit verschiedenen Optionen verwenden.If a user has a set of choices for a single item, you can present a smaller single image and a collection of buttons with various options to choose between. Wurden weitere Informationen zu einem Thema angefordert?Did they ask for more information on a subject? Karten können mithilfe von Audio- oder Videoausgaben detaillierte Informationen liefern oder z.B. eine Rechnung anzeigen, auf der die gekauften Artikel aufgelistet werden.Cards can provide in depth information using audio or video output, or a receipt that details their shopping experience. Karten können sehr viele Verschiedenes verwenden, um die Konversation zwischen Ihrem Benutzer und Ihrem Bot zu leiten.There is an incredibly wide range of uses for cards to help guide the conversation between your user and your bot. Welche Karte Sie verwenden ist abhängig von den Anforderungen der jeweiligen Anwendung.The type of card you use will be determined by the needs of your application. Sehen wir uns karten, ihre Aktionen und einige empfohlene Verwendungsmöglichkeiten genauer an.Let's take a closer look at cards, their actions, and some recommended uses.

Microsoft Bot Service-Karten sind programmierbare Objekte, die standardisierte Sammlungen von umfangreichen Benutzersteuerelementen enthalten, die von vielen verschiedenen Kanälen erkannt werden.Microsoft Bot Service cards are programmable objects containing standardized collections of rich user controls that are recognized across a wide range of channels. In der folgenden Tabelle werden die verschiedenen verfügbaren Karten und bewährten Verwendungsmethoden für die einzelnen Kartentypen aufgeführt.The following table describes the list of available cards and best practice suggestions of usage for each type of card.

KartentypCard type BeispielExample BESCHREIBUNGDescription
AdaptiveCardAdaptiveCard AdaptiveCard-Bild Ein offenes Format für den Kartenaustausch, das als JSON-Objekt gerendert wird.An open card exchange format rendered as a JSON object. Wird in der Regel für die Bereitstellung von Karten auf mehreren Kanälen verwendet.Typically used for cross-channel deployment of cards. Karten passen sich an den jeweiligen Hostkanal an.Cards adapt to the look and feel of each host channel.
AnimationCardAnimationCard AnimationCard-Bild Eine Karte, die animierte GIFs oder kurze Videos abspielen kann.A card that can play animated GIFs or short videos.
AudioCardAudioCard AudioCard-Bild Eine Karte, die eine Audiodatei abspielen kann.A card that can play an audio file.
HeroCardHeroCard HeroCard-Bild Eine Karte, die ein einzelnes großes Bild, mindestens eine Schaltflächen sowie Text enthält.A card that contains a single large image, one or more buttons, and text. Wird in der Regel verwendet, um eine potenzielle Benutzerauswahl optisch hervorzuheben.Typically used to visually highlight a potential user selection.
ThumbnailCardThumbnailCard ThumbnailCard-Bild Eine Karte, die ein Miniaturbild, mindestens eine Schaltfläche sowie Text enthält.A card that contains a single thumbnail image, one or more buttons, and text. Wird in der Regel verwendet, um Schaltflächen für eine potenzielle Benutzerauswahl optisch hervorzuheben.Typically used to visually highlight the buttons for a potential user selection.
ReceiptCardReceiptCard ReceiptCard-Bild Eine Karte, über die ein Bot Rechnungen für Benutzer ausstellen kann.A card that enables a bot to provide a receipt to the user. Sie enthalten in der Regel die Liste der Elemente, die in der Quittung enthalten sein sollen, Steuer- und Gesamtbeträge sowie anderen Text.It typically contains the list of items to include on the receipt, tax and total information, and other text.
SignInCardSignInCard SignInCard-Bild Eine Karte, über die ein Bot den Benutzer auffordern kann, sich anzumelden.A card that enables a bot to request that a user sign-in. Sie enthalten in der Regel Text und eine oder mehrere Schaltflächen, auf die der Benutzer klicken kann, um den Anmeldevorgang zu initiieren.It typically contains text and one or more buttons that the user can click to initiate the sign-in process.
SuggestedActionSuggestedAction Bild der SuggestedAction-Karte Zeigt dem Benutzer verschiedene CardActions an, aus denen dieser auswählen kann.Presents your user with a set of CardActions representing a user choice. Diese Karte wird nicht mehr angezeigt, wenn eine der vorgeschlagenen Aktionen ausgewählt wird.This card disappears once any of the suggested actions is selected.
VideoCardVideoCard VideoCard-Bild Eine Karte, die Videos abspielen kann.A card that can play videos. Wird in der Regel verwendet, um eine URL zu öffnen und ein verfügbares Video zu streamen.Typically used to open a URL and stream an available video.
CardCarouselCardCarousel CardCarousel-Bild Eine Sammlung von Karten, durch die horizontal gescrollt werden und aus denen der Benutzer auswählen kann.A horizontally scrollable collection of cards that allows your user to easily view a series of possible user choices.

Durch Karten müssen Sie nur einmal einen Bot entwerfen, der dann auf verschiedenen Kanälen eingesetzt werden kann.Cards allow you to design your bot once, and have it work across a variety of channels. Allerdings werden nicht alle Kartentypen auf allen verfügbaren Kanälen unterstützt.However, not all card types are fully supported across all available channels.

Weitere Informationen zum Hinzufügen von Karten zu Ihrem Bot finden Sie in den Abschnitten Add rich card media attachments (Hinzufügen von Rich Card-Medienanlagen) und Add suggested actions to messages (Hinzufügen von vorgeschlagenen Aktionen zu Nachrichten).Detailed instructions for adding cards to your bot can be found within these sections Add rich card media attachments and Add suggested actions to messages. Beispielcode für Karten finden Sie auch hier: C#/JS. Für adaptive Karten: C#/JS. Für Anlagen: C#/JS. Für vorgeschlagene Aktionen: C#/JS.Sample code can also be found here for cards: C#/JS adaptive cards: C#/JS, attachments: C#/JS, and suggested actions: C#/JS.

Sie können für Ihren Bot auch die üblichen Benutzeroberflächenelemente verwenden, da auch diese viele nützliche Funktionen bieten.When designing your bot, do not automatically dismiss common UI elements as not being "smart enough." Wie zuvor bereits erwähnt sollte Ihr Bot so konzipiert sein, dass er ein Problem eines Benutzers auf die schnellste und einfachste Weise löst.As discussed previously, your bot should be designed to solve the user's problem in the best, quickest, and easiest manner possible. Sie sollten nicht als erstes Funktionen zum Verstehen natürlicher Sprache integrieren, da dies häufig unnötig ist und den Vorgang verkompliziert.Avoid the temptation to start by incorporating natural language understanding, as it is often unnecessary and introduces unjustified complexity.

Tipp

Setzen Sie stattdessen zunächst die mindestens erforderlichen UI-Steuerelemente ein, mit denen der Bot das Problem des Benutzers lösen kann, und fügen Sie andere Elemente später hinzu, wenn diese Steuerelemente nicht mehr ausreichen.Start by using the minimum UI controls that enable the bot to solve the user's problem, and add other elements later if those controls are no longer sufficient.

Text und Verstehen natürlicher SpracheText and natural language understanding

Ein Bot kann Texteingaben von Benutzern akzeptieren und versuchen, diese Eingaben mithilfe von regulären Ausdrücken für Übereinstimmungen oder APIs zum Verstehen natürlicher Sprache (z.B. LUIS) zu analysieren.A bot can accept text input from users and attempt to parse that input using regular expression matching or natural language understanding APIs, such as LUIS. Es ist vom Typ der Benutzereingabe abhängig, ob sich APIs zum Verstehen natürlicher Sprache eignen oder nicht.Depending on the type of input that the user provides, natural language understanding may or may not be a good solution.

Manchmal beantwortet ein Benutzer ggf. eine bestimmte Frage.In some cases, a user may be answering a very specific question. Wenn der Bot beispielsweise die Frage „Wie heißen Sie?“ stellt, kann der Benutzer entweder nur seinen Namen („John“) eingeben oder mit dem Satz „Ich heiße John.“ antworten.For example, if the bot asks, "What is your name?", the user may answer with text that specifies only the name, "John", or with a sentence, "My name is John".

Wenn genaue Fragen gestellt werden, schränkt das die Anzahl der möglichen Antworten an den Bot ein. Dadurch muss die Logik weniger komplex ausfallen, die nötig ist, um die Antwort zu analysieren und zu verstehen.Asking specific questions reduces the scope of potential responses that the bot might reasonably receive, which decreases the complexity of the logic necessary to parse and understand the response. Nehmen wir z.B. die folgende Frage, auf die es eine Vielzahl möglicher Antworten gibt: „Wie geht es Ihnen?“.For example, consider the following broad, open-ended question: "How are you feeling?". Es ist sehr kompliziert, die verschiedenen möglichen Antworten auf eine solche Frage verstehen zu wollen.Understanding the many possible permutations of potential answers to such a question is a very complex task.

Im Gegensatz dazu gibt es auf genauere Fragen wie „Haben Sie Schmerzen – Ja/Nein“ und „Wo haben Sie Schmerzen? – Brust/Kopf/Arm/Bein“ auch weniger Antwortmöglichkeiten, die ein Bot analysieren und verstehen muss, sodass es nicht nötig ist, Funktionen zum Verstehen natürlicher Sprache zu implementieren.In contrast, specific questions such as "Are you feeling pain? yes/no" and "Where are you feeling pain? chest/head/arm/leg" would likely prompt more specific answers that a bot can parse and understand without needing to implement natural language understanding.

Tipp

Sie sollten, wenn möglich, immer genaue Fragen stellen, bei denen es nicht notwendig ist, Funktionen zum Verstehen natürlicher Sprache zu integrieren, um die Antwort zu analysieren.Whenever possible, ask specific questions that will not require natural language understanding capabilities to parse the response. Dadurch muss ihr Bot weniger komplex sein, und es ist wahrscheinlicher, dass er den Benutzer versteht.This will simplify your bot and increase the success your bot will understand the user.

Teilweise kann es auch dazu kommen, dass ein Benutzer einen genauen Befehl eingibt.In other cases, a user may be typing a specific command. Beispielsweise kann ein DevOps-Bot, über den Entwickler virtuelle Computer verwalten, so konzipiert sein, dass er genaue Befehle wie „/STOP VM XYZ“ oder „/START VM XYZ“ akzeptiert.For example, a DevOps bot that enables developers to manage virtual machines could be designed to accept specific commands such as "/STOP VM XYZ" or "/START VM XYZ". Wenn ein Bot Befehle wie diese akzeptiert, wird so die Benutzerfreundlichkeit verbessert, da die Syntax einfach und das erwartete Ergebnis jedes Befehls klar definiert ist.Designing a bot to accept specific commands like this makes for a good user experience, as the syntax is easy to learn and the expected outcome of each command is clear. Außerdem müssen dem Bot keine Funktionen zum Verstehen natürlicher Sprache hinzugefügt werden, da die Eingabe des Benutzers ganz leicht mithilfe von regulären Ausdrücken analysiert werden kann.Additionally, the bot will not require natural language understanding capabilities, since the user's input can be easily parsed using regular expressions.

Tipp

Wenn Sie einen Bot so konzipieren, dass dieser genaue Befehle vom Benutzer verlangt, verbessert das die Benutzerfreundlichkeit, sodass keine Funktionen zum Verstehen natürlicher Sprache erforderlich sind.Designing a bot to require specific commands from the user can often provide a good user experience while also eliminating the need for natural language understanding capability.

Benutzer können Bots, die auf einer Wissensdatenbank basieren, oder Frage-Antwort-Bots allgemeine Fragen stellen.In the case of a knowledge base bot or questions and answers bot, a user may be asking general questions. Stellen Sie sich beispielsweise einen Bot vor, der auf der Grundlage der Inhalte von Tausenden von Dokumenten Fragen beantworten kann.For example, imagine a bot that can answer questions based on the contents of thousands of documents. Bei QnA Maker und Azure Search handelt es sich um Technologien, die genau für ein solches Szenario konzipiert sind.QnA Maker and Azure Search are both technologies which are designed specifically for this type of scenario. Weitere Informationen finden Sie unter Design knowledge bots (Entwerfen von Bots, die auf Wissensdatenbanken basieren).For more information, see Design knowledge bots.

Tipp

Wenn Sie einen Bot entwerfen, der Fragen auf der Grundlage von (un)strukturierten Daten aus Datenbanken, Dokumenten oder von Webseiten beantwortet, sollten Sie Technologien verwenden, die auf dieses Szenario ausgerichtet sind. Sie sollten in diesem Zusammenhang nicht versuchen, mit Funktionen zum Verstehen natürlicher Sprache zu arbeiten.If you are designing a bot that will answer questions based on structured or unstructured data from databases, web pages, or documents, consider using technologies that are designed specifically to address this scenario rather than attempting to solve the problem with natural language understanding.

In anderen Szenarios kann es sein, dass ein Benutzer einfache Anforderungen eingibt, die auf natürlicher Sprache basieren.In other scenarios, a user may be typing simple requests based on natural language. Solche Anforderungen können z.B. wie folgt lauten: „Ich will eine Pizza mit Salami.“ oder „Gibt es im Umkreis von 3 Meilen ein vegetarisches Restaurant, das noch geöffnet ist?“.For example, a user may type "I want a pepperoni pizza" or "Are there any vegetarian restaurants within 3 miles from my house open now?". APIs zum Verstehen natürlicher Sprache (z.B. LUIS.ai) eignen sich gut in solchen Szenarios.Natural language understanding APIs such as LUIS.ai are a great fit for scenarios like this.

Wenn Sie diese APIs verwenden, kann Ihr Bot die wichtigsten Komponenten des vom Benutzer eingegeben Texts extrahieren und so ermitteln, welche Absichten dieser hat.Using the APIs, your bot can extract the key components of the user's text to identify the user's intent. Wenn Sie Funktionen zum Verstehen natürlicher Sprache in Ihren Bot implementieren, sollten Sie im Hinblick auf die in der Benutzereingabe enthaltenen Details realistisch sein.When implementing natural language understanding capabilities in your bot, set realistic expectations for the level of detail that users are likely to provide in their input.

Beispieleingaben

Tipp

Wenn Sie Sprachmodelle erstellen, sollten Sie nicht davon ausgehen, dass Benutzer bereits in ihrer ersten Abfrage alle erforderlichen Informationen angeben.When building natural language models, do not assume that users will provide all the required information in their initial query. Konzipieren Sie Ihren Bot so, dass dieser genau die Informationen anfordert, die er benötigt, indem er dem Benutzer genaue Fragen stellt, ggf. sogar mehrere.Design your bot to specifically request the information it requires, guiding the user to provide that information by asking a series of questions, if necessary.

SpracheingabeSpeech

Ein Bot kann Spracheingaben bzw. -ausgaben verwenden, um mit den Benutzern zu kommunizieren.A bot can use speech input and/or output to communicate with users. Wenn ein Bot darauf ausgerichtet ist, Geräte ohne Tastatur oder Bildschirm zu unterstützen, kann nur mithilfe von Spracheingaben bzw- ausgaben mit dem Benutzer kommuniziert werden.In cases where a bot is designed to support devices that have no keyboard or monitor, speech is the only means of communicating with the user.

Wählen zwischen umfangreichen Benutzersteuerelementen, Text und natürlicher Sprache und SpracheingabenChoosing between rich user controls, text and natural language, and speech

Genauso wie Menschen bei der Kommunikation verschiedene Gesten, Stimmhöhen und Symbole verwenden, kann ein Bot mithilfe von umfangreichen Benutzersteuerelementen, Text (teilweise einschließlich natürlicher Sprache) und Spracheingaben mit Benutzern kommunizieren.Just like people communicate with each other using a combination of gestures, voice, and symbols, bots can communicate with users using a combination of rich user controls, text (sometimes including natural language), and speech. Diese Kommunikationsmethoden können alle zusammen verwendet werden. Sie müssen sich nicht für eine entscheiden.These communication methods can be used together; you do not need to choose one over another.

Angenommen, es handelt sich um einen „Kochbot“, der Benutzer beim Kochen unterstützt, indem er möglicherweise Anweisungen erteilt, indem er ein Video abspielt oder verschiedene Bilder anzeigt, um zu erklären, wie der Benutzer vorgehen muss.For example, imagine a "cooking bot" that helps users with recipes, where the bot may provide instructions by playing a video or displaying a series of pictures to explain what needs to be done. Manche Benutzer bevorzugen es, mithilfe von Spracheingaben zur nächsten Seite des Rezepts zu blättern oder dem Bot Fragen zu stellen.Some users may prefer to flip pages of the recipe or ask the bot questions using speech while they are assembling a recipe. Andere berühren lieber den Gerätebildschirm, anstatt mithilfe von Spracheingaben mit dem Bot zu kommunizieren.Others may prefer to touch the screen of a device instead of interacting with the bot via speech. Integrieren Sie beim Entwerfen Ihres Bots die UX-Elemente, die die Möglichkeiten unterstützen, wie Benutzer wahrscheinlich mit Ihrem Bot interagieren möchten, angesichts der spezifischen Anwendungsfälle, die er unterstützen soll.When designing your bot, incorporate the UX elements that support the ways in which users will likely prefer to interact with your bot, given the specific use cases that it is intended to support.