Design & expérience utilisateur
sous SharePoint 2013
Edwin Stephenson
Amélie Jouineau
Ibrahim Alirkilicarslan
EXPERTIME
ww...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !...
#mstechdays

Design - SharePoint 2013

1.0
Design manager

2.0
Device channels

3.0
Display templates

SOMMAIRE

0. User &...
#0 USER & DESIGN EXPERIENCE

#mstechdays

Design - SharePoint 2013
#mstechdays

Design - SharePoint 2013
Conception UX

Pensé mobilité
& orienté utilisateur

Mettant en avant l’actualité,
l’image et les valeurs de la marque

#m...
Les clés du succès
Penser
« orienté utilisateur »
•
•
•

Définir les attentes de la cible
Définir les différentes
interact...
Démarche centrée sur l’expérience utilisateur
(ergonomie UX)

Arborescence
permettant de
structurer et organiser
les conte...
Wireframe animé
Focus sur l’outil de wireframing
•

Il permet de modéliser les
contenus.

•

Il permet à l’équipe projet d...
Un incontournable aujourd’hui,
penser les sites pour la mobilité

#mstechdays

Design - SharePoint 2013
Focus mobilité
#1 : les usages digitaux évoluent…

… média, conversation, projet, mobilité, social,
détente, partage, rapi...
Focus mobilité

#mstechdays

En parallèle, les devices prolifèrent :
ceux des internautes, ceux de l’entreprise,
ceux de v...
Focus mobilité

Doit-on en arriver à cela pour servir
tous les cas d’usage ?
1 site android
et/ou 1
application

1 site gr...
La solution, le responsive design
« Responsive design » : c’est quoi ?

Un seul site pour
tous les devices

#mstechdays

D...
La solution, le responsive design

Des résolutions d’écrans
structurantes (surtout
dans la largeur)

#mstechdays

Design -...
La solution, le responsive design
Les utilisateurs d’abord !
#1 : Qui sont-ils ?
#2 : Comment sont-ils équipés ?
#3 : Quel...
Focus sur la conception en responsive
Concevoir en responsive… implique une méthodologie de travail en ergonomie,
design e...
Focus sur la conception en responsive
Penser la disposition
par gabarits

#mstechdays

Design - SharePoint 2013
Et SharePoint dans tout ça ?
AFFICHAGE PC

NAVIGATEUR
Même contenu
Même url
Même collection de site
layouts et templates
d...
SHAREPOINT PERMET
201 niveaux de Composed

3

customisation
graphique

Looks

Simple et rapide (pas
de conception ou de
de...
LES NOUVEAUTÉS DE SHAREPOINT 2013
VS SHAREPOINT 2010
•
•
•
•

#mstechdays

Design manager
Devices channels
Display Templat...
#1 DESIGN MANAGER

#mstechdays

Design - SharePoint 2013
Retour sur SharePoint 2010
Masterpages

P.S.D

HTML

Custom
chanel
managment

CSS
Custom nav

Ribbon

Custom
SharePoint
si...
Design manager avec SharePoint 2013
SHAREPOINT
•
•
•
•

Auto-convert
P.S.D

HTML/CSS

UPLOAD

HTML EN
.MASTER

Navigation
...
Design manager
• Exemple site Expertime

#mstechdays

Design - SharePoint 2013
#2 DEVICE CHANNEL

#mstechdays

Design - SharePoint 2013
Device Channels

Les channels utilisent le user agent du navigateur
pour déterminer le device.

2.

Un alias est créé par ...
Exemple du site internet de Dialoge

#mstechdays

Design - SharePoint 2013
Exemple du site internet de Dialoge

#mstechdays

Design - SharePoint 2013
Device Channels
Site Settings > Device Channels
Ajouter un nouvel item
Ajouter un User Agent
Change master Page

•
•
•
•

...
#3 DISPLAY TEMPLATES

#mstechdays

Design - SharePoint 2013
Display templates
• SharePoint 2010 vs 2013
• Webpart de recherche
• Result Type

#mstechdays

Design - SharePoint 2013
Display templates

help you style the SharePoint Content the way you want
1. HTML file (.html)
2. Fichier Javascript

#mst...
#4 IMAGE RENDITIONS

#mstechdays

Design - SharePoint 2013
Image renditions
avec SharePoint 2013

#mstechdays

Design - SharePoint 2013
Création des dimensions des rendus

#mstechdays

Design - SharePoint 2013
Edition des rendus

#mstechdays

Design - SharePoint 2013
Image renditions avec jQuery
<script type="text/javascript">
$(document).ready(function() {
$image = $(".article-content")...
Choix du rendu

#mstechdays

Design - SharePoint 2013
#mstechdays

Design - SharePoint 2013
Des questions ?

#mstechdays

Design - SharePoint 2013
www.expertime.com

#mstechdays

www.quatrepointzero.com

Design - SharePoint 2013
Merci.

#mstechdays

Design - SharePoint 2013
Digital is business
Design et expérience utilisateur sous SharePoint 2013
Prochain SlideShare
Chargement dans…5
×

Design et expérience utilisateur sous SharePoint 2013

3 233 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 233
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
151
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

×