JAPPAN ist eine Food Guide App, die Japaninteressierten und Foodies einzigartige kulinarische Erfahrungen ermöglicht und das breite Spektrum des gastronomischen Angebots der japanischen Küche näher bringt – seit 2013 immaterielles UNESCO Weltkulturerbe.

Die App bringt den User:innen die kulinarische Bandbreite der japanischen Küche näher und führt sie zu einzigartigen und teils unscheinbaren Lokalen. Auf bestimmte Gerichte spezialisierte Restaurants treffen auf Izakayas und einfache Yatais, gemütliche Cafés und versteckte Bars. Von Hokkaido im hohen Norden Japans bis Zürich. Von erschwinglich bis kostspielig. Von laut und verraucht bis elegant, von weltberühmt bis zur Quartierbeiz.

Durch die Vorstellung ausgewählter Restaurants in verschiedenen Städten bietet die App Orientierung im unübersichtlichen gastronomischen Dschungel. Darüber hinaus schafft sie Zugang, indem sie Hintergrundwissen zu den Restaurants, ihren Spezialitäten und unbekannten Zutaten vermittelt. Nützliche Features wie das Begriffsglossar, die Favoritensammlung und eine Offline-Map machen die App zu einem funktionalen Werkzeug für unterwegs.

Das Design der App

Die visuelle Gestaltung von JAPPAN ist unverkennbar von den beiden Designnationen Japan und Schweiz inspiriert. Trotz der Distanz von rund 10’000 Kilometern gibt es spannende Parallelen im Designverständnis der beiden Länder. Diese haben wir in die Gestaltung der App einfliessen lassen. So war die Reduktion auf das Wesentliche ein elementarer Punkt – das betrifft die einfache und intuitive Struktur der App, aber auch den schnörkellosen Umgang mit Typografie. Darüber hinaus haben wir besonderes Augenmerk auf Details und eine präzise Umsetzung gelegt – sei es der sensible Umgang mit Bildern oder die Umsetzung der interaktiven Elemente.

So ist eine App entstanden, deren Funktionalität und Inhalt durch ein Design unterstützt wird, das die User:innen auf eine Entdeckungsreise mitnimmt und viele kleine, aber schöne Überraschungen bereit hält.

Simple Gestaltungsprinzipien

Das Entdecken von kulinarischen Highlights ist die Grundidee von JAPPAN. Diese Idee wird aufgegriffen und in ein einfaches, aber wirkungsvolles Designkonzept übersetzt. Indem das Spiel mit Schärfe und Unschärfe zum tragenden Gestaltungselement wird, wird die User Experience selbst zur spannenden Entdeckungsreise. Es ist, als ob sich die Inhalte hinter einem typisch japanischen Shoji-Papier-Paravent verbergen und erst durch das Öffnen des Paravents vollständig sichtbar werden.

Städteauswahl auf der Startseite.

Auf der Ebene der Städte- und Restaurantauswahl wird zwischen einer Bild- und einer Typografieebene unterschieden. Indem man beim Scrollen den Finger auf der Kachel hält, entsteht ein Wechselspiel zwischen der scharfen Typografiebene und der (noch) unscharfen Bildebene. Erst durch die Interaktion erschliesst sich den User:innen das vollständige Bild.

Restaurantauswahl.

Dieses Konzept findet sich auch auf den Detailseiten der Restaurants wieder. Swipet man langsam durch die Bilder der grosszügigen Slideshow, wird jedes Bild unscharf, sobald es durch ein neues (scharfes) Bild ersetzt wird. Diese massgeschneiderte Lösung ist subtil und ihr volles Potenzial wird spätestens dann sichtbar, wenn einzelne, freigestellte Bildelemente – meist Spezialitäten des Restaurants – auftauchen. Erst durch den Kontrast zwischen dem vorherigen (nun unscharfen) Bild im Hintergrund und dem freigestellten (scharfen) Gericht wird dieses wirklich sichtbar.

Diese kleinen Überraschungsmomente zeugen von einer Extraportion Liebe zum Detail und machen für uns den Charme der App aus.

Bildergalerien auf der Restaurant Detailseite.

Bei genauerem Hinsehen entdecken die User:innen in den Beschreibungstexten der einzelnen Restaurants auch unscharfe Wörter – dabei handelt es sich um spezifische Spezialitäten oder Zutaten. Konsequenterweise sind auch diese unscharfen Elemente eine Einladung, mehr zu erfahren und weiterführende Inhalte zu entdecken.

Tippt man auf ein unscharfes Wort, legt sich ein weiterer Shoji-Paravent über den Inhalt, so dass dieser unscharf wird. Eine kurze Erklärung des angeklickten Begriffs tritt in den Vordergrund. Wie in der Slideshow werden die erklärten Spezialitäten und Zutaten mit einem freigestellten Bild dargestellt. Aber wie schliesst man diese Seite wieder? Auch wenn das im UX und UI Design weit verbreitete «×» als Schliessbutton sogar japanischen Ursprungs ist, wurde hier bewusst davon abgesehen. In der gesamten App wurde bewusst auf Icons verzichtet – einzige Ausnahme ist das prominent platzierte Herz für die Favoriten. Wir vertrauen darauf, dass die gewieften User:innen dennoch ihren Weg zurück finden werden.

Hinter den unscharfen Wörtern verbergen sich weiterführende Informationen.

Als hilfreiches Zusatzfeature werden die unscharfen Begriffe nicht nur in den Artikeln zu den Restaurants angezeigt, sondern auch in einem umfangreichen Index gesammelt. Dieser ist über die Startseite erreichbar. So schaffen wir es, User:innen mit unterschiedlichem Wissensstand abzuholen – Profis werden die Erklärungen nicht brauchen, anderen helfen sie, die japanische Küche und Kultur besser kennen und verstehen zu lernen und im besten Fall sogar das eine oder andere Wort auf einer japanischen Speisekarte entziffern zu können.

Über den Menüpunkt «Index» auf der Startseite gelangt man zu den gesammelten und alphabetisch geordneten Begriffen.

Die Kombination von zwei Schriftsystemen

Eine Herausforderung im Designprozess war die Kombination des westlichen mit dem japanischen Schriftsystem. Gerade an Orten, an denen kaum Englisch gesprochen wird, ist es für Reisende hilfreich, die Namen der Gerichte auch auf Japanisch zur Verfügung zu haben. Darüber hinaus ist Schrift immer auch ein Träger von Kultur, der wir mit grösstmöglichem Respekt begegnen wollen, indem wir die Restaurants, Gerichte und Zutaten mit den dazugehörigen Schriftbildern zeigen.

In der App verwenden wir für den englischen Text die serifenlose Schrift «Futter Grotesk» des Zürcher Designers David Lüthi, und für die japanischen Schriftzeichen die Google-Schrift «Noto Sans».

Zwei Schriften mit vergleichbarem Duktus sorgen für ein gleichmässiges Schriftbild.

Beide Schriften haben einen ähnlichen Duktus und damit einen ähnlichen Schwarzwert. Beide eignen sich besonders gut für das Lesen am Bildschirm und können sowohl auf iOS als auch auf Android verwendet werden, was ein konsistentes Erscheinungsbild der App auf beiden Plattformen ermöglicht. Die «Futter Grotesk» wurde von ihrem Designer speziell für die App angepasst und um einige Schriftzeichen erweitert, um dem Inhalt von JAPPAN gerecht zu werden.

Die beiden schnörkellosen und handwerklich hervorragend gemachten Schriften tragen einen wesentlichen Teil zum klaren und gepflegten Erscheinungsbild der App bei.