Zum Seiteninhalt springen
nach morgen — Startseite
Verschiedene Ausschnitte der interaktiven Webanwendung „Mein Tag im Büro“ auf grauem Hintergrund: Zu sehen sind mehrere Szenen mit stilisierten Büroumgebungen, Dialogfenstern, sowie der Avatar-Auswahl

BLM Stiftung Medienpädagogik Bayern |

Ein Tag im Büro

Web-Anwendung für den Medienführerschein Bayern

  • Illustration & Animation
  • Interaktions- & Gestaltungskonzept
  • UX & Interface Design
  • Web Development

Die Anwendung ist Teil des Online-Kurses Kommunikation im Job auf der Lernplattform mebis. mebis stellt digitale Unterrichtsinhalte und Anwendung für Pädagog*innen zur Verfügung. Innerhalb des Kurses soll die Anwendung in circa 20 Minuten durchgespielt werden – mit passenden Büro-Sounds, schöner Grafiksprache und kleinen Minispielen, die auf gute Kommunikation im Berufsalltag abzielen.

Hintergrund und Zielsetzung

Das Projekt Medienführerschein Bayern ist eine Initiative der Bayerischen Staatsregierung, die Lehrkräften und pädagogischen Fachkräften kostenlose Materialien zur Förderung der Medienkompetenz bereitstellt. In Zusammenarbeit mit der Bayerischen Landeszentrale für neue Medien und weiteren Institutionen werden digitale Lernangebote entwickelt, die sich an verschiedene Zielgruppen richten, darunter Berufsschulen.

Mehr lesen Weniger lesen

Als ein Modul des Projekts haben wir ein interaktives Lernspiel entwickelt, bei dem Auszubildende in einer Büro-Simulation verschiedene Kommunikationssituationen im Arbeitsalltag durchspielen können. Sie treffen dabei Entscheidungen zu Themen wie Kommunikation mit Vorgesetzten, Kolleg*innen und Kund*innen.

Illustration

Die Illustrationen, die im Spiel eingesetzt werden, sind ansprechend und zielgruppengerecht gestaltet. Sie sind schlicht, aber effektiv, und vermitteln den Arbeitsalltag in einer Büro-Umgebung, was die jungen Nutzer*innen gut ansprechen dürfte. Die Farbpalette ist dezent und nicht überladen, was den Fokus auf die Inhalte und Aufgaben lenkt.

Illustrierte Person mit kurzen braunen Haaren, grauer Jacke, weißem T-Shirt, schwarzer Hose und weißen Sneakern
Illustrierte Person mit braunen schulterlangen Haaren, lila Jacke, hellblauem Schal, weißem Shirt, beiger weiter Hose und weißen Sneakern
Illustrierte Person mit langen weißen Haaren, schwarzem Oberteil mit gelbem Stern, schwarzer kurzer Hose und beigefarbener Umhängetasche
Illustrierte Person mit kurzem dunklem Haar und Bart, grünem Hoodie, weißem T-Shirt, grauer Hose und dunkelgrauen Sneakern
Illustrierte Person mit braunen Haaren, beigem Pullover, blauer Hose und weißen Schuhen
Illustration einer Szene in der Webanwendung: Weitwinkel-Ansicht eines modernen, ruhig wirkenden Büroraums mit Schreibtisch, Regalen, Pflanzen, Couch und Bildern an der Wand. Eine Person sitzt am Schreibtisch und arbeitet am Laptop
Illustration einer Szene in der Webanwendung: Weitwinkel-Ansicht eines offenen, modern eingerichteten Großraumbüros mit mehreren Arbeitsplätzen mit Computern, Pflanzen, einer Uhr, Regalenund einem Whiteboard. Die Szene wirkt ruhig und aufgeräumt und bildet den Hintergrund für verschiedene interaktive Stationen in der Webanwendung
Illustration einer Szene in der Webanwendung: Weitwinkel-Ansicht eines modernen Besprechungsraums mit großem Monitor, Flipchart, Pflanzen und mehreren Stühlen rund um rechteckige Tische auf denen Getränke stehen

