Die App

Bedtime Story ermöglicht das Vorlesen von Gute-Nacht-Geschichten jetzt auch aus der Ferne und bietet dir damit die Möglichkeit, diese wertvolle Zeit auch aus der Distanz mit den Kindern zu verbringen. Die App bietet eine große Auswahl an kuratierten Geschichten, die du zusammen mit den Kindern entdecken kannst. Mit dem interaktiven Erzählmodus wird es dir leicht fallen, deine Zuhörer in den Bann zu ziehen. Werde für die Kleinen zum Alltagshelden!

Case Study

Einführung

Im Zusammenhang mit der raschen Ausbreitung von COVID-19 und den einhergehenden Einschränkungen rückt die Remote-Kinderbetreuung durch die Großeltern immer mehr in den Fokus.¹

Großeltern spielten bereits vor der sozialen Distanzierung eine große, aber leider oft unsichtbare Rolle in der Wirtschaft. Sie kümmern sich um ihre Enkelkinder, damit ihre erwachsenen Kinder arbeiten gehen können. In den USA betrifft dies ein Viertel der Kinder. Bemerkenswert ist, dass die Zufriedenheit der Großeltern mit dieser Situation bei 98% liegt. Mehr als vier von zehn Befragten geben an, seit dem Ausbruch häufiger von ihren erwachsenen Kindern oder Enkelkindern zu hören. 64% der älteren Erwachsenen gaben an, neue Technologien zu verwenden, um in Verbindung zu bleiben. Ungefähr zwei Drittel der über 65-jährigen sind mittlerweile online und ein Rekordanteil besitzt Smartphones.

Studien besagen, dass sogar Kleinkinder auf Video-Chat reagieren könnten und die American Academy of Pediatrics betrachtet den Live-Chat nicht als Bildschirmzeit.

Die Corona-Krise führt uns vor Augen, dass Menschen sich, meist aus medizinischer Notwendigkeit, in soziale Isolation begeben müssen. Gerade Kinder, die beispielsweise längere Krankenhausaufenthalte absolvieren müssen, fühlen sich einsam und vermissen die sozialen Kontakte zu Familie und Freunden. Der Bedarf für Remote Usage wird vor allem durch die Corona-Pandemie, aber auch durch die globalisierte Arbeitswelt, immer größer.

Unsere App soll daher, ganz im Sinne des Kursthemas, eine Brücke zwischen gemeinsamer sozialer Aktivität und physischer Distanz bauen.

¹) Quellen:

• Jargon, Julie: It’s Grandparents to the Rescue for Stressed Working-From-Home Parents, The Wall Street Journal (05.05.2020)
• Whitehurst, Lindsay: Grandparenting goes digital as coronavirus keeps older adults home, Chicago Sun Times (31.05.2020)
• Doleatto, Kim: Grandparents maintain communication during pandemic, Herald-Tribune (11.05.2020)

Analyse der sozialen Aktivität

Zunächst haben wir die ursprüngliche Aktivität des Vorlesens analysiert, um herauszufinden, was die Aktivität ausmacht und wie wir die verschiedenen Teilaspekte bestmöglich ins Digitale transferieren können…

• Vorlesen ist ein intimes, gemeinsames Ritual von (Groß-)Eltern und Kindern, um die Kinder ins Bett zu bringen

• Momente der Ruhe sind wichtig für beide Seiten, um zum Beispiel Fragen zu beantworten und Probleme zu besprechen

• Vorlesen stärkt die Beziehung untereinander und fördert soziale Bindung

• findet meist abends im abgedunkelten Kinderzimmer statt (es ist gemütlich und die Kinder fühlen sich geborgen)

• Kinder nutzen ihre Imagination und werden animiert sich kreativ in die Erzählung der Geschichte einzubringen

Erste Ideen

Unser Ziel soll eine App für Eltern und Kinder sein, die mit an die jeweilige Zielgruppe angepassten Funktionen und Interfaces das Remote-Vorlesen ermöglicht. Als Kick-off für unser Projekt sammelten wir einige Ideen und Constraints für unsere App:

