Conception UX pour les compléments SharePointUX design for SharePoint Add-ins

En tant que développeur, vous devez toujours mettre l’expérience utilisateur au premier rang de vos priorités lorsque vous créez des compléments. Le modèle pour les compléments SharePoint propose un grand nombre de composants et de mécanismes qui vous permettent de créer une expérience utilisateur incomparable. L’expérience utilisateur dans le modèle de complément est suffisamment flexible pour que vous puissiez utiliser les techniques et les plateformes les plus adaptées aux besoins des utilisateurs finaux.As a developer, you should always give high priority to the user experience (UX) when you are creating add-ins. The model for SharePoint Add-ins offers many UX components and mechanisms that help you build a great user experience. The user experience in the add-in model is also flexible enough to let you use the techniques and platforms that best adapt to the needs of end users.

Vue d’ensemble de l’expérience utilisateur des compléments dans SharePointHigh-level overview of add-in UX in SharePoint

En tant que développeur d'un complément, vous devez connaître l'architecture de celui-ci. Après avoir déterminé le mode de distribution de votre complément sur des plateformes distantes et des plateformes SharePoint, vous pouvez choisir parmi les différentes options de création de l'expérience utilisateur de votre complément. Posez-vous les questions suivantes :As the add-in developer, you have to know the architecture of your add-in. After you determine how your add-in will be distributed in remote and SharePoint platforms, you can decide among the available alternatives for building your add-in UX. You might ask yourself the following questions:

Le diagramme suivant illustre les scénarios et les options principales à prendre en considération lorsque vous concevez l’expérience utilisateur de votre complément.The following diagram shows the main scenarios and options to consider when you are designing your add-in UX.

Figure 1. Principaux scénarios et options d'expérience utilisateur de complémentFigure 1. Add-in UX main scenarios and options

Scénarios principaux d’expérience utilisateur d’application

En choisissant votre type de conception, vous devez avant tout déterminer les composants de votre complément qui seront hébergés sur SharePoint et ceux qui ne le seront pas. Vous devez également analyser la manière dont votre complément interagit avec le site web hôte.In choosing your design, you should fundamentally consider which parts of your add-in are hosted in SharePoint and which are not. You should also consider how your add-in interacts with the host web.

Scénarios de l’expérience utilisateur des compléments hébergés sur le cloud.Add-in UX scenarios in cloud-hosted add-ins

Supposons que vous avez identifié des expériences utilisateur non hébergées sur SharePoint. Dans de tels scénarios, on peut s'attendre à ce que les utilisateurs finaux fassent des allers-retours entre un site web SharePoint et le complément hébergé dans le cloud. Vous pouvez utiliser les techniques et les outils de la plateforme, mais SharePoint propose également des ressources qui vous permettent de concevoir une expérience homogène pour les utilisateurs.Suppose that you determine that some of your user experience is not hosted in SharePoint. In these scenarios, it is expected that your end users go back and forth between a SharePoint website and the cloud-hosted add-in. You can use the techniques and tools in the platform, but SharePoint also provides resources to help you design a smooth experience for users.

Les ressources d’expérience utilisateur suivantes sont disponibles dans SharePoint pour les compléments hébergés sur le cloud :The following UX resources are available for cloud-hosted add-ins in SharePoint:

  • Contrôle Chrome : ce contrôle vous permet d’utiliser l’en-tête de navigation d’un site SharePoint spécifique dans votre complément sans inscrire une bibliothèque de serveur ou utiliser une technologie ou un outil spécifique.Chrome control: The chrome control enables you to use the navigation header of a specific SharePoint site in your add-in without needing to register a server library or use a specific technology or tool. Pour utiliser cette fonctionnalité, vous devez inscrire une bibliothèque JavaScript SharePoint à l’aide des balises <script> standard.To use this functionality, you must register a SharePoint JavaScript library through standard <script> tags. Vous pouvez insérer un espace réservé à l’aide d’un élément HTML div et personnaliser davantage le contrôle à l’aide des options disponibles.You can provide a placeholder by using an HTML div element and further customize the control by using the available options. Le contrôle hérite de son apparence du site web SharePoint spécifié.The control inherits its appearance from the specified SharePoint website. Pour en savoir plus, consultez l’article sur l’utilisation du contrôle Chrome client dans les compléments SharePoint.For more information, see Use the client chrome control in SharePoint Add-ins.

  • Feuille de style : vous pouvez référencer la feuille de style d'un site web SharePoint dans votre Complément SharePoint et l'utiliser pour appliquer un style à vos pages web à l'aide des classes disponibles. De plus, si les utilisateurs finaux modifient le thème du site web SharePoint, le complément peut adopter le nouvel ensemble de styles sans modifier la référence dans celui-ci. Pour plus d'informations, voir Utilisation d'une feuille de style de site web SharePoint dans les compléments pour SharePoint.Stylesheet: You can reference a SharePoint website's style sheet in your SharePoint Add-in and use it to style your webpages using the available classes. In addition, if the end users change the SharePoint website's theme, your add-in can adopt the new set of styles without modifying the reference in your add-in. For more information, see Use a SharePoint website's style sheet in SharePoint Add-ins.

