1
00:00:00,000 --> 00:00:04,114
[MUSIQUE]

2
00:00:04,114 --> 00:00:07,200
Parlons maintenant de la navigation.

3
00:00:07,200 --> 00:00:12,980
Qu' est-ce que la navigation, pourquoi la navigation est-elle importante pour votre site Web ?

4
00:00:12,980 --> 00:00:16,820
Et comment fournissez-vous des informations de navigation sur votre site Web ?

5
00:00:16,820 --> 00:00:22,264
Donc, voilà la question à laquelle nous allons essayer de répondre dans cette conférence particulière.

6
00:00:23,746 --> 00:00:27,058
La première question évidente qui vous vient à l'esprit est,

7
00:00:27,058 --> 00:00:30,500
pourquoi avons-nous besoin d'avoir une navigation sur le site Web ?

8
00:00:30,500 --> 00:00:34,680
Comme vous le savez, la plupart des sites Web ne sont plus des pages simples.

9
00:00:34,680 --> 00:00:37,840
Bien sûr, il existe des sites web d'une seule page

10
00:00:37,840 --> 00:00:42,500
comme la page de votre professeur dans votre département d'informatique.

11
00:00:42,500 --> 00:00:47,450
Mais la plupart des sites Web contiennent généralement plus d'une page.

12
00:00:47,450 --> 00:00:52,080
Comme nous l'avons vu avec notre site Web de confusion que nous construisons,

13
00:00:52,080 --> 00:00:56,300
nous avons déjà ajouté une deuxième page appelée page aboutus.html.

14
00:00:56,300 --> 00:01:01,100
Maintenant, la façon dont nous avons navigué vers la page aboutus.html était de

15
00:01:01,100 --> 00:01:06,259
taper explicitement cela dans la barre d'adresse de notre navigateur.

16
00:01:06,259 --> 00:01:11,300
Mais c'est une façon très gênante de naviguer vers votre site Web.

17
00:01:12,380 --> 00:01:17,685
Il serait beaucoup plus logique de fournir aux

18
00:01:17,685 --> 00:01:21,125
utilisateurs un moyen intuitif de naviguer vers votre site Web.

19
00:01:21,125 --> 00:01:26,535
Ce moyen intuitif pourrait être fourni par de nombreuses approches différentes, la

20
00:01:26,535 --> 00:01:32,972
barre de navigation étant l'une des méthodes les plus courantes pour indiquer cette information.

21
00:01:32,972 --> 00:01:37,342
Par conséquent, nous allons examiner plusieurs façons courantes de fournir des

22
00:01:37,342 --> 00:01:41,392
modèles de navigation sur des sites Web typiques.

23
00:01:41,392 --> 00:01:46,656
Dans ce contexte, on entend souvent parler de l'architecture de l'information.

24
00:01:46,656 --> 00:01:51,458
L' architecture de l'information commence par la structure du système,

25
00:01:51,458 --> 00:01:55,879
par rapport à la façon dont l'information est organisée, étiquetée.

26
00:01:55,879 --> 00:02:01,340
Et la navigation est assurée à travers le contenu ou à travers ces informations.

27
00:02:01,340 --> 00:02:05,240
Maintenant, l'architecture de l'information, à elle seule, est un grand domaine.

28
00:02:05,240 --> 00:02:09,375
Il est au-delà du cadre de ce cours de couvrir les architectes de l'information.

29
00:02:09,375 --> 00:02:14,475
Mais, dans le cas où vous êtes intéressé à organiser et

30
00:02:14,475 --> 00:02:18,145
fournir des informations aux utilisateurs via, par exemple, des

31
00:02:18,145 --> 00:02:23,067
sites Web, alors je vous ai fourni quelques liens dans les ressources supplémentaires

32
00:02:23,067 --> 00:02:27,727
que vous pouvez aller et lire pour plus de connaissances.

33
00:02:27,727 --> 00:02:30,317
Mais dans tous les cas, lorsque vous concevez un site Web,

34
00:02:30,317 --> 00:02:35,887
il est important de comprendre la nécessité de

35
00:02:35,887 --> 00:02:41,697
concevoir les structures de navigation de l'information au sein de votre site Web.

36
00:02:43,930 --> 00:02:48,970
Et cette organisation de l'information dans votre site Web dicte également les

37
00:02:48,970 --> 00:02:53,545
types d'aides à la navigation que vous fournissez sur votre site Web, et en

38
00:02:53,545 --> 00:02:57,280
fonction de la façon dont ces informations sont organisées.

39
00:02:57,280 --> 00:03:02,300
En règle générale, un site Web est organisé d'une sorte d'arbre structuré ou

40
00:03:02,300 --> 00:03:04,630
hiérarchique.