• ein dunkles Interface soll die gemütliche Atmosphäre nachahmen und mithilfe von farblichen Akzenten Geborgenheit ausstrahlen

• den Kindern beim Vorlesen ausreichend Raum für ihre Imagination lassen

• kuratierte Geschichten-Bibliothek

• Videochat zwischen Vorleser und Zuhörer um auch neben dem eigentlichen Vorlesen Freiraum für Interaktion zu bieten

• Vorleser hat während der Vorlese-Session jederzeit volle Kontrolle über das Zuhörer-Device

• Remote-Shutdown des Zuhörer-Devices durch den Vorleser, etwa nachdem das Kind eingeschlafen ist

• Extra-Features für den Videochat, wie zum Beispiel Ausschalten des Mikrofons oder eigene Live-Hintergründe, falls die erforderliche Atmosphäre beim Vorleser nicht hergestellt werden kann


Wir haben natürlich auch verschiedene Aspekte gefunden, welche Remote gar nicht oder nur schwer abgebildet werden können:

• körperliche Nähe, da die erforderliche Intimität im digitalen Szenario verloren geht

• allgemeine Vorbereitung, wie z.B. der Weg ins Bett, muss bei Kleinkindern von einem anderem Elternteil oder Erwachsenen übernommen werden

Existierende Möglichkeiten

Um genügend Differenzierung zu existierenden Anwendungen zu schaffen und damit eine eigenständige Lösung zu schaffen, haben wir eine kurze Marktrecherche vorgenommen. Grundlegend kann man sagen, dass eigentlich alle Anwendungen im Bereich der Gute-Nacht-Geschichten, die wir gefunden haben, aich auf das gleiche Ziel konzentrieren. Es handelt sich um Lösungen, die den Eltern die Betreuung der Kinder abnehmen und diese versuchen so zu entlasten. Das Vorleseritual geht dabei als solches verloren, weil sich die Kinder allein in ihrem Zimmer beschäftigen, bis sie eingeschlafen sind. Den sozialen Austausch des Vorlesens, gemäß des Kursthemas, in den Mittelpunkt zu rücken, scheint ein innovativer Ansatz zu sein.

Research & Prototyping

Um die Anforderungen der Aktivität an eine potentielle App besser nachvollziehen zu können, haben wir die Aktivität mit existierenden Hilfsmitteln getestet und Erkenntnisse gesammelt. Beim Prototyping haben wir zwei Varianten ausprobiert: Das erste Mal haben wir über einen normalen Sprachanruf vorgelesen, um die Anwendung ohne Screen-Time zu testen. In der zweiten Runde haben wir das Vorlesen über einen Videoanruf getestet. Um die Perspektive von tatsächlichen Eltern einfließen zu lassen, haben wir ein Interview durchgeführt.

Die wichtigsten Erkenntnisse:

• Kuratierte Vorschläge für Geschichten und das Anlegen einer eigenen Favoritenbibliothek wäre wünschenswert

• Wunsch nach einer subtilen Möglichkeit der Beobachtung des Kindes, um zu sehen, ob es zuhört, von etwas besonders begeistert ist, schläft, desinteressiert oder sogar abwesend ist

• Feedback des Kindes an das Elternteil ermöglichen und eventuell Mimik/Gestik einbeziehen (beispielsweise ein Tippen auf das Device des Kindes könnte im Interface des Vorlesenden angezeigt werden)

• Charme des physischen Buchs gehört zum Vorlesen dazu: Das Papier riechen & fühlen, die Seiten umblättern, handgezeichnete Illustrationen. Können wir diesen Aspekt in die App übertragen?

• Es ist schwierig gleichzeitig einen Text zu lesen und das Kind auf einem Video-Feed im Blick zu behalten: Multitasking auf einem einzigen Screen wäre wünschenswert

• Ein Video-Feed des Elternteils auf dem Screen des Kindes lenkt von der eigentlichen Geschichte ab und ist weniger beruhigend als rein auditiver Input. Trotzdem stärkt es den sozialen Aspekt der Erfahrung. Kann das Video am Anfang vorhanden sein und während des Vorlesens verschwinden?

