Procedimientos recomendados para desarrollar complementos de OfficeBest practices for developing Office Add-ins

Los complementos eficaces ofrecen una funcionalidad única y atractiva que amplía las aplicaciones de Office de forma visualmente interesante. Para crear un complemento excelente, proporcione una experiencia atractiva la primera vez para sus usuarios, diseñe una experiencia de interfaz de usuario de primera clase y optimice el rendimiento de los complementos. Aplique los procedimientos recomendados descritos en este artículo para crear complementos que ayuden a los usuarios a completar las tareas de forma rápida y eficaz.Effective add-ins offer unique and compelling functionality that extends Office applications in a visually appealing way. To create a great add-in, provide an engaging first-time experience for your users, design a first-class UI experience, and optimize your add-in's performance. Apply the best practices described in this article to create add-ins that help your users complete their tasks quickly and efficiently.

Nota

Si tiene previsto publicar el complemento en AppSource y que est? disponible en la experiencia de Office, aseg?rese de que se ajusta a las directivas de validaci?n de AppSource. Por ejemplo, para superar la validaci?n, el complemento debe funcionar en todas las plataformas que sean compatibles con los m?todos especificados (para m?s informaci?n, consulte la secci?n 4.12 y el host del complemento de Office y la p?gina de disponibilidad).If you plan to publish your add-in to AppSource and make it available within the Office experience, make sure that you conform to the AppSource validation policies. For example, to pass validation, your add-in must work across all platforms that support the methods that you define (for more information, see section 4.12 and the Office Add-in host and availability page).

Proporcionar un valor claroProvide clear value

  • Cree complementos que ayuden a los usuarios a completar las tareas con rapidez y eficacia. Céntrese en escenarios relevantes para las aplicaciones de Office. Por ejemplo:Create add-ins that help users complete tasks quickly and efficiently. Focus on scenarios that make sense for Office applications. For example:
  • Realizar las tareas de creación básicas de formas más rápida y fácil, y reducir las interrupciones.Make core authoring tasks faster and easier, with fewer interruptions.
  • Habilitar escenarios nuevos dentro de Office.Enable new scenarios within Office.
  • Insertar servicios complementarios en los hosts de Office.Embed complementary services within Office hosts.
  • Mejorar la experiencia de Office para aumentar la productividad.Improve the Office experience to enhance productivity.
  • Asegúrese de que el valor de los complementos quede claro a los usuarios inmediatamente con la creación de una primera experiencia atractiva.Make sure that the value of your add-in is clear to users right away by creating an engaging first run experience.
  • Cree una descripción eficaz para AppSource. Asegúrese de que las ventajas del complemento aparezcan claramente en el título y la descripción. No se base en su marca para comunicar lo que hace el complemento.Create an effective AppSource listing. Make the benefits of your add-in clear in your title and description. Don't rely on your brand to communicate what your add-in does.

Crear una atractiva experiencia de primera vistaCreate an engaging first-run experience

  • Atraiga nuevos usuarios con una primera experiencia muy útil e intuitiva. Recuerde que los usuarios aún están decidiendo si usar o abandonar un complemento después de descargarlo desde la tienda.Engage new users with a highly usable and intuitive first experience. Note that users are still deciding whether to use or abandon an add-in after they download it from the store.

  • Para que el usuario se sienta atraído por el complemento, los pasos a seguir deben ser claros. Use vídeos, hojas de instrucciones, paneles de paginación u otros recursos para seducir a los usuarios.Make the steps that the user needs to take to engage with your add-in clear. Use videos, placemats, paging panels, or other resources to entice users.

  • Refuerce la propuesta de valor del complemento en el inicio en lugar de limitarse a pedir a los usuarios que inicien sesión.Reinforce the value proposition of your add-in on launch, rather than just asking users to sign in.

  • Ofrezca interfaz de usuario de enseñanza para guiar a los usuarios y hacer que la interfaz de usuario sea personal.Provide teaching UI to guide users and make your UI personal.

    Captura de pantalla que muestra un panel de tareas de complemento con los pasos iniciales junto a un complemento sin los pasos iniciales

  • Si el complemento de contenido se enlaza a los datos en el documento del usuario, incluya una plantilla o datos de ejemplo para mostrar a los usuarios el formato de datos que hay que usar.If your content add-in binds to data in the user's document, include sample data or a template to show users the data format to use.

    Captura de pantalla que muestra un complemento de contenido con datos junto a un complemento de contenido sin datos

  • Ofrezca pruebas gratuitas. Si el complemento requiere una suscripción, haga que ciertas funcionalidades estén disponibles sin una suscripción.Offer free trials. If your add-in requires a subscription, make some functionality available without a subscription.

  • Simplifique el registro. Rellene previamente la información (correo electrónico, nombre para mostrar) y omita las comprobaciones de correo electrónico.Make signup simple. Prefill information (email, display name) and skip email verifications.

  • Evite los elementos emergentes. Si tiene que usarlos, guíe al usuario para habilitar el elemento emergente.Avoid pop ups. If you have to use them, guide the user to enable your pop up.

