Wartungsarbeiten: Opencast, Podcasts & Tobira Di 01. Juli 2025 08:00 - 09:00 | Aufgrund von Wartungsarbeiten an den Opencast-Servern werden Ihnen Podcasts, Opencast-Videos und Tobira nicht zur Verfügung stehen. Kontakt: www.podcast.unibe.ch
Wartungsarbeiten: Opencast, Podcasts & Tobira Di 08. Juli 2025 08:00 - 10:00 | Aufgrund von Wartungsarbeiten an den Opencast-Servern werden Ihnen Podcasts, Opencast-Videos und Tobira nicht zur Verfügung stehen. Kontakt: www.podcast.unibe.ch

Design Guide

Reiter

INhalte & Prinzipien

SetzeN SIE Inhalte
ins Zentrum

Der Fokus einer Person soll auf dem Inhalt sein, nicht auf der Bedienung des Systems.

Helfen Sie Nutzenden ohne grosse Ablenkung zu arbeiten und zum Ziel zu kommen.  Befähigen Sie Nutzende durch sinnvolles Design, Informationen schnell zu finden, Aufträge effizient zu erledigen und Interaktionen zu nutzen.
Orientieren Sie sich an unseren Design-Prinzipien, um diese Ziele zu erreichen.

Design-Prinzipien 

. . . sind ein Set an Überlegungen, welche die Basis für eine gute visuelle Struktur bilden.
. . . helfen Entscheidungen zu treffen, die für die visuelle Darstellung und die Interaktionen wegweisend sind.
. . . unterstützen dabei, Werte auf sinnhafte Weise zu erleben und weiterzutragen.
Die Aufmerksamkeit einer Person soll sinnvoll gelenkt werden, damit sie sich effektiv mit etwas auseinandersetzen kann. 

Vermeiden Sie Unordnung und überladene Ansichten. Um die Aufmerksamkeit zu erlangen, bieten sich starke Farben und grosse Schriften an. Berücksichtigen Sie unterschiedliche Wahrnehmungen: Guter Farbkontrast hilft Text trotz verschiedenen Hintergründen gut lesbar zu halten. Farbe wird verwendet, um Dinge darzustellen, die zusammengehören bzw. um Dinge voneinander klar abzugrenzen.
Formulieren Sie aussagekräftige Überschriften, um den Fokus gezielt auf den Inhalt zu lenken.
Überschriften strukturieren Inhalte und machen auf einen Blick deutlich, worum es im jeweiligen Abschnitt geht. Sie helfen Nutzenden, sich schnell zu orientieren und relevante Informationen zu finden.
Setzen Sie Spaltenlayouts und Blöcke ein, um Inhalte von anderen abzuheben.
Weissräume (bewusste Freiräume) um zentrale Inhalte oder Überschriften herum sorgen dafür, dass diese stärker ins Auge fallen und nicht von anderen Elementen „erdrückt“ werden. Dazu eignen sich Abstands-Blöcke und Spaltenlayouts.
Farbige Akzente oder dezente Hintergründe können genutzt werden, um bestimmte Abschnitte hervorzuheben, ohne aufdringlich zu wirken. Dazu eigenen sich Blöcke mit Rahmen oder Hintergrundfarbe.
Sich wiederholende Gestaltungselemente helfen der Person, ein besseres Verständnis für die Struktur und Funktionsweise zu entwickeln.

