Bewährte Methoden für die Entwicklung von Office-Add-InsBest practices for developing Office Add-ins

Effektive Add-Ins bieten eine einzigartige und überzeugende Funktionalität, die Office-Anwendungen auf visuell ansprechende Weise erweitert. Stellen Sie eine ansprechende Benutzeroberfläche für die Benutzer zum Erstellen eines großartigen Add-Ins bereit, entwerfen Sie eine erstklassigen Benutzeroberfläche und optimieren Sie die Add-In-Leistung. Wenden Sie die in diesem Artikel beschriebenen bewährten Methoden zum Erstellen von Add-Ins an, mit denen die Benutzer ihre Aufgaben schnell und effizient durchführen können.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.

Hinweis

Wenn Sie Ihr Add-In in AppSource veröffentlichen und innerhalb der Office-Benutzererfahrung verfügbar machen möchten, vergewissern Sie sich beim Erstellen des Add-Ins, dass es den AppSource-Validierungsrichtlinien entspricht. Damit das Add-In die Validierung besteht, muss es beispielsweise auf allen Plattformen funktionieren, die die Methoden unterstützen, die Sie definieren (weitere Informationen finden Sie im Abschnitt 4.12 und auf der Host- und Verfügbarkeitsseite von Office-Add-Ins).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).

Angeben eines klaren NutzensProvide clear value

  • Erstellen Sie Add-Ins, mit denen Benutzer Aufgaben schnell und effizient erledigen können. Konzentrieren Sie sich auf Szenarios, die für Office-Anwendungen sinnvoll sind. Beispiel:Create add-ins that help users complete tasks quickly and efficiently. Focus on scenarios that make sense for Office applications. For example:
  • Erledigen Sie wichtige Aufhaben schneller und einfacher und mit weniger Unterbrechungen.Make core authoring tasks faster and easier, with fewer interruptions.
  • Ermöglichen Sie neue Szenarios in Office.Enable new scenarios within Office.
  • Betten Sie ergänzende Dienste in Office-Hosts ein.Embed complementary services within Office hosts.
  • Verbessern Sie die Office-Benutzeroberfläche, um die Produktivität zu erhöhen.Improve the Office experience to enhance productivity.
  • Stellen Sie sicher, dass der Nutzen des Add-Ins für Benutzer sofort ersichtlich ist, indem Sie ihnen ein ansprechendes Erlebnis bei der ersten Ausführung bieten.Make sure that the value of your add-in is clear to users right away by creating an engaging first run experience.
  • Erstellen Sie einen effektiven Office Store-Eintrag. Stellen Sie die Vorteile des Add-Ins im Titel und in der Beschreibung klar dar. Verlassen Sie sich nicht auf Ihre Marke, um die Funktionsweise Ihres Add-Ins zu kommunizieren.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.

Erstellen Sie einer ansprechenden BenutzeroberflächeCreate an engaging first-run experience

  • Locken Sie neue Benutzer mit einer einfach zu verwendenden und intuitiven Benutzeroberfläche. Beachten Sie, dass Benutzer noch beim Herunterladen des Add-Ins entscheiden, ob Sie es überhaupt verwenden sollen.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.

  • Kommunizieren Sie deutlich die Schritte, die die Benutzer ausführen müssen, um Ihr Add-In zu verwenden. Verwenden Sie Videos, Unterlagen, Seitenbereiche und andere Ressourcen, um Benutzer anzulocken.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.

  • Verstärken Sie das Werteversprechen des Add-Ins beim Start anstatt die Benutzer lediglich zum Anmelden aufzufordern.Reinforce the value proposition of your add-in on launch, rather than just asking users to sign in.

  • Stellen Sie für Benutzer eine anpassbare Benutzeroberfläche bereit.Provide teaching UI to guide users and make your UI personal.

    Ein Screenshot, der einen Add-In-Aufgabenbereich mit ersten Schritten neben einem Add-In ohne erste Schritte zeigt

  • Wenn das Inhalts-Add-in an Daten im Dokument des Benutzers gebunden ist, fügen Sie Beispieldaten oder eine Vorlage ein, damit Benutzer das zu verwendende Datenformat sehen können.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.

    Ein Screenshot, der ein Inhalts-Add-In mit Daten neben einem Inhalts-Add-In ohne Daten zeigt.

  • Bieten Sie kostenlose Testversionen an. Wenn für Ihr Add-In ein Abonnement erforderlich ist, stellen Sie einige Funktionen ohne Abonnement zur Verfügung.Offer free trials. If your add-in requires a subscription, make some functionality available without a subscription.

  • Einfacher Registrierungsvorgang. Sorgen Sie dafür, dass die Informationen im Vorfeld eingefügt werden (E-Mail, Anzeigename), und überspringen Sie die E-Mail-Verifizierung.Make signup simple. Prefill information (email, display name) and skip email verifications.

  • Vermeiden von Popups. Wenn Sie diese verwenden müssen, führen Sie den Benutzer durch das Aktivieren Ihres Popups.Avoid pop ups. If you have to use them, guide the user to enable your pop up.

