Zum Inhalt springen

Änderungen von Dokument 04 Benutzeroberfläche und Navigation

Zuletzt geändert von Carina Enke am 26.11.2025
Von Version 1042.1
bearbeitet von Carina Enke
am 08.05.2018
Änderungskommentar: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 3.9.1.
Auf Version 1020.1
bearbeitet von Carina Enke
am 22.05.2019
Änderungskommentar: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 12.0.

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -2,70 +2,13 @@
2 2  {{layout}}
3 3  {{layout-section ac:type="single"}}
4 4  {{layout-cell}}
5 -
6 -
7 -{{details}}
8 -|=(((
9 -Verantwortlicher
10 -)))|(((
11 -
12 -)))
13 -|=(% colspan="1" %)(% colspan="1" %)
14 -(((
15 -Status
16 -)))|(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)
17 -(((
18 -{{sv-metadata type="workflow-status"/}}
19 -
20 -{{status colour="Green" title="Fertig"/}}
21 -)))
22 -|=(% colspan="1" %)(% colspan="1" %)
23 -(((
24 -Varianten
25 -)))|(% colspan="1" %)(% colspan="1" %)
26 -(((
27 -{{sv-metadata type="variants"/}}
28 -)))
29 -|=(% colspan="1" %)(% colspan="1" %)
30 -(((
31 -Attribute
32 -)))|(% colspan="1" %)(% colspan="1" %)
33 -(((
34 -{{sv-metadata type="attributes"/}}
35 -)))
36 -|=(% colspan="1" %)(% colspan="1" %)
37 -(((
38 -Pagekey
39 -)))|(% colspan="1" %)(% colspan="1" %)
40 -(((
41 -{{sv-metadata type="pagekey"/}}
42 -)))
43 -|=(% colspan="1" %)(% colspan="1" %)
44 -(((
45 -Übersetzung
46 -)))|(% colspan="1" %)(% colspan="1" %)
47 -(((
48 -{{status colour="Red" title="Offen"/}}
49 -)))
50 -|=(% colspan="1" %)(% colspan="1" %)
51 -(((
52 -TODOs
53 -)))|(% colspan="1" %)(% colspan="1" %)
54 -(((
55 -(% class="task-list" %)
56 -(((
57 -{{task reference="/Tasks/Task_1" status="InProgress"}}
58 -Erweitern: linke Seite, Navigationsarten, Fenster Strukturen
59 -{{/task}}
60 -)))
61 -)))
62 -{{/details}}
5 +\\
63 63  {{/layout-cell}}
64 64  {{/layout-section}}
65 65  
66 66  {{layout-section ac:type="two_right_sidebar"}}
67 67  {{layout-cell}}
68 -Für einen erleichterten Einstieg finden Sie hier eine Übersicht zur Benutzeroberfläche und allgemeinen Navigation in der Lernplattform. Dabei unterstützen Sie Beispielbilder der Ansicht auf einem normalen PC (Desktop-Ansicht) und auf einem Tablet oder Smartphone (mobile Ansicht).
11 +Für einen leichten Einstieg finden Sie hier eine Übersicht zur Benutzeroberfläche und allgemeinen Navigation in der Lernplattform. Dabei unterstützen Sie Beispielbilder der Ansicht auf einem normalen PC (Desktop-Ansicht) und auf einem Tablet oder Smartphone (mobile Ansicht).
69 69  {{/layout-cell}}
70 70  
71 71  {{layout-cell}}
... ... @@ -73,7 +73,7 @@
73 73  {{panel title="Inhalt"}}
74 74  
75 75  
76 -{{toc/}}
19 +{{toc maxLevel="2"/}}
77 77  {{/panel}}
78 78  {{/scroll-ignore}}
79 79  {{/layout-cell}}
... ... @@ -81,119 +81,131 @@
81 81  
82 82  {{layout-section ac:type="single"}}
83 83  {{layout-cell}}
84 -== Übersicht der Benutzeroberfläche in der Desktop-Ansicht ==
27 +== Desktop-Ansicht (PC, großer Bildschirm) ==
85 85  
86 86  Nach der Anmeldung sehen Sie zunächst Ihre persönliche **Startseite**. Grundsätzlich gliedert sich diese und alle anderen Seiten wie folgt:
87 87  
31 +(% class="wrapped" %)
88 88  |=(((
89 89  Oberer Bildbereich
90 90  )))|(((
91 -Neben den Logo Ihres Systems sehen Sie das Suchfenster, Ihren Nutzernamen mit Zugang zu Profileinstellungen, Hinweise auf Systemmeldungen, den Zugang zur Hilfe und die Abmeldefunktion.
35 +Neben dem Logo Ihres Systems sehen Sie das Suchfenster, Ihren Nutzernamen mit Zugang zu Profileinstellungen, Hinweise auf Systemmeldungen, den Zugang zur Hilfe und die Abmeldefunktion.
92 92  
93 -Darunter befindet sich der geöffnete Eintrag **Startseite**. Dieser und alle in der Desktopansicht rechts anschließenden Einträge kennzeichenen die **Hauptnavigation**.
37 +Darunter befindet sich der geöffnete Eintrag **Startseite**. Dieser und alle in der Desktop-Ansicht rechts anschließenden Einträge kennzeichnen die **Hauptnavigation**.
94 94  )))|(% rowspan="3" %)(% rowspan="3" %)
95 95  (((
96 -[[image:attach:System-Allgemeiner Überblick_de.png]]
40 +(% class="content-wrapper" %)
41 +(((
42 +[[image:attach:System - Allgemeiner Überblick_de.png]]
97 97  )))
44 +)))
98 98  |=(((
99 99  Mittlerer Bildbereich
100 100  )))|(((
101 -Den mittlere Bildbereich füllt der Inhalt des jeweiligen Tabs.
48 +Den mittleren Bildbereich füllt der Inhalt des jeweiligen Tabs.
102 102  )))
103 103  |=(((
104 104  Unterer Bildbereich
105 105  )))|(((
106 -Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, den Informationen zu letzten Funktionsänderungen im System und weiterführende Informationen.
53 +Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, Informationen zu den letzten Funktionsänderungen im System und weiterführende Informationen.
107 107  )))
108 108  
109 -=== Hauptnavigation in der Desktop-Ansicht ===
56 +=== Verfügbare Bereiche der Desktop-Hauptnavigation ===
110 110  
111 111  Die Hauptnavigation des Systems ist im oberen Bildbereich immer sichtbar und erfolgt über statische, also feststehende Einträge, die Sie nicht selbst schließen können.
112 112  
113 -Im Gegensatz dazu werden Lerninhalte wie z.B. Kurse in dynamischen Einträgen rechts neben den statischen angezeigt. Dynamische Einträge können Sie über das kleine Kreuz in der rechten oberen Ecke des Eintrags selbst schließen.
60 +Im Gegensatz dazu werden Lerninhalte, wie z.B. Kurse, in dynamischen Einträgen rechts neben den statischen angezeigt. Dynamische Einträge können Sie über das kleine Kreuz in der rechten oberen Ecke des Eintrags selbst schließen.
114 114  
115 115  Alle Einträge mit diesen Gestaltungsvarianten werden in nachfolgenden Erklärungen als **Tabs** oder **Reiter** bezeichnet.
116 116  
117 -[[image:attach:Hauptnavigation.png]]
64 +[[image:attach:Desktop - Hauptnavigation_de.png]]
118 118  
119 -=== Verfügbare Bereiche der Desktop-Hauptnavigation ===
66 +**
67 +**
120 120  
121 121  
122 122  
123 -{{display reference="Verfuegbare Bereiche der Hauptnavigation"/}}\\
71 +{{display reference="Verfuegbare Bereiche der Hauptnavigation"/}}
124 124  
125 -
73 +== Mobile Ansicht (Handy, kleiner Bildschirm) ==
126 126  
127 -== Übersicht der Benutzeroberfläche in der Mobilen-Ansicht ==
128 -
75 +(% class="wrapped" %)
129 129  |=(((
130 130  Oberer Bildbereich
131 131  )))|(((
132 132  In der mobilen Ansicht befindet sich hier der Zugang zur Hauptnavigation und der Titel des gerade geöffneten Bereiches.
133 -
134 -Neben den Logo Ihres Systems sehen Sie das Suchfenster, Ihren Nutzernamen mit Zugang zu Profileinstellungen, Hinweise auf Systemmeldungen, den Zugang zur Hilfe und die Abmeldefunktion.
135 -
136 -Darunter befindet sich der geöffnete Eintrag **Startseite**. Dieser und alle in der Desktopansicht rechts anschließenden Einträge kennzeichenen die **Hauptnavigation**.
137 137  )))|(% rowspan="3" %)(% rowspan="3" %)
138 138  (((
139 -Bild mobile Ansicht
82 +(% class="content-wrapper" %)
83 +(((
84 +[[image:attach:Mobil - Überblick allgemein_de.png]]
140 140  )))
86 +)))
141 141  |=(((
142 142  Mittlerer Bildbereich
143 143  )))|(((
144 -Den mittlere Bildbereich füllt der Inhalt des jeweiligen Tabs.
90 +Den mittleren Bildbereich füllt der Inhalt des jeweiligen Tabs.
145 145  )))
146 146  |=(((
147 147  Unterer Bildbereich
148 148  )))|(((
149 -Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, den Informationen zu letzten Funktionsänderungen im System und weiterführende Informationen.Unterer Bildbereich
95 +Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, Informationen zu den letzten Funktionsänderungen im System und weiterführende Informationen.
150 150  )))
151 151  
152 -=== Hauptnavigation ===
98 +=== Hauptnavigation in der mobilen Ansicht ===
153 153  
154 -Die Hauptnavigation erfolgt auf mobilen Geräten über ein dynamisches Menü.
100 +Die Hauptnavigation erfolgt auf mobilen Geräten über ein dynamisches Menü. Dieses öffnet sich, wenn Sie oben links auf die Schaltfläche [[image:attach:Icons@Icon_Menü Mobil.png]] klicken. Sie haben anschließend dieselben Auswahlmöglichkeiten wie in der Desktop-Ansicht.[[image:attach:Mobil - Überblick Navigation_de.png]]
155 155  
156 -Dieses öffnet sich wenn Sie oben links auf die Schaltfläche [[image:attach:Menü-mobil.png]]klicken. Sie haben anschließend dieselben Auswahlmöglichkeiten wie in der Desktop-Ansicht.
102 +== Menü-Navigation im Vergleich der Desktop- und mobilen Ansicht ==
157 157  
158 -[[image:attach:Hauptnavigation_mobil.png]]
159 -
160 -== Menü-Navigation im Vergleich der Desktop und Mobilen-Ansicht ==
161 -
162 162  Innerhalb verschiedener Bereiche wie beipielsweise Lehren & Lernen, in Kursen und einzelnen Lerninhalten wird Ihnen das Menü des gewählten Bereiches immer links vom Inhalt angezeigt.
163 163  
164 164  Eventuell vorhandene Unterstrukturen erkennen Sie an einem kleinen Dreieck **vor** einem Eintrag. Mit Klick auf dieses Symbol können versteckte Unterstrukturen geöffnet oder geschlossen werden.
165 165  
166 -Klicken Sie in einer Struktur direkt **auf** einen Eintrag wird anschließend der gewählte Inhalt im mittleren Seitenbereich angezeigt.
108 +Klicken Sie in einer Struktur direkt **auf** einen Eintrag, so wird anschließend der gewählte Inhalt im mittleren Seitenbereich angezeigt.
167 167  
110 +(% class="wrapped" %)
168 168  |=(% colspan="1" %)(% colspan="1" %)
169 169  (((
170 -
113 +\\
171 171  )))|=(% colspan="1" %)(% colspan="1" %)
172 172  (((
173 -**Desktop-Ansicht**
116 +Desktop-Ansicht
174 174  )))|=(% colspan="1" %)(% colspan="1" %)
175 175  (((
176 -**Mobile Ansicht**
119 +Mobile Ansicht
177 177  )))
178 178  |(((
179 179  **Lehren & Lernen**
180 180  )))|(((
181 -[[image:attach:L-L Kursmenüansicht.png]]
124 +(% class="content-wrapper" %)
125 +(((
126 +[[image:attach:Desktop - Lehren und Lernen Übersicht_de.png]]
127 +)))
182 182  )))|(% colspan="1" %)(% colspan="1" %)
183 183  (((
184 -[[image:attach:Navigation-über-Menü.png]]
130 +(% class="content-wrapper" %)
131 +(((
132 +[[image:attach:Mobil - Lehren und Lernen Übersicht_de.png]]
185 185  )))
134 +)))
186 186  |(((
187 187  **Kurs**
188 188  )))|(((
189 -[[image:attach:Menüansicht Kurs.png]]
138 +(% class="content-wrapper" %)
139 +(((
140 +[[image:attach:Desktop - Navigationsmenü im Kurs_de.png]]
141 +)))
190 190  )))|(% colspan="1" %)(% colspan="1" %)
191 191  (((
192 -[[image:attach:Kursmenü.png]]
144 +(% class="content-wrapper" %)
145 +(((
146 +[[image:attach:Mobil - Navigationsmenü im Kurs_en.png]]
193 193  )))
148 +)))
194 194  
195 195  {{info}}
196 -Das jeweilige Menü ist abhängig von der Rolle und den Rechten, die Sie im System haben sowie von Sichtbarkeits- und Zugangseinstellungen innerhalb der Kurse. Ist Ihnen die Rolle //**Autor** //zugewiesen, haben Sie erweiterte Optionen.
151 +Das jeweilige Menü ist abhängig von der Rolle und den Rechten, die Sie im System haben, sowie von Sichtbarkeits- und Zugangseinstellungen innerhalb der Kurse. Ist Ihnen die Rolle **Autor** zugewiesen, haben Sie erweiterte Optionen.
197 197  {{/info}}
198 198  {{/layout-cell}}
199 199  {{/layout-section}}
... ... @@ -204,14 +204,155 @@
204 204  {{layout}}
205 205  {{layout-section ac:type="two_right_sidebar"}}
206 206  {{layout-cell}}
207 -
162 +Here you will find an easy introduction to the user interface and general navigation in the learning platform. For a better understanding of the explanations provided, you will find various sample images of the presented views, i.e. on a normal PC (desktop view) and on a tablet or smartphone (mobile view).
208 208  {{/layout-cell}}
209 209  
210 210  {{layout-cell}}
211 -
166 +{{scroll-ignore}}
167 +{{panel title="Content"}}
212 212  
213 -
169 +
170 +{{toc maxLevel="2"/}}
171 +{{/panel}}
172 +{{/scroll-ignore}}
214 214  {{/layout-cell}}
215 215  {{/layout-section}}
175 +
176 +{{layout-section ac:type="single"}}
177 +{{layout-cell}}
178 +== Desktop view (PC, large screen) ==
179 +
180 +After logging in, you will first see your personal **home page**. Like all other pages, your home page is structured as follows:
181 +
182 +(% class="wrapped" %)
183 +|=(((
184 +Upper section
185 +)))|(((
186 +Next to the logo of your system, you will see the search window, your user name with access to profile settings, notes on system messages as well as the help and logout function.
187 +
188 +Below is the opened tab titled //**Home page**//. Together with all the entries to its right, it makes up the **main navigation** in the desktop view.
189 +)))|(% rowspan="3" %)(% rowspan="3" %)
190 +(((
191 +(% class="content-wrapper" %)
192 +(((
193 +[[image:attach:System - Allgemeiner Überblick_en.png]]
194 +)))
195 +)))
196 +|=(((
197 +Middle section
198 +)))|(((
199 +The middle section displays the content of the respective tab.
200 +)))
201 +|=(((
202 +Lower section
203 +)))|(((
204 +Here you will find, among other things, the terms of use, privacy policy, imprint and information about the last functional system changes.
205 +)))
206 +
207 +\\
208 +
209 +(((
210 +===
211 +Sections of the desktop main navigation ===
212 +
213 +The main navigation of the system is always visible in the upper part of the screen. However, its entries are preconfigured and cannot be closed by the users themselves.
214 +
215 +In contrast, learning resources such as courses are displayed in dynamic entries to the right of the static ones. You can close dynamic entries with the small cross in the upper right corner.
216 +
217 +All entries with these design variants are generally referred to as **tabs**.
218 +
219 +[[image:attach:Desktop - Hauptnavigation_en.png]]
220 +
221 +\\
222 +
223 +(((
224 +
225 +
226 +{{display reference="Verfuegbare Bereiche der Hauptnavigation"/}}
227 +
228 +== Mobile view (smartphone, small screen) ==
229 +
230 +(% class="wrapped" %)
231 +|=(((
232 +Upper section
233 +)))|(((
234 +In the mobile view, this is where you will find access to the main navigation and the title of the currently opened section.
235 +)))|(% rowspan="3" %)(% rowspan="3" %)
236 +(((
237 +(% class="content-wrapper" %)
238 +(((
239 +[[image:attach:Mobil - Überblick_en.png]]
240 +)))
241 +)))
242 +|=(((
243 +Middle section
244 +)))|(((
245 +The middle section displays the content of the respective tab.
246 +)))
247 +|=(((
248 +Lower section
249 +)))|(((
250 +Here you will find, among other things, the terms of use, privacy policy, imprint and information about the last functional system changes.
251 +)))
252 +
253 +(((
254 +===
255 +\\Main navigation in the mobile view ===
256 +)))
257 +
258 +The main navigation on mobile devices is done via a dynamic menu. (% style="letter-spacing: 0.0px;" %)It opens with a click on the [[image:attach:Icons@Icon_Menü Mobil.png]] button in the upper left corner. You will then have the same choices as in the desktop view.
259 +
260 +[[image:attach:Mobil - Überblick Navigation_en.png]]
261 +
262 +== Comparison of the menu navigation in the desktop and mobile view ==
263 +
264 +Within different areas, such as the Teach & Learn tab, courses and individual learning resources, the menu will always be displayed to the left of the content.
265 +
266 +Any existing substructures can be identified by a small expand icon **in front** of the entry. Click on this icon to open or close hidden substructures.
267 +
268 +If you directly click **on** an entry in a substructure, its content will be displayed in the middle page area.
269 +
270 +(% class="wrapped" %)
271 +|=(((
272 +\\
273 +)))|=(((
274 +Desktop view
275 +)))|=(((
276 +Mobile view
277 +)))
278 +|(((
279 +**Teach & Learn**
280 +)))|(((
281 +(% class="content-wrapper" %)
282 +(((
283 +[[image:attach:Desktop - Lehren und Lernen Übersicht_en.png]]
284 +)))
285 +)))|(((
286 +(% class="content-wrapper" %)
287 +(((
288 +[[image:attach:Mobil - Lehren und Lernen Übersicht_en.png]]
289 +)))
290 +)))
291 +|(((
292 +**Course**
293 +)))|(((
294 +(% class="content-wrapper" %)
295 +(((
296 +[[image:attach:Desktop - Navigationsmenü im Kurs_en.png]]
297 +)))
298 +)))|(((
299 +(% class="content-wrapper" %)
300 +(((
301 +[[image:attach:Mobil - Navigationsmenü im Kurs_en.png]]
302 +)))
303 +)))
304 +
305 +{{info}}
306 +The respective menu depends on your role and rights in the system, as well as on the visibility and access settings within the courses. As an **author**, you have advanced options.
307 +{{/info}}
308 +)))
309 +)))
310 +{{/layout-cell}}
311 +{{/layout-section}}
216 216  {{/layout}}
217 217  {{/sv-translation}}
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -159220455
1 +288096721
url
... ... @@ -1,1 +1,1 @@
1 -https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/159220455/Benutzeroberflaeche und Navigation
1 +https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/288096721/Benutzeroberflaeche und Navigation