41
00:03:04,630 --> 00:03:07,359
Et cela vous dicte automatiquement

42
00:03:07,359 --> 00:03:11,913
comment vous conceviez le support de navigation au sein de votre site Web.

43
00:03:11,913 --> 00:03:16,737
L' utilisation d'une barre de navigation, de chapelure et

44
00:03:16,737 --> 00:03:22,405
d'autres moyens de navigation sont très, très essentiels pour

45
00:03:22,405 --> 00:03:29,760
permettre aux utilisateurs de voir différentes parties de votre site Web.

46
00:03:29,760 --> 00:03:35,150
Lorsque vous visitez la plupart des sites Web, vous recherchez souvent la barre de navigation.

47
00:03:35,150 --> 00:03:40,080
Il s'agit d'une sorte de barre qui est généralement attachée en haut

48
00:03:40,080 --> 00:03:45,570
du site Web, ou parfois en bas du site, ou parfois sur le côté,

49
00:03:45,570 --> 00:03:50,865
qui vous fournit suffisamment de pointeurs vers le type

50
00:03:50,865 --> 00:03:56,365
d'information auquel vous pouvez accéder sur ce site.

51
00:03:56,365 --> 00:04:01,095
Ainsi, votre barre de navigation contiendra généralement des liens vers diverses pages qui

52
00:04:01,095 --> 00:04:04,615
font partie de votre site Web.

53
00:04:04,615 --> 00:04:09,425
Donc, une barre de navigation typique, comment allez-vous concevoir cela ?

54
00:04:09,425 --> 00:04:13,085
Lorsque vous concevez une barre de navigation typique, vous devez évidemment

55
00:04:14,360 --> 00:04:19,500
garder à l'esprit quelques choses à faire et à ne pas savoir comment vous concevez des barres de navigation.

56
00:04:19,500 --> 00:04:23,870
Tout d'abord, vous utilisez des

57
00:04:23,870 --> 00:04:28,960
termes conviviaux et simples dans votre barre de navigation pour indiquer les différents liens

58
00:04:28,960 --> 00:04:34,900
que les utilisateurs peuvent suivre dans votre site Web pour atteindre des informations.

59
00:04:34,900 --> 00:04:37,070
Vous devez fournir une navigation normalisée, de sorte

60
00:04:37,070 --> 00:04:41,090
que, partout où l'utilisateur se trouve dans la hiérarchie de votre site Web,

61
00:04:41,090 --> 00:04:46,590
il sache toujours comment revenir à la page d'accueil, comment passer à la suivante

62
00:04:46,590 --> 00:04:50,760
, précédente ou de haut en bas de la hiérarchie d'une sorte ou d'une autre.

63
00:04:50,760 --> 00:04:54,670
Donc, indiquer l'emplacement de l'utilisateur

64
00:04:54,670 --> 00:04:59,910
dans la hiérarchie de votre site Web est très, très utile

65
00:04:59,910 --> 00:05:04,790
pour fournir une façon conviviale de naviguer sur vos sites Web.

66
00:05:04,790 --> 00:05:09,345
En outre, il existe certaines conventions standard que les gens suivent

67
00:05:09,345 --> 00:05:12,365
lorsque ces barres de navigation sont conçues.

68
00:05:12,365 --> 00:05:17,515
En règle générale, lorsque vous avez le logo de votre site Web ou de

69
00:05:17,515 --> 00:05:23,832
votre entreprise inclus dans votre barre de navigation, un clic sur ces logos ou

70
00:05:23,832 --> 00:05:29,177
un bouton d'accueil devrait vous ramener au niveau supérieur de la hiérarchie ou de

71
00:05:29,177 --> 00:05:33,711
la page d'accueil de votre site Web, généralement la page index.html.

72
00:05:33,711 --> 00:05:38,817
Certaines des choses à ne pas garder à l'esprit est que vous ne devriez pas avoir trop de

73
00:05:38,817 --> 00:05:41,457
choix dans votre barre de navigation.

74
00:05:41,457 --> 00:05:43,225
Combien est trop ?

75
00:05:43,225 --> 00:05:48,470
Si vous trouvez que la navigation à l'aide de vos barres de navigation est trop lourde,

76
00:05:48,470 --> 00:05:52,240
cela signifie qu'il y a trop d'options dans votre barre de navigation.

77
00:05:52,240 --> 00:05:58,010
Fournissez un ensemble raisonnable de choix dans votre barre de navigation afin que vous puissiez

78
00:05:58,010 --> 00:06:04,659
indiquer les instructions que l'utilisateur peut suivre pour naviguer sur votre site Web.

