Diseñar la experiencia de usuarioDesign the user experience

se aplica a: SDK V4APPLIES TO: SDK v4

Puede crear bots con una variedad de características como texto, botones, imágenes, tarjetas enriquecidas que se muestran en carrusel o en forma de lista, y mucho más.You can create bots with a variety of features such as text, buttons, images, rich cards displayed in carousel or list format, and more. Sin embargo, cada canal, como Facebook o Slack, entre otros,However, each channel such as Facebook, Slack, etc. controla en última instancia cómo representan las características los clientes de mensajería.ultimately controls how its messaging clients render features. Aunque varios canales admitan una característica, cada canal puede representar dicha característica de una manera ligeramente diferente.Even when multiple channels support a feature, each channel may render the feature in a slightly different way. En los casos en que un mensaje contenga características que un canal no admita de forma nativa, el canal puede intentar representar los contenidos del mensaje como texto o como una imagen estática, lo que puede afectar significativamente la apariencia del mensaje en el cliente.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. En algunos casos, un canal puede no ser compatible con una característica en particular.In some cases, a channel may not support a particular feature at all. Por ejemplo, los clientes de GroupMe no pueden mostrar un indicador de escritura.For example, GroupMe clients cannot display a typing indicator.

Controles de usuario enriquecidosRich user controls

Los controles de usuario enriquecidos son controles de interfaz de usuario comunes, como botones, imágenes, carruseles y menús que el bot presenta al usuario y con los que el usuario interactúa para comunicar su elección y la intención.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. Un bot puede usar una colección de controles de interfaz de usuario para imitar una aplicación, o incluso puede ejecutarse integrado dentro de una aplicación.A bot can use a collection of UI controls to mimic an app, or can even run embedded within an app. Cuando se inserta un bot en una aplicación o sitio web, este puede representar virtualmente cualquier control de la interfaz de usuario; para ello, aprovecha las capacidades de la aplicación que lo hospeda.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.

Durante décadas, los desarrolladores de aplicaciones y sitios web han confiado en los controles de la interfaz de usuario para que los usuarios pudieran interactuar con sus aplicaciones; igualmente, estos mismos controles de interfaz de usuario también pueden ser muy efectivos en los 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. Por ejemplo, los botones son una excelente manera de presentarle al usuario una opción simple.For instance, buttons are a great way to present the user with a simple choice. Permitir que el usuario comunique "Hoteles" haciendo clic en un botón etiquetado Hoteles es más fácil y rápido que forzar al usuario a escribir "Hoteles".Allowing the user to communicate "Hotels" by clicking a button labeled Hotels is easier and quicker than forcing the user to type "Hotels." Esto es especialmente cierto en los dispositivos móviles, donde es preferible hacer clic en vez de escribir algo.This especially holds true on mobile devices, where clicking is greatly preferred over typing.

CardsCards

Las tarjetas le permiten presentar a los usuarios una variedad de mensajes visuales, de audio o seleccionables, y le ayudan a facilitar el flujo de la conversación.Cards allow you to present your users with a variety of visual, audio, and/or selectable messages and help to assist conversation flow. Si un usuario necesita seleccionar un elemento en un conjunto fijo de elementos, puede mostrar un carrusel de tarjetas, cada una de ellas con una imagen, una descripción de texto y un solo botón de selección.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. Si un usuario tiene un conjunto de opciones para un solo elemento, puede presentar una imagen individual más pequeña, y una colección de botones con varias opciones a elegir.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. ¿Pidieron más información sobre un tema?Did they ask for more information on a subject? Las tarjetas pueden proporcionar información detallada mediante la salida de audio o vídeo, o un recibo que detalle la experiencia de compra.Cards can provide in depth information using audio or video output, or a receipt that details their shopping experience. Hay una amplia gama de usos de tarjetas para ayudar a guiar la conversación entre el usuario y el bot.There is an incredibly wide range of uses for cards to help guide the conversation between your user and your bot. El tipo de tarjeta que use se determinará en función de las necesidades de la aplicación.The type of card you use will be determined by the needs of your application. Echemos un vistazo más de cerca a las tarjetas, sus acciones y algunos usos recomendados.Let's take a closer look at cards, their actions, and some recommended uses.