Was Gleiches bedeutet, soll gleich dargestellt und benannt werden. Stellen Sie Möglichkeiten und Funktionen bereit, bei denen klar ist, wie sie eingesetzt werden. Wiederholungen sind hilfreich.
Nutzen Sie für Aufgabenbeschreibungen immer dieselbe Kombination aus Block und Text.
Wiederkehrende Muster erleichtern es zu verstehen, worum es sich handelt. Es steigert auch den Wiedererkennungswert, d.h. Nutzende verstehen sofort, wenn sie dieselbe Gestaltung wieder antreffen, dass es sich z.B. um eine Aufgabe handelt, wo man selber in Aktion treten muss.
Manchmal "ist weniger mehr". Erstellen Sie eine gelungene Kombination mehrerer Seitenelemente (z.B. Block mit Zweispalten, Bild, Überschrift und Text) und setzen Sie diese in gleicher Form mit unterschiedlichem Inhalt wiederholt ein. Ihr Layout wirkt dadurch aufgeräumt und ruhig und folgt einem klaren Raster.
Formulieren Sie Labels von klickbaren Elementen wie Buttons und Links so, dass klar ist was passiert.
Versprechen Sie nichts, was Sie nicht halten können. Nichts ist so enttäuschend wie wenn man erwartet auf die richtige Datei zu klicken, nur um nach dem Öffnen festzustellen, dass es doch nicht die richtige war. Sinnvolle Titel und Labels, die genau beschreiben was passiert, wenn man auf sie klickt oder in welchem Kontext man landet, helfen, die Erwartungshaltung von Nutzenden zu erfüllen.
Schreiben Sie statt "Klicken Sie hier" besser "Aufgabe 1 lösen" oder "Skript herunterladen". Um es Ihnen einfach zu machen und Nutzende nicht zu irritieren, nutzen Sie dieselben Wörter, wenn dasselbe passiert.
Je grösser die Anzahl und Komplexität der Auswahlmöglichkeiten, desto mehr Zeit benötigt die Person, Informationen zu verarbeiten und eine Entscheidung zu treffen.
Vermeiden Sie Unordnung und überladene Ansichten, indem Sie Nutzenden eine minimierte Anzahl an Auswahlmöglichkeiten zeigen. So vermeiden Sie Überstimulierung und Überforderung.
Nutzen Sie Akkordeons, um für schnellen systematischen Überblick zu sorgen.
Komplexe oder umfangreiche Inhalte werden in kleinere, logisch gegliederte Einheiten („Chunks“) aufgeteilt. Das erleichtert die Orientierung und unterstützt das schrittweise Erarbeiten von Wissen. Die Oberfläche bleibt übersichtlich und Nutzende werden nicht überfordert.
Formulieren Sie klare und einfache Labels als Akkordeontitel, die bereits einführen, was die Nutzenden gleich zu Gesicht bekommen, wenn Sie das Akkordeon öffnen.
Strukturieren Sie Ihre Inhalte mit Objekteblöcke in Abschnitte, die klar erkennen lassen, in welcher Reihenfolge diese bearbeitet werden sollen.
Die Navigation durch Kurse und Lernräume eröffnen den Nutzenden viele verschiedene Optionen (z.B. Themenordner, Pflichtinformationen, vertiefendes Material, Aufgaben). Wird sichtbar, welche dieser Optionen in welcher Priorität durchgearbeitet werden soll, wird die Entscheidung erleichtert, womit man sich befassen soll. Nutzende erkennen sofort, worauf es ankommt.
Bauen Sie eine klare und einfache Struktur mit Ordnern und Objektblöcken auf, anhand deren Titel klar wird, welche Wichtigkeit die Inhalte darin haben.
Eine Person, unabhängig von ihrer Disziplin, ihrem Alter, ihrem Qualifikationsniveau oder ihren Einschränkungen, soll mit der Benutzeroberfläche arbeiten können.

Ermöglichen Sie so vielen Nutzenden wie möglich, die dargestellten Inhalte zu verwenden und zu verstehen.
Tragen Sie bei Bildern Alt-Texte ein, um Personen mit zusätzlichen Bedienhilfen Angaben zur Darstellung zu liefern.
Alt-Texte sind ein zentrales Element, um Bilder für alle zugänglich zu machen. Darüber hinaus werden Alt-Texte angezeigt, wenn Bilder aus technischen Gründen nicht geladen werden können, und sie verbessern die Auffindbarkeit von Bildern in Suchmaschinen (SEO).
Dekorative Bilder benötigen keinen Alt-Text. Damit sind Bilder gemeint, die keine inhaltliche Bedeutung haben und keinen Informationsverlust bedeuten, wenn man sie nicht sehen kann.
Nutzen Sie Überschriften in der Reihenfolge 1, 2 und 3.
Überschriften dienen nicht nur zu Strukturierung des Contents, sondern können bei der Bedienung des Browser mithilfe der Tastatur auch als Sprungmarken verwendet werden.
Planen Sie Ihr Content-Überschriftenschema mit maximal drei Ebenen. Konzipieren Sie den Inhalt einer Seite so, dass keine Lücken im Überschriftenschema auftreten: Auf eine h1 darf also keine h3 folgen.

Für IHR Vorhaben

1
Strukturieren

Vorher: Inhalte strukturieren
Während: Studierende informieren
· · Positiver Effekt · ·
Gut abgeholte Studierende sind zufrieden und können sich mehr auf Ihre Inhalte fokussieren.
In einem gut strukturierten Seitenaufbau, berichten Sie als Verantwortliche:r über Ihr Vorhaben. Ihre Studierende sehen wann, welche Präsenzveranstaltung stattfindet, welche Aufgaben in einer asynchronen Veranstaltung auf Sie zukommen oder in welchem Thema Gruppenarbeiten vorgesehen sind. Mit einer „visuellen Struktur“ ermöglichen Sie nicht nur eine abrufbare Informationsseite, sondern Sie reduzieren dadurch Ihre administrativen Tätigkeiten.
Komprimieren Sie grosse Textmengen in lesbare Textabschnitte.
  • Nutzen Sie 1-2 Sätze als Einleitung für längere Textabschnitte, diese sorgen beim Scrollen für eine verständliche Sortierung.