La figure 2 représente les ressources du modèle de complément SharePoint pour les compléments hébergés dans le cloud.Figure 2 shows the resources in the model for SharePoint Add-ins for cloud-hosted add-ins.

Figure 2. Ressources d'expérience utilisateur pour les compléments hébergés dans le cloudFigure 2. Add-in UX resources for cloud-hosted add-ins

Ressources d’expérience utilisateur pour les applications hébergées par un développeur

Scénarios de l’expérience utilisateur des compléments hébergés par SharePointAdd-in UX scenarios in SharePoint-hosted add-ins

Si votre complément est hébergé sur SharePoint, l'expérience utilisateur est moins susceptible d'évoluer si les utilisateurs font des allers-retours entre le site web hôte et le site web de complément. Lorsque le complément est déployé, le site web de complément applique la feuille de style et le thème du site web hôte. Vous pouvez encore utiliser le contrôle de chrome et la feuille de style d'un complément hébergé sur SharePoint, mais la disponibilité du modèle de complément constitue la différence la plus significative avec les scénarios d'hébergement dans le cloud.If your add-in is hosted in SharePoint, the user experience is less likely to change very much when users move back and forth between the host web and the add-in web. When the add-in is deployed, the add-in web takes the style sheet and theme from the host web. You can still use the chrome control and style sheet in a SharePoint-hosted add-in, but the most significant difference with cloud-hosted scenarios is the availability of the add-in template.

La ressource d'expérience utilisateur suivante est disponible pour les compléments hébergés sur SharePoint :The following UX resource is available for SharePoint-hosted add-ins:

  • Modèle de complément : le modèle de complément inclut la page maître app.master. Il s’agit de l’option par défaut lorsque vous créez un site web de compléments.Add-in template: The add-in template includes the app.master masterpage. It is the default option when you create an add-in web.

Les compléments hébergés par SharePoint bénéficient également des ressources et des technologies existantes dans SharePoint, telles que le ruban, l’infrastructure de composant WebPart et le rendu côté client.SharePoint-hosted add-ins also benefit from existing resources and technologies in SharePoint such as the Ribbon, web part infrastructure, and client-side rendering.

Scénarios de connexion de l’expérience utilisateur des compléments au site web hôteScenarios for connecting the add-in UX to the host web

Certaines utilisations de votre complément peuvent être déclenchées à partir du site web hôte. SharePoint offre des moyens d'ouvrir votre complément à partir d'une bibliothèque de documents ou d'une liste, en plus des fonctions d'affichage d'une partie de l'expérience utilisateur de votre complément dans les pages hébergées sur SharePoint.Some of the use cases for your add-in can be triggered from within the host web. SharePoint provides ways to open your add-in from a document library or list in addition to ways to show some of your add-in UX within SharePoint-hosted pages.

Les ressources d'expérience utilisateur suivantes sont disponibles pour connecter l'expérience utilisateur de votre complément au site web hôte :The following UX resources are available to connect your add-in UX to the host web:

  • Actions personnalisées : vous pouvez utiliser des actions personnalisées pour connecter l’expérience utilisateur de votre site web hôte avec votre complément.Custom actions: You can use custom actions to connect the host web UX with your add-in. Il existe deux types d’actions personnalisées : le ruban ou le bloc de contrôle d’extension.There are two types of custom actions: Ribbon or ECB. Une action personnalisée peut envoyer à une page distante des paramètres tels que la liste ou l’élément sur lequel elle a été appelée.A custom action can send parameters such as the list or item on which it was invoked to a remote page. Pour plus d’informations, consultez la section Créer des actions personnalisées à déployer avec les compléments SharePoint.For more information, see Create custom actions to deploy with SharePoint Add-ins.

  • Composants de complément : vous pouvez inclure une partie de votre expérience utilisateur de complément dans le site web hôte à l’aide de composants de complément. Le composant de complément est disponible dans la galerie des composants WebPart sur le site web hôte lorsque vous déployez le composant. Les utilisateurs peuvent ajouter le composant de complément sur une page à l’aide du contrôle Web Part Adder. Pour plus d’informations, reportez-vous à Créer des composants de complément à installer avec votre complément pour SharePoint.Add-in parts: You can include some of your add-in user experience in the host web by using add-in parts. The add-in part is available in the Web Part Gallery in the host web when you deploy the add-in. Users can add the add-in part to a page by using the Web Part Adder control. For more information, see Create add-in parts to install with your SharePoint Add-in.

La figure 3 illustre les ressources dans le modèle des compléments SharePoint afin de connecter l’expérience utilisateur de votre complément au site web hôte.Figure 3 shows the resources in the model for SharePoint Add-ins to connect your add-in UX to the host web.

Figure 3. Ressources d'expérience utilisateur de complément pour le site web hôteFigure 3. Add-in UX resources for the host web

Ressources d’expérience utilisateur d’application pour l’hôte web

Voir aussiSee also