Wie wir mithilfe von Illustrationen eine App zum Leben erweckt haben

Erschienen am 04.01.2018 um 07:54 Uhr

Wie wir mithilfe von Illustrationen eine App zum Leben erweckt haben

Der Prozess der Erstellung einer großartigen Benutzererfahrung beginnt mit der Recherche und dem Extrahieren von Erkenntnissen aus den gesammelten Informationen. Aber Einsicht allein ist nicht genug. Du brauchst Empathie. Wenn Sie mit der Entwicklung einer App-Erfahrung beginnen, müssen Sie in der Lage sein, sich außerhalb Ihres eigenen Kopfes und in den Köpfen Ihrer Benutzer zu bewegen.

Für unsere kürzlich abgeschlossene Eye to Eye Empower-App für verschiedene Lerner bedeutete das Empathie mit dem 1 von 5 Schülern mit Lernschwierigkeiten. Eye to Eye, ein Non-Profit-Programm von und für Menschen mit Lernunterschieden wie Legasthenie und ADHS, ist ein physisches Netzwerk von mehr als 150 Schulen in den USA, wo "Mentoren" und "Mentees" einmal wöchentlich zusammenkommen Kunstprojekte, die speziell darauf ausgerichtet sind, ähnliche Erfahrungen zu teilen und gleichzeitig soziale emotionale Fähigkeiten wie Selbstachtung und Selbstvertrauen aufzubauen.

In unserem vorherigen Beitrag haben wir darüber gesprochen, wie wir verschiedene Ansätze für die UX insgesamt untersucht haben und wie wir die körperliche Erfahrung der Teilnahme an Eye to Eye in eine digitale Umgebung transformieren können, die Millionen anderer Kinder erleben können lebe in der Nähe eines der Kapitel.
Die Design-Herausforderung war Selbstdarstellung. Konkret, wie können wir Kindern helfen, mit der App die gleichen Ziele der Klassenzimmerkunst zu erreichen, um den eigenen Ausdruck zu fördern, aber zu wissen, dass der Schüler keinen Zugang zu Kunstbedarf hat?

Übersetzen von Erfahrungen
Mobile Geräte bieten viele Eingabemöglichkeiten und es gibt bereits zahlreiche Apps, mit denen Sie mit Ihren Fingerspitzen skizzieren und malen können. Aber wir verstanden, dass ohne einen Lehrer, der den Schüler führt und motiviert, die Erfahrung des Malens und Zeichnens auf einem Gerät zu komplex oder frustrierend sein könnte.

Also entschieden wir uns, kein Zeichenbrett zu bauen, sondern stattdessen ein Toolkit zu erstellen, mit dem sich die Schüler leichter ausdrücken können. Dann haben wir mit unseren Freunden bei Eye to Eye zusammengearbeitet und einen anderen Ansatz entwickelt: Anstatt dass die Nutzer tatsächlich auf dem Bildschirm zeichnen, stellen wir Elemente und Illustrationen bereit, die mehr wie Aufkleber funktionieren. Die App-Nutzererfahrung konzentriert sich daher darauf, verschiedene digitale Kunstwerke und ihr eigenes Portrait in Collagen und zusammengesetzte Bilder zu kombinieren.

Diese einfache Verschiebung half uns, die Erfahrung zu verfeinern, und wir wurden schnell zuversichtlich, dass wir ein solides Konzept hatten.
Einen anschaulichen Stil etablieren
Nachdem wir uns für das Format entschieden hatten, mussten wir einen Design-Stil festlegen, um die Illustrationen zu erstellen. Die Definition des Stils kam zurück, um die Bedürfnisse unserer Nutzer zu verstehen. Der typische Eye-to-Eye-Schüler ist 10-14 Jahre alt, aber die App kann von jedem Grundschul- bis zum höheren Schulalter benutzt werden. Wir führten eine Inspirationsstudie durch, um mehr über die Perspektive der Schüler zu erfahren - einschließlich des Treffens mit Augen-zu-Auge-Mentoren und -Mitarbeitern und dem Anschauen einiger der Schüler, die am Unterricht teilnahmen. Wir haben einige frühe Skizzen (oben) entworfen, die in einem Cartoon-Format waren, um zu versuchen, die App lustig und kreativ zu machen. Aber wir waren nicht ganz glücklich mit dem Ton.

Auch wenn sich ältere Schüler mit einer Zeichentrickfigur identifizieren können, möchten viele jüngere Schüler aufhören, Kinder genannt zu werden. Bei unseren Recherchen stellten wir fest, dass sie nicht gut auf eine Zeichentrickfigur reagierten und sie als "zu kindisch" ansahen. Also, zurück zum Zeichenbrett.