Para ver modelos que puede aplicar al desarrollar su experiencia de primera ejecución, vea Modelos de diseño de la experiencia del usuario para complementos de Office.For patterns that you can apply as you develop your first-run experience, see UX design patterns for Office Add-ins.

Usar comandos de complementosUse add-in commands

  • Proporcionar puntos de entrada de interfaz de usuario relevantes para el complemento mediante los comandos del complemento. Para obtener información detallada, incluidas las recomendaciones para el diseño, consulte comandos de complementos.Provide relevant UI entry points for your add-in by using add-in commands. For details, including design best practices, see add-in commands.

Aplicar principios de diseño de experiencia del usuarioApply UX design principles

  • Asegúrese de que la apariencia y las funciones del complemento se adapten a la experiencia de Office. Use Office UI Fabric.Ensure that the look and feel and functionality of your add-in complements the Office experience. Use Office UI Fabric.

  • Dé prioridad al contenido sobre el contenedor visual. Evite elementos superfluos de interfaz de usuario que no agreguen valor a la experiencia del usuario.Favor content over chrome. Avoid superfluous UI elements that don't add value to the user experience.

  • Mantenga a los usuarios bajo control. Asegúrese de que comprendan las decisiones importantes y puedan revertir fácilmente las acciones que el complemento realiza.Keep users in control. Ensure that users understand important decisions, and can easily reverse actions the add-in performs.

  • Use la personalización de marca para inspirar confianza y orientar a los usuarios. No la use para saturar o invadir con anuncios a los usuarios.Use branding to inspire trust and orient users. Do not use branding to overwhelm or advertise to users.

  • Evite el desplazamiento. Optimice para una resolución de 1366 x 768.Avoid scrolling. Optimize for 1366 x 768 resolution.

  • No incluya imágenes sin licencia.Do not include unlicensed images.

  • Use un lenguaje claro y sencillo en el complemento.Use clear and simple language in your add-in.

  • Tenga en cuenta la accesibilidad: cree un complemento con el que todos los usuarios puedan interactuar fácilmente y se adapte a las tecnologías de asistencia como los lectores de pantalla.Account for accessibility - make your add-in easy for all users to interact with, and accommodate assistive technologies such as screen readers.

  • Diseñe para todas las plataformas y métodos de entrada, como mouse, teclado y funciones táctiles. Asegúrese de que la interfaz de usuario se adapte a distintos factores de forma.Design for all platforms and input methods, including mouse/keyboard and touch. Ensure that your UI is responsive to different form factors.

Optimizar para la función táctilOptimize for touch

  • Use la propiedad Context.touchEnabled para detectar si la aplicación host en la que se ejecuta el complemento está habilitada para la función táctil.Use the Context.touchEnabled property to detect whether the host application your add-in runs on is touch enabled.

    Nota

    Esta propiedad no es compatible con Outlook.This property is not supported in Outlook.

  • Asegúrese de que todos los controles tengan el tamaño adecuado para la interacción táctil. Por ejemplo, los botones tienen destinos táctiles adecuados y los cuadros de entrada son lo suficientemente grandes para que los usuarios escriban datos.Ensure that all controls are appropriately sized for touch interaction. For example, buttons have adequate touch targets, and input boxes are large enough for users to enter input.

  • No se base en los métodos que no son de entrada táctil como mantener el puntero o hacer clic con el botón derecho.Do not rely on non-touch input methods like hover or right-click.

  • Asegúrese de que el complemento funcione en orientación vertical y horizontal. Tenga en cuenta que, en los dispositivos táctiles, el teclado en pantalla podría ocultar parte del complemento.Ensure that your add-in works in both portrait and landscape modes. Be aware that on touch devices, part of your add-in might be hidden by the soft keyboard.

  • Pruebe el complemento en un dispositivo real mediante transferir localmente.Test your add-in on a real device by using sideloading.

