View
3.232
Download
0
Category
Preview:
Citation preview
Design - SharePoint 2013
Design & expérience utilisateur sous SharePoint
2013Edwin StephensonAmélie Jouineau
Ibrahim AlirkilicarslanEXPERTIME
www.expertime.com@expertime
#mstechdays Design - SharePoint 2013
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 !
Donnez votre avis !
Design - SharePoint 2013#mstechdays
SOMMAIRE0. User & Design experience
4.0Images renditions
3.0Display templates
2.0Device channels
1.0Design manager
Design - SharePoint 2013#mstechdays
#0 USER & DESIGN EXPERIENCE
Design - SharePoint 2013#mstechdays
#mstechdays Design - SharePoint 2013
Conception UXMettant en avant l’actualité, l’image et les valeurs de la marque
Pens
é m
obilit
é &
orie
nté
utilis
ateu
r
Jouant la carte de l’interactivité permise par le digital
Permettant un accès au moindre clic à l’information essentielle
Avec des contenus organisés et une hiérarchisation du site
#mstechdays Design - SharePoint 2013
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
Penser « simple & accessible »• Limiter les clics• Simplifier les actions par
des interfaces étudiéesPenser « design » • Attractif, moderne,
convivial• Navigation intuitive• Mise en avant
des contenus clés
#mstechdays Design - SharePoint 2013
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.
Création graphique permettant de donner une identité au portail.
#mstechdays Design - SharePoint 2013
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
Logo
#mstechdays Design - SharePoint 2013
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, rapidité, applications…
#2 : les supports se multiplient
#3 : les sites doivent s’adapter…… aux résolutions et tailles d’écrans
#mstechdays Design - SharePoint 2013
Focus mobilitéEn parallèle, les devices prolifèrent : ceux des internautes, ceux de l’entreprise, ceux de vos collaborateurs…
#mstechdays Design - SharePoint 2013
Focus mobilité
1 site grande
résolution1 site moyenne
résolution1 site iPad
et/ou 1 application
1 site android et/ou 1
application
1 site iPhone et/ou 1
application
1 site wphone et/ou 1
application
…
Doit-on en arriver à cela pour servir tous les cas d’usage ?
#mstechdays Design - SharePoint 2013
La solution, le responsive design
« Responsive design » : c’est quoi ?
Un seul site pour tous les devices
#mstechdays Design - SharePoint 2013
La solution, le responsive design
Des résolutions d’écrans structurantes (surtout dans la largeur)
#mstechdays Design - SharePoint 2013
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
Focus sur la conception en responsive
Un mode de pensée « tactile »• Penser tactile• Se projeter en gestuelles et
interactions
• 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
Concevoir en responsive… implique une méthodologie de travail en ergonomie, design et intégration propre à un projet en responsive design
#mstechdays Design - SharePoint 2013
Focus sur la conception en responsivePenser la disposition par gabarits
#mstechdays Design - SharePoint 2013
Et SharePoint dans tout ça ?AFFICHAGE PC AFFICHAGE MOBILE / TABLETTE
Même contenuMême url
Même collection de sitelayouts et templates
différents
NAVIGATEUR
Design - SharePoint 2013#mstechdays
niveaux de customisation graphique
SHAREPOINT PERMET
Custom Master Page et StylesCustom Page layoutsCustom Fonctionnalité
Composed LooksSimple et rapide (pas de conception ou de design)
Design managerPas besoin de background technique de SharePoint
Full SharePoint branding
Great user experience
3201
Design - SharePoint 2013#mstechdays
LES NOUVEAUTÉS DE SHAREPOINT 2013 VS SHAREPOINT 2010
• Design manager• Devices channels• Display Templates• Images renditions
Design - SharePoint 2013#mstechdays
#1 DESIGN MANAGER
#mstechdays Design - SharePoint 2013
Retour sur SharePoint 2010
P.S.D
HTML CSSCustom SharePoint site
Masterpages
Ribbon
Custom catalog
Custom nav
Custom chanel
managment
SharePoint Designer /Visual studio
#mstechdays Design - SharePoint 2013
Design manager avec SharePoint 2013
P.S.D HTML/CSS UPLOAD
Auto-convertHTML
EN .MASTER
Snippet Gallery
Channel settings
CUSTOM MINIMAL MASTERPAGE• Ribbon• Placeholder Main
• Navigation • Catalog Integration• Content Search Webparts• Channel Panels
Notepad ++ ou Sharepoint Designer 2013
SHAREPOINT
#mstechdays Design - SharePoint 2013
Design manager• Exemple site Expertime
Design - SharePoint 2013#mstechdays
#2 DEVICE CHANNEL
#mstechdays Design - SharePoint 2013
1. 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. Vous pouvez utiliser l’alias du Channel dans du code JavaScript.
Device Channels
#mstechdays Design - SharePoint 2013
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
• Test: ?DeviceChannel=Name
Design - SharePoint 2013#mstechdays
#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
Design - SharePoint 2013#mstechdays
#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").find("img"); $image.each(function (i) { var imagesrc = $(this).attr("src") + "?RenditionID=3"; $(this).attr("src",imagesrc); }); }); </script>
#mstechdays Design - SharePoint 2013
Choix du rendu
#mstechdays Design - SharePoint 2013
#mstechdays Design - SharePoint 2013
Des questions ?
#mstechdays Design - SharePoint 2013
www.expertime.com www.quatrepointzero.com
#mstechdays Design - SharePoint 2013
Merci.
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Digital is business
Recommended