Guidelines design & expérience utilisateur

Qui sommes-nous ?

3

Guillaume ABELUX Team leader

Yannick BONNIEUXSenior UX Designer

@ Ekino

Guillaume ABELUX Team leader

@MoreThanScreens

Yannick BONNIEUXSenior UX Designer

@yannickbonnieux

3

@ Ekino

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

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

Notre vision

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.

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

Avec Guidelines : Les avantages

Une interface consistante et uniforme

Éviter les problèmes fréquents

Créer une expérience positive

9

Sans guidelines : Les risques

Perdre les utilisateurs

Être critiqué

Perdre de l’argent

10

Guidelines : Suivre ou ne pas suivre ?

Parlez avec vos utilisateurs

Testez, testez et testez encore !

Faites-vous assister par un designer

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

Les 3 principes de base

Favoriser le Contenu

Focaliser l'Attention

Laisser le Contrôle

COMMENT LE CONTENU EST-IL FAVORISÉ ?

Des interfaces visibles, compréhensibles et accessibles

14

Favoriser le contenu

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

15

Favoriser le contenu

Le contenu est positionné en fonction de son importance

16

Favoriser le contenu

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

Scroll

17

Favoriser le contenu

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

COMMENT L'ATTENTION EST-ELLE FOCALISÉE ?

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

19

Focaliser l'attention

Les fonctionnalités majeures sont visibles rapidementLes fonctionnalités secondaires sont masquées

20

Focaliser l'attention

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

21

Focaliser l'attention

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

COMMENT LE CONTRÔLE EST-IL LAISSÉ À L'UTILISATEUR ?

Des interfaces optimisées, utilisables et intuitives

23

Laisser le contrôle

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

24

Laisser le contrôle

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

25

Laisser le contrôle

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

Vue d’ensemble de l’Interface utilisateur : Structure générale

04

05 Les styles → 06 Les interactions de base → 07 Les bibliothèques

28

Écran verrouillé Homescreen Application basique

Écrans généraux

29

Home tap Hold

Home screen Multitâche

Depuis partout

Bouton Home

30

Body

Footer

Footer

Main Function

Back/CancelMore

Application basique

Header: Title, Tab

31

Barre de statut

Panneau de notification

Le panneau de notification apparait au glissement sur la barre de statut

Barre de statut / Panneau de notification

Style: Résolution, Orientation, Thèmes, Icones, Couleurs, Typographie, Interaction and Terminologie

05

06 Les interactions de base → 07 Les bibliothèques

33

WVGA (480x800) HD (720x1280)

2 résolutions supportées

Paysage

Résolution / Orientation-écran

34

Dark Theme Light Theme

2 thèmes sont disponibles

Thème

35

Icônes disponibles sur tizen.org

Une icône ronde représentative de l’application

Icônes

36

La couleur dominante est un blanc ivoire pour une impression de confort

Winset color

Couleurs

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

Typography | TizenSans

38

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

Interaction

39

Ne pas mettre en cause l’utilisateur

Terminologie: Guide des libellés

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

Interactions06

07 Les bibliothèques

4130

Tizen supporte les interactions suivantes

Interaction tactile

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 /

42

2 modes d’affichages supportés par Tizen : Portrait et paysage

Portrait et vue paysage Portrait et vue paysage avec un “split screen”

Affichages

43

Header: Title, Tab

Body

Footer

Footer

Fonctions principales

Retour / annulerPLus

Basic application screen

44

Navigation avec Header, Footer(retour)

Navigation

45

Header par défaut Header avec boutons

Tab

Tab avec titre

Type de Header

46

Typologies de Footer Footer avec segments

Type de Footer

47

Liste d’itemsGroupe de liste Liste d’index

Liste extensible

Liste en grille

Body: Type de Liste

48

Menu rapide sur une sélection uniqueEdition en Multi-selection

Édition

Sélectionner tout

Multiselection

49

Paramètres d’application Interface de contrôle pour les paramètres

Statut

On/off Switch

Texte d’aide

Type “slider”

Paramètres

39

Panneau de notification

Plusieurs possibilités pour notifier l’utilisateur

Ticker notifications

Pop-up notifications

Badge

Notifications

50

51

Notification sur tâche en cours

Boite pour notification d’évènement

Notification dans le panneau de notif.

52

• Titre si nécessaire• “Fermer” et “ Plein écran”• Redimensionnement et emplacement

Plein écran Mini fenêtre

Multi fenêtrage

53

Basculement Déplacement Redimensionnement

Multi fenêtrage

Bibliothèque / ressources Design

07

Composant d’interface

• Header• Footer• Body• Scroll• Controls• Text field• Slider• Picker• Progress and process• Pop-up• Search

Bibliothèque Design

55

56

Disponible sur tizen.org Composant

Icônes

Typos

Ressources graphiques

Merci ! Des questions ?

57