User Experience & Ablauf

Die Anwendung beginnt mit einem klar strukturierten Onboarding: Nutzer*innen wählen einen Avatar und betreten die simulierte Büroumgebung, starten am Schreibtisch und folgen Schritt für Schritt den ersten Aufgaben. Diese lineare Phase konzentriert sich auf Kommunikationssituationen im Arbeitsalltag. Bei falschen Antworten gibt der integrierte „CleverBot“ direkt Feedback und Tipps – sowohl schriftlich als auch vertont.

Mehr lesen Weniger lesen

Bis zur Mittagspause bleibt der Ablauf linear. Danach können die Nutzer*innen frei verschiedene Räume erkunden – darunter den Hauptraum, den Konferenzraum und das Büro der Kollegin. Jeder Raum bietet spezifische Aufgaben, deren Bearbeitung den Spielfortschritt anzeigt, unter anderem durch die Uhrzeit auf den Bildschirmen. Das Spiel endet, wenn die Nutzer*innen das Büro verlassen; eine abschließende Aufgabe wird ausgewertet und als PDF-Zusammenfassung zur Reflexion bereitgestellt.

Die Anwendung ist für den Einsatz auf Tablets und Smartphones optimiert, sodass sie sich flexibel an verschiedene Bildschirmgrößen anpasst. Dies sichert eine reibungslose Bedienbarkeit, Lesbarkeit und Interaktion – entscheidend für den Lernerfolg. Gleichzeitig unterstützt das responsive Design die Barrierefreiheit, sodass alle Schüler*innen die Anwendung effektiv nutzen können.

Mobile Ansicht der Webanwendung mit Auswahlbildschirm zur Avatarwahl, ausgewählt ist eine illustrierte Person mit braunen schulterlangen Haaren, lila Jacke, hellblauem Schal, weißem Shirt, beiger weiter Hose und weißen Sneakern
Mobile Ansicht der Webanwendung \
Mobile Ansicht der Webanwendung mit Avatar-Auswahl, ausgewählt ist eine illustrierte Person mit kurzem dunklem Haar und Bart, grünem Hoodie, weißem T-Shirt, grauer Hose und dunkelgrauen Sneakern
Mobile Ansicht der Webanwendung mit Textbox zur Begrüßung durch die Figur „Mena, die Mentorin“. Oben ein Avatarbild, darunter ein Einführungstext mit Hinweisen zur Unterstützung. Über einen Lautsprecher-Button kann der Text vorgelesen werden, daneben befindet sich der Button „Alles klar!“
Mobile Ansicht der Webanwendung mit illustrierter Arbeitsplatz-Szene. Im Vordergrund erscheint eine Sprechblase der Figur „Mena“, die daran erinnert, dass noch nicht alle Aufgaben erledigt sind. Im Hintergrund ein Schreibtisch mit Monitor und Notizzettel
Mobile Ansicht der Webanwendung mit geöffneter Messenger-Ansicht: Eine Nutzerin gibt eine Nachricht ein, darunter antwortet die Figur Mena mit einem erklärenden Text zum Verhalten in Online-Meetings. Der Text kann über einen Lautsprecher-Button vorgelesen werden
Mobile Ansicht der Webanwendung mit Textbox und Frage zum Thema „Private Smartphone-Nutzung“ und zwei Antwortmöglchkeiten
Mobile Ansicht der Webanwendung mit illustriertem Büroraum. Im Zentrum ein Schreibtisch mit Bürostuhl, Monitor und weiteren Gegenständen auf dem Schreibtisch wie Telefon und Kaffeetasse
Mobile Ansicht der Webanwendung mit Textbox zum Thema „Anruf eines Kollegen“ und einer Auswahlmöglichkeit zum Gesprächsthema. Unten Navigationsbuttons zur Beantwortung der Frage