Zum Seiteninhalt springen
nach morgen — Startseite
Deutsch English
Smartphones mit dem Startscreen des Newstest – Inhalt des Screens: \

Interface (ehm. Stiftung Neue Verantwortung) |

Der Newstest

Konzeption & Entwicklung einer Web-Anwendung

  • Web Development
  • Educational Design & E-Learning
  • User Experience & Interface Design

Der Newstest ist eine Web-Anwendung, mit der Menschen ihre Fähigkeiten im Umgang mit digitalen Nachrichten auf die Probe stellen können. Entwickelt haben wir ihn im Auftrag von Interface – ehemalig Stiftung Neue Verantwortung (SNV) – vom ersten Konzept über Design bis hin zur technischen Umsetzung. Ziel war es, ein leicht verständliches, motivierendes und zugängliches Format zu schaffen, das komplexe Inhalte spielerisch vermittelt und Nutzer*innen dabei unterstützt, das eigene Medienverhalten zu reflektieren.

Für seine Relevanz und Gestaltung wurde der Newstest 2021 für den Designpreis Was ist gut? des Deutschen Designer Clubs (DDC) in der Kategorie Kommunikation nominiert.

Hier geht's zum Newstest!

Hintergrund und Zielsetzung

Interface ist ein Think Tank, der sich mit den gesellschaftlichen Auswirkungen technologischen Wandels beschäftigt. Im Rahmen des Themenbereichs Stärkung digitaler Öffentlichkeit führte die Stiftung 2020 die Studie Quelle: Internet? durch, in der die Nachrichtenkompetenz der Deutschen untersucht wurde. Um die Ergebnisse einer breiten Öffentlichkeit zugänglich zu machen, entstand die Idee, die Studienfragen in Form einer interaktiven Web-App umzusetzen. Gemeinsam mit der Stiftung entwickelten wir den Newstest – unterstützt von der Bundeszentrale für politische Bildung und der Landesmedienanstalt NRW.

User Experience & Interface Design

Im ersten Schritt haben wir für die Web-Anwendung ein konsistentes Interaktions- und Sprachkonzept entwickelt, um eine gute User Experience (UX) zu gewährleisten. Die Fragen des Selbsttests sind in fünf Abschnitte gegliedert, die jeweils eine Kernfähigkeit im Umgang mit digitalen Medien abbilden. Alle Inhalte sind so formuliert, dass sie von möglichst vielen Menschen verständlich sind – unterstützt durch Hilfestellungen, falls Nutzer*innen einmal nicht weiterkommen.

Mehr lesen Weniger lesen

Damit die Beantwortung der Fragen einfach und zugleich spannend bleibt, haben wir spielerische Interaktionsmuster entwickelt, die sich an alltäglichen digitalen Routinen orientieren: Bilder werden in Ordner geschoben, Aussagen auf Kartenstapel gelegt.

Visuell wird die Anwendung von einem stringenten Erscheinungsbild getragen. Herzstück ist eine Spinnengrafik, die die individuellen Ergebnisse veranschaulicht und einen Vergleich mit dem Durchschnitt erlaubt. Ergänzt wird die klare Formsprache durch Animationen und farbige Akzente sowie durch Illustrationen von Anni Stelke, die die fünf Kompetenzbereiche anschaulich darstellen.

Mehrere Tablets in schräger Anordnung mit unterschiedlichen Ansichten des Newstests, darunter Infografiken, Textmodule und Interaktions-Elemente
Ansicht des Bereichs „Navigieren“ mit Infotext und lilafarbener Illustration einer Person vor Symbolen für Webseiten
Ansicht des Bereichs „Beurteilen“ mit Infotext und orangefarbener Illustration einer nachdenklichen Person mit Stift in der Hand
Ansicht des Bereichs „Fakten checken“ mit Infotext und pinkfarbener Illustration einer Person am Laptop vor Checkbox- und Kreuz-Symbolen
Ansicht des Bereichs „Wissen und Verstehen“ mit Infotext und gelber Illustration einer Person mit Brille, die den Finger hebt
Ansicht des Bereichs „Mitreden“ mit Infotext und blauer Illustration einer Person mit mehreren Sprechblasen

Development

Technisch haben wir den Newstest als entkoppelte Anwendung umgesetzt:

  • Content-Management: WordPress dient als CMS zur Verwaltung von Fragen und Antworten und stellt Inhalte über eine API bereit.

  • Frontend: Die eigentliche Anwendung wurde als Single Page Application mit dem progressiven JavaScript-Framework Vue.js realisiert.

  • Responsivität: Von Beginn an wurde die Anwendung konsequent responsiv umgesetzt, sodass sie auf Desktop, Tablet und Smartphone gleichermaßen funktioniert und genutzt werden kann.

Durch diese modulare Struktur konnte der Newstest später auch für den österreichischen Medienmarkt adaptiert werden – mit neuen Inhalten, Illustrationen und einem eigenen Farbkonzept.

Mehrere Smartphones in einer Reihe mit unterschiedlichen Ansichten des Newstests, darunter Startbildschirm und Infoseiten zum Ablauf

Ergebnis

Der Newstest ging im März 2021 online und wurde innerhalb der ersten drei Wochen von über 300.000 Besucher*innen genutzt – allein 200.000 in den ersten fünf Tagen. Das Feedback war durchweg positiv: Nutzer:innen lobten die Relevanz und betonten, dass man beim Test wirklich Neues lernen kann. Die Anwendung erhielt große Aufmerksamkeit und wurde unter anderem auf Spiegel Online verlinkt, was ihre Reichweite zusätzlich verstärkte.

Seitdem wird der Newstest stetig weiterentwickelt und hat sogar länderübergreifend Interesse geweckt. Studierende der FH St. Pölten haben ihn gemeinsam mit der Wiener Zeitung für Österreich adaptiert.

Heute gehört der Newstest der Medienanstalt Berlin-Brandenburg (mabb) – und wir arbeiten weiterhin kontinuierlich am Produkt, um es technisch, visuell und inhaltlich aktuell zu halten.

Laptop, Desktop-PC und Tablet mit unterschiedlichen Ansichten des Newstests, darunter Infoseite, Startbildschirm und Quizfrage