Design et expérience utilisateur sous SharePoint 2013

3 357 vues

Publié le

- User & design experience - Design manager - Device channels - Site mobile - Display templates - Images renditions

Speakers : Edwin Stephenson (Expertime)

Publié dans : Technologie
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 357
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
156
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Design et expérience utilisateur sous SharePoint 2013

  1. 1. Design & expérience utilisateur sous SharePoint 2013 Edwin Stephenson Amélie Jouineau Ibrahim Alirkilicarslan EXPERTIME www.expertime.com @expertime Design - SharePoint 2013
  2. 2. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Design - SharePoint 2013
  3. 3. #mstechdays Design - SharePoint 2013 1.0 Design manager 2.0 Device channels 3.0 Display templates SOMMAIRE 0. User & Design experience 4.0 Images renditions
  4. 4. #0 USER & DESIGN EXPERIENCE #mstechdays Design - SharePoint 2013
  5. 5. #mstechdays Design - SharePoint 2013
  6. 6. Conception UX Pensé mobilité & orienté utilisateur Mettant en avant l’actualité, l’image et les valeurs de la marque #mstechdays Jouant la carte de l’interactivité permise par le digital Avec des contenus organisés et une hiérarchisation du site Design - SharePoint 2013 Permettant un accès au moindre clic à l’information essentielle
  7. 7. Les clés du succès Penser « orienté utilisateur » • • • Définir les attentes de la cible Définir les différentes interactions Recommandations ergonomiques via une méthode de conception UX #mstechdays Penser « simple & accessible » • • Limiter les clics Simplifier les actions par des interfaces étudiées Design - SharePoint 2013 Penser « design » • • • Attractif, moderne, convivial Navigation intuitive Mise en avant des contenus clés
  8. 8. Démarche centrée sur l’expérience utilisateur (ergonomie UX) Arborescence permettant de structurer et organiser les contenus au sein du portail. Wireframe permettant d’organiser et prioriser l’information au sein des pages du portail. #mstechdays Design - SharePoint 2013 Création graphique permettant de donner une identité au portail.
  9. 9. Wireframe animé Focus sur l’outil de wireframing • Il permet de modéliser les contenus. • Il permet à l’équipe projet de mieux appréhender le future site sans avoir à consulter les documents de spécification fonctionnelles. • Il permet également d’affirmer ou non des choix ergonomiques d’utilisation dès la phase de conception Animé et interactif #mstechdays Design - SharePoint 2013 Logo
  10. 10. Un incontournable aujourd’hui, penser les sites pour la mobilité #mstechdays Design - SharePoint 2013
  11. 11. Focus mobilité #1 : les usages digitaux évoluent… … média, conversation, projet, mobilité, social, détente, partage, rapidité, applications… #2 : les supports se multiplient #3 : les sites doivent s’adapter… … aux résolutions et tailles d’écrans #mstechdays Design - SharePoint 2013
  12. 12. Focus mobilité #mstechdays En parallèle, les devices prolifèrent : ceux des internautes, ceux de l’entreprise, ceux de vos collaborateurs… Design - SharePoint 2013
  13. 13. Focus mobilité Doit-on en arriver à cela pour servir tous les cas d’usage ? 1 site android et/ou 1 application 1 site grande résolution #mstechdays 1 site moyenne résolution 1 site iPad et/ou 1 application Design - SharePoint 2013 1 site wphone et/ou 1 application 1 site iPhone et/ou 1 application …
  14. 14. La solution, le responsive design « Responsive design » : c’est quoi ? Un seul site pour tous les devices #mstechdays Design - SharePoint 2013
  15. 15. La solution, le responsive design Des résolutions d’écrans structurantes (surtout dans la largeur) #mstechdays Design - SharePoint 2013
  16. 16. La solution, le responsive design Les utilisateurs d’abord ! #1 : Qui sont-ils ? #2 : Comment sont-ils équipés ? #3 : Quels usages par devices ? #mstechdays Design - SharePoint 2013
  17. 17. Focus sur la conception en responsive Concevoir en responsive… implique une méthodologie de travail en ergonomie, design et intégration propre à un projet en responsive design • • • Conception des pages avec une grille et des blocs modulables Suppression des blocs / fonctionnalités selon le device et le contexte, ne garder que l’essentiel Reconsidérer la hiérarchisation de l’information selon les gabarits Un mode de pensée « tactile » • Penser tactile • Se projeter en gestuelles et interactions #mstechdays Design - SharePoint 2013
  18. 18. Focus sur la conception en responsive Penser la disposition par gabarits #mstechdays Design - SharePoint 2013
  19. 19. Et SharePoint dans tout ça ? AFFICHAGE PC NAVIGATEUR Même contenu Même url Même collection de site layouts et templates différents #mstechdays Design - SharePoint 2013 AFFICHAGE MOBILE / TABLETTE
  20. 20. SHAREPOINT PERMET 201 niveaux de Composed 3 customisation graphique Looks Simple et rapide (pas de conception ou de design) Design manager Pas besoin de background technique de SharePoint #mstechdays Design - SharePoint 2013 Full SharePoint branding Custom Master Page et Styles Custom Page layouts Custom Fonctionnalité Great user experience
  21. 21. LES NOUVEAUTÉS DE SHAREPOINT 2013 VS SHAREPOINT 2010 • • • • #mstechdays Design manager Devices channels Display Templates Images renditions Design - SharePoint 2013
  22. 22. #1 DESIGN MANAGER #mstechdays Design - SharePoint 2013
  23. 23. Retour sur SharePoint 2010 Masterpages P.S.D HTML Custom chanel managment CSS Custom nav Ribbon Custom SharePoint site Custom catalog SharePoint Designer /Visual studio #mstechdays Design - SharePoint 2013
  24. 24. Design manager avec SharePoint 2013 SHAREPOINT • • • • Auto-convert P.S.D HTML/CSS UPLOAD HTML EN .MASTER Navigation Catalog Integration Content Search Webparts Channel Panels Snippet Gallery CUSTOM MINIMAL MASTERPAGE • Ribbon • Placeholder Main Notepad ++ ou Sharepoint Designer 2013 #mstechdays Design - SharePoint 2013 Channel settings
  25. 25. Design manager • Exemple site Expertime #mstechdays Design - SharePoint 2013
  26. 26. #2 DEVICE CHANNEL #mstechdays Design - SharePoint 2013
  27. 27. Device Channels Les channels utilisent le user agent du navigateur pour déterminer le device. 2. Un alias est créé par channel. Il est possible de prévisualiser chaque rendu par le Ribbon. 3. On peut appliquer une masterpage spécifique à un channel ou afficher des parties d’HTML ou de code différents pour avoir un affichage particulier sur smartphone par exemple. 4. Des images Renditions peuvent être appliqués à un Channel. 5. #mstechdays 1. Vous pouvez utiliser l’alias du Channel dans du code JavaScript. Design - SharePoint 2013
  28. 28. Exemple du site internet de Dialoge #mstechdays Design - SharePoint 2013
  29. 29. Exemple du site internet de Dialoge #mstechdays Design - SharePoint 2013
  30. 30. Device Channels Site Settings > Device Channels Ajouter un nouvel item Ajouter un User Agent Change master Page • • • • • Test: ?DeviceChannel=Name #mstechdays Design - SharePoint 2013
  31. 31. #3 DISPLAY TEMPLATES #mstechdays Design - SharePoint 2013
  32. 32. Display templates • SharePoint 2010 vs 2013 • Webpart de recherche • Result Type #mstechdays Design - SharePoint 2013
  33. 33. Display templates help you style the SharePoint Content the way you want 1. HTML file (.html) 2. Fichier Javascript #mstechdays Design - SharePoint 2013
  34. 34. #4 IMAGE RENDITIONS #mstechdays Design - SharePoint 2013
  35. 35. Image renditions avec SharePoint 2013 #mstechdays Design - SharePoint 2013
  36. 36. Création des dimensions des rendus #mstechdays Design - SharePoint 2013
  37. 37. Edition des rendus #mstechdays Design - SharePoint 2013
  38. 38. Image renditions avec jQuery <script type="text/javascript"> $(document).ready(function() { $image = $(".article-content").find("img"); $image.each(function (i) { var imagesrc = $(this).attr("src") + "?RenditionID=3"; $(this).attr("src",imagesrc); }); }); </script> #mstechdays Design - SharePoint 2013
  39. 39. Choix du rendu #mstechdays Design - SharePoint 2013
  40. 40. #mstechdays Design - SharePoint 2013
  41. 41. Des questions ? #mstechdays Design - SharePoint 2013
  42. 42. www.expertime.com #mstechdays www.quatrepointzero.com Design - SharePoint 2013
  43. 43. Merci. #mstechdays Design - SharePoint 2013
  44. 44. Digital is business

×