„Content is King – Design at least Duke“ – das wissen wir (spätestens) seit Simon’s Blogbeitrag. Und auch wenn der Beitrag bereits 2 Jahre alt ist, eins hat sich nicht geändert: Wir sind nach wie vor fest davon überzeugt, dass das „Look-and-Feel“ eines Lernprogramms enorm wichtig ist. Die Entwicklung eines geeigneten Screendesigns steht bei uns daher am Anfang eines jeden Projektes. Was wir dazu benötigen und wie wir vorgehen, erzählen wir euch in diesem Beitrag.

Wir sind auch ein bisschen Grafikerinnen und Grafiker

Unsere Lernprogramme entstehen zu 90% im Hause HK – resp. seit neustem im Hause Somedia. Für die übrigen 10% ziehen wir unser Partnernetzwerk zu Hilfe,  allen voran Profisprecherinnen und Profisprecher, Grafikerinnen und Grafiker sowie Animationsdesignerinnen und Animationsdesigner. Ersteres können wir Inhouse nicht abdecken, denn niemand von uns hat eine „Radio-Stimme“. Im Bereich Grafik holen wir vor allem für komplexe Grafiken oder Animationsvideos Unterstützung, da wären wir schlicht zu langsam. Vor rund einem Jahr haben wir unsere grafischen Fähigkeiten mit Livia verstärkt. Sie betritt die Bühne, sobald die Bedarfsermittlung abgeschlossen ist, die Offerte unterzeichnet wurde und das Kickoff-Meeting stattgefunden hat. Dann nämlich starten wir mit der Aufbereitung der Inhalte – und der Entwicklung des Screendesigns. 

Damit wir vom selben sprechen: Unter dem Begriff „Screendesign“ versteht man die grafische Gestaltung von Benutzeroberflächen. Screendesigns finden in allen Bereichen Anwendung, in welchen die visuelle Gestaltung von Screens oder Displays im Rahmen der Interaktion zwischen Benutzern und Maschinen von Bedeutung ist. 

Die Ziele der grafischen Umsetzung der Inhalte sind klar: Die Userführung soll verständlich sein, das Layout ansprechend und alles soll aus einem Guss kommen. Dabei gilt es aber stets im Hinterkopf zu behalten, dass die Gestaltung die Wissensvermittlung unterstützen, aber nicht von ihr ablenken soll. 

Livia, du hast seit Mai 2020 schon zahlreiche Screendesigns entwickelt. Dein erstes Screendesign war für eine grosse Schweizer Milchverarbeiterin. Was war dabei die grösste Herausforderung? 

Die grösste Herausforderung war wohl der Umgang mit dem Druck, den ich mir selbst gemacht habe. Beim ersten Projekt legt man sich natürlich besonders ins Zeug, um zu zeigen, was man kann und wie viel Kreativität in einem steckt. Da Grossunternehmen, wie eben diese Schweizer Milchverarbeiterin, aber oft ein sehr ausführliches CI/CD haben, das beachtet werden muss, ist die eigene Kreativität stark eingeschränkt – und daher umso mehr gefordert. Hinzu kommen noch die Vorgaben an die Userführung: Menü, Weiter-/Zurückbutton usw., alles soll seinen Platz finden. Bei meinem allerersten Screendesign gab es einige Herausforderungen!  

Work in progress: Vorschläge für Kapitelübersichten

Bereit? Los geht’s!

Nachfolgend zeigen wir euch auf, wie wir ein passendes Screendesign für ein Lernprogramm entwickeln. Natürlich gibt es noch viele weitere Ansätze und Möglichkeiten. Für uns haben sich aber folgende 4 Schritte bewährt: 

Schritt 1: Rahmen abstecken und auf Entdeckungsjagd gehen

Zu Beginn eines jeden Projekts stehen weisse, leere Folien. Das Screendesign haucht diesen Folien Leben ein und bildet die Grundlage für das gesamte Projekt. Um diese Grundlage schaffen zu können, stecken wir zuerst den Rahmen ab und gehen auf Entdeckungsjagd. Dabei hilft uns folgendes: 