79
00:06:05,880 --> 00:06:11,230
Et lorsque vous utilisez ces éléments de navigation dans votre barre de navigation,

80
00:06:11,230 --> 00:06:17,090
n'utilisez pas d'étiquettes génériques, utilisez des étiquettes significatives.

81
00:06:17,090 --> 00:06:22,159
Par exemple, si vous placez une étiquette nommée « produit » dans votre

82
00:06:22,159 --> 00:06:28,630
barre de navigation, les gens seront confus quant à ce que vous entendez par produit.

83
00:06:28,630 --> 00:06:32,650
Ou disons, si vous mettez un service dans votre barre de navigation, ils peuvent être confus.

84
00:06:32,650 --> 00:06:34,780
Quel type de service offrez-vous ?

85
00:06:34,780 --> 00:06:38,790
Il sera plus significatif de donner un terme plus descriptif

86
00:06:38,790 --> 00:06:43,710
dans vos en-têtes de votre barre de navigation.

87
00:06:43,710 --> 00:06:46,380
Un autre moyen de fournir la navigation aux

88
00:06:46,380 --> 00:06:50,030
utilisateurs est de fournir ce qu'on appelle la chapelure.

89
00:06:50,030 --> 00:06:55,895
Ils sont généralement fournis quelque part dans cette page,

90
00:06:55,895 --> 00:07:00,737
typique vers le bord supérieur de la page Web,

91
00:07:00,737 --> 00:07:04,954
plus près de l'en-tête de cette page Web.

92
00:07:04,954 --> 00:07:10,513
La chapelure indique une sorte de

93
00:07:10,513 --> 00:07:16,255
hiérarchie de navigation dans laquelle vous êtes actuellement sur votre site Web.

94
00:07:16,255 --> 00:07:21,595
Cela fournit donc une option de navigation secondaire pour votre site Web.

95
00:07:21,595 --> 00:07:26,185
Donc, cela pourrait être placé quelque part en dessous de la navigation principale.

96
00:07:26,185 --> 00:07:32,082
Il peut indiquer la hiérarchie des pages à travers lesquelles vous avez passé.

97
00:07:32,082 --> 00:07:36,687
Et l'emplacement actuel peut être mis en évidence spécifiquement dans

98
00:07:36,687 --> 00:07:38,727
la chapelure là-bas.

99
00:07:38,727 --> 00:07:43,708
Ainsi, diverses façons dont les gens peuvent utiliser la chapelure

100
00:07:43,708 --> 00:07:48,588
comprennent la fourniture d'une navigation basée sur le chemin.

101
00:07:48,588 --> 00:07:53,558
Par exemple, si un utilisateur passe par une série d'étapes pour

102
00:07:53,558 --> 00:07:59,358
effectuer une tâche sur votre site Web, par exemple, réserver un billet d'avion.

103
00:07:59,358 --> 00:08:04,780
Ensuite, vous pouvez utiliser une approche Breadcrumb pour leur indiquer

104
00:08:04,780 --> 00:08:09,880
quelle étape l'utilisateur est actuellement dans la séquence d'étapes.

105
00:08:09,880 --> 00:08:14,320
De même, si vous fournissez votre navigation basée sur la localisation pour

106
00:08:14,320 --> 00:08:18,460
une approche hiérarchique au sein de votre site Web.

107
00:08:18,460 --> 00:08:23,785
Alors, quel niveau de hiérarchie vous êtes et quelle est la partie supérieure vers

108
00:08:23,785 --> 00:08:29,680
la racine de votre hiérarchie, de sorte que cela pourrait être indiqué par vos chapelures.

109
00:08:29,680 --> 00:08:35,092
Votre chapelure peut également être basée sur des attributs, ce qui signifie que vous fournissez un ensemble

110
00:08:35,092 --> 00:08:40,754
de choix indiqués dans votre chapelure pour l'utilisateur au moment actuel.

111
00:08:40,754 --> 00:08:45,032
Un cadre d'interface utilisateur front-end typique fournit de nombreuses

112
00:08:45,032 --> 00:08:49,840
autres façons de fournir la navigation sur vos pages Web.

113
00:08:49,840 --> 00:08:54,555
Ceux-ci comprennent les onglets, les pilules, la pagination, les listes déroulantes, les

114
00:08:54,555 --> 00:08:59,210
accordéons, les étiquettes, et SchrollSpy, et Affix.

115
00:08:59,210 --> 00:09:04,447
Nous examinerons certains d'entre eux un peu plus en détail au fur et à mesure que nous examinerons

116
00:09:04,447 --> 00:09:10,614
les différentes leçons des modules qui suivent cette leçon particulière.

117
00:09:10,614 --> 00:09:11,114
[ MUSIQUE]