Zum Inhalt springen

Änderungen von Dokument 04 Benutzeroberfläche und Navigation

Zuletzt geändert von Carina Enke am 26.11.2025
Von Version 1012.1
bearbeitet von Carina Enke
am 10.12.2019
Änderungskommentar: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 12.2.
Auf Version 1043.1
bearbeitet von Carina Enke
am 08.05.2018
Änderungskommentar: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 3.9.1.

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,108 +1,12 @@
1 1  {{sv-translation language="de"}}
2 2  {{layout}}
3 3  {{layout-section ac:type="single"}}
4 -{{layout-cell}}
5 -\\
6 -
7 -{{details}}
8 -(% class="wrapped" %)
9 -|=(((
10 -Verantwortlicher
11 -)))|(((
12 -\\
13 -)))
14 -|=(% colspan="1" %)(% colspan="1" %)
15 -(((
16 -Status
17 -)))|(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)
18 -(((
19 -(% class="content-wrapper" %)
20 -(((
21 -{{sv-metadata type="workflow-status"/}}
22 -
23 -{{status colour="Green" title="Fertig"/}}
24 -)))
25 -)))
26 -|=(% colspan="1" %)(% colspan="1" %)
27 -(((
28 -Varianten
29 -)))|(% colspan="1" %)(% colspan="1" %)
30 -(((
31 -(% class="content-wrapper" %)
32 -(((
33 -{{sv-metadata type="variants"/}}
34 -)))
35 -)))
36 -|=(% colspan="1" %)(% colspan="1" %)
37 -(((
38 -Attribute
39 -)))|(% colspan="1" %)(% colspan="1" %)
40 -(((
41 -(% class="content-wrapper" %)
42 -(((
43 -{{sv-metadata type="attributes"/}}
44 -)))
45 -)))
46 -|=(% colspan="1" %)(% colspan="1" %)
47 -(((
48 -Pagekey
49 -)))|(% colspan="1" %)(% colspan="1" %)
50 -(((
51 -(% class="content-wrapper" %)
52 -(((
53 -{{sv-metadata type="pagekey"/}}
54 -)))
55 -)))
56 -|=(% colspan="1" %)(% colspan="1" %)
57 -(((
58 -Übersetzung
59 -)))|(% colspan="1" %)(% colspan="1" %)
60 -(((
61 -(% class="content-wrapper" %)
62 -(((
63 -User Interface and Navigation 
64 -
65 -{{status colour="Green" title="fertig"/}}
66 -)))
67 -)))
68 -|=(% colspan="1" %)(% colspan="1" %)
69 -(((
70 -TODOs
71 -)))|(% colspan="1" %)(% colspan="1" %)
72 -(((
73 -(% class="content-wrapper" %)
74 -(((
75 -(% class="task-list" %)
76 -(((
77 -{{task reference="/Tasks/Task_2" status="Done"}}
78 -carina {{mention reference="XWiki.0a49950f5c0f19a8015c101b60e10001" style="FULL_NAME" anchor="XWiki-0a49950f5c0f19a8015c101b60e10001-vVpqH"/}}: Kann übersetzt werden
79 -{{/task}}
80 -
81 -{{task reference="/Tasks/Task_3" status="Done"}}
82 - Vanessa: {{mention reference="XWiki.carina" style="FULL_NAME" anchor="XWiki-carina-sxcNw"/}}: Englische Bilder fehlen noch.
83 -{{/task}}
84 -
85 -{{task reference="/Tasks/Task_4" status="Done"}}
86 -carina {{mention reference="XWiki.0a49950f5c0f19a8015c101b60e10001" style="FULL_NAME" anchor="XWiki-0a49950f5c0f19a8015c101b60e10001-uviJS"/}}Kleine Änderungen und Bildunterschriften (11.4.7)\\
87 -{{/task}}
88 -
89 -{{task reference="/Tasks/Task_5" status="Done"}}
90 -Vanessa: {{mention reference="XWiki.carina" style="FULL_NAME" anchor="XWiki-carina-NINWq"/}}: Am Ende der Seite fehlen bei den Bildern in der Tabelle noch die Bildüberschriften. Unter "Hauptnavigation" fehlt anscheinend ein Bild eines Icons (unbekannter Anhang) und das Bild im selben Bereich unter dem Text fehlt auch noch auf Englisch. Last but not least, unter "Mobile Ansicht" müsste der Text nochmal überarbeitet werden, da Bereiche beschrieben werden, die im Bild nicht ersichtlich sind. => Text entfernt, Bildunterschriften eingefügt
91 -{{/task}}
92 -
93 -{{task reference="/Tasks/Task_6" status="Done"}}
94 -carina {{mention reference="XWiki.0a49950f5c0f19a8015c101b60e10001" style="FULL_NAME" anchor="XWiki-0a49950f5c0f19a8015c101b60e10001-RhTbn"/}}Bitte noch fertigstellen (11.4.7)\\
95 -{{/task}}
96 -)))
97 -)))
98 -)))
99 -{{/details}}
100 -{{/layout-cell}}
4 +{{layout-cell}}{{/layout-cell}}
101 101  {{/layout-section}}
102 102  
103 103  {{layout-section ac:type="two_right_sidebar"}}
104 104  {{layout-cell}}
105 -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).
9 +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).
106 106  {{/layout-cell}}
107 107  
108 108  {{layout-cell}}
... ... @@ -110,7 +110,7 @@
110 110  {{panel title="Inhalt"}}
111 111  
112 112  
113 -{{toc maxLevel="2"/}}
17 +{{toc/}}
114 114  {{/panel}}
115 115  {{/scroll-ignore}}
116 116  {{/layout-cell}}
... ... @@ -118,131 +118,119 @@
118 118  
119 119  {{layout-section ac:type="single"}}
120 120  {{layout-cell}}
121 -== Desktop-Ansicht (PC, großer Bildschirm) ==
25 +== Übersicht der Benutzeroberfläche in der Desktop-Ansicht ==
122 122  
123 123  Nach der Anmeldung sehen Sie zunächst Ihre persönliche **Startseite**. Grundsätzlich gliedert sich diese und alle anderen Seiten wie folgt:
124 124  
125 -(% class="wrapped" %)
126 126  |=(((
127 127  Oberer Bildbereich
128 128  )))|(((
129 -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.
32 +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.
130 130  
131 -Darunter befindet sich der geöffnete Eintrag **Startseite**. Dieser und alle in der Desktop-Ansicht rechts anschließenden Einträge kennzeichnen die **Hauptnavigation**.
34 +Darunter befindet sich der geöffnete Eintrag **Startseite**. Dieser und alle in der Desktopansicht rechts anschließenden Einträge kennzeichenen die **Hauptnavigation**.
132 132  )))|(% rowspan="3" %)(% rowspan="3" %)
133 133  (((
134 -(% class="content-wrapper" %)
135 -(((
136 -[[image:attach:System - Allgemeiner Überblick_de.png]]
37 +[[image:attach:System-Allgemeiner Überblick_de.png]]
137 137  )))
138 -)))
139 139  |=(((
140 140  Mittlerer Bildbereich
141 141  )))|(((
142 -Den mittleren Bildbereich füllt der Inhalt des jeweiligen Tabs.
42 +Den mittlere Bildbereich füllt der Inhalt des jeweiligen Tabs.
143 143  )))
144 144  |=(((
145 145  Unterer Bildbereich
146 146  )))|(((
147 -Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, Informationen zu den letzten Funktionsänderungen im System und weiterführende Informationen.
47 +Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, den Informationen zu letzten Funktionsänderungen im System und weiterführende Informationen.
148 148  )))
149 149  
150 -=== Verfügbare Bereiche der Desktop-Hauptnavigation ===
50 +=== Hauptnavigation in der Desktop-Ansicht ===
151 151  
152 152  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.
153 153  
154 -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.
54 +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.
155 155  
156 156  Alle Einträge mit diesen Gestaltungsvarianten werden in nachfolgenden Erklärungen als **Tabs** oder **Reiter** bezeichnet.
157 157  
158 -[[image:attach:Desktop - Hauptnavigation_de.png]]
58 +[[image:attach:Hauptnavigation.png]]
159 159  
160 -**
161 -**
60 +=== Verfügbare Bereiche der Desktop-Hauptnavigation ===
162 162  
163 163  
164 164  
165 -{{display reference="Verfuegbare Bereiche der Hauptnavigation"/}}
64 +{{display reference="Verfuegbare Bereiche der Hauptnavigation"/}}\\
166 166  
167 -== Mobile Ansicht (Handy, kleiner Bildschirm) ==
66 +
168 168  
169 -(% class="wrapped" %)
68 +== Übersicht der Benutzeroberfläche in der Mobilen-Ansicht ==
69 +
170 170  |=(((
171 171  Oberer Bildbereich
172 172  )))|(((
173 173  In der mobilen Ansicht befindet sich hier der Zugang zur Hauptnavigation und der Titel des gerade geöffneten Bereiches.
74 +
75 +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.
76 +
77 +Darunter befindet sich der geöffnete Eintrag **Startseite**. Dieser und alle in der Desktopansicht rechts anschließenden Einträge kennzeichenen die **Hauptnavigation**.
174 174  )))|(% rowspan="3" %)(% rowspan="3" %)
175 175  (((
176 -(% class="content-wrapper" %)
177 -(((
178 -[[image:attach:Mobil - Überblick allgemein_de.png]]
80 +Bild mobile Ansicht
179 179  )))
180 -)))
181 181  |=(((
182 182  Mittlerer Bildbereich
183 183  )))|(((
184 -Den mittleren Bildbereich füllt der Inhalt des jeweiligen Tabs.
85 +Den mittlere Bildbereich füllt der Inhalt des jeweiligen Tabs.
185 185  )))
186 186  |=(((
187 187  Unterer Bildbereich
188 188  )))|(((
189 -Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, Informationen zu den letzten Funktionsänderungen im System und weiterführende Informationen.
90 +Hier finden Sie Nutzungsbedingungen, Datenschutzbestimmungen, Impressum, den Informationen zu letzten Funktionsänderungen im System und weiterführende Informationen.Unterer Bildbereich
190 190  )))
191 191  
192 -=== Hauptnavigation in der mobilen Ansicht ===
93 +=== Hauptnavigation ===
193 193  
194 -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]]
95 +Die Hauptnavigation erfolgt auf mobilen Geräten über ein dynamisches Menü.
195 195  
196 -== Menü-Navigation im Vergleich der Desktop- und mobilen Ansicht ==
97 +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.
197 197  
99 +[[image:attach:Hauptnavigation_mobil.png]]
100 +
101 +== Menü-Navigation im Vergleich der Desktop und Mobilen-Ansicht ==
102 +
198 198  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.
199 199  
200 200  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.
201 201  
202 -Klicken Sie in einer Struktur direkt **auf** einen Eintrag, so wird anschließend der gewählte Inhalt im mittleren Seitenbereich angezeigt.
107 +Klicken Sie in einer Struktur direkt **auf** einen Eintrag wird anschließend der gewählte Inhalt im mittleren Seitenbereich angezeigt.
203 203  
204 -(% class="wrapped" %)
205 205  |=(% colspan="1" %)(% colspan="1" %)
206 206  (((
207 -\\
111 +
208 208  )))|=(% colspan="1" %)(% colspan="1" %)
209 209  (((
210 -Desktop-Ansicht
114 +**Desktop-Ansicht**
211 211  )))|=(% colspan="1" %)(% colspan="1" %)
212 212  (((
213 -Mobile Ansicht
117 +**Mobile Ansicht**
214 214  )))
215 215  |(((
216 216  **Lehren & Lernen**
217 217  )))|(((
218 -(% class="content-wrapper" %)
219 -(((
220 -[[image:attach:Desktop - Lehren und Lernen Übersicht_de.png]]
221 -)))
122 +[[image:attach:L-L Kursmenüansicht.png]]
222 222  )))|(% colspan="1" %)(% colspan="1" %)
223 223  (((
224 -(% class="content-wrapper" %)
225 -(((
226 -[[image:attach:Mobil - Lehren und Lernen Übersicht_de.png]]
125 +[[image:attach:Navigation-über-Menü.png]]
227 227  )))
228 -)))
229 229  |(((
230 230  **Kurs**
231 231  )))|(((
232 -(% class="content-wrapper" %)
233 -(((
234 -[[image:attach:Desktop - Navigationsmenü im Kurs_de.png]]
235 -)))
130 +[[image:attach:Menüansicht Kurs.png]]
236 236  )))|(% colspan="1" %)(% colspan="1" %)
237 237  (((
238 -(% class="content-wrapper" %)
239 -(((
240 -[[image:attach:Mobil - Navigationsmenü im Kurs_en.png]]
133 +[[image:attach:Kursmenü.png]]
241 241  )))
242 -)))
243 243  
244 244  {{info}}
245 -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.
137 +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.
246 246  {{/info}}
247 247  {{/layout-cell}}
248 248  {{/layout-section}}
... ... @@ -253,155 +253,14 @@
253 253  {{layout}}
254 254  {{layout-section ac:type="two_right_sidebar"}}
255 255  {{layout-cell}}
256 -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 both on a regular PC (desktop view) and on a tablet or smartphone (mobile view).
148 +
257 257  {{/layout-cell}}
258 258  
259 259  {{layout-cell}}
260 -{{scroll-ignore}}
261 -{{panel title="Content"}}
152 +
262 262  
263 -
264 -{{toc maxLevel="2" minLevel="2"/}}
265 -{{/panel}}
266 -{{/scroll-ignore}}
154 +
267 267  {{/layout-cell}}
268 268  {{/layout-section}}
269 -
270 -{{layout-section ac:type="single"}}
271 -{{layout-cell}}
272 -== Desktop view (PC, large screen) ==
273 -
274 -After logging in, you will first see your personal **home page**. Like all other pages, your home page is structured as follows:
275 -
276 -(% class="wrapped" %)
277 -|=(((
278 -Upper section
279 -)))|(((
280 -Next to the logo of your system, you will see the search window, your username with access to profile settings, notes on system messages as well as the help and logout function.
281 -
282 -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.
283 -)))|(% rowspan="3" %)(% rowspan="3" %)
284 -(((
285 -(% class="content-wrapper" %)
286 -(((
287 -[[image:attach:System - Allgemeiner Überblick_en.png]]
288 -)))
289 -)))
290 -|=(((
291 -Middle section
292 -)))|(((
293 -The middle section displays the content of the respective tab.
294 -)))
295 -|=(((
296 -Lower section
297 -)))|(((
298 -Here you will find, among other things, the terms of use, privacy policy, imprint and information about the last functional system changes.
299 -)))
300 -
301 -\\
302 -
303 -(((
304 -===
305 -Sections of the desktop main navigation ===
306 -
307 -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.
308 -
309 -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.
310 -
311 -All entries with these design variants are generally referred to as **tabs**.
312 -
313 -[[image:attach:Desktop - Hauptnavigation_en.png]]
314 -
315 -\\
316 -
317 -(((
318 -
319 -
320 -{{display reference="Verfuegbare Bereiche der Hauptnavigation"/}}
321 -
322 -== Mobile view (smartphone, small screen) ==
323 -
324 -(% class="wrapped" %)
325 -|=(((
326 -Upper section
327 -)))|(((
328 -In the mobile view, this is where you will find access to the main navigation and the title of the currently opened section.
329 -)))|(% rowspan="3" %)(% rowspan="3" %)
330 -(((
331 -(% class="content-wrapper" %)
332 -(((
333 -[[image:attach:Mobil - Überblick_en.png]]
334 -)))
335 -)))
336 -|=(((
337 -Middle section
338 -)))|(((
339 -The middle section displays the content of the respective tab.
340 -)))
341 -|=(((
342 -Lower section
343 -)))|(((
344 -Here you will find, among other things, the terms of use, privacy policy, imprint and information about the last functional system changes.
345 -)))
346 -
347 -(((
348 -===
349 -\\Main navigation in the mobile view ===
350 -)))
351 -
352 -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.
353 -
354 -[[image:attach:Mobil - Überblick Navigation_en.png]]
355 -
356 -== Comparison of the menu navigation in the desktop and mobile view ==
357 -
358 -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.
359 -
360 -Any existing substructures can be identified by a small expand icon **preceding **the entry. Click on this icon to open or close hidden substructures.
361 -
362 -If you directly click **on** an entry in a substructure, its content will be displayed in the middle page area.
363 -
364 -(% class="wrapped" %)
365 -|=(((
366 -\\
367 -)))|=(((
368 -Desktop view
369 -)))|=(((
370 -Mobile view
371 -)))
372 -|(((
373 -**Teach & Learn**
374 -)))|(((
375 -(% class="content-wrapper" %)
376 -(((
377 -[[image:attach:Desktop - Lehren und Lernen Übersicht_en.png]]
378 -)))
379 -)))|(((
380 -(% class="content-wrapper" %)
381 -(((
382 -[[image:attach:Mobil - Lehren und Lernen Übersicht_en.png]]
383 -)))
384 -)))
385 -|(((
386 -**Course**
387 -)))|(((
388 -(% class="content-wrapper" %)
389 -(((
390 -[[image:attach:Desktop - Navigationsmenü im Kurs_en.png]]
391 -)))
392 -)))|(((
393 -(% class="content-wrapper" %)
394 -(((
395 -[[image:attach:Mobil - Navigationsmenü im Kurs_en.png]]
396 -)))
397 -)))
398 -
399 -{{info}}
400 -The respective menu depends on your role and rights in the system, as well as on the visibility and access settings within courses. **Authors **benefit from advanced options.
401 -{{/info}}
402 -)))
403 -)))
404 -{{/layout-cell}}
405 -{{/layout-section}}
406 406  {{/layout}}
407 407  {{/sv-translation}}
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -291996074
1 +159220167
url
... ... @@ -1,1 +1,1 @@
1 -https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/291996074/Benutzeroberflaeche und Navigation
1 +https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/159220167/Benutzeroberflaeche und Navigation