Nota

Si está usando Office UI Fabric para sus elementos de diseño, muchos de estos elementos se controlan.If you're using Office UI Fabric for your design elements, many of these elements are taken care of.

Optimizar y supervisar el rendimiento de los complementosOptimize and monitor add-in performance

  • Cree la percepción de respuestas rápidas de interfaz de usuario. El complemento debería cargarse en 500 milisegundos o menos.Create the perception of fast UI responses. Your add-in should load in 500 ms or less.

  • Asegúrese de que todas las interacciones del usuario respondan en menos de un segundo.Ensure that all user interactions respond in under one second.

  • Proporcione indicadores de carga para las operaciones de larga duración.Provide loading indicators for long-running operations.

  • Use una red CDN para hospedar imágenes, recursos y bibliotecas comunes. Cargue tanto como pueda desde un solo lugar.Use a CDN to host images, resources, and common libraries. Load as much as you can from one place.

  • Siga las prácticas web estándar para optimizar su página web. En producción, use solo versiones reducidas de las bibliotecas. Cargue únicamente los recursos que necesita y optimice cómo se cargan los recursos.Follow standard web practices to optimize your web page. In production, use only minified versions of libraries. Only load resources that you need, and optimize how resources are loaded.

  • Si las operaciones tardan tiempo en ejecutarse, informe a los usuarios. Tenga en cuenta los umbrales enumerados en la tabla siguiente. Para más información, vea Límites de recursos y optimización de rendimiento para los complementos de OfficeIf operations take time to execute, provide feedback to users. Note the thresholds listed in the following table. For additional information, see Resource limits and performance optimization for Office Add-ins.

    Clase de interacciónInteraction class DestinoTarget Límite superiorUpper bound Percepción humanaHuman perception
    InstantáneaInstant <=50 ms<=50 ms 100 ms100 ms No se percibe demora.No noticeable delay.
    RápidoFast 50-100 ms50-100 ms 200 ms200 ms Demora mínimamente perceptible. No es necesario informar.Minimally noticeable delay. No feedback necessary.
    TípicaTypical 100-300 ms100-300 ms 500 ms500 ms Breve, pero demasiado lenta para describirse como rápida. No es necesario informar.Quick, but too slow to be described as fast. No feedback necessary.
    Respuesta correctaResponsive 300-500 ms300-500 ms 1 segundo1 second No es rápida, pero la respuesta se percibe como correcta. No es necesario informar.Not fast, but still feels responsive. No feedback necessary.
    Continuo.Continuous >500 ms>500 ms 5 segundos5 seconds Espera media. La respuesta ya no se percibe como correcta. Podría ser necesario informar.Medium wait, no longer feels responsive. Might need feedback.
    CautivaCaptive >500 ms>500 ms 10 segundos10 seconds Larga, pero no lo suficiente para poder hacer otra cosa. Podría ser necesario informar.Long, but not long enough to do something else. Might need feedback.
    ExtendidoExtended >500 ms>500 ms >10 segundos>10 seconds Suficientemente larga para poder hacer otra cosa mientras se espera. Podría ser necesario informar.Long enough to do something else while waiting. Might need feedback.
    Ejecución prolongadaLong running > 5 segundos>5 seconds > 1 minuto>1 minute Los usuarios ciertamente harán otra cosa.Users will certainly do something else.
  • Supervise el estado del servicio y use telemetría para supervisar el éxito del usuario.Monitor your service health, and use telemetry to monitor user success.

Comercializar el complementoMarket your add-in

  • Publique su complemento en AppSource y promuévalo desde su sitio web. Cree una descripción de AppSource eficaz.Publish your add-in to AppSource and promote it from your website. Create an effective AppSource listing.

  • Use títulos concisos y descriptivos para el complemento. No incluya más de 128 caracteres.Use succinct and descriptive add-in titles. Include no more than 128 characters.

  • Transmita la propuesta de valor de su complemento en el título y la descripción. No dependa de la marca.Write short, compelling descriptions of your add-in. Answer the question "What problem does this add-in solve?".

  • Transmita la propuesta de valor de su complemento en el título y la descripción. No dependa de la marca.Convey the value proposition of your add-in in your title and description. Don't rely on your brand.

  • Cree un sitio web para ayudar a los usuarios a buscar y usar el complemento.Create a website to help users find and use your add-in.

Ver tambiénSee also