Your SlideShare is downloading. ×
Design et expérience utilisateur sous SharePoint 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design et expérience utilisateur sous SharePoint 2013

1,238
views

Published on

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

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

Speakers : Edwin Stephenson (Expertime)

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,238
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
117
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design & expérience utilisateur sous SharePoint 2013 Edwin Stephenson Amélie Jouineau Ibrahim Alirkilicarslan EXPERTIME www.expertime.com @expertime Design - SharePoint 2013
  • 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. #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. #0 USER & DESIGN EXPERIENCE #mstechdays Design - SharePoint 2013
  • 5. #mstechdays Design - SharePoint 2013
  • 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. 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. 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. 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. Un incontournable aujourd’hui, penser les sites pour la mobilité #mstechdays Design - SharePoint 2013
  • 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. 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. 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. La solution, le responsive design « Responsive design » : c’est quoi ? Un seul site pour tous les devices #mstechdays Design - SharePoint 2013
  • 15. La solution, le responsive design Des résolutions d’écrans structurantes (surtout dans la largeur) #mstechdays Design - SharePoint 2013
  • 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. 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. Focus sur la conception en responsive Penser la disposition par gabarits #mstechdays Design - SharePoint 2013
  • 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. 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. LES NOUVEAUTÉS DE SHAREPOINT 2013 VS SHAREPOINT 2010 • • • • #mstechdays Design manager Devices channels Display Templates Images renditions Design - SharePoint 2013
  • 22. #1 DESIGN MANAGER #mstechdays Design - SharePoint 2013
  • 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. 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. Design manager • Exemple site Expertime #mstechdays Design - SharePoint 2013
  • 26. #2 DEVICE CHANNEL #mstechdays Design - SharePoint 2013
  • 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. Exemple du site internet de Dialoge #mstechdays Design - SharePoint 2013
  • 29. Exemple du site internet de Dialoge #mstechdays Design - SharePoint 2013
  • 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. #3 DISPLAY TEMPLATES #mstechdays Design - SharePoint 2013
  • 32. Display templates • SharePoint 2010 vs 2013 • Webpart de recherche • Result Type #mstechdays Design - SharePoint 2013
  • 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. #4 IMAGE RENDITIONS #mstechdays Design - SharePoint 2013
  • 35. Image renditions avec SharePoint 2013 #mstechdays Design - SharePoint 2013
  • 36. Création des dimensions des rendus #mstechdays Design - SharePoint 2013
  • 37. Edition des rendus #mstechdays Design - SharePoint 2013
  • 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. Choix du rendu #mstechdays Design - SharePoint 2013
  • 40. #mstechdays Design - SharePoint 2013
  • 41. Des questions ? #mstechdays Design - SharePoint 2013
  • 42. www.expertime.com #mstechdays www.quatrepointzero.com Design - SharePoint 2013
  • 43. Merci. #mstechdays Design - SharePoint 2013
  • 44. Digital is business