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

2
00:00:04,114 --> 00:00:07,200
Lassen Sie uns jetzt über die Navigation sprechen.

3
00:00:07,200 --> 00:00:12,980
Was ist Navigation, warum ist Navigation wichtig für Ihre Website?

4
00:00:12,980 --> 00:00:16,820
Und wie stellen wir Ihnen Navigationsinformationen auf Ihrer Website zur Verfügung?

5
00:00:16,820 --> 00:00:22,264
Also, das sind die Frage, die wir in diesem speziellen Vortrag zu beantworten versuchen werden.

6
00:00:23,746 --> 00:00:27,058
Die erste offensichtliche Frage, die Ihnen in den Sinn kommt, ist,

7
00:00:27,058 --> 00:00:30,500
warum brauchen wir eine Website-Navigation?

8
00:00:30,500 --> 00:00:34,680
Wie Sie erkennen, sind die meisten Websites nicht mehr einzelne Seiten.

9
00:00:34,680 --> 00:00:37,840
Natürlich gibt es diese einseitigen Websites

10
00:00:37,840 --> 00:00:42,500
wie die Webseite Ihres Professors in Ihrer Informatik-Abteilung.

11
00:00:42,500 --> 00:00:47,450
Aber die meisten Websites enthalten in der Regel mehr als eine Seite.

12
00:00:47,450 --> 00:00:52,080
Wie wir mit unserer Verwirrungs-Website gesehen haben, die

13
00:00:52,080 --> 00:00:56,300
wir bauen, haben wir bereits eine zweite Seite namens aboutus.html hinzugefügt.

14
00:00:56,300 --> 00:01:01,100
Nun war die Art und Weise, wie wir zur aboutus.html Seite navigierten,

15
00:01:01,100 --> 00:01:06,259
explizit in die Adressleiste unseres Browsers einzugeben.

16
00:01:06,259 --> 00:01:11,300
Aber das ist eine sehr unbequeme Art, auf Ihre Website zu navigieren.

17
00:01:12,380 --> 00:01:17,685
Es wäre viel sinnvoller, ein intuitives Mittel für

18
00:01:17,685 --> 00:01:21,125
die Benutzer zur Navigation auf Ihre Website zu bieten.

19
00:01:21,125 --> 00:01:26,535
Dieses intuitive Mittel könnte durch viele verschiedene Ansätze zur Verfügung gestellt werden,

20
00:01:26,535 --> 00:01:32,972
wobei die Navigationsleiste eine der gebräuchlichsten Methoden ist, um diese Informationen anzuzeigen.

21
00:01:32,972 --> 00:01:37,342
Wir werden uns also mehrere gängige Möglichkeiten zur Bereitstellung von

22
00:01:37,342 --> 00:01:41,392
Navigationsmustern auf typischen Websites ansehen.

23
00:01:41,392 --> 00:01:46,656
In diesem Zusammenhang hört man oft Leute, die über Informationsarchitektur sprechen.

24
00:01:46,656 --> 00:01:51,458
Die Informationsarchitektur beginnt mit der Struktur des Systems, in

25
00:01:51,458 --> 00:01:55,879
Bezug auf die Art und Weise, wie die Informationen organisiert und gekennzeichnet werden.

26
00:01:55,879 --> 00:02:01,340
Und Navigation wird durch den Inhalt oder durch diese Informationen zur Verfügung gestellt.

27
00:02:01,340 --> 00:02:05,240
Jetzt ist die Informationsarchitektur für sich ein ganzes großes Feld.

28
00:02:05,240 --> 00:02:09,375
Es geht über den Rahmen dieses Kurses, um Informationen Architekt abzudecken.

29
00:02:09,375 --> 00:02:14,475
Aber

30
00:02:14,475 --> 00:02:18,145
für den Fall, dass Sie daran interessiert sind, Benutzern Informationen über

