- User & design experience - Design manager - Device channels - Site mobile - Display templates - Images renditions Speakers : Edwin Stephenson (Expertime)

2. Design & expérience utilisateur
sous SharePoint 2013
Edwin Stephenson
Amélie Jouineau
Ibrahim Alirkilicarslan
EXPERTIME
www.expertime.com
@expertime
Design - SharePoint 2013

3. 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

4. #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

5. #0 USER & DESIGN EXPERIENCE
#mstechdays
Design - SharePoint 2013

6. #mstechdays
Design - SharePoint 2013

7. 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

8. 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

9. 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.

10. 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

11. Un incontournable aujourd’hui,
penser les sites pour la mobilité
#mstechdays
Design - SharePoint 2013

12. 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

13. Focus mobilité
#mstechdays
En parallèle, les devices prolifèrent :
ceux des internautes, ceux de l’entreprise,
ceux de vos collaborateurs…
Design - SharePoint 2013

14. 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
…

15. La solution, le responsive design
« Responsive design » : c’est quoi ?
Un seul site pour
tous les devices
#mstechdays
Design - SharePoint 2013

16. La solution, le responsive design
Des résolutions d’écrans
structurantes (surtout
dans la largeur)
#mstechdays
Design - SharePoint 2013

17. 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

18. 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

19. Focus sur la conception en responsive
Penser la disposition
par gabarits
#mstechdays
Design - SharePoint 2013

20. 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

21. 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

22. LES NOUVEAUTÉS DE SHAREPOINT 2013
VS SHAREPOINT 2010
•
•
•
•
#mstechdays
Design manager
Devices channels
Display Templates
Images renditions
Design - SharePoint 2013

23. #1 DESIGN MANAGER
#mstechdays
Design - SharePoint 2013

24. 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

25. 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

26. Design manager
• Exemple site Expertime
#mstechdays
Design - SharePoint 2013

27. #2 DEVICE CHANNEL
#mstechdays
Design - SharePoint 2013

28. 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

29. Exemple du site internet de Dialoge
#mstechdays
Design - SharePoint 2013

30. Exemple du site internet de Dialoge
#mstechdays
Design - SharePoint 2013

31. Device Channels
Site Settings > Device Channels
Ajouter un nouvel item
Ajouter un User Agent
Change master Page
•
•
•
•
•
Test: ?DeviceChannel=Name
#mstechdays
Design - SharePoint 2013

32. #3 DISPLAY TEMPLATES
#mstechdays
Design - SharePoint 2013

33. Display templates
• SharePoint 2010 vs 2013
• Webpart de recherche
• Result Type
#mstechdays
Design - SharePoint 2013

34. Display templates
help you style the SharePoint Content the way you want
1. HTML file (.html)
2. Fichier Javascript
#mstechdays
Design - SharePoint 2013

35. #4 IMAGE RENDITIONS
#mstechdays
Design - SharePoint 2013

36. Image renditions
avec SharePoint 2013
#mstechdays
Design - SharePoint 2013

37. Création des dimensions des rendus
#mstechdays
Design - SharePoint 2013

38. Edition des rendus
#mstechdays
Design - SharePoint 2013

39. 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

40. Choix du rendu
#mstechdays
Design - SharePoint 2013

41. #mstechdays
Design - SharePoint 2013

42. Des questions ?
#mstechdays
Design - SharePoint 2013

43. www.expertime.com
#mstechdays
www.quatrepointzero.com
Design - SharePoint 2013

44. Merci.
#mstechdays
Design - SharePoint 2013

45. Digital is business