univ

Interface utilisateur
Version béta (fin décembre)

Projet proposé par l’agence fivenodes

 Règles générales appliquées à l’interface utilisateur
Global 3
Information 3
Graphique 3
Animation (visuelle & sonore) 3
Charte graphique
Éléments fondamentaux de l’interface 5
Éléments de l’interface 6
Éléments de la map 7
Couleurs et polices 8
Navigation et interaction
Principes d’entrée / sortie 9
Récapitulatif de toutes les actions 10
Description des écrans de l’interface
Écran : Choix du projet 12
Écran : Nouveau projet 13
Écran : List 14
Écran : Mail 15
Écran : Tasks 16
Écran : Map 17
Écran : Map - focus noeud enfant 18
Écran : Map - Affichage de plus de 5 bulles 19
Écran : Map - noeud petit enfant (survol enfant) 20
Écran : map - plus ouvert (ajout de bulle) 21
Écran : Nouveau fichier 22
Écran : Nouvelle tâche 23
Écran : Affichage fichier 24
Écran : Commentaires fichiers 25
Ecran : Commentaire de tâche 26

2 univ - interface utilisateur

 Règles générales appliquées à l’interface utilisateur
Le projet UNIV est né de notre propre expérience des plate-formes collaboratives Graphique
et des outils de gestion de projet existant.
Élément 1 : Contraste information/contenu. L’information concernant l’interface
Voici une liste des prérogatives que nous suivrons lors de la conception et de la doit être parfaitement dissociable du contenu présenté.
réalisation de notre projet :
Élément 2 : Priorité donnée au contenu. Même si l’information doit rester acces-
Global sible, l’utilisateur doit avoir une maximum d’espace pour exploiter le contenu.

Élément 1 : L’accessibilité enfantine. Tous les éléments de l’interface doivent être
captés en un coup d’oeil et compris rapidement.
Élément 2 : Unicité. Chaque écran est destiné à une seule fonctionnalité et dé-
bouche sur un résultat à portée unique. Sous réserve du rôle de l’utilisateur.
Élément 3 : Persistance. Si des éléments similaires dans leur fonction et/ou dans
leur usage sont présents sur plusieurs écrans, ils doivent être placés et organisés
de la même manière.
Élément 4 : Proximité. Nous sommes dans un navigateur, la règle est donc la na-
vigation hypertexte ou hypermedia. Les déclencheurs d’événements doivent être
proches des actions déclenchées.
Animation (visuelle & sonore)
Élément 1 : L’animation est au service de la compréhension. L’animation est utile
si elle apporte des éléments de compréhension à l’utilisateur sur l’action en cours.
Élément 2 : Dynamiser l’interface. L’animation permet de focaliser l’utilisateur sur
les éléments importants présents à l’écran.
Élément 3 : Proportionnalité. Chaque animation doit signifier l’ampleur de l’action à
laquelle elle se rapporte.
Élément 4 : Liberté d’usage. Toute animation, qu’elle soit visuelle ou sonore, doit
pouvoir être désactivée.

Élément 5 : Action >> sauvegarde. Toute action doit être immédiatement sauvegar-
dée, tout en pouvant être annulée.

Information
Élément 1 : Contextualisation. Toute information doit être liée à son environnement,
afin d’être plus facilement comprise.

Élément 2 : Focalisation. L’interface met en valeur l’information en fonction de son

importance et de sa fréquence d’utilisation. Elle doit être capable de dégager les
principaux axes du projet.
 Charte graphique
Cette section a pour rôle de monter l’ensemble des éléments de définitions graphique du projet univ.
Ci-dessous se trouve un petit aperçu de l’interface utilisateur.

univ node
map list tasks mails

bulle niveau
node 1

5
bulle niveau
node 1 .ai bulle niveau
file 1
+

bulle niveau
node 0

5 5
bulle niveau
task 1 bulle file
niveau
univ 1

User1 - Graphiste my tasks My account Log out