• Die Altersspanne der Kinder scheint relativ groß zu sein (ca. 2½ bis 8 Jahre), die App sollte daher unterschiedliche Geschichten für die verschiedenen Altersgruppen ermöglichen: zum Beispiel kurze, bilderreiche Geschichten für Kleinkinder und komplexere, textreichere Geschichten für ältere Kinder.

Mögliche Features

Aus den gesammelten Erkenntnissen haben wir eine erste Feature-Liste erstellt:

Im Diskurs innerhalb des Kurses hat sich außerdem herauskristallisiert, dass die App nicht nur die soziale Aktivität möglichst adäquat nachbilden soll, sondern auch als Tool für ein kreativeres Erzählen von Geschichten fungieren soll. Die App soll dem Vorlesenden verschiedene Möglichkeiten geben, die er im ursprünglichen, analogen Szenario nicht zur Verfügung hatte. Beispielsweise könnten Geschichten mit variierenden interaktiven Inhalten untermalt werden, um sie so jedes Mal ein wenig anders erzählen zu können.

Navigationsstruktur

User Flow

Role Selection

Startet der Nutzer die App, gelangt er über den Splash Screen zur Role Selection. Beim ersten Mal würde er ein Onboarding durchlaufen und sich so seinen Account anlegen. Hat er dies einmal durchlaufen, ist er beim nächsten Mal automatisch angemeldet und sieht eine entsprechende Begrüßung. Anschließend kann er eine Rolle auswählen, welche unter anderem durch das entsprechende Maskottchen (Vorleser: großer Panda, Zuhörer: kleiner Panda) repräsentiert wird. Wählt man die Rolle des Vorlesers, wird man in die Story Library weitergeleitet.

Library

In der Story-Bibliothek kann der Vorleser durch verschiedene Sammlungen, welche zum Beispiel nach Themengebiet, Genre, Autor, Aktualität, Popularität sortiert sind, scrollen. Außerdem gibt es eine Suchfunktion, welche schon während der Eingabe passende Geschichten vorschlägt oder auch verwandte Geschichten zum Suchbegriff vorschlägt. Wenn der Vorleser auf eine Story tippt, gelangt er in eine Detailansicht. Hier werden verschiedene Informationen über die Geschichte angezeigt. In der Detailansicht kann die Story dann in das eigene Bookshelf gestellt werden. Mithilfe des Bookshelfs kann der Vorleser eine Auswahl von bis zu drei Stories treffen, die er später dem Zuhörer vorschlagen kann. Über den „Start“-Button im Bookshelf kann der Vorleser den Auswahlprozess abschließen und das Pairing starten.

Pairing

Der Vorleser kann im Pairing-Screen eine Person aus seinen im Profil hinterlegten Kontakten auswählen, der er eine Geschichte vorlesen möchte. Sobald die Auswahl durch den Vorleser bestätigt wurde, startet die Session mit dem Video-Chat.

Video Chat

Im Video-Chat können beide Parteien gemeinsam eine Story aus dem zuvor zusammengestellten Bookshelf auswählen. Diese Vorbereitungsphase soll die soziale Interaktion nachahmen, welche vor dem eigentlichen Vorleseprozess stattfindet. In dieser Phase kann man sich mit dem Kind austauschen, eventuelle Probleme besprechen, Ratschläge geben oder auch Trost spenden. Ziel ist es eine gemütliche und geborgene Stimmung herzustellen, welche das Vorlesen einleitet.

Reader View

Der Reader View, oder auch Erzählmodus, ist das Herzstück der Bedtime Story App. Die Basis des Erzählmodus bildet die Geschichte selbst, welche an bestimmten Stellen durch verschiedene interaktive Elemente ausgeschmückt wird.