Durch das Interview mit Mitarbeitern von Eye To Eye lernten wir mehr über die Arten von kulturellen Referenzen, die Studenten inspirierten. Zusammen haben unsere Teams einen neuen Ansatz entwickelt. Wir glaubten, dass wenn wir ein Superhelden-Thema verwenden und dann den Ton anpassen würden, um mehr "cooler Teenager" zu sein, würde dies eine Reihe von Schülern inspirieren, von jung bis alt.
Vergleich der frühen Cartoon-Skizzen (links) und des finalen "coolen Teenagers" (rechts).

Wir haben diesen Superhelden-Stil mit dem Kunden und den Zielbenutzern getestet und waren zuversichtlich, dass wir mit diesen Illustrationen den Ton erreicht haben. Aber es gab eine andere Herausforderung: wie man diese Charaktere lustig und dynamisch, aber auch geschlechts- und ethnisch neutral macht.

Es geht nur um die Pose
Parallel zu den Stilstudien und -explorationen erstellten wir eine Liste von Qualitäten, Aktivitäten, Orten und Objekten basierend auf spezifischen Attributen, auf die sich die Schüler beziehen konnten. Eine fertige Collage würde also nicht nur von einem Charakter handeln, sondern von einer vollständigen und bedeutungsvollen Szene.

Auf diese Weise könnte ein zusammengesetztes Bild eine Kombination von Attributen beinhalten und Dinge wie: Ich sehe mich selbst als Ninja, ich mag Mathe, ich fühle mich sicher in meinem Zimmer, mein Lieblingsessen ist Pizza und ich bin dafür bekannt ein guter Freund zu sein . Diese bedeutungsvollen Eigenschaften würden mit einem Porträtbild des Studenten zusammen mit Ballonnachrichten, einer Hintergrundszene und Requisiten zusammengesetzt werden.

Wir begannen mit Charakteren, die einfache und symmetrische Körperformen hatten, aber diese veranschaulichten nur das Aussehen, aber nicht die Einstellung. Wir haben erkannt, dass wir einen dynamischeren Ansatz brauchen, der sich nicht nur auf den visuellen Stil, sondern auch auf die Bewegung konzentriert. Schließlich sind Superhelden nicht statisch. Mit diesem illustrativen Stil könnten die Schüler sich auf eine ehrgeizige Art und Weise ausdrücken und sich wie ein Ninja, ein Zauberer, ein Superheld fühlen.
Vergleich der frühen symmetrischen Körper (links) und der dynamischeren, asymmetrischen Körper (rechts).

Egal, ob Sie Charaktere und Szenen für eine App oder ein Spiel erstellen, es ist wichtig, auf die Silhouette zu achten. Es geht um die Pose und den Kontrast. Die Charaktere müssen auf einen Blick anders aussehen und sich anders anfühlen, also haben wir einen springenden Ninja, einen laufenden Flitzer, einen fliegenden Superhelden, einen Zauberer mit einem Mantel und einem spitzen Hut und mehr.
Skizzen der dynamischen Posen. Die Charaktere sind immer mitten in einer Aktion.

Jeder Designprozess ist eine Abfolge von Auswahlmöglichkeiten. Sie beginnen mit einem breiten, aber unscharfen Universum von Möglichkeiten, erforschen, kombinieren und verfeinern Ihre Ideen, um einen prägnanten und konsistenten Stil zu verwirklichen. An diesem Punkt des Projekts hatten wir den Ton, die visuelle Sprache und die Einstellung unserer Charaktere definiert, so dass der Prozess des Abschlusses des Kunstwerks nur eine Frage der Ärmel hochkrempeln, etwas Musik auf unseren Kopfhörern machte und endete die Illustrationen mit einigen subtilen Details.
Beispiel für ein Zeichen von der Skizze bis zum fertigen Kunstwerk.

Dinge zusammensetzen
Wie ich bereits sagte, besteht der Zweck der Eye to Eye App darin, Schülern dabei zu helfen, sich durch Kunstwerke auszudrücken. Um dies zu erreichen, wollten wir übermäßige Textinformationen vermeiden und mit jeder Illustration eine Bedeutung schaffen - und es den Schülern ermöglichen, ihre eigene einzigartige Kombination von Bildern zu erstellen, indem sie ihre Superkraft, Lieblingsessen, Lieblingsbeschäftigung und sicheren Ort wählen. Das fertige Kunstwerk wird Teil des My Advocacy Plan (MAP), eines Selbsthilfetools, das von allen Eye to Eye-Mentees erstellt wird, um zu erklären, wer sie sind und ihre Lernbedürfnisse zu kommunizieren.