Muster, die Sie beim Entwickeln Ihrer Umgebung für das erste Ausführen anwenden können, finden Sie unter UX-Entwurfsmuster für Office-Add-Ins.For patterns that you can apply as you develop your first-run experience, see UX design patterns for Office Add-ins.

Verwenden von Add-In-BefehlenUse add-in commands

  • Geben Sie relevante Einstiegspunkte der Benutzeroberfläche für das Add-in Add-In-Befehle mit. Details, einschließlich der bewährte Methoden, finden Sie unter Add-In-Befehle.Provide relevant UI entry points for your add-in by using add-in commands. For details, including design best practices, see add-in commands.

Anwenden von UX-EntwurfsprinzipienApply UX design principles

  • Stellen Sie sicher, dass das Design und die Funktionalität des Add-Ins die Office-Benutzeroberfläche ergänzt. Verwenden Sie Office UI Fabric.Ensure that the look and feel and functionality of your add-in complements the Office experience. Use Office UI Fabric.

  • Ziehen Sie Inhalt Chrom vor. Vermeiden Sie überflüssige Benutzeroberflächenelemente, die keinen Nutzen für die Benutzeroberfläche mit sich bringen.Favor content over chrome. Avoid superfluous UI elements that don't add value to the user experience.

  • Überlassen Sie Benutzern das Steuern. Stellen Sie sicher, dass Benutzer wichtige Entscheidungen verstehen und Aktionen auf einfache Weise rückgängig machen können, die das Add-In ausführt.Keep users in control. Ensure that users understand important decisions, and can easily reverse actions the add-in performs.

  • Setzen Sie Branding ein, um das Vertrauen der Benutzer zu gewinnen und sie zu lenken. Verwenden Sie Branding nicht dazu, Benutzer zu verwirren oder zu Werbezwecken.Use branding to inspire trust and orient users. Do not use branding to overwhelm or advertise to users.

  • Vermeiden Sie das Scrollen. Optimieren Sie das Design für die Auflösung von 1366x768.Avoid scrolling. Optimize for 1366 x 768 resolution.

  • Verwenden Sie keine nicht lizenzierten Bilder.Do not include unlicensed images.

  • Verwenden Sie eine klare und einfache Sprache im Add-In.Use clear and simple language in your add-in.

  • Eingabehilfen – Ermöglichen Sie allen Benutzern eine einfache Interaktion mit Ihrem Add-In, und integrieren Sie Eingabehilfstechnologien wie die Sprachausgabe.Account for accessibility - make your add-in easy for all users to interact with, and accommodate assistive technologies such as screen readers.

  • Entwerfen Sie für alle Plattformen und Eingabemethoden, einschließlich Tastatur, Maus und Toucheingabe. Stellen Sie sicher, dass Ihre Benutzeroberfläche auf verschiedenen Formfaktoren reagiert.Design for all platforms and input methods, including mouse/keyboard and touch. Ensure that your UI is responsive to different form factors.

Optimierung für ToucheingabeOptimize for touch

  • Verwenden Sie die Context.touchEnabled -Eigenschaft, um zu ermitteln, ob in der Hostanwendung, die das Add-In ausführt, Toucheingabe zulässig ist.Use the Context.touchEnabled property to detect whether the host application your add-in runs on is touch enabled.

    Hinweis

    Diese Eigenschaft wird in Outlook nicht unterstützt.This property is not supported in Outlook.

  • Stellen Sie sicher, dass alle Steuerelemente für die Toucheingabe entsprechend angepasst sind. Schaltflächen haben beispielsweise ausreichende Touchziele, und Eingabefelder sind groß genug.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.

  • Vertrauen Sie nicht auf Nicht-Touchmethoden wie darauf zeigen oder mit der rechten Maustaste klicken.Do not rely on non-touch input methods like hover or right-click.

  • Stellen Sie sicher, dass das Add-In im Hoch- und Querformat funktioniert. Beachten Sie, dass auf Touchgeräten ein Teil des Add-Ins aufgrund der Bildschirmtastatur möglicherweise ausgeblendet ist.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.

  • Testen Sie das Add-In auf einem echten Gerät mit Querladen.Test your add-in on a real device by using sideloading.

Hinweis

Bei Verwendung von Office UI Fabric für Entwurfselemente werden dort viele dieser Aspekte behandelt.If you're using Office UI Fabric for your design elements, many of these elements are taken care of.

