Présentation des Design UX Guidelines par Ekino

1. Guidelinesdesign
&expérienceutilisateur

2. Qui sommes-nous ?

3. Guillaume ABEL
UX Team leader
Yannick BONNIEUX
Senior UX Designer
3
@ Ekino
Guillaume ABEL
UX Team leader
@MoreThanScreens
Yannick BONNIEUX
Senior UX Designer
@yannickbonnieux
3
@ Ekino

4. 02 Pourquoi des Guidelines ?
04 Vue d'ensemble des UI
06 Les interactions de base
01 Notre vision de l'UX
03 Les principes de design
05 Les Styles
07 Les bibliothèques
Sommaire

5. Notre vision du design
d'expérience utilisateur
01
02 Pourquoi des Guidelines ? → 03 Les principes de design → 04 Vue d'ensemble des UI → 05 Les styles → 06 Les interactions de base → 07 Les bibliothèques

6.  Comprendre les attentes non formulées des
utilisateurs
 Faciliter les échanges entre les différents acteurs
(Développeur, Graphiste, Client, Décideur, Marketeur)
 Concevoir, tester, améliorer, re-tester, etc.
6

7. Pourquoi utiliser des
Guidelines
03 Les principes de design → 04 Vue d'ensemble des UI → 05 Les styles → 06 Les interactions de base → 07 Les bibliothèques
02

8.  Une interface consistante et uniforme
 Éviter les problèmes fréquents
 Créer une expérience positive
8

9.  Perdre les utilisateurs
 Être critiqué
 Perdre de l’argent
9

10.  Parlez avec vos utilisateurs
 Testez, testez et testez encore !
 Faites-vous assister par un designer
10

11. Les principes de design
pour Tizen
03
04 Vue d'ensemble des UI → 05 Les styles → 06 Les interactions de base → 07 Les bibliothèques

12.  Favoriser le Contenu
 Focaliser l'Attention
 Laisser le Contrôle
12

13. Des interfaces visibles, compréhensibles et accessibles

14. Le contenu principal est mis en avant
(Couleur, graisse, taille de police, etc.)
14

15. Le contenu est positionné en fonction de son
importance
15

16. Les informations essentielles sont mises au-dessus de
la ligne de flottaison
Scroll
16

17. L'expérience crée est plaisante et unique grâce à des
présentations graphiques et des interactions
17

18. Des éléments présents, disponibles et cohérents

19. Les fonctionnalités majeures sont visibles rapidement
Les fonctionnalités secondaires sont masquées
19

20. Les informations secondaires sont affichées en fonction
des requêtes de l'utilisateur
20

21. L'effort est minimisé et l'usage est facilité
21

22. Des interfaces optimisées, utilisables et intuitives

23. L'utilisateur est libre de customiser l'interface selon ses
goûts
23

24. L'usage et l'accessibilité sont améliorés
24

25. La saisie et les choix sont facilités grâce à des
recommandations et des suggestions
25

26. Vued’ensemblede
l’Interfaceutilisateur:
Structuregénérale
04
05 Les styles → 06 Les interactions de base → 07 Les bibliothèques

28. Écran verrouillé Homescreen Application basique
28

29. Hometap Hold
Home screen Multitâche
Depuis partout
29

30. Body
Footer
Footer
Main Function
Back/CancelMore
Header: Title, Tab
30

31. Barre
de statut
Panneau de notification
Le panneau de notification apparait au glissement sur la barre de statut
31

32. Style:
Résolution, Orientation, T
hèmes, Icones, Couleurs, T
ypographie, Interaction
and Terminologie
05
06 Les interactions de base → 07 Les bibliothèques

33. WVGA (480x800) HD (720x1280)
2 résolutions supportées
Paysage
33

34. Dark ThemeLight Theme
2 thèmes sont disponibles
34

35. Icônes disponibles sur tizen.org
Une icône ronde représentative de l’application
35

36. La couleur dominante est un blanc ivoire pour une impression de confort
Winset color
36

37. Le texte principal utilise du texte en
noir à épaisseur maigre, tandis que le
sous texte utilise le texte gris à
épaisseur grasse.
Typos disponibles sur tizen.org
37

38. Pour chaque bouton, des statuts
différents (normal, appuyez sur et
inactif)
38

39.  Ne pas mettre en cause l’utilisateur
39
 Ton positif et bref
Éviter Préférer
Impossible de terminer la requête La requête ne peut aboutir
Erreur réseau Réseau indisponible
Démarrage de la synchronisation Synchronisation …
Le calendrier n’est pas accessible Calendrier indisponible
Éviter Préférer
Vous avez atteint le nombre maximum de dossiers Nombre max de dossiers atteints
Vous devez sélectionner pour ajouter une recette Ajouter recette

40. Interactions
06
07 Les bibliothèques

41. 30
Tizen supporte les interactions suivantes
Interaction Description
Touch Pour exécuter la fonction immédiatement au toucher
Tap Pour sélectionner un élément ou exécuter des fonctions
Double Tap Pour revenir au niveau de la vue par défaut en zoomant
Long Tap Pour ouvrir contexte spécifique menu des options. Dans l'écran d'accueil, pour passer en
mode édition
Swipe Pour faire défiler une liste ou d'articles. Aussi, à l'horizontale utilisée pour exécuter menu
rapide
Drag and drop Pour toucher, tenir, faire glisser un objet à l'endroit désiré en libérant un doigt.
Pinch Zoom in/out Pincez OPEN / CLOSE pour agrandir /
41

42. 2 modes d’affichages supportés par Tizen : Portrait et paysage
Portrait et vue paysage Portrait et vue paysage avec un “split screen”
42

43. Header: Title, Tab
Body
Footer
Footer
Fonctions principales
Retour / annulerPLus
43

44. Navigation avec Header, Footer(retour)
44

45. Header par défaut Header avec boutons
Tab
Tab avec titre
45

46. Typologies de Footer Footer avec segments
46

47. Liste d’items
Groupe de liste Liste d’index
Liste extensible
Liste en grille
47

48. Menu rapide sur une sélection uniqueEdition en Multi-selection
Sélectionner tout
Multiselection
48

49. Paramètres d’application Interface de contrôle pour les paramè
Statut
On/off Switch
Texte d’aide
Type “slider”
49

50. 39
Panneau de notification
 Plusieurs possibilités pour notifier l’utilisateur
Ticker notifications
Pop-up notifications
Badge
50

51.  Notification sur tâche en cours
 Boite pour notification d’évènement
51

52. • Titre si nécessaire
• “Fermer” et “ Plein écran”
• Redimensionnement et emplacement
Plein écran Mini fenêtre
52

53. Basculement Déplacement Redimensionnement
53

54. Bibliothèque / ressources
Design
07

55. Composant d’interface
• Header
• Footer
• Body
• Scroll
• Controls
• Text field
• Slider
• Picker
• Progress and process
• Pop-up
• Search
55

56. Disponible sur tizen.org
Composant
Icônes
Typos
56

57. Merci ! Des questions ?
57