31
00:02:18,145 --> 00:02:23,067
Websites zu organisieren und bereitzustellen, dann habe ich Ihnen einige Links in den zusätzlichen Ressourcen zur Verfügung gestellt

32
00:02:23,067 --> 00:02:27,727
, die Sie für weiteres Wissen lesen können.

33
00:02:27,727 --> 00:02:30,317
Aber in jedem Fall, wenn Sie eine Website entwerfen,

34
00:02:30,317 --> 00:02:35,887
ist es wichtig, die Notwendigkeit zu verstehen,

35
00:02:35,887 --> 00:02:41,697
die Informationsnavigationsstrukturen innerhalb Ihrer Website zu entwerfen.

36
00:02:43,930 --> 00:02:48,970
Und diese Organisation von Informationen auf Ihrer Website bestimmt auch,

37
00:02:48,970 --> 00:02:53,545
welche Art von Navigationshilfen Sie auf Ihrer Website zur Verfügung stellen, und

38
00:02:53,545 --> 00:02:57,280
basierend darauf, wie diese Informationen organisiert sind.

39
00:02:57,280 --> 00:03:02,300
Typischerweise würde eine Website in einer Art von Baum strukturiert oder

40
00:03:02,300 --> 00:03:04,630
hierarchisch organisiert werden.

41
00:03:04,630 --> 00:03:07,359
Und das bestimmt Ihnen automatisch,

42
00:03:07,359 --> 00:03:11,913
wie Sie Navigationsunterstützung innerhalb Ihrer Website gestalten würden.

43
00:03:11,913 --> 00:03:16,737
Die Verwendung einer Navigationsleiste, Breadcrumbs und

44
00:03:16,737 --> 00:03:22,405
anderer Navigationsmittel sind sehr, sehr wichtig,

45
00:03:22,405 --> 00:03:29,760
damit Benutzer verschiedene Teile Ihrer Website sehen können.

46
00:03:29,760 --> 00:03:35,150
Wenn Sie die meisten Websites besuchen, werden Sie oft nach der Navigationsleiste suchen.

47
00:03:35,150 --> 00:03:40,080
Dies ist eine Art Bar, die typischerweise oben auf

48
00:03:40,080 --> 00:03:45,570
der Website angebracht ist, oder manchmal am unteren Rand der Website, oder manchmal auf der Seite,

49
00:03:45,570 --> 00:03:50,865
die Ihnen genügend Hinweise auf die Art

50
00:03:50,865 --> 00:03:56,365
von Informationen gibt, die Sie auf dieser Website zugreifen können.

51
00:03:56,365 --> 00:04:01,095
Ihre Navigationsleiste enthält also normalerweise Links zu verschiedenen Seiten, die

52
00:04:01,095 --> 00:04:04,615
Teil Ihrer Website sind.

53
00:04:04,615 --> 00:04:09,425
Also eine typische Navigationsleiste, wie gehen Sie über das Entwerfen dieses?

54
00:04:09,425 --> 00:04:13,085
Wenn Sie eine typische Navigationsleiste entwerfen, sollten Sie natürlich

55
00:04:14,360 --> 00:04:19,500
einige Dos und Don'ts darüber im Auge behalten, wie Sie Navigationsleisten entwerfen.

56
00:04:19,500 --> 00:04:23,870
Erstens, dass Sie benutzerfreundliche und

57
00:04:23,870 --> 00:04:28,960
einfache Begriffe in Ihrer Navigationsleiste verwenden, um die verschiedenen Links anzuzeigen

58
00:04:28,960 --> 00:04:34,900
, die die Benutzer auf Ihrer Website folgen können, um Informationen zu erhalten..

59
00:04:34,900 --> 00:04:37,070
Sie sollten eine standardisierte Navigation bereitstellen,

60
00:04:37,070 --> 00:04:41,090
damit überall dort, wo sich der Benutzer innerhalb Ihrer Websitehierarchie befindet,