Damit die Dinge zusammen funktionieren, müssen wir als Designer denken und nicht nur großartige Illustrationen erstellen, sondern auch ein visuelles System, das es ermöglicht, eine ganze Szene aufzubauen. Das Porträt des Schülers zum Beispiel musste für jede Pose an derselben Stelle fixiert werden wie ihre Hände, um ihr Lieblingsessen zu halten. Mit diesen dedizierten Speicherorten mussten wir nicht den gesamten Bildschirm für jede benutzerdefinierte Option neu erstellen, sodass wir eine kohärentere Szene erstellen konnten. Mit ein paar einfachen Tricks konnten wir ein mächtiges Werkzeug für die Selbstdarstellung schaffen, mit nur einer Handvoll einzelner Assets.
Beispiele für verschiedene Szenen mit der Hand und Kopf an der gleichen Stelle.

Als App der ersten Generation war dies ein minimal realisierbares Produkt (MVP), was bedeutet, dass wir eine Grundlage schaffen wollten, auf der wir aufbauen konnten - aber nicht zu viel Zeit damit verbringen, eine endlose Menge an Ressourcen im Vorfeld einer realen Welt zu schaffen Benutzer-Feedback. Wir haben die richtige Menge an Illustrationen für Version 1 erstellt - und eine Grundlage für Wachstum geschaffen. Wir haben die App als System entworfen, also arbeiten die Szenen und Requisiten zusammen, die Proportionen der Assets sehen richtig aus und Objekte überlappen sich nicht und verstecken sich gegenseitig. Es ist auch etwas, auf das wir leicht aufbauen können, indem wir neue Inhalte hinzufügen, wenn die App reift.
Finale zusammengesetzte Szenen, einschließlich Hintergrund und Requisiten.

Illustrationen bringen die Nutzerreise zum Leben
Wenn Sie die Farbe entfernen und nur die Schritt-für-Schritt-Logik der Eye-to-Eye-App berücksichtigen, ist das ganz einfach: Benutzer füllen einige Formulare aus, geben einige persönliche Informationen ein und treffen inhaltliche Entscheidungen. Es könnte in der Theorie eine schrittweise textbasierte App sein. Aber das würde eindeutig den Studenten von Auge zu Auge nicht dienen. Das Kunstwerk und der Prozess, es zu erschaffen, ist die Seele der App, genauso wie Kunst der Weg zur Seele in Eye to Eye im Klassenzimmer ist.

Große Apps sind nie nur ein Formular. Und um eine großartige App zu entwickeln und letztendlich zu erstellen, brauchen Sie Einsicht und Empathie für Ihre Nutzer. Von unserem ersten App-Strategie-Meeting mit dem Kunden über den gesamten Design- und Engineering-Prozess haben wir mehr über die Studenten und die Funktionsweise von Eye to Eye erfahren. So konnten wir dieses Tool so entwickeln, dass es den Schülern von Eye to Eye hilft vorher erreichen.

Ähnlich wie Bildung ist Design kein Selbstzweck, sondern eher ein Prozess, um ein Ziel zu erreichen. Wenn Sie eine Herausforderung haben, forschen Sie, lernen etwas Neues, passen Sie an, was Sie wissen, und (hoffentlich) werden Sie inspiriert, ein Problem auf neue Art und Weise anzugehen.

 

Dieser Artikel wurde bereitgestellt von

Applaunch
Prinzregentenpl
80675 Prinzregentenpl. 23, 81675 Munich, Germany

15216715639

applaunch.io/
seo@applaunch.io

Weblinks zu diesem Artikel

• applaunch.io

 

Hotels in Bayern

Wellnesshotel Jagdhof
am Nationalpark

Wellnesshotel Lindenwirt
im Zellertal

Wellnesshotel St. Gunther
in Richnach am Nationalpark

Wellnesshotel Birkenhof
im Kötztinger Land

Wellnesshotel Riederin
in Bodenmais

Verantwortlichkeit

Der Portalbetreiber distanziert sich ausdrücklich von den eingestellten Artikeln und macht sich diese nicht zu eigen. Das Portal dient der Pressefreiheit und der freien Meinungsäußerung, die im Grundgesetzes der Bundesrepublik Deutschland allen Bürgern garantiert wird. Dabei ist jeder Autor eigenverantwortlich gehalten Rechte Dritter zu beachten und das geistige Eigentum anderer zu respektieren.