UI steht für „User Interface“, also die Schnittstelle zwischen Mensch und Software, auch Benutzeroberfläche genannt. Eine gute Benutzeroberfläche ist für E-Learning-Kurse enorm wichtig! Das umfasst alles vom Layout und Farbschema über Menüstrukturen bis hin zur Gestaltung einzelner Schaltflächen.

Eine gute Benutzerfläche muss in erster Linie intuitiv bedienbar, sprich selbsterklärend sein. Wenn Sie zur Erstellung Ihres Kurses Rise 360 oder Storyline 360 von Articulate verwenden, verfügen Ihre Kurse bereits über eingebaute intuitive Navigationsstrukturen. Wenn Sie aber z. B. in Storyline 360 Ihre eigene Navigationsstruktur oder sonstige interaktive Elemente entwerfen, muss Intuitivität oberste Priorität haben.

Hier sind drei zentrale Aspekte des UI-Designs, die Sie dabei beachten sollten:

1. Klare nächste Schritte

Wenn die Kursteilnehmer das Ende eines Abschnitts oder einer Folie erreichen, sollten sie sich nicht fragen müssen „Und jetzt?“. Es muss glasklar sein, wie es weitergeht, egal ob Sie eine kurze Animation einfügen, eine schlichte „Weiter“-Schaltfläche oder einen Satz wie „Klicken Sie auf die Reiter, um weiterzulesen“.

2. Bestehende Standards

Im UI-Design muss man nicht das Rad neu erfinden, das wäre oft sogar kontraproduktiv. Kreativität ist eher an anderer Stelle gefragt.

Hier sind ein paar bewährte Faustregeln und etablierte Standards aus verschiedenen Bereichen der Benutzeroberfläche.

Text

• Höchstens 2-3 verschiedene Schriftarten:
  • 1 für Überschriften
  • 1 für Fließtext
  • 1 für interaktive Elemente (Schaltflächen usw.)
• Keine kunstvoll verschnörkelten Schriftarten, keine grellen Farben. Mehr Tipps für gut lesbaren Text finden Sie in unserem Artikel 5 Tipps für legasthenikerfreundliche E-Learning-Kurse.
• Unterstreichungen nur für Hyperlinks verwenden.

Schaltflächen

• Schaltflächen als Rechtecke (mit spitzen oder abgerundeten Ecken) gestalten. Schlagschatten kann hilfreich sein, um hervorzuheben, dass das Element klickbar ist. Wenn Sie Schaltflächen im Flat Design bevorzugen, sollten Sie andere Möglichkeiten finden, sie als Schaltflächen erkennbar zu machen, z. B. durch kräftige Farben. Mehr Tipps zur Gestaltung von Schaltflächen finden Sie im Artikel Tips for Creating Great Buttons That Stand Out (auf Englisch).
• Schaltflächen mit Zuständen versehen, damit sie bei Mausberührung oder beim Klicken ihr Aussehen verändern (z. B. Farbe oder Form ändern).
• Deaktivierte Schaltflächen durchsichtig gestalten, nicht ausgrauen. Warum, wird in diesem Artikel erklärt: Why You Shouldn’t Gray Out Disabled Buttons (auf Englisch).
• Optionsfelder für Testfragen mit nur einer richtigen Antwort.
• Kontrollkästchen für Testfragen mit mehreren richtigen Antworten.

Symbole

• Verbreitete Symbole verwenden, z. B. für das Menü.
• Symbole mit Beschriftung kombinieren (entweder darunter oder bei Mausberührung).

Layout

• Weißraum gezielt einsetzen. Alles Wichtige dazu finden Sie in unserem Blogartikel 3 Tipps zum effektiven Einsatz von Weißraum im E-Learning.
• Schließen-Schaltfläche in der rechten oberen Ecke.
• Beim Layout für Smartphones die wichtigsten Schaltflächen unten anordnen, damit sie bei der Einhandbedienung mit dem Daumen erreichbar sind.

Das sind natürlich noch lange nicht alle sinnvollen Designrichtlinien für Benutzeroberflächen, lediglich ein paar Faustregeln, die Sie im Hinterkopf behalten sollten. Eine UI-Design-Bibel gibt es nicht, da sich Benutzeroberflächen immer an den konkreten Anwendungsfall anpassen müssen. Wenn Sie sich an einer Stelle unsicher sind, googlen Sie kurz, wie andere Designer das Problem gelöst haben. Wenn Sie eine Variante finden, die Ihnen intuitiv erscheint, versuchen Sie, sie nachzuahmen.

3. Konsequenz

Eines der wichtigsten Prinzipien im UI-Design ist Konsequenz. Wenn Navigationsschaltflächen mal grün und mal blau, mal oben auf der Folie und mal unten angeordnet sind, wird das die Kursteilnehmer verwirren oder zumindest Zeit kosten.

Legen Sie sich zu Beginn jedes E-Learning-Projektes Standards für Schriftarten, Schriftgrößen, Farben, Objektplatzierung und Funktionalität fest und halten Sie sich konsequent daran.

Fazit

Der Vorteil von Design-Richtlinien wie denen, die wir hier besprochen haben, ist, dass sich die Lernenden schneller in Ihrem Kurs zu Hause fühlen und sich auf den Stoff konzentrieren können anstatt sich mit der Benutzeroberfläche herumzuschlagen.

Und wenn Sie das Thema UI-Design einmal draufhaben, können Sie den nächsten Schritt gehen – zum UX-Design. UX steht für „User Experience“. Einen Einblick in diesen Bereich erhalten Sie mit unserem Artikel Wie Sie eine bessere Lernerfahrung gestalten.

Wenn Ihnen dieser Beitrag gefallen hat, abonnieren Sie doch unseren Blognewsletter.