61
00:04:41,090 --> 00:04:46,590
er immer weiß, wie er zur Startseite zurückgeht, wie man zur nächsten

62
00:04:46,590 --> 00:04:50,760
, vorherigen oder nach oben und unten in der Hierarchie irgendeiner Art geht.

63
00:04:50,760 --> 00:04:54,670
Daher ist die Angabe des Standorts des Benutzers

64
00:04:54,670 --> 00:04:59,910
innerhalb der Hierarchie Ihrer Website sehr, sehr nützlich,

65
00:04:59,910 --> 00:05:04,790
um eine benutzerfreundliche Art der Navigation auf Ihren Websites zu bieten.

66
00:05:04,790 --> 00:05:09,345
Außerdem gibt es einige Standardkonventionen, denen Benutzer folgen,

67
00:05:09,345 --> 00:05:12,365
wenn diese Navigationsleisten entworfen werden.

68
00:05:12,365 --> 00:05:17,515
Wenn Sie das Logo Ihrer Website oder Ihres

69
00:05:17,515 --> 00:05:23,832
Unternehmens in Ihrer Navigationsleiste enthalten haben,

70
00:05:23,832 --> 00:05:29,177
sollten Sie mit einem Klick auf diese Logos oder eine Home-Schaltfläche in der Regel auf die oberste Ebene der Hierarchie oder auf

71
00:05:29,177 --> 00:05:33,711
die Homepage Ihrer Website zurückführen, in der Regel die Seite index.html.

72
00:05:33,711 --> 00:05:38,817
Einige der Don'ts, die Sie beachten sollten, ist, dass Sie nicht zu viele

73
00:05:38,817 --> 00:05:41,457
Möglichkeiten in Ihrer Navigationsleiste haben sollten.

74
00:05:41,457 --> 00:05:43,225
Wie viele sind zu viele?

75
00:05:43,225 --> 00:05:48,470
Wenn Sie feststellen, dass das Navigieren mit Ihren Navigationsleisten zu umständlich ist,

76
00:05:48,470 --> 00:05:52,240
bedeutet dies, dass es zu viele Optionen auf Ihrer Navigationsleiste gibt.

77
00:05:52,240 --> 00:05:58,010
Stellen Sie in Ihrer Navigationsleiste eine angemessene Auswahl bereit, damit Sie

78
00:05:58,010 --> 00:06:04,659
die Anweisungen angeben können, denen der Benutzer bei der Navigation durch Ihre Website folgen kann.

79
00:06:05,880 --> 00:06:11,230
Wenn Sie diese Navigationselemente in Ihrer Navigationsleiste verwenden,

80
00:06:11,230 --> 00:06:17,090
verwenden Sie keine generischen Beschriftungen, sondern aussagekräftige Beschriftungen.

81
00:06:17,090 --> 00:06:22,159
Wenn Sie beispielsweise ein Etikett mit dem Namen Produkt in Ihre

82
00:06:22,159 --> 00:06:28,630
Navigationsleiste einfügen, werden die Leute darüber verwirrt, was Sie mit Produkt meinen.

83
00:06:28,630 --> 00:06:32,650
Oder sagen Sie, wenn Sie einen Dienst in Ihrer Navigationsleiste platzieren, können diese verwirrt sein.

84
00:06:32,650 --> 00:06:34,780
Welche Art von Service bieten Sie an?

85
00:06:34,780 --> 00:06:38,790
Es wird sinnvoller sein, einen beschreibenden Begriff

86
00:06:38,790 --> 00:06:43,710
in Ihren Kopfzeilen in Ihrer Navigationsleiste zu geben.

87
00:06:43,710 --> 00:06:46,380
Ein weiteres Mittel zur Bereitstellung der Navigation für

88
00:06:46,380 --> 00:06:50,030
Benutzer ist, was als Breadcrumbs bezeichnet wird.