4 univ - interface utilisateur

 univ Titre de la page
Éléments fondamentaux de l’interface map list tasks mails

Partie haute
noeud
bulle niveau
de parent
-1(80px)
l’écran

univ Titre de la page map list tasks mails

noeud
bulle parent
niveau -1 bullefichier
niveau 1
univ

Identification du nom de la plate-forme Boutons d’accès aux différentes

5 parties de l’interface.
bulle niveau
noeud 1
enfant .ai bulle niveau
fichier 1 Le bouton griser correspond à
l’écran sur lequel est l’utilisateur.
+ 5
bullefichier
niveau 1
univ

La barre «my tasks» affiche l’ensemble bulle

des niveau
noeud 0 sont assignées au membre connecté.
central
tâches qui La dernière tâche est plus ou
Sa hauteur s’adapte en fonction de la longeur des tâches. La hauteur max correspond à la moins proche de la flèche en
moitié de l’écran. si une tâche est trop longue, elle est abrégée avec 3 petits points. fonction de sa longeur
5
bulle niveau
noeud 1
enfant .ai bulle niveau
fichier 1
+

1 k2 3 4 5 6 noeud
bulle niveau 7 0 k8
central 9 5 10 11 12 13
sk s sk sk sk sk sk s sk sk sk sk sk
Ta Ta Ta Ta Ta bulle T
niveau 1
noeud a
enfant Ta Tabulle niveau T
tâche 1a Ta Ta Ta Ta

icôneUser1
nom -de
Graphiste
l’utilisateur rôle de l’utilisateur Accès à ses my taskspersonnelles
tâches Gestion deMy account
compte Log out
et déconnexion
5
bulle niveau
noeud 1
enfant bulle niveau
tâche 1

User1 - Graphist my tasks My account Log out

barre des
univ - interface utilisateur tâches (30px) 5
 Éléments de l’interface

L’inspecteur permet de capter un maximum d’informations sur la bulle en question,

sans avoir à quitter la map, de sorte à limiter le nombre de changement de page.
Il se divise en deux parties : La première détaille les informations sur la bulle et la
deuxième donne accès aux actions relatives à la bulle, y compris les primaires et
secondaires.

Il est possible de renommer une bulle en cliquant directement sur son nom dans
l’inspecteur, de même qu’il est possible changer les dates ou le statut d’une tâche.
Les modifications sont effectives immédiatement.
bouton de la page projet

11/11/09 12/11/09
Task 1 : exemple

assigned to : User1
titre inspecteur
pending done validate
Actions
Open in tasks élément de liste

Go to comments
Move
champ texte large
Delete

champ texte

bouton

6 univ - interface utilisateur

 Éléments de la map
180 px
160 px
140 px
120 px

mini-bulle noeud centrale : 16x16 px

45 px noeud parent
mini-bulle noeud enfant : 14x14 px

mini-bulle noeud petit enfant : 12x12 px

5 comentaires noeud enfant : h 14 px

5 commentaires noeud petit enfant : h 12 px

40 px bulle niveau
noeud 0
central

5 5 5
35 px bulle niveau
noeud 1
enfant bulle niveau
tâche 1 bullefichier
niveau 1
univ .ai bulle niveau
fichier 1

5 5 5
30 px bullenoeud petit
niveau 2 bulle niveau
tâche 2 bullefichier
niveauuniv2 .ai bulle niveau
fichier 2
enfant

Les éléments de la charte graphique sont destinés à avoir une taille fixe quelque soit
la résolution. Cela veut dire qu’ils auraient pu être réalisés en bitmap. Néanmoins et
malgré la charge de travail en plus, nous avons décidé de les réaliser en vectoriel
(sur Illustrator), afin de nous laisser une part de liberté en phase de réalisation. Il
serait très dommageable de devoir repartir de 0 pour un problème de proportion
mal défini au départ. La deuxième raison concerne aussi la réalisation, mais cette
fois c’est l’intégration dans flash qui est grandement facilitée, notamment grâce à
la synergie de la suite CS4. Flash, rappelons le, est une application qui permet de
manipuler principalement du vectoriel. Ces choix paraissent pertinents dans le cas
de la map, un des points clés du projet, qui sera animé uniquement sous flash.