• CI/CD: Die Informationen aus dem CI/CD der Auftraggeberin resp. des Auftraggebers geben einen groben Rahmen vor, in welchem wir uns bewegen können. Dazu gehören in der Regel Vorgaben bezüglich Schriftarten, Illustrationsstilen, Bildsprache und Farbwelt. 
• Zielgruppe & Thema: Elementar sind auch die Zielgruppe und das Thema des Trainings.
  • Bei der Zielgruppe geht es vor allem darum, das Screendesign dem Alter entsprechend zu gestalten und an die technische Affinität der User anzupassen. Diese sollen das Lernprogramm ohne grosse Anleitung bedienen können.
  • Das Thema gibt u. a. auch Aufschluss darüber, wie „verspielt“ ein Screendesign aussehen kann. Für eine Compliance-Schulung beispielsweise eignet sich ein schlichtes Design besser als ein Design mit vielen verschiedenen Farbkomponenten und Gestaltungselementen.
• Endgerät: Damit das Design optimal zur Geltung kommt und bedienerfreundlich ist, ist es wichtig zu wissen, für welche Screens es optimiert werden soll. Ein mobile-optimiertes Screendesign sollte weniger Elemente und verhältnismässig grössere Schaltflächen enthalten als das Screendesign für ein Lernprogramm, das schlussendlich vor allem auf Notebooks abgespielt wird.
• Auftritt: Die Websites, Broschüren und andere bestehende Unterlagen eines Unternehmens geben einen guten Eindruck über den Einsatz von Farben, Formen und Bilder, die im Screendesign zur Anwendung kommen könnten. 

Diese Elemente geben uns Anhaltspunkte über den Rahmen, der uns zur Verfügung steht und erste Ideen, wie wir Inhalte visuell umsetzen könnten. 

Livia, wie bringst du deine Ideen aufs Papier (resp. auf den Bildschirm)? 

Es gibt Tage, da habe ich 100 kreative Ideen und kann sofort loslegen. Ich halte meine Ideen zuerst fest – manchmal analog, manchmal digital. Danach beginnt der eigentliche Prozess im Indesign: Ich erstelle immer wieder Kopien und bei jeder Kopie ändere oder ergänze ich etwas. So “wächst” das Design Schritt für Schritt, bis alles perfekt ist. Natürlich gibt es auch immer wieder Tage, an denen ich einfach nicht auf einen grünen Zweig komme. In solchen Momenten lasse ich mich gerne im Internet (Pinterest, Envato Elements, Google Suche etc.) inspirieren. Man muss die Welt ja nicht immer neu erfinden!

Schritt 2: Definition zentraler Elemente

Als nächstes überlegen wir uns, welche Folientypen wir für das Lernprogramm benötigen. Zu den zentralen Elementen eines (fast) jeden Lernprogramms gehören zum Beispiel die Startseite, die Einleitung, die Kapitelübersicht, Folien mit interaktiven Elementen sowie Fragefolien. Natürlich können wir im Screendesign nicht alle Folientypen umsetzen, die wir für das Lernprogramm benötigen, sondern beschränken uns auf eine repräsentative Auswahl. Meist gehören dazu die Startseite, eine bis zwei Theorieseite(n), eine interaktive Seite sowie eine oder mehrere Frageseite(n). Anhand dieser Basisfolien leiten wir dann während der Produktion die weiteren benötigten Folien ab. 

Kapitelübersicht, Fragefolie und Theoriefolie der Flughafen Zürich Projekte. 

Die in Schritt 1 generierte Information bezüglich der Bildschirmgrösse gibt uns Orientierung, wie gross die Folie sein muss (Länge und Breite). Das CI/CD des Unternehmens gibt uns Schriften, Farben und die Platzierung des Logos vor. Von diesen Rahmenbedingungen ausgehend erstellen wir das Layout. Dazu zählen z. B. die Abstände oder die Platzierung der Navigations- und Gestaltungselemente. 

Anschliessend entscheiden wir uns für eine passende Bild- und Illustrationssprache, bevor wir uns dem Buttonkonzept widmen. Letzteres beinhaltet Navigationselemente wie Weiter- und Zurück-Button, die Menü-Schaltfläche oder ein Antworten-Button. Wichtig ist, dass alles zueinader passt. Das heisst: Haben die Schaltflächen runde Ecken, so sollen auch die Illustrationen runde Formen haben; sind die Schaltflächen hingegen eckig, so sollen auch die Illustrationen eckige Formen aufweisen. Klingt logisch, oder? 

Damit sich die User von Beginn an gut orientieren können, ist es wichtig, dass zentrale Elemente wie Logo, Weiter- und Zurückbutton, das Menü etc. über das gesamte Lernprogramm an der gleichen Stelle stehen und möglichst intuitiv zu bedienen sind.

Achtung: Intuitiv ist nicht für alle gleich!