Es gibt dabei verschiedene Inhaltstypen, die je nach Geschichte in Art und Frequenz variieren. Neben Bildern und kleinen Film- oder Animationssequenzen können auch Sounds mit eingebunden werden. Visueller Content wird, nachdem er vom Vorleser gestartet wurde, großflächig auf dem Device des Zuhörers angezeigt. Beim auditiven Content gibt es neben Hintergrundgeräuschen, die im Loop ablaufen, auch kurze Sound-Effekte, die mehrfach hintereinander abgespielt werden können. An vielen Stellen kann der Vorleser auch zwischen verschiedenen Inhalten des gleichen Typs auswählen und somit die gleiche Geschichte auf unterschiedliche Weisen erzählen.

Falls das Kind während des Vorlesens den Bildschirm berührt, wird das auch im Interface des Vorlesers mit einem entsprechenden Marker angezeigt. Außerdem reagiert das sogenannte Eselsohr, ein Anschnitt des Video-Chats im unteren Bereich des Screens, mit einem visuellen Signal auf Aktivität seitens des Kindes. Der Vorleser kann dann über ein Herausziehen des Eselsohrs kurz nachsehen, was auf der Seite des Kindes los ist. Ist die Geschichte zu Ende, schiebt sich der Videochat durch die Scrollbewegung des Vorlesers automatisch zurück ins Blickfeld. Hier gibt es nun zwei Möglichkeiten: sich gegenseitig Gute Nacht zu sagen oder noch einmal das Bookshelf einzublenden, um eine weitere Geschichte vorzulesen.

Design Patterns

Bei der Entwicklung der einzelnen Features haben wir folgende Patterns genutzt, um die entsprechenden Anforderungen der sozialen Interaktionen aus dem analogen Raum bestmöglich in die App zu übertragen. Im Folgenden wollen wir drei Patterns genauer beleuchten, welche wir für die Bedtime Story App ausgearbeitet haben.

Role Selection Pattern

Beim ersten Starten der App kommt der Nutzer an eine Weggabelung, an der er sich entscheiden muss, ob er das Erzähler- oder das Zuhörer-Interface benutzen möchte. Die beiden Interfaces entscheiden sich grundlegend in ihrer Funktionalität und gehen so auf die sehr unterschiedlichen Bedürfnisse der beiden Nutzergruppen ein. Um die Entscheidung auch visuell zu untermalen, nutzen wir unsere beiden, aus dem App Icon bekannten, Panda-Maskottchen. Der große, erwachsene Panda steht abstrakt für die Vorleser-Rolle, der kleine Panda für die Zuhörer-Rolle. Dadurch ist die Entscheidung spielerisch und kann auch von Kindern getroffen werden, ohne den Text lesen zu können. Die Pandas sind auch eine Anspielung auf Kuscheltiere, die für die meisten Kinder nicht aus dem Bett beim Einschlafen wegzudenken sind.

Bookshelf Pattern

In der Story-Bibliothek können vom Vorleser bis zu drei Geschichten ausgewählt werden, die er anschließend in der Session dem Zuhörer vorstellen kann. Die Thumbnails der Geschichten werden dabei nach Start der Session geräteübergreifend verwendet, sodass die Auswahl der vorzulesenden Geschichte gemeinsam getroffen werden kann. Die metaphorische Anlehnung an das Ausleihen von Büchern aus einer herkömmlichen Bibliothek, um sie in das gemeinsame Bücherregal zu stellen, ist dabei beabsichtigt. Die Vorauswahl von Geschichten mithilfe des Bookshelfs ermöglicht die zwischenmenschliche Interaktion bei der Auswahl der Geschichte, ohne das Kind mit der riesigen Auswahl einer gesamten Bibliothek zu überfordern.

Video Peek Pattern

