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
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
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
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
34. Display templates
help you style the SharePoint Content the way you want
1. HTML file (.html)
2. Fichier Javascript
#mstechdays
Design - SharePoint 2013