Las tarjetas de Microsoft Bot Service son objetos programables que contienen colecciones estandarizadas de controles de usuario enriquecidos que se reconocen en una amplia gama de canales.Microsoft Bot Service cards are programmable objects containing standardized collections of rich user controls that are recognized across a wide range of channels. En la siguiente tabla se describe la lista de tarjetas disponibles y las sugerencias de procedimientos recomendados para usar cada tipo de tarjeta.The following table describes the list of available cards and best practice suggestions of usage for each type of card.

Tipo de tarjetaCard type EjemploExample DescripciónDescription
AdaptiveCardAdaptiveCard Imagen de una tarjeta adaptable Un formato abierto de intercambio de tarjetas representado como un objeto JSON.An open card exchange format rendered as a JSON object. Se utiliza normalmente para la implementación de canales de tarjetas.Typically used for cross-channel deployment of cards. Las tarjetas se adaptan a la apariencia de cada canal de host.Cards adapt to the look and feel of each host channel.
AnimationCardAnimationCard Imagen de una tarjeta de animación Una tarjeta que puede reproducir archivos GIF animados o vídeos cortos.A card that can play animated GIFs or short videos.
AudioCardAudioCard Imagen de una tarjeta de audio Una tarjeta que se puede reproducir un archivo de audio.A card that can play an audio file.
HeroCardHeroCard Imagen de una tarjeta de imagen prominente Una tarjeta que normalmente contiene una sola imagen grande, uno o varios botones y texto.A card that contains a single large image, one or more buttons, and text. Se utiliza normalmente para resaltar visualmente una posible selección del usuario.Typically used to visually highlight a potential user selection.
ThumbnailCardThumbnailCard Imagen de una tarjeta de miniatura Una tarjeta que normalmente contiene una sola imagen de miniatura, uno o varios botones y texto.A card that contains a single thumbnail image, one or more buttons, and text. Se utiliza normalmente para resaltar visualmente los botones de una posible selección del usuario.Typically used to visually highlight the buttons for a potential user selection.
ReceiptCardReceiptCard Imagen de una tarjeta de recepción Una tarjeta que permite que un bot proporcione un recibo al usuario.A card that enables a bot to provide a receipt to the user. Normalmente, contiene la lista de elementos que se incluyen en el recibo, la información de impuestos y del total, y texto adicional.It typically contains the list of items to include on the receipt, tax and total information, and other text.
SignInCardSignInCard Imagen de una tarjeta de inicio de sesión Una tarjeta que permite al bot solicitar que un usuario inicie sesión.A card that enables a bot to request that a user sign-in. Normalmente contiene texto y uno o varios botones en los que el usuario puede hacer clic para iniciar el proceso de inicio de sesión.It typically contains text and one or more buttons that the user can click to initiate the sign-in process.
SuggestedActionSuggestedAction Imagen de una tarjeta de acciones sugeridas Presenta al usuario un conjunto de CardActions que representan la opción del usuario.Presents your user with a set of CardActions representing a user choice. Esta tarjeta desaparece una vez que se ha seleccionado alguna de las acciones sugeridas.This card disappears once any of the suggested actions is selected.
VideoCardVideoCard Imagen de una tarjeta de vídeo Una tarjeta que puede reproducir vídeos.A card that can play videos. Se utiliza normalmente para abrir una dirección URL y transmitir un vídeo disponible.Typically used to open a URL and stream an available video.
CardCarouselCardCarousel Imagen de una tarjeta de carrusel Una colección de tarjetas desplazables horizontalmente que permiten al usuario ver fácilmente una serie de posibles opciones.A horizontally scrollable collection of cards that allows your user to easily view a series of possible user choices.

Las tarjetas le permiten diseñar su bot una vez, y hacer que funcione en una variedad de canales.Cards allow you to design your bot once, and have it work across a variety of channels. Sin embargo, no todos los tipos de tarjeta son totalmente compatibles en todos los canales disponibles.However, not all card types are fully supported across all available channels.