Dieses Pattern hat von uns bereits sehr früh den Namen Eselsohr erhalten, da es uns sehr an umgeknickte Ecken einzelner Seiten in einem Buch erinnert hat. Das Eselsohr ist dabei im Erzählmodus als kleine Ecke am unteren Rand zu sehen und überträgt den Video-Feed des Zuhörers. Durch diese sekundäre Rolle im Interface wird der Vorleser weniger abgelenkt als wenn das Video ständig als Overlay angezeigt wird, wie auch eine unserer früheren Iterationen des Features zeigt (→ zweites GIF). Möchte der Vorleser kurz zum Zuhörer hinüber spicken, was eine sehr häufige Interaktion beim analogen Vorlesen ist, zieht er das Eselsohr in die Mitte des Bildschirms. Lässt er das Eselsohr wieder los, schnappt es zurück in die Ausgangsposition. Zieht man es bis zum Anschlag heraus, wechselt die Anwendung vom Erzählmodus in den Video-Chat. Übrigens: Ist das Ende der Geschichte erreicht, schiebt sich das Eselsohr, ausgelöst durch die Scrollbewegung, fließend in die Mitte des Bildschirms und lässt den Vorleser so automatisch in den Video-Chat zurückkehren.

Ausblick

Flipbook Pattern

Das Flipbook Pattern leitet sich vom physischen Daumenkino ab. Durch Bewegen des Daumens werden die Seiten umgeblättert und zeigen ihren Inhalt. Diese Idee haben wir versucht ins Digitale zu übertragen: Durch eine Scroll-Bewegung auf dem Device des Vorlesers wird bei Erreichen einer festgelegten Position eine Aktion auf dem Device des Zuhörers ausgeführt. Die Wiedergabegeschwindigkeit der Geschichte könnte so durch die Scroll-Bewegung des Vorlesers gesteuert werden. In der letzten Version des App-Konzepts haben wir uns allerdings gegen ein scroll-basiertes Triggern entschieden. Dafür gibt es zwei Gründe: Wir wollen dem Vorleser Kontrolle über den angezeigten Inhalt geben – ihn also aussuchen lassen, welchen Inhalt er dem Zuhörer präsentieren möchte. Das wäre in einem scroll-basiertem Interface nur schlecht umzusetzen. Des Weiteren muss für die Abfrage der Scroll-Position ein Indikator, zum Beispiel eine Linie, festgelegt werden, an welcher diese gemessen wird. Dieses System ist alles andere als intuitiv und würde sich schwer vermitteln lassen. Allerdings ist der Kerngedanke hinter dem Flipbook Pattern sehr spannend und wir können uns vorstellen, ihn in Zukunft, zum Beispiel mithilfe von Spracherkennung, in einer intuitiveren Form wieder aufzugreifen.

Shared Storytelling

Im Verlauf des Projektes hatten wir die Idee, die Geschichten in unserer App nicht mehr nur von einer Person allein, sondern von mehreren Personen gleichzeitig erzählen zu lassen. So könnte im Beispiel von Rotkäppchen der Großvater die Rolle des Wolfs, die Mutter die Rolle des Rotkäppchens und der Vater die Rolle des Erzählers einnehmen. Das gemeinsame Erzählen der Geschichte würde sich dann wie eine Art Theaterstück gestalten: Der Text würde, wie in einem Skript, aufgeteilt werden. Die Idee ist, dass die App die vorzulesenden Textabschnitte für die jeweilige Person hervorhebt und die übrigen Abschnitte visuell herabstuft. Im Laufe des Arbeitsprozesses haben wir die Idee des Shared Storytellings vorerst nicht weiterverfolgt, da wir uns mehr mit der Kernfunktionalität der App beschäftigen wollten. Für die Zukunft ist es aber durchaus ein reizvolles Feature, welches wir gerne noch mit umsetzen wollen würden.

Shared Audience

Ähnlich wie die Geschichte von mehreren Personen erzählen zu lassen, wäre es auch denkbar, die Geschichte für mehrere Zuhörer vorzulesen. Man würde im Pairing-Screen mehrere Zuhörer auswählen, mit denen man die Session starten möchte. Wir haben uns letztendlich gegen die Implementierung dieses Features entschieden, weil wir fürchten, dass so die Intimität des Vorleserituals beeinträchtigt würde. Mit nur einem Zuhörer gestaltet sich der Video-Chat und das anschließende Vorlesen linearer und ist daher entsprechend der Grundidee der App unserer Meinung nach angemessener.

Zusätzliche interaktive Inhalte