Optimieren und Überwachen der Add-In-LeistungOptimize and monitor add-in performance

  • Schnelle Benutzeroberflächenantworten. Das Add-In sollte in 500 ms oder weniger geladen werden.Create the perception of fast UI responses. Your add-in should load in 500 ms or less.

  • Stellen Sie sicher, dass innerhalb von weniger als einer Sekunde eine Reaktion auf alle Benutzerinteraktionen folgt.Ensure that all user interactions respond in under one second.

  • Stellen Sie Ladeanzeigen bei lang andauernden Vorgängen bereit.Provide loading indicators for long-running operations.

  • Verwenden Sie ein CDN für Hostimages, Ressourcen und Bibliotheken. Laden Sie so viel wie möglich von einem zentralen Ort.Use a CDN to host images, resources, and common libraries. Load as much as you can from one place.

  • Befolgen Sie die standardmäßigen Webmethoden zur Optimierung Ihrer Webseite. Verwenden Sie in der Produktion nur kleinere Versionen der Bibliotheken. Laden Sie nur Ressourcen, die Sie benötigen, und optimieren Sie die Ladevorgänge dieser Ressourcen.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.

  • Wenn Vorgänge länger andauern, kommunizieren Sie dies dem Benutzer. Beachten Sie die in der folgenden Tabelle aufgeführten Schwellenwerte. Weitere Informationen finden Sie unter Ressourcengrenzen und Leistungsoptimierung für Office Add-InsIf 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.

    InteraktionsklasseInteraction class ZielTarget ObergrenzeUpper bound Menschliche WahrnehmungHuman perception
    DirektInstant <= 50 ms<=50 ms 100 ms100 ms Ohne spürbaren Verzögerung.No noticeable delay.
    SchnellFast 50-100 ms50-100 ms 200 ms200 ms Minimal spürbare Verzögerung. Kein Feedback erforderlich.Minimally noticeable delay. No feedback necessary.
    TypischTypical 100-300 ms100-300 ms 500 ms500 ms Schnell, aber zu langsam, um als schnell beschrieben zu werden. Kein Feedback erforderlich.Quick, but too slow to be described as fast. No feedback necessary.
    ReaktionsfähigResponsive 300-500 ms300-500 ms 1 Sekunde1 second Nicht schnell, aber dennoch reaktionsfähig. Kein Feedback erforderlich.Not fast, but still feels responsive. No feedback necessary.
    Fortlaufend.Continuous > 500 ms>500 ms 5 Sekunden5 seconds Mittlere Wartezeit, ist nicht mehr reaktionsfähig. Möglicherweise Feedback erforderlich.Medium wait, no longer feels responsive. Might need feedback.
    ErfassungCaptive > 500 ms>500 ms 10 Sekunden10 seconds Lange, aber nicht lange genug, um etwas anderes zu tun. Möglicherweise Feedback erforderlich.Long, but not long enough to do something else. Might need feedback.
    ErweitertExtended > 500 ms>500 ms > 10 Sekunden>10 seconds Lange genug, um beim Warten etwas anderes zu tun. Möglicherweise Feedback erforderlich.Long enough to do something else while waiting. Might need feedback.
    Lange ausgeführtLong running > 5 Sekunden>5 seconds > 1 minute>1 minute Benutzer tun in der Zwischenzeit mit Sicherheit etwas anderes tun.Users will certainly do something else.
  • Überwachen Sie den Dienststatus, und verwenden Sie Telemetrie, um erfolgreiche Benutzerausführungen zu überwachen.Monitor your service health, and use telemetry to monitor user success.

Vermarkten des Add-InsMarket your add-in

  • Veröffentlichen Sie das Add-In in AppSource, und werben Sie dafür auf Ihrer Website. Erstellen Sie ein effektives AppSource-Angebot.Publish your add-in to AppSource and promote it from your website. Create an effective AppSource listing.

  • Verwenden Sie kurze und prägnante beschreibende Add-In-Titel. Verwenden Sie nicht mehr als 128 Zeichen.Use succinct and descriptive add-in titles. Include no more than 128 characters.

  • Vermitteln Sie das Wertversprechen des Add-Ins im Titel und der Beschreibung. Verlassen Sie sich nicht auf die Marke.Write short, compelling descriptions of your add-in. Answer the question "What problem does this add-in solve?".

  • Vermitteln Sie das Wertversprechen des Add-Ins im Titel und der Beschreibung. Verlassen Sie sich nicht auf die Marke.Convey the value proposition of your add-in in your title and description. Don't rely on your brand.

  • Erstellen Sie eine Website, damit die Benutzer das Add-In leichter finden und verwenden können.Create a website to help users find and use your add-in.

Weitere ArtikelSee also