Die intuitive Anordnung der Elemente in der westlichen Kultur ist nicht gleich wie z. B. in arabischen Ländern. Da wäre es genau umgekehrt, man erinnere sich: Während wir Europäer von links nach rechts lesen, lesen die Menschen arabischer Kulturen von rechts nach links.

Livia, was macht für dich ein gutes Screendesign aus?

Für mich ist ein Screendesign dann gut, wenn das Gesamtbild harmonisch wirkt und die Farben, Formen und Bilder zueinander und zum Thema passen. Es darf auch gerne etwas spezielles an sich haben, wie die Form der Bilder oder der Buttons. Wichtig ist aber, dass es nicht überladen wirkt. Die User sollen sich auf die Inhalte konzentrieren können und nicht vom „Drumherum“ abgelenkt werden. Und nicht zuletzt soll das Screendesign helfen, die Inhalte attraktiv zu transportieren und ein Erlebnis ermöglichen, das bleibt. 

Fragen über Fragen: Welche und wie werden Keyvisuals eingesetzt? Welche Buttons werden benötigt? Wo werden sie platziert – und wie sehen sie aus? 

Schritt 3: Technische Umsetzung

Wie bereits zu Beginn dieses Beitrags erwähnt: Wir sind überzeugt, davon dass das „Look-and-Feel“ einen grossen Einfluss auf die Qualität eines Lernprogramms hat. Mit dem Screendesign haben wir nun aber vor allem den „Look“ definiert, das „Feel“ fehlt noch. Um unseren Auftraggeberinnen und Auftraggebern auch einen Eindruck darüber zu vermitteln, wie sich das Lernprogramm „anfühlt”, verwandeln wir das statische Screendesign in einen interaktiven Prototypen. Das heisst: Den wichtigsten Bestandteilen des Screendesigns hauchen wir noch etwas mehr Leben ein, indem wir die einzelnen Elemente interaktiv aufbereiten. Dazu nutzen wir Autorentools wie z. B. Articulate Storyline, Articulate Rise oder Adobe Captivate. 

Schritt 4: Feedback einholen 

Das letzte Wort beim Screendesign hat natürlich die Auftraggeberin resp. der Auftraggeber. Nachdem wir den Prototypen entwickelt haben, lassen wir diesen reviewen. Sind wir auf dem richtigen Weg? Was muss noch angepasst werden? Oft erhalten wir auch Feedback seitens der Kommunikationsabteilung eines Unternehmens. Nachdem wir Feedback erhalten haben, geht es an die Umsetzung und Aufbereitung der gesamten Inhalte. 

Das Wichtigste in Kürze

Ein gutes Screendesign ist ein ästhetisches Gesamtbild, das bestmöglich auf die Zielgruppe, die Inhalte, den Auftritt des Unternehmens und die Userführung abgestimmt ist. Wie so oft macht es auch bei der Realisierung eines Screendesigns Sinn, alles Schritt für Schritt anzugehen: 

1. Sich einen Überblick verschaffen: Gibt es ein CI/CD? Wie ist der Auftritt des Unternehmens? Welche Eigenschaften haben Zielgruppe und Thema? Für welches Endgerät sollen die Inhalte optimiert werden? 
2. Zentrale Elemente definieren: Welche Folientypen müssen umgesetzt werden? Welche zentralen Elemente (z. B. Navigationsschaltflächen) werden benötigt? Wie sehen diese aus? 
3. Das Design technisch umsetzen: Dem Screendesign Leben einhauchen und erste Folien auch technisch umsetzen.
4. Feedback einholen: Die Auftraggeberin/den Auftraggeber resp. die Zielgruppe das “Feel” spüren lassen und Feedback einholen.

Natürlich ist das Screendesign nach diesen Schritten nicht in Stein gemeisselt. Bei der Erarbeitung der Betaversion wird es weiterentwickelt und verfeinert. Was wir euch aber unbedingt empfehlen: Achtet von Beginn an unbedingt darauf, dass das Grundgerüst aus Navigationselementen, Formen, Farben und Schriften über alle Folien hinweg gleich bleibt. Beschränkt euch auf wenige Ideen und lasst Platz für die Inhalte. 

Weitere Tipps zu Formen und Farben findet ihr übrigens auch in diesem Beitrag. Und: Wir ihr in Articulate Storyline Farben, Schriften und Abstände definiert, erklärt euch Simon in diesen Tutorials. 

Nun wünschen wir euch viel Freude, eine grosse Portion Kreativität und viel Geduld bei und mit euren Screendesigns. Wenn ihr nicht weiterkommt oder Hilfe benötigt, könnt ihr euch wie immer gerne bei uns melden!