Priorisieren Sie mit klar formulierten Überschriften Ihr Vorhaben.
  • Gut benannte Akkordeons, in 2-3 Spaltenlayouts, werden schneller erfasst und verstanden.

2
Vorbereiten

Vorher: Studierende vorbereiten
Während: Administration reduzieren
· · Positiver Effekt · ·
Gut informierte Studierende sind motiviert und bereiten sich auf Ihre Lehrveranstaltung vor.
Ihre Studierende statten Sie als Verantwortliche:r mit den wichtigsten Informationen aus und reduzieren gleichzeitig administrativen Aufwand. Je mehr Sie hier platzieren und Ihre Studierenden abholen, um so weniger werden Sie Fragen zur Veranstaltung, zur Prüfung, zu Terminen etc. beantworten müssen.
Verwenden Sie kurze und knackige Beschreibungen.
  • Auflistungspunkte können dabei helfen und sorgen gleichzeitig für eine schnelle Lesbarkeit.
Trennen Sie Aufgaben und Lehrveranstaltungsinhalte visuell voneinander ab.
  • Eine grafische Unterscheidung unterstützt in der Adressierung von Inhalten, verwenden Sie bspw. Icons, Farben oder Bilder in der Kachelansicht.

3
Aktivieren

Vorher: Studierende briefen
Während: Studierende auffordern
· · Positiver Effekt · ·
Gut beauftrage Studierende sind aktiv und neugierig auf das Bevorstehende.
Geben Sie als Verantwortliche:r einen Einblick in die bevorstehenden Aufgaben und motivieren Sie Ihre Studierende eigenverantwortlich alles durchzuarbeiten. Visuell aktivierende ILIAS-Kursräume inspirieren und mache aufmerksam auf bestimmte Lerninhalte.
Heben Sie Aufgaben und die gewünschte Handlung darin textlich hervor.
Oft gestellte Studi-Frage(n): Was muss ich bis wann erledigen, wo abgeben und wo finde ich alles?
  • Formulieren Sie die Aufgabe sichtbar mit einer grösseren Überschrift wie „Auftrag“ oder „Abgabe“ oder „Übung“.
  • Positionieren Sie an der gleichen Stelle eine Deadline/Abgabefrist und leiten Sie mit max. 2-4 Wörter direkt zum Abgabeort weiter.
  • Bereiten Sie vorher Ihre Anhänge vor und benennen Sie die Dateinamen so, dass beim Download alles ausserhalb von ILIAS gefunden werden kann.
Regen Sie durch eine einfache Aufforderung zur Interaktion an.
Oft gestellte Studi-Frage(n): Was ist denn hier meine Aufgabe? Muss ich schon was machen?
  • Formulierungen wie  „Für Early Birds – Ich bin gespannt wer es entdeckt“ oder „Easter Egg“ motivieren und fordern auf, auf Ihre Texte genauer zu achten und nach dem „Versteckten“ zu suchen.

  • Tipp: An dieser Stelle können Sie ausgewählte Inhalte platzieren. Die, die es entdecken, sind schon vorinformiert.
Weisen Sie auf relevante Lerninhalte oder Vorbereitungen rechtzeitig hin.
Oft gestellte Studi-Frage(n): Was erwartet mich in diesem Kurs, was kommt in der Prüfung vor und wie kann ich mich darauf vorbereiten? 
  • Nehmen Sie Ihre Studierende in die Verantwortung, indem Sie ganz klar formulieren, worauf es bei Ihnen ankommt.
  • Beschreiben Sie genau welche Themen/Inhalte im Selbststudium und in der Präsenzlehre jeweils behandelt werden.
  • Beschreiben Sie kurz wie die Leistungsnachweise benotet werden.
  • Formulieren Sie klar wie Sie bspw. Ihre Punkte für obligatorische oder optionale Teilleistungen vergeben.
  • Verlinken Sie sichtbar auf den Syllabus.

Für ihre umsetzung

· · Vorlage und Beispiele zum Nachmachen · ·
Gute Vorlagen motivieren und insprieren. Schauen Sie sich das Beispiel „Demokurs“ an und starten Sie mit Ihrem eigenen Vorhaben. Das untere Bild unterstützt Sie schrittweise in Ihrem Vorgehen.
Zum Demokurs
Beispielstruktur eines ILIAS-Kursraumes (interaktiv)
1 STRUKTURIEREN2 VORBEREITEN3 AKTIVIEREN