Puede encontrar instrucciones detalladas para agregar tarjetas al bot en estas secciones: Agregar archivos adjuntos multimedia en tarjetas enriquecidas y Agregar acciones sugeridas a los mensajes.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. El ejemplo de código también se puede encontrar aquí para las tarjetas: C#/JS, tarjetas adaptables: C#/JS, datos adjuntos: C#/JS, y acciones sugeridas: 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.

Cuando diseñe su bot, no descarte automáticamente los elementos comunes de la interfaz de usuario, ya que no son "lo suficientemente inteligentes".When designing your bot, do not automatically dismiss common UI elements as not being "smart enough." Tal como se indicó anteriormente, el bot debe estar diseñado para resolver el problema del usuario de la mejor manera posible y de forma rápida y sencilla.As discussed previously, your bot should be designed to solve the user's problem in the best, quickest, and easiest manner possible. Evite la tentación de comenzar incorporando la comprensión del lenguaje natural, ya que a menudo es innecesaria y añade una complejidad injustificada.Avoid the temptation to start by incorporating natural language understanding, as it is often unnecessary and introduces unjustified complexity.

Sugerencia

Comience usando los controles mínimos de la interfaz de usuario que permiten al bot resolver el problema del usuario, y agregue otros elementos más adelante si esos controles dejan de ser suficientes.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.

Comprensión del lenguaje natural y del textoText and natural language understanding

Un bot puede aceptar las entradas de texto de los usuarios e intentar analizar esas entradas usando la coincidencia de expresiones regulares o las API de comprensión del lenguaje natural, como LUIS.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. Según el tipo de entrada que proporcione el usuario, la comprensión del lenguaje natural puede ser o no una buena solución.Depending on the type of input that the user provides, natural language understanding may or may not be a good solution.

En algunos casos, un usuario puede estar respondiendo una pregunta muy específica.In some cases, a user may be answering a very specific question. Por ejemplo, si el bot pregunta "¿Cuál es su nombre?", el usuario puede responder con texto que especifique solo el nombre ("Juan") o con una frase ("Mi nombre es Juan").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".

Hacer preguntas específicas reduce el ámbito de las posibles respuestas que el bot podría recibir, lo que disminuye la complejidad de la lógica necesaria para analizar y comprender la respuesta.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. Por ejemplo, considere la siguiente pregunta amplia y abierta: "¿Cómo se siente?".For example, consider the following broad, open-ended question: "How are you feeling?". Comprender las gran cantidad de permutaciones posibles para responder a ese tipo de pregunta es una tarea muy compleja.Understanding the many possible permutations of potential answers to such a question is a very complex task.

Por el contrario, preguntas específicas como "¿Sientes dolor? Sí/No" y "¿Dónde sientes dolor? Pecho/cabeza/brazo/pierna" probablemente generarían respuestas más específicas que un bot puede analizar y comprender sin necesidad de implementar la comprensión del lenguaje natural.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.

Sugerencia

Siempre que sea posible, haga preguntas específicas que no requieran capacidades de comprensión del lenguaje natural para analizar la respuesta.Whenever possible, ask specific questions that will not require natural language understanding capabilities to parse the response. Esto simplificará el bot e incrementará el éxito a la hora de entender al usuario.This will simplify your bot and increase the success your bot will understand the user.

En otros casos, un usuario puede estar escribiendo un comando específico.In other cases, a user may be typing a specific command. Por ejemplo, un bot de DevOps que permite a los desarrolladores administrar máquinas virtuales puede diseñarse para aceptar comandos específicos como "/ STOP VM XYZ" o "/ START VM XYZ".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". Diseñar un bot para que acepte comandos específicos como este, hace que la experiencia del usuario sea buena, ya que la sintaxis es fácil de aprender y el resultado esperado de cada comando es claro.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. Además, el bot no requerirá capacidades de comprensión del lenguaje natural, ya que la entrada del usuario se puede analizar fácilmente utilizando expresiones regulares.Additionally, the bot will not require natural language understanding capabilities, since the user's input can be easily parsed using regular expressions.

Sugerencia