univ - interface utilisateur 7

 Couleurs et polices

Elément Couleur Elément Couleur Elément Taille Police

(hexa) (hexa)

Bulle Noeud 74c4e4 Icône Ecrans 5298cb Titre Plateforme 37pt ITC Avant Garde Gothic LT Extra Light

Bulle Tâche ffb257 Icône Ecran active 747474 Titre header 24pt ITC Avant Garde Gothic LT Book

Bulle Fichier 7dcf89 Bouton My Tasks 3e3e3e Titre icône 12pt ITC Avant Garde Gothic LT Book

Bulle Fichier univ 7dcf89 Footer User1 - Domaine 12pt ITC Avant Garde Gothic LT Book

Liaison noir Bloc Inspecteur Titre 4d4d4d Footer Options 12pt ITC Avant Garde Gothic LT Book

Bulle + 75c1f7 Bloc Inspecteur Contenu b3b3b3

Nouveau fichier 4abc5c Bloc général de contenu ffffff List Contenu 16pt Myriad Pro

Nouvelle tâche ff900d Ligne de séparation Bloc f2f2f2 List Inspecteur Titre 18pt Myriad Pro

Nouveau noeud 50b0f6 Sélection dans le Bloc e6e6e6 List Inspecteur Contenu 16pt Myriad Pro

Icône commentaire b3c1c9 Flèche développement 808080,000 Myriad Pro

Icône Bulle masquée ff1611 Header Tasks ace3fb Demande Task contenu 16pt Myriad Pro

Icône dans les bulles 666666,000

Ascenseur 6b6b6b

Fond général a2e0fa

Header noir

Header 2 3d3d3d

Footer noir

8 univ - interface utilisateur

 Navigation et interaction

Principes d’entrée / sortie

bulle niveau
noeud 0
central
Le centre névralgique de la plate-forme, la map, est aussi l’endroit où l’on peut dé-
clancher le plus d’actions, que se soit pour consulter, organiser, modifier ou créer.
Il est donc important de hiérarchiser clairement ces actions en fonction de leur im-
portance. On aura, par exemple, naturellement envie, quand on clique sur une bulle, Action primaire
que le contenu de celle-ci s’affiche à l’écran sans autres opérations.
Action secondaire
Le cadre de la fenêtre du navigateur, nous impose quelques limitations. Il faut donc
penser que l’utilisateur exécute la plate-forme dans un environnement graphique et
fonctionel versatile. Il faut tout de même que l’utilisation ne soit pas trop différente,
entre le moment où il charge un favori et celui où il crée un nouveau document sur
univ. Autre élément gênant, le clique droit pour des raisons techniques (gestion
cahotique selon les navigateurs, ainsi que dans flash) et ergonomiques est peu 5
envisageable.
bulle niveau
tâche 1
3 types d’actions se dégagent :

• Action primaire : un clique suffit, c’est l’action estimée comment prioritaire sur
un élément. Action primaire
• Action secondaire : au clique sur la mini-bulle ou la bulle de commentaire. Action secondaire
• Action information/gestion : lorsque l’on survole une bulle, apparaît en des-
sous un petit bouton qui permet d’ouvrir l’inspecteur (détaillé dans la charte
graphique). Lorsque l’on survole un noeud enfant, les petits enfants apparaissent
en plus de ce bouton.

On peut voir que chaque action engeandrant, soit une modification de contenu,
soit un changement d’écran, doit être clairement voulue par l’utilisateur (nécessité
du clique). Au survol bulle niveau
noeud 0
central

more infos

Action contenu/gestion

univ - interface utilisateur 9

 Récapitulatif de toutes les actions

Bulle Action principale Action secondaire Action tertiaire

