Tizen DevLab - Design UX Guidelines par Ekino

871 vues

Publié le

Présentation des Design UX Guidelines par Ekino

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
871
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
21
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tizen DevLab - Design UX Guidelines par Ekino

  1. 1. Guidelinesdesign&expérienceutilisateur
  2. 2. Qui sommes-nous ?
  3. 3. Guillaume ABELUX Team leaderYannick BONNIEUXSenior UX Designer3@ EkinoGuillaume ABELUX Team leader@MoreThanScreensYannick BONNIEUXSenior UX Designer@yannickbonnieux3@ Ekino
  4. 4. 02 Pourquoi des Guidelines ?04 Vue densemble des UI06 Les interactions de base01 Notre vision de lUX03 Les principes de design05 Les Styles07 Les bibliothèquesSommaire
  5. 5. Notre vision du designdexpérience utilisateur0102 Pourquoi des Guidelines ? → 03 Les principes de design → 04 Vue densemble des UI → 05 Les styles → 06 Les interactions de base → 07 Les bibliothèques
  6. 6.  Comprendre les attentes non formulées desutilisateurs Faciliter les échanges entre les différents acteurs(Développeur, Graphiste, Client, Décideur, Marketeur) Concevoir, tester, améliorer, re-tester, etc.6
  7. 7. Pourquoi utiliser desGuidelines03 Les principes de design → 04 Vue densemble des UI → 05 Les styles → 06 Les interactions de base → 07 Les bibliothèques02
  8. 8.  Une interface consistante et uniforme Éviter les problèmes fréquents Créer une expérience positive8
  9. 9.  Perdre les utilisateurs Être critiqué Perdre de l’argent9
  10. 10.  Parlez avec vos utilisateurs Testez, testez et testez encore ! Faites-vous assister par un designer10
  11. 11. Les principes de designpour Tizen0304 Vue densemble des UI → 05 Les styles → 06 Les interactions de base → 07 Les bibliothèques
  12. 12.  Favoriser le Contenu Focaliser lAttention Laisser le Contrôle12
  13. 13. Des interfaces visibles, compréhensibles et accessibles
  14. 14. Le contenu principal est mis en avant(Couleur, graisse, taille de police, etc.)14
  15. 15. Le contenu est positionné en fonction de sonimportance15
  16. 16. Les informations essentielles sont mises au-dessus dela ligne de flottaisonScroll16
  17. 17. Lexpérience crée est plaisante et unique grâce à desprésentations graphiques et des interactions17
  18. 18. Des éléments présents, disponibles et cohérents
  19. 19. Les fonctionnalités majeures sont visibles rapidementLes fonctionnalités secondaires sont masquées19
  20. 20. Les informations secondaires sont affichées en fonctiondes requêtes de lutilisateur20
  21. 21. Leffort est minimisé et lusage est facilité21
  22. 22. Des interfaces optimisées, utilisables et intuitives
  23. 23. Lutilisateur est libre de customiser linterface selon sesgoûts23
  24. 24. Lusage et laccessibilité sont améliorés24
  25. 25. La saisie et les choix sont facilités grâce à desrecommandations et des suggestions25
  26. 26. Vued’ensembledel’Interfaceutilisateur:Structuregénérale0405 Les styles → 06 Les interactions de base → 07 Les bibliothèques
  27. 27. Écran verrouillé Homescreen Application basique28
  28. 28. Hometap HoldHome screen MultitâcheDepuis partout29
  29. 29. BodyFooterFooterMain FunctionBack/CancelMoreHeader: Title, Tab30
  30. 30. Barrede statutPanneau de notificationLe panneau de notification apparait au glissement sur la barre de statut31
  31. 31. Style:Résolution, Orientation, Thèmes, Icones, Couleurs, Typographie, Interactionand Terminologie0506 Les interactions de base → 07 Les bibliothèques
  32. 32. WVGA (480x800) HD (720x1280)2 résolutions supportéesPaysage33
  33. 33. Dark ThemeLight Theme2 thèmes sont disponibles34
  34. 34. Icônes disponibles sur tizen.orgUne icône ronde représentative de l’application35
  35. 35. La couleur dominante est un blanc ivoire pour une impression de confortWinset color36
  36. 36. Le texte principal utilise du texte ennoir à épaisseur maigre, tandis que lesous texte utilise le texte gris àépaisseur grasse.Typos disponibles sur tizen.org37
  37. 37. Pour chaque bouton, des statutsdifférents (normal, appuyez sur etinactif)38
  38. 38.  Ne pas mettre en cause l’utilisateur39 Ton positif et brefÉviter PréférerImpossible de terminer la requête La requête ne peut aboutirErreur réseau Réseau indisponibleDémarrage de la synchronisation Synchronisation …Le calendrier n’est pas accessible Calendrier indisponibleÉviter PréférerVous avez atteint le nombre maximum de dossiers Nombre max de dossiers atteintsVous devez sélectionner pour ajouter une recette Ajouter recette
  39. 39. Interactions0607 Les bibliothèques
  40. 40. 30Tizen supporte les interactions suivantesInteraction DescriptionTouch Pour exécuter la fonction immédiatement au toucherTap Pour sélectionner un élément ou exécuter des fonctionsDouble Tap Pour revenir au niveau de la vue par défaut en zoomantLong Tap Pour ouvrir contexte spécifique menu des options. Dans lécran daccueil, pour passer enmode éditionSwipe Pour faire défiler une liste ou darticles. Aussi, à lhorizontale utilisée pour exécuter menurapideDrag and drop Pour toucher, tenir, faire glisser un objet à lendroit désiré en libérant un doigt.Pinch Zoom in/out Pincez OPEN / CLOSE pour agrandir /41
  41. 41. 2 modes d’affichages supportés par Tizen : Portrait et paysagePortrait et vue paysage Portrait et vue paysage avec un “split screen”42
  42. 42. Header: Title, TabBodyFooterFooterFonctions principalesRetour / annulerPLus43
  43. 43. Navigation avec Header, Footer(retour)44
  44. 44. Header par défaut Header avec boutonsTabTab avec titre45
  45. 45. Typologies de Footer Footer avec segments46
  46. 46. Liste d’itemsGroupe de liste Liste d’indexListe extensibleListe en grille47
  47. 47. Menu rapide sur une sélection uniqueEdition en Multi-selectionSélectionner toutMultiselection48
  48. 48. Paramètres d’application Interface de contrôle pour les paramèStatutOn/off SwitchTexte d’aideType “slider”49
  49. 49. 39Panneau de notification Plusieurs possibilités pour notifier l’utilisateurTicker notificationsPop-up notificationsBadge50
  50. 50.  Notification sur tâche en cours Boite pour notification d’évènement51
  51. 51. • Titre si nécessaire• “Fermer” et “ Plein écran”• Redimensionnement et emplacementPlein écran Mini fenêtre52
  52. 52. Basculement Déplacement Redimensionnement53
  53. 53. Bibliothèque / ressourcesDesign07
  54. 54. Composant d’interface• Header• Footer• Body• Scroll• Controls• Text field• Slider• Picker• Progress and process• Pop-up• Search55
  55. 55. Disponible sur tizen.orgComposantIcônesTypos56
  56. 56. Merci ! Des questions ?57

×