Bisher nutzen wir bei den interaktiven Inhalten im Erzählmodus nur die technischen Möglichkeiten des Smartphones, beziehungsweise Tablets. Perspektivisch könnten wir uns aber auch vorstellen, den Funktionsumfang zu erweitern, indem wir z.B. IoT-Geräte mit einbinden und dadurch das Vorlese-Erlebnis noch immersiver und magischer zu gestalten. Beispielsweise könnten Sounds über Surround-Lautsprecher aus verschiedenen Richtungen abgespielt werden oder Smart-Home-Lampen dazu genutzt werden, die Stimmung visuell zu untermalen.

App Icon & Illustrationen

Das App Icon ist der erste Touchpoint eines potentiellen Nutzers mit der App und sollte entsprechend schnell aufzeigen, was die App im Kern ausmacht. Ausgehend von einem breit gefächerten Brainstorming haben wir uns auf eine Richtung geeinigt, welche die soziale Aktivität in den Fokus rückt. Die anfängliche Skizze hat zwei unserer Zielgruppen, Großeltern und Kinder, relativ deutlich porträtiert. Hierbei hatten wir aber das Gefühl, dass wir durch diese Festlegung die von uns angesprochene Nutzergruppe zu sehr einschränken und haben anschließend die Idee eines abstrakteren Maskottchens einfließen lassen. Zusammen mit dem Kurs haben wir in Miro eine Abstimmung durchgeführt und so das passendste Icon für unsere App ausgewählt. Im weiteren Prozess haben wir uns dazu entschieden, die beiden Pandas auch in der App aufzugreifen. Dort verkörpern sie nun die beiden zentralen Nutzergruppen: Vorleser und Zuhörer.

Tools

Für das visuelle Design und einen ersten Klick-Prototypen der App haben wir Sketch benutzt. Die Illustrationen sind analog gezeichnet und dann als Vektorgrafiken in Adobe Illustrator angelegt worden. Den interaktiven Prototypen wollten wir zuerst in der Web-Version von Framer umsetzen. Zumindest zum damaligen Zeitpunkt hatte das Programm aber Probleme mit dem Import von eigenen Schriftarten und schwächelte als Browseranwendung bei der Bearbeitung von komplexen Screens. Letztendlich sind wir auf Flinto ausgewichen und haben, nachdem wir unseren Prototypen gefilmt hatten, in Flinto nicht umsetzbare Komponenten nachträglich mit Adobe After Effects eingefügt. Für die Präsentation der User Flows (Vorleser und Zuhörer) mit Keynote war uns wichtig die Interfaces beider Nutzerrollen simultan zu zeigen, um so die gegenseitige Interaktion in den Vordergrund zu stellen.

Fazit

Den Ansatz des Kurses haben wir als sehr spannend und konstruktiv empfunden. Das Thema Remocial™ Life hat sowohl das Zeitgeschehen eingefangen, als auch die Inspiration geliefert, um innerhalb des eng eingegrenzten Rahmens (Soziale Aspekte von Freizeitaktivitäten in den Remote Use Case übertragen) neue, innovative Lösungen im existierenden App-Dschungel zu finden. Die Themenwahl für die App war nicht ganz einfach, aber dadurch können sich die App-Konzepte, die im Kurs entstanden sind, von existierenden Apps abheben. Um die sozialen Interaktionen angemessen ins digitale Medium zu übertragen, sind neue Design Patterns als innovative Lösungen für das Interaction Design entstanden. Die Entwicklung des Konzepts wurde durch Input zu diversen Themen, z.B. zu den Guidelines der jeweiligen App-Plattform und die richtige Implementierung, begleitet, der sofort im eigenen Projekt umgesetzt werden konnte. Die Feedback-Sessions waren zwar relativ kurz gehalten (was an der Anzahl der Kursteilnehmer bzw. eher der Projekte lag), aber haben unser Projekt jedes Mal einen Schritt nach vorne gebracht. Insgesamt sind wir mit dem Kursinhalt und der Betreuung sehr zufrieden gewesen und können den Kurs in dieser oder vielleicht in einer ähnlichen Form im nächsten Semester weiterempfehlen!