Design et expérience utilisateur sous SharePoint 2013

  • Published on
    11-Jan-2017

  • View
    3.229

  • Download
    0

Transcript

TECHDAYS 2014 - Design & exprience utilisateur sous SharePoint 2013_12022014_DEF1Design & exprience utilisateur sous SharePoint 2013Edwin StephensonAmlie JouineauIbrahim AlirkilicarslanEXPERTIMEwww.expertime.com@expertimeDesign - SharePoint 20132Depuis votre smartphone sur :http://notes.mstechdays.frDe nombreux lots gagner toutes les heures !!!Claviers, souris et jeux MicrosoftMerci de nous aider amliorer les Techdays !Donnez votre avis !#mstechdaysDesign - SharePoint 20133SOMMAIRE0. User & Design experience4.0Images renditions3.0Display templates2.0Device channels1.0Design managerDesign - SharePoint 2013#mstechdays4#0 USER & DESIGN EXPERIENCEDesign - SharePoint 2013#mstechdays5Design - SharePoint 2013#mstechdays6Conception UXMettant en avant lactualit, limage et les valeurs de la marquePens mobilit & orient utilisateurJouant la carte de linteractivit permise par le digitalPermettant un accs au moindre clic linformation essentielleAvec des contenus organiss et une hirarchisation du site#mstechdaysDesign - SharePoint 20137Les cls du succsPenser orient utilisateurDfinir les attentes de la cibleDfinir les diffrentes interactionsRecommandations ergonomiques via une mthode de conception UXPenser simple & accessibleLimiter les clicsSimplifier les actions par des interfaces tudiesPenser design Attractif, moderne, convivialNavigation intuitiveMise en avant des contenus cls#mstechdaysDesign - SharePoint 20138Dmarche centre sur lexprience utilisateur (ergonomie UX)Arborescence permettant de structurer et organiser les contenus au sein du portail.Wireframe permettant dorganiser et prioriser linformation au sein des pages du portail.Cration graphique permettant de donner une identit au portail. #mstechdaysDesign - SharePoint 20139Wireframe animFocus sur loutil de wireframingIl permet de modliser les contenus.Il permet lquipe projet de mieux apprhender le future site sans avoir consulter les documents de spcification fonctionnelles.Il permet galement daffirmer ou non des choix ergonomiques dutilisation ds la phase de conceptionAnim et interactif Logo#mstechdaysDesign - SharePoint 201310Un incontournable aujourdhui, penser les sites pour la mobilit#mstechdaysDesign - SharePoint 201311Focus mobilit#1 : les usages digitaux voluent mdia, conversation, projet, mobilit, social, dtente, partage, rapidit, applications#2 : les supports se multiplient#3 : les sites doivent sadapter aux rsolutions et tailles dcrans#mstechdaysDesign - SharePoint 201312Focus mobilitEn parallle, les devices prolifrent : ceux des internautes, ceux de lentreprise, ceux de vos collaborateurs#mstechdaysDesign - SharePoint 201313Focus mobilit1 site grande rsolution1 site moyenne rsolution1 site iPad et/ou 1 application1 site android et/ou 1 application1 site iPhone et/ou 1 application1 site wphone et/ou 1 applicationDoit-on en arriver cela pour servir tous les cas dusage ?#mstechdaysDesign - SharePoint 201314La solution, le responsive design Responsive design : cest quoi ?Un seul site pour tous les devices#mstechdaysDesign - SharePoint 201315La solution, le responsive designDes rsolutions dcrans structurantes (surtout dans la largeur)#mstechdaysDesign - SharePoint 201316La solution, le responsive designLes utilisateurs dabord !#1 : Qui sont-ils ?#2 : Comment sont-ils quips ?#3 : Quels usages par devices ?#mstechdaysDesign - SharePoint 201317Focus sur la conception en responsiveUn mode de pense tactilePenser tactileSe projeter en gestuelles et interactionsConception des pages avec une grille et des blocs modulablesSuppression des blocs / fonctionnalits selon le device et le contexte, ne garder que lessentielReconsidrer la hirarchisation de linformation selon les gabaritsConcevoir en responsive implique une mthodologie de travail en ergonomie, design et intgration propre un projet en responsive design#mstechdaysDesign - SharePoint 201318Focus sur la conception en responsivePenser la disposition par gabarits#mstechdaysDesign - SharePoint 201319Et SharePoint dans tout a ?AFFICHAGE PCAFFICHAGE MOBILE / TABLETTEMme contenuMme urlMme collection de sitelayouts et templates diffrentsNAVIGATEUR#mstechdaysDesign - SharePoint 201320niveaux de customisation graphiqueSharePoint permetCustom Master Page et StylesCustom Page layoutsCustom FonctionnalitComposed LooksSimple et rapide (pas de conception ou de design) Design managerPas besoin de background technique de SharePointFull SharePoint brandingGreat user experience3201Design - SharePoint 2013#mstechdays21Les nouveauts de Sharepoint 2013 vs Sharepoint 2010Design managerDevices channelsDisplay TemplatesImages renditionsDesign - SharePoint 2013#mstechdays22#1 DESIGN MANAGERDesign - SharePoint 2013#mstechdays23Retour sur SharePoint 2010SharePoint Designer /Visual studio#mstechdaysDesign - SharePoint 201324Design manager avec SharePoint 2013CUSTOM MINIMAL MASTERPAGERibbonPlaceholder MainNavigation Catalog IntegrationContent Search WebpartsChannel PanelsNotepad ++ ou Sharepoint Designer 2013SHAREPOINT #mstechdaysDesign - SharePoint 201325Design managerExemple site Expertime#mstechdaysDesign - SharePoint 201326#2 Device channelDesign - SharePoint 2013#mstechdays27Les channels utilisent le user agent du navigateur pour dterminer le device.Un alias est cr par channel. Il est possible de prvisualiser chaque rendu par le Ribbon.On peut appliquer une masterpage spcifique un channel ou afficher des parties dHTML ou de code diffrents pour avoir un affichage particulier sur smartphone par exemple.Des images Renditions peuvent tre appliqus un Channel.Vous pouvez utiliser lalias du Channel dans du code JavaScript.Device Channels#mstechdaysDesign - SharePoint 201328Exemple du site internet de Dialoge#mstechdaysDesign - SharePoint 201329Exemple du site internet de Dialoge#mstechdaysDesign - SharePoint 201330Device ChannelsSite Settings > Device ChannelsAjouter un nouvel itemAjouter un User AgentChange master PageTest: ?DeviceChannel=Name#mstechdaysDesign - SharePoint 201331#3 Display templatesDesign - SharePoint 2013#mstechdays32Display templatesSharePoint 2010 vs 2013Webpart de rechercheResult Type#mstechdaysDesign - SharePoint 201333Display templates help you style the SharePoint Content the way you wantHTML file (.html)Fichier Javascript #mstechdaysDesign - SharePoint 201334#4 IMAGE RENDITIONSDesign - SharePoint 2013#mstechdays35Image renditions avec SharePoint 2013#mstechdaysDesign - SharePoint 201336Cration des dimensions des rendus#mstechdaysDesign - SharePoint 201337Edition des rendus#mstechdaysDesign - SharePoint 201338Image renditions avec jQuery $(document).ready(function() { $image = $(".article-content").find("img"); $image.each(function (i) { var imagesrc = $(this).attr("src") + "?RenditionID=3"; $(this).attr("src",imagesrc); }); }); #mstechdaysDesign - SharePoint 201339Choix du rendu#mstechdaysDesign - SharePoint 201340#mstechdaysDesign - SharePoint 201341Des questions ?#mstechdaysDesign - SharePoint 201342www.expertime.com www.quatrepointzero.com#mstechdaysDesign - SharePoint 201343Merci.#mstechdaysDesign - SharePoint 201344 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.Digital is business45

Recommended

View more >