Noeud central Afficher/Masquer tous les icône + : nouvelle bulle ouvrir, supprimer, renommer, déplacer
enfants (noeud, fichier univ, fichier
‘normal’, tache)

icône commentaire : Lien

vers les commentaires
correspondant dans la
partie MAIL

Noeud parent revenir au noeud ouverture de tous ses supprimer, déplacer

supérieur (le parent enfants
devient noeud central)

Noeud enfant accès au niveau inférieur focus sur le noeud + supprimer, déplacer
(l’enfant devient noeud ouverture de tous des
central enfant

Tâche enfant Lien correspondant vers Lien vers les ouvrir, supprimer, renommer, déplacer, cocher fait, cocher
la partie TASK commentaires en cours, cocher validé (responsable uniquement)
correspondant

Fichier enfant Télécharger Lien vers les ouvrir, supprimer, renommer, déplacer.
commentaires
correspondant

Fichier UNIV Ouvrir le module Lien vers les ouvrir, supprimer, renommer, déplacer.
correspondant commentaires
correspondant

10 univ - interface utilisateur

 Description des écrans de l’interface

univ
Username Password

Connect Pwd request

New account
Don’t you have an account UNIV yet ?
Subscribe now !

univ - interface utilisateur 11

 Écran : Choix du projet

univ
Welcome Mr User
Choose a project

univ monkey

12 univ - interface utilisateur

 Écran : Nouveau projet

univ
Welcome Mr User
Create a new project

name

description

members add
actual members : Paul, Romain

Create

univ - interface utilisateur 13

 Écran : List

assensseur vertical

liste des éléments liste des éléments des enfants liste des éléments informations sur un élément
des parents des petits enfants sélectionné

Rendu graphique

règlage de la largeur
univ noeud niveau 2
map list tasks mails
de la zone de liste
assensseur horizontal
Dans ce noeud

Noeud niveau 0 Noeud niveau 1 Fichier niveau 2 Vos tâches :

- Tâche 1
Noeud niveau 1 Fichier niveau 2 - Tâche 2

Gabarit Fichier niveau 1 Tâche niveau 2 - Tâche 3

Tâche niveau 1 Fichier niveau 2 Les demandes en cours :

- Demande 1
Noeud niveau 1 Fichier niveau 2 - Demande 2
Noeud niveau 2
Fichier niveau 2 Propriétés
Noeud niveau 2
Noeud niveau 2

noeud principal
noeud vérrouillé
supprimé

User1 - Graphiste my tasks My account Log out

14 univ - interface utilisateur

 Écran : Mail
message non lu Mails

date contributors bubble name

date1 user1 nom de la bulle 1
date2 user1, user2 nom de la bulle 2
date3 user1, user2, users3 nom de la bulle 3

date de dernière nom du noeud auquel

modification la conversation se reporte

tous les participants

de la conversation

Rendu graphique
assensseur
vertical
univ mails
map list tasks mails

date contributors bubble name

date 1 user 1 Task 1

date 2 user 1, user 2 Node 1

Gabarit date 3
date 4
user 1, user 3
user 1, user 2, user 4
File univ 1

File 1
date 5 user 1, user 5 Task 5

User1 - Graphiste my tasks My account Log out

univ - interface utilisateur 15

 Écran : Tasks
permet d’ouvrir un répertoire de tache Ligne des dates

Tâches date1 date2 date3

noeud
tâche
tâche
noeud
tâche
tâche
tâche
noeud

ascenseur
vertical
Rendu graphique

univ tasks
map list tasks mails
réglette zoom + - (jour, semaine, mois...) ascenseur hozirontal
Tasks december 2009 january 2010

node 1
task 1

Gabarit
task 2

node 2

node 3

User1 - Graphiste my tasks My account Log out

16 univ - interface utilisateur

 Écran : Map

bulle niveau 1

bulle niveau 1 bulle niveau 1

+

bulle niveau 0

Rendu graphique
bulle niveau 1 bulle niveau 1

univ node
map list tasks mails

Gabarit bulle niveau

node 1

5
bulle niveau
node 1 .ai bulle niveau
file 1
+

bulle niveau
node 0

5 5
bulle niveau
task 1 bulle file
niveau
univ 1

User1 - Graphiste my tasks My account Log out

univ - interface utilisateur 17

 Écran : Map - focus noeud enfant

bulle niveau -1

bulle niveau 1

bulle niveau 1 bulle niveau 1

+

bulle niveau 0

Rendu graphique
bulle niveau 1 bulle niveau 1

univ node
map list tasks mails

node -1
bulle niveau

Gabarit
5
bulle file
niveau
univ 1

5
bulle niveau
node 1 .ai bulle niveau
file 1
+

bulle niveau
node 0

5
bulle niveau
node 1 bulle niveau
task 1

User1 - Graphiste my tasks My account Log out

18 univ - interface utilisateur

 Écran : Map - Affichage de plus de 5 bulles

bulle niveau -1

bulle niveau 1
bulle niveau 1 bulle niveau 1

bulle niveau 1 bulle niveau 1

+

bulle niveau 0

bulle niveau 1 bulle niveau 1

Rendu graphique
bulle niveau 1 bulle niveau 1

univ map list tasks mails

noeud
bulle parent
niveau -1

Gabarit
5
5 bullefichier
niveau 1
univ
bulle niveau
tâche 1 bulle niveau
noeud 1
enfant

Il est à noter que si il y a trop de noeud, nous prévoyons que quand la souris passe bulle niveau
noeud 1
enfant .ai bulle niveau
fichier 1
+
sur un noeud, les autres qui le caches se dégage au dessus et en dessous.
bulle niveau
noeud 0
central

5
.ai bulle niveau
fichier 1 bulle niveau
noeud 1
enfant

5
bulle niveau
noeud 1
enfant bulle niveau
tâche 1

univ - interface utilisateur 19

 Écran : Map - noeud petit enfant (survol enfant)

bulle niveau 2

bulle niveau 1 bulle niveau 2

bulle niveau 1 bulle niveau 2 bulle niveau 1

+

bulle niveau 0
bulle niveau 2

bulle niveau 2

Rendu graphique
bulle niveau 1 bulle niveau 1

univ noeud enfant

map list tasks mails

noeud
bulle parent
niveau -1

5
bullefichier
niveauuniv2

Gabarit
5
bulle niveau
noeud 1
enfant .ai bulle niveau
fichier 2

5 5
.ai bulle niveau
fichier 1 bulle niveau
tâche 2 bulle niveau
noeud 1
enfant

bulle niveau
noeud 0
central
bullenoeud petit
niveau 2
enfant
5
.ai bulle niveau
fichier 2

5 5
bullefichier
niveau 1
univ bulle niveau
tâche 1

User1 - Graphiste my tasks My account Log out

20 univ - interface utilisateur

 Écran : map - plus ouvert (ajout de bulle)

bulle niveau 1

noeud

e
bulle niveau 1 bulle niveau 1

ch
tâ
+ fichier

bulle niveau 0

fic
hi
er
un
iv
Rendu graphique
bulle niveau 1 bulle niveau 1

univ node map list tasks mails

Gabarit bulle niveau

node 1

node
5

k s
ta
bulle niveau
node 1 .ai bulle niveau
file 1
+ file

bulle niveau
node 0

fil
e
un
iv
5 5
bulle niveau
task 1 bulle file
niveau
univ 1

User1 - Graphiste my tasks My account Log out

univ - interface utilisateur 21

 Écran : Nouveau fichier
New file

file upload this file transfert de fichier

chemin du fichier

Rendu graphique

univ add new file

map list tasks mails

envoi du fichier save cancel retour à la map

Gabarit
file univ.jpg upload
file

The file univ.jpg has been added into Noeud1.

Save Cancel

User1 - Graphiste my tasks My account Log out

22 univ - interface utilisateur

 Écran : Nouvelle tâche

New task

name :

begining : end :

receivers : role1 role3

ouvre le calendrier direct
coche ou user1 calendrier
décoche role4
user2
user3 all
role2
permet d’assigner à tout le monde

Rendu graphique

univ add new task

map list tasks mails
assigne la tache send task cancel retour à la map

Gabarit name Icônes

beginning
end

receivers role 1 role 2

user 1 role 4
user 2
all
user 3
role 3

Save Cancel

User1 - Graphiste my tasks My account Log out

univ - interface utilisateur 23

 Écran : Affichage fichier

nom du fichier

Older versions Latest version Informations

description du fichier

date1 Logo du fichier

date2
date0 charge une
télécharge la dernière version du fichier. nouvelle version
date3
Pour télécharger une ancienne version,
il faut d’abord cliquer dessus
du fichier
Rendu graphique
accès à la page des
assensseur
commentaires en
vertical
relation avec toutes Download Upload Cancel
les versions d’un fichier
univ file.ai
map list tasks mails

Comments (nombre de commentaire)

This file

Older versions Latest version Informations

Gabarit Fichier contenant tous les gabarits de réalisation de

la plateforme univ. Chaque calque est spécifié par
un nom, et chaque calque contient un élément
précis.
23.05.09
file

23.05.09

24.05.09
23.05.09 file.ai

Download Upload

Comments (12)

User1 - Graphiste my tasks My account Log out

24 univ - interface utilisateur

 Écran : Commentaires fichiers

nom du fichier

nom du du
nom fichier
fichier zone cliquable

zone de commentaire

zone d’ajout de mots Add

Liste de commentaires
datée
Post comment

assensseur
ajout d’utilisateur Rendu graphique
vertical
univ file.ai
map list tasks mails

Comments (nombre de commentaire)

This file

Gabarit C’est l’histoire d’un jeune berger, qui avait un mouton se pré-
nommant Paul. Paul était très spécial car il tirait la barbichette
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09

C’est l’histoire d’un jeune berger, qui avait un mouton se pré-

file la barbichette
nommant Paul. Paul était très spécial car il tirait
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09

C’est l’histoire d’un jeune berger, qui avait un mouton se pré-

nommant Paul. Paul était très spécial car il tirait la barbichette add
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09 tags : Paul, Romain

Post comment
C’est l’histoire d’un jeune berger, qui avait un mouton se pré-
nommant Paul. Paul était très spécial car il tirait la barbichette
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09

Comments (12)

User1 - Graphiste my tasks My account Log out

univ - interface utilisateur 25

 Ecran : Commentaire de tâche

nom du fichier

date de début et date de fin

personne(s) assignée(s)
statut de la tache (fait, en cours, validé)

Liste de commentaires
datée zone de commentaire

Rendu graphique
assensseur
zone d’ajout de mots Add
vertical

Post comment univ task

map list tasks mails

Comments (nombre de commentaire) ajout d’utilisateur

This task : To do the graphic design for the header and the footer

Gabarit
C’est l’histoire d’un jeune berger, qui avait un mouton se pré-
nommant Paul. Paul était très spécial car il tirait la barbichette 11/11/09 12/11/09
Task 1 : exemple
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09 pending done validate

C’est l’histoire d’un jeune berger, qui avait un mouton se pré-

file la barbichette
nommant Paul. Paul était très spécial car il tirait
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09

C’est l’histoire d’un jeune berger, qui avait un mouton se pré-

nommant Paul. Paul était très spécial car il tirait la barbichette
de tous ses camarades moutons.
User 1 - Graphist - le 10/09/09

C’est l’histoire d’un jeune berger, qui avait un mouton se pré- add
nommant Paul. Paul était très spécial car il tirait la barbichette
de tous ses camarades moutons. tags : Paul, Romain
User 1 - Graphist - le 10/09/09
Post comment

User1 - Graphiste my tasks My account Log out

26 univ - interface utilisateur