Diseñar un bot para que requiera comandos específicos del usuario a menudo puede proporcionar una buena experiencia de usuario y, al mismo tiempo, eliminar la necesidad de una capacidad de comprensión del lenguaje natural.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.

En el caso de que sea un bot de una base de conocimiento o un bot de preguntas y respuestas, el usuario puede hacer preguntas generales.In the case of a knowledge base bot or questions and answers bot, a user may be asking general questions. Por ejemplo, imagine un bot que pueda responder preguntas basadas en el contenido de miles de documentos.For example, imagine a bot that can answer questions based on the contents of thousands of documents. QnA Maker y Azure Search son tecnologías diseñadas específicamente para este tipo de escenario.QnA Maker and Azure Search are both technologies which are designed specifically for this type of scenario. Para obtener más información, consulte Design knowledge bots (Diseñar bots de conocimiento).For more information, see Design knowledge bots.

Sugerencia

Si está diseñando un bot que responderá preguntas basadas en datos estructurados o no estructurados de bases de datos, páginas web o documentos, considere usar tecnologías diseñadas específicamente para abordar este escenario en lugar de intentar resolver el problema con la comprensión del lenguaje natural.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.

En otros escenarios, un usuario puede escribir solicitudes simples basadas en el lenguaje natural.In other scenarios, a user may be typing simple requests based on natural language. Por ejemplo, un usuario puede escribir "Quiero una pizza de pepperoni" o "¿Hay algún restaurante vegetariano a menos de 3 millas de mi casa y que esté abierto ahora?".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?". Las API de comprensión del lenguaje natural como LUIS.ai son ideales para escenarios como este.Natural language understanding APIs such as LUIS.ai are a great fit for scenarios like this.

Mediante las API, el bot puede extraer los componentes clave del texto del usuario para identificar la intención de este.Using the APIs, your bot can extract the key components of the user's text to identify the user's intent. Cuando implemente las capacidades de comprensión del lenguaje natural en el bot, establezca expectativas realistas para el nivel de detalle que es probable que los usuarios proporcionen en sus comentarios.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.

cómo hablan los usuarios

Sugerencia

Al construir modelos de lenguaje natural, no suponga que los usuarios proporcionarán toda la información requerida en su consulta inicial.When building natural language models, do not assume that users will provide all the required information in their initial query. Diseñe el bot para que solicite específicamente la información que necesita, guiando al usuario para que proporcione esa información; para ello, debe hacer una serie de preguntas si fuera necesario.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.

VozSpeech

Un bot puede usar entradas o salidas de voz para comunicarse con los usuarios.A bot can use speech input and/or output to communicate with users. En los casos en que un bot está diseñado para admitir dispositivos que no tienen teclado o monitor, la característica de voz es el único medio de comunicación con el usuario.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.

Elegir entre controles de usuario enriquecidos, texto y lenguaje natural y vozChoosing between rich user controls, text and natural language, and speech

Igual que las personas se comunican entre sí mediante una combinación de gestos, voz y símbolos, los bots pueden comunicarse con los usuarios mediante una combinación de controles de usuario enriquecidos, texto (a veces incluido el lenguaje natural) y voz.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. Estos métodos de comunicación se pueden usar juntos; no es necesario que elija uno u otro.These communication methods can be used together; you do not need to choose one over another.

Por ejemplo, imagine "bot de cocina" que ayude a los usuarios con las recetas, y donde el bot puede proporcionar instrucciones reproduciendo un vídeo o mostrando una serie de imágenes para explicar lo que se debe hacer.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. Algunos usuarios pueden preferir pasar las páginas de la receta o hacer preguntas al bot usando la voz mientras siguen la receta.Some users may prefer to flip pages of the recipe or ask the bot questions using speech while they are assembling a recipe. Otros pueden preferir tocar la pantalla de un dispositivo en lugar de interactuar con el bot a través de la voz.Others may prefer to touch the screen of a device instead of interacting with the bot via speech. Al diseñar el bot, incorpore los elementos de la experiencia de usuario que admiten las formas en que es probable que los usuarios prefieran interactuar con el bot, dados los casos de uso específicos que está diseñado para admitir.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.