45

Design et expérience utilisateur sous SharePoint 2013

Embed Size (px)

Citation preview

Page 1: Design et expérience utilisateur sous SharePoint 2013
Page 2: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013

Design & expérience utilisateur sous SharePoint

2013Edwin StephensonAmélie Jouineau

Ibrahim AlirkilicarslanEXPERTIME

www.expertime.com@expertime

Page 3: Design et expérience utilisateur sous SharePoint 2013

#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 !

Page 4: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

SOMMAIRE0. User & Design experience

4.0Images renditions

3.0Display templates

2.0Device channels

1.0Design manager

Page 5: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

#0 USER & DESIGN EXPERIENCE

Page 6: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

Page 7: Design et expérience utilisateur sous SharePoint 2013

#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

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

Page 8: Design et expérience utilisateur sous SharePoint 2013

#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

Page 9: Design et expérience utilisateur sous SharePoint 2013

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

Page 10: Design et expérience utilisateur sous SharePoint 2013

#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

Page 11: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Un incontournable aujourd’hui, penser les sites pour la

mobilité

Page 12: Design et expérience utilisateur sous SharePoint 2013

#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

Page 13: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

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

Page 14: Design et expérience utilisateur sous SharePoint 2013

#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 ?

Page 15: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

La solution, le responsive design

« Responsive design » : c’est quoi ?

Un seul site pour tous les devices

Page 16: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

La solution, le responsive design

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

Page 17: Design et expérience utilisateur sous SharePoint 2013

#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 ?

Page 18: Design et expérience utilisateur sous SharePoint 2013

#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

Page 19: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Focus sur la conception en responsivePenser la disposition par gabarits

Page 20: Design et expérience utilisateur sous SharePoint 2013

#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

Page 21: Design et expérience utilisateur sous SharePoint 2013

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

Page 22: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

LES NOUVEAUTÉS DE SHAREPOINT 2013 VS SHAREPOINT 2010

• Design manager• Devices channels• Display Templates• Images renditions

Page 23: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

#1 DESIGN MANAGER

Page 24: Design et expérience utilisateur sous SharePoint 2013

#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

Page 25: Design et expérience utilisateur sous SharePoint 2013

#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

Page 26: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Design manager• Exemple site Expertime

Page 27: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

#2 DEVICE CHANNEL

Page 28: Design et expérience utilisateur sous SharePoint 2013

#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

Page 29: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Exemple du site internet de Dialoge

Page 30: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Exemple du site internet de Dialoge

Page 31: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Device Channels• Site Settings > Device Channels• Ajouter un nouvel item• Ajouter un User Agent• Change master Page

• Test: ?DeviceChannel=Name

Page 32: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

#3 DISPLAY TEMPLATES

Page 33: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

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

Page 34: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Display templates help you style the SharePoint Content the way you want

1. HTML file (.html)2. Fichier Javascript

Page 35: Design et expérience utilisateur sous SharePoint 2013

Design - SharePoint 2013#mstechdays

#4 IMAGE RENDITIONS

Page 36: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Image renditions avec SharePoint 2013

Page 37: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Création des dimensions des rendus

Page 38: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Edition des rendus

Page 39: Design et expérience utilisateur sous SharePoint 2013

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

Page 40: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Choix du rendu

Page 41: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Page 42: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Des questions ?

Page 43: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

www.expertime.com www.quatrepointzero.com

Page 44: Design et expérience utilisateur sous SharePoint 2013

#mstechdays Design - SharePoint 2013

Merci.

Page 45: Design et expérience utilisateur sous SharePoint 2013

© 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