89
00:06:50,030 --> 00:06:55,895
Diese werden normalerweise irgendwo auf dieser Seite bereitgestellt,

90
00:06:55,895 --> 00:07:00,737
typisch zum oberen Rand der Webseite,

91
00:07:00,737 --> 00:07:04,954
näher an der Überschrift dieser Webseite.

92
00:07:04,954 --> 00:07:10,513
Die Breadcrumbs weisen auf eine Art

93
00:07:10,513 --> 00:07:16,255
Navigationshierarchie hin, in der Sie sich gerade auf Ihrer Website befinden.

94
00:07:16,255 --> 00:07:21,595
So bietet dies eine sekundäre Navigationsoption für Ihre Website.

95
00:07:21,595 --> 00:07:26,185
Dies könnte also irgendwo unter der primären Navigation platziert werden.

96
00:07:26,185 --> 00:07:32,082
Es kann die Hierarchie der Seiten anzeigen, durch die Sie gegangen sind.

97
00:07:32,082 --> 00:07:36,687
Und die aktuelle Position kann spezifisch in

98
00:07:36,687 --> 00:07:38,727
der Breadcrumb dort hervorgehoben werden.

99
00:07:38,727 --> 00:07:43,708
So verschiedene Möglichkeiten, wie Menschen Breadcrumbs verwenden können,

100
00:07:43,708 --> 00:07:48,588
umfassen die Bereitstellung einer pfadbasierten Navigation.

101
00:07:48,588 --> 00:07:53,558
Zum Beispiel, wenn Sie einen Benutzer haben, der eine Reihe von Schritten durchläuft, um

102
00:07:53,558 --> 00:07:59,358
eine Aufgabe auf Ihrer Website abzuschließen, sagen wir zum Beispiel, ein Flugticket zu reservieren.

103
00:07:59,358 --> 00:08:04,780
Dann könnten Sie einen Breadcrumb-Ansatz verwenden, um ihnen anzuzeigen,

104
00:08:04,780 --> 00:08:09,880
auf welchem Schritt sich der Benutzer gerade in der Reihenfolge der Schritte befindet.

105
00:08:09,880 --> 00:08:14,320
In ähnlicher Weise, wenn Sie Ihre standortbasierte Navigation für

106
00:08:14,320 --> 00:08:18,460
hierarchischen Ansatz innerhalb Ihrer Website bereitstellen.

107
00:08:18,460 --> 00:08:23,785
Also, auf welcher Ebene der Hierarchie Sie sich befinden und was ist der obere Teil in Richtung

108
00:08:23,785 --> 00:08:29,680
der Wurzel Ihrer Hierarchie, so dass Ihre Breadcrumbs angezeigt werden könnte.

109
00:08:29,680 --> 00:08:35,092
Ihr Breadcrumb könnte auch attributbasiert sein, was bedeutet, dass Sie eine Reihe

110
00:08:35,092 --> 00:08:40,754
von Auswahlmöglichkeiten bereitstellen, die in Ihrem Breadcrumb für den Benutzer zum aktuellen Zeitpunkt angegeben sind.

111
00:08:40,754 --> 00:08:45,032
Ein typisches Front-End-UI-Framework bietet viele

112
00:08:45,032 --> 00:08:49,840
andere Möglichkeiten, die Navigation auf Ihren Webseiten bereitzustellen.

113
00:08:49,840 --> 00:08:54,555
Dazu gehören Tabs, Pillen, Paginierung, Dropdowns

114
00:08:54,555 --> 00:08:59,210
, Akkordeons, Tags und SchrollSpy und Affix.

115
00:08:59,210 --> 00:09:04,447
Wir werden einige dieser Lektionen näher betrachten, während wir

116
00:09:04,447 --> 00:09:10,614
die verschiedenen Lektionen in den Modulen durchlaufen, die dieser speziellen Lektion folgen.

117
00:09:10,614 --> 00:09:11,114
( MUSIK)