Content is King – Design at least Duke
Lesedauer
9 Minuten
Thema
Screendesign
Gemäss Umfragen verbringen Schweizer/innen pro Tag durchschnittlich mehr als 4 Stunden vor Computer, Tablet und Handy. Dabei klicken und wischen wir ständig in Apps und Software rum, die alle von einem Profi konzipiert und gestaltet wurden. Auf diese Weise haben wir uns – ob bewusst oder unbewusst – einen enormen Erfahrungsschatz angeeignet, was Screendesigns, also die Gestaltung von Bildschirmoberflächen, anbelangt.
Vor diesem Hintergrund bin ich davon überzeugt, dass man es sich heutzutage nicht mehr erlauben kann, ein Lernprogramm zu entwickeln, das zwar didaktisch und methodisch hochwertig ist, aber vom Look and Feel her irgendwie besser ins Jahr 1995 passt. Genau so schnell, wie man ein schlecht gestaltetes Lernprogramm aufgemacht hat, wird man es wieder schliessen – wenn man den entsprechenden Button denn findet.
Mit diesem Beitrag erheben wir nicht den Anspruch, euch zu User Experience (UX) Profis oder Grafik-Genies auszubilden. Vielmehr möchten wir euch anhand der sechs häufigsten Fehler beim Gestalten von Lernprogrammen einige Grundregeln aufzeigen, mit denen ihr die häufigsten Faux-Pas vermeidet.
1. Eine schlechte Farbwahl
Das mit dem Regenbogen mag ja in vielerlei Hinsicht eine gute und schöne Sache sein. Bei der Gestaltung eines Lernprogrammes sollte man sich davon aber trotzdem nicht zu fest inspirieren lassen.
Zugegeben: Die richtige Wahl der Farben ist nicht einfach, zumal man sich in den meisten Fällen an ein CI/CD halten muss. Doch wenn die folgenden Tipps berücksichtigt werden, befindet man sich auf einem guten Weg:
2. Keine einheitliche Bildsprache
Achte bei der Bildwahl darauf, dass Illustrationen, Piktogramme und Fotos aus demselben Guss kommen. Gleichzeitig mit 2D- und 3D-Illustrationen zu verwenden, ist ein No-Go. Mit unterschiedlich detaillierten Piktogrammen zu arbeiten, wirkt dilettantisch. Professionelle Fotografien mit Laien-Schnappschüssen zu vermischen ist unprofessionell.
Ein roter Faden durch die Bildwahl zu ziehen, verleiht dem Lernprogramm automatisch eine gewisse Professionalität. Das heisst jedoch nicht, dass nur eine Art von Bild in einem Lernprogramm verwendet werden kann, eine Kombination von verschiedenen Bildtypen ist durchaus möglich. Wichtig aber auch hier: Vergebe die Aufgaben klar. Für Buttons eignen sich Piktogramme, abstrakte Inhalte lassen sich gut mit Illustrationen vermitteln und Fotos helfen, sich mit dem Gezeigten zu identifizieren und einen maximalen Bezug zur Praxis zu schaffen.
3. Die Wahl einer nicht weboptimierten Schrift
In einer Zeit, als Times New Roman das Königreich der Schriftarten beherrschte und unterdrückte, zählte man als Comic Sans Jünger zu den Revoluzzern, die Aufsehen erregten und für grosses Staunen sorgten. Heute nicht mehr. Glaubt mir.
Benutze einfache und für das Web optierte Schriftarten. Diese sind gut lesbar, werden auf den Geräten optimal angezeigt und wirken professionell. Mit den Google-Schriftarten “Open Sans”, “Montserrat”, “Roboto” oder “Ubuntu” machst du sicher nichts falsch. Diese und weitere Google Fonts zum gratis Runterladen findest du hier:
Wir empfehlen, höchstens zwei verschiedene Schriftarten zu verwenden – eine für die Titel und eine für die Lauftexte.
Ein weiterer wichtiger Aspekt bei der Gestaltung des Schriftbildes betrifft die Schriftgrösse. Sei auch hier konsistent und schlage dich auf die Seite der Benutzerfreundlichkeit. Auch wenn kleine Schriften sehr “clean” und modern wirken – die Lesbarkeit ist eindeutig höher zu priorisieren. Die laut Studien ideale Schriftgrösse für Lauftexte ist 16 Pixel.
4. Eine nicht intuitive Navigation
Wenn man sich schon einmal dazu aufgerappelt hat, den ersten Schultag in Angriff zu nehmen, sollte man auch wissen, wo die Schule liegt und wie man zum Klassenzimmer kommt.
Der User absolviert ein Lernprogramm, um zu lernen. Darauf sollte auch der Fokus bei der Gestaltung des User Interfaces gelegt werden. Wenn er seine – oft nur spärlich vorhandene – Zeit damit verbringen muss, sich zuerst in eine komplizierte Navigation einzuarbeiten, wirkt sich das negativ auf seine Motivation aus. Versuche daher nicht die Welt neu zu erfinden und halte dich an einfache Grundregeln: Platziere den Weiter-Button unten rechts, den Schliessen-Button oben rechts, und das Burger-Menü oben links.
Wenn der User nun die Schaltflächen auf den ersten Blick als solche erkennt und ihre Aufgabe richtig deutet, so hast du schon vieles richtig gemacht.
Und ist eine Interaktion dann doch mal etwas komplexer und weniger intuitiv in der Bedienung, sollten zwingend entsprechende Navigationshinweise platziert werden.
5. Kein roter Faden im Layout
In der Ruhe liegt die Kraft. Das mag beim Erstellen des Lernprogramms etwas langweilig anmuten, wenn der Text und die Bilder immer an derselben Stelle platziert werden, man jedes Bild immer pixelgenau zuschneidet und alle Schaltflächen bleiben, wo sie auf der letzten Folie waren. Doch genau darauf musst du unbedingt achten. Nachdem du die Haupt-Layouts für Startfolie, Kapitelübersicht, Lernzielfolie, Inhaltsfolie, Fragefolie etc. kreiert hast, solltest du dich daran halten – in guten wie in schlechten Zeiten. Unterschätze die User nicht: Ihnen wird jede Folie auffallen, die nicht ins Gesamtkonzept passt.
6. Unausgewogene Mischung aus Text und Bild
Eine komplett zugetextete Folie ist etwa so motivierend, wie der durchschnittliche Schweizer Wetterbericht im November. Eine willkürlich gestaltete Collage von Bildern mag zwar in einem Teenager-Zimmer an der Wand angebracht sein, nicht aber in deinem Lernprogramm.
Versuche mit einer ausgewogenen Mischung aus Bildern und Text ein ruhiges und für das Auge angenehmes Erscheinungsbild zu schaffen. Wir verfolgen hier das Credo, dass höchstens ⅓ der Folie mit Text gefüllt werden soll.
Fazit
Ich wünsche viel Erfolg!
ps. nun noch mein bester Tipp: Meldet euch bei uns – wir helfen euch beim Screendesign gerne weiter.
Content is King – Design at least Duke
Autor: Simon
Lesedauer: 8 Minuten
Thema: Screendesign
Gemäss Umfragen verbringen Schweizer/innen pro Tag durchschnittlich mehr als 4 Stunden vor Computer, Tablet und Handy. Dabei klicken und wischen wir ständig in Apps und Software rum, die alle von einem Profi konzipiert und gestaltet wurden. Auf diese Weise haben wir uns – ob bewusst oder unbewusst – einen enormen Erfahrungsschatz angeeignet, was Screendesigns, also die Gestaltung von Bildschirmoberflächen, anbelangt.
Vor diesem Hintergrund bin ich davon überzeugt, dass man es sich heutzutage nicht mehr erlauben kann, ein Lernprogramm zu entwickeln, das zwar didaktisch und methodisch hochwertig ist, aber vom Look and Feel her irgendwie besser ins Jahr 1995 passt. Genau so schnell, wie man ein schlecht gestaltetes Lernprogramm aufgemacht hat, wird man es wieder schliessen – wenn man den entsprechenden Button denn findet.
Mit diesem Beitrag erheben wir nicht den Anspruch, euch zu User Experience (UX) Profis oder Grafik-Genies auszubilden. Vielmehr möchten wir euch anhand der sechs häufigsten Fehler beim Gestalten von Lernprogrammen einige Grundregeln aufzeigen, mit denen ihr die häufigsten Faux-Pas vermeidet.
1. Eine schlechte Farbwahl
Das mit dem Regenbogen mag ja in vielerlei Hinsicht eine gute und schöne Sache sein. Bei der Gestaltung eines Lernprogrammes sollte man sich davon aber trotzdem nicht zu fest inspirieren lassen.
Zugegeben: Die richtige Wahl der Farben ist nicht einfach, zumal man sich in den meisten Fällen an ein CI/CD halten muss. Doch wenn die folgenden Tipps berücksichtigt werden, befindet man sich auf einem guten Weg:
-
Beschränke dich auf ein bis zwei Akzentfarben, die sich dann durchs ganze Lernprogramm ziehen. Zu viele Farben verderben den Brei.
-
Mit Weiss als Hintergrundfarbe für den Hauptinhalt kannst du nichts falsch machen. Das Lernprogramm wirkt leicht und lässt sich mit allen Farben und Bildtypen gut kombinieren.
-
Verwende die Farben konsistent und gib ihnen eine Aufgabe. Färbe z. B. alles, was angeklickt werden kann, blau ein – das hilft dem User, sich zurecht zu finden.
-
Lasse dich inspirieren: Dir gefällt eine App oder eine Website? Dann schau genau hin, wie die Farben eingesetzt wurden. Ich bin mir sicher, mit ein paar wenigen Anpassungen passt dieses Farbkonzept auch zu deinem CI/CD.