App Jappan avec l'image d'un crabe

JAPPAN Food Guide App

Manger japonais, vraiment bien

JAPPAN est une application Food Guide qui permet aux passionnés du Japon et aux foodies de vivre des expériences culinaires uniques et qui fait découvrir le vaste éventail de l'offre gastronomique de la cuisine japonaise – patrimoine culturel immatériel de l'UNESCO depuis 2013.

L'application fait découvrir aux utilisatrices et utilisateurs la diversité culinaire de la cuisine japonaise et les mène vers des établissements uniques et parfois discrets. Des restaurants spécialisés dans certains plats côtoient des izakayas et de simples yatais, des cafés conviviaux et des bars cachés. De Hokkaido, à l'extrême nord du Japon, jusqu'à Zurich. De l'abordable au coûteux. Du bruyant et enfumé à l'élégant, du mondialement célèbre au bistrot de quartier.

En présentant une sélection de restaurants dans différentes villes, l'application offre des repères dans la jungle gastronomique difficile à appréhender. Elle crée en outre un accès en transmettant des connaissances de fond sur les restaurants, leurs spécialités et des ingrédients méconnus. Des fonctionnalités utiles comme le glossaire de termes, la collection de favoris et une carte hors ligne font de l'application un outil fonctionnel pour les déplacements.

Le design de l'application

La conception visuelle de JAPPAN s'inspire indéniablement des deux nations du design que sont le Japon et la Suisse. Malgré la distance d'environ 10’000 kilomètres, il existe des parallèles passionnants dans la conception du design des deux pays. Nous les avons intégrés dans la conception de l'application. Ainsi, la réduction à l'essentiel a été un point élémentaire – cela concerne la structure simple et intuitive de l'application, mais aussi le traitement épuré de la typographie. Nous avons en outre accordé une attention particulière aux détails et à une réalisation précise – qu'il s'agisse du traitement délicat des images ou de la mise en œuvre des éléments interactifs.

Il en résulte une application dont la fonctionnalité et le contenu sont soutenus par un design qui emmène les utilisatrices et utilisateurs dans un voyage de découverte et réserve de nombreuses petites, mais belles surprises.

Des principes de conception simples

Découvrir des temps forts culinaires est l'idée fondamentale de JAPPAN. Cette idée est reprise et traduite en un concept de design simple, mais efficace. En faisant du jeu entre netteté et flou l'élément de conception porteur, l'expérience utilisateur elle-même devient un passionnant voyage de découverte. C'est comme si les contenus se cachaient derrière un paravent en papier shoji typiquement japonais et ne devenaient entièrement visibles qu'en ouvrant le paravent.

Sélection des villes sur la page d’accueil.

Au niveau de la sélection des villes et des restaurants, on distingue un plan d'image et un plan typographique. En maintenant le doigt sur la vignette pendant le défilement, un jeu d'alternance se crée entre le plan typographique net et le plan d'image (encore) flou. Ce n'est que par l'interaction que l'image complète se dévoile aux utilisatrices et utilisateurs.

Sélection des restaurants.

Ce concept se retrouve également sur les pages de détail des restaurants. Lorsqu'on fait défiler lentement les images du généreux diaporama, chaque image devient floue dès qu'elle est remplacée par une nouvelle image (nette). Cette solution sur mesure est subtile et son plein potentiel se révèle au plus tard lorsque des éléments d'image détourés – le plus souvent des spécialités du restaurant – apparaissent. Ce n'est que par le contraste entre l'image précédente (désormais floue) en arrière-plan et le plat détouré (net) que celui-ci devient vraiment visible.

Ces petits moments de surprise témoignent d'une dose supplémentaire d'amour du détail et constituent pour nous le charme de l'application.

Galeries d’images sur la page de détail du restaurant.

En y regardant de plus près, les utilisatrices et utilisateurs découvrent aussi, dans les textes descriptifs des différents restaurants, des mots flous – il s'agit de spécialités ou d'ingrédients spécifiques. En toute logique, ces éléments flous sont eux aussi une invitation à en savoir plus et à découvrir des contenus complémentaires.

Lorsqu'on tape sur un mot flou, un autre paravent shoji se pose sur le contenu, de sorte que celui-ci devient flou. Une brève explication du terme sélectionné passe au premier plan. Comme dans le diaporama, les spécialités et ingrédients expliqués sont présentés avec une image détourée. Mais comment refermer cette page ? Même si le «×» comme bouton de fermeture, très répandu dans le design UX et UI, est même d'origine japonaise, nous y avons délibérément renoncé ici. Dans toute l'application, nous avons délibérément renoncé aux icônes – la seule exception étant le cœur bien visible pour les favoris. Nous avons confiance dans le fait que les utilisatrices et utilisateurs astucieux retrouveront malgré tout leur chemin.

Derrière les mots flous se cachent des informations complémentaires.

Fonctionnalité complémentaire utile, les termes flous ne sont pas seulement affichés dans les articles consacrés aux restaurants, mais aussi rassemblés dans un index détaillé. Celui-ci est accessible depuis la page d'accueil. Nous parvenons ainsi à toucher des utilisatrices et utilisateurs de niveaux de connaissances variés – les experts n'auront pas besoin des explications, tandis qu'elles aident les autres à mieux connaître et comprendre la cuisine et la culture japonaises et, dans le meilleur des cas, même à déchiffrer l'un ou l'autre mot sur un menu japonais.

Via le menu « Index » sur la page d’accueil, on accède aux termes rassemblés et classés par ordre alphabétique.

La combinaison de deux systèmes d'écriture

Un défi du processus de design résidait dans la combinaison du système d'écriture occidental avec le système japonais. Précisément dans les lieux où l'on parle à peine anglais, il est utile pour les voyageurs de disposer aussi des noms des plats en japonais. De plus, l'écriture est toujours un vecteur de culture, que nous voulons aborder avec le plus grand respect possible en montrant les restaurants, les plats et les ingrédients avec les graphies qui leur correspondent.

Dans l'application, nous utilisons pour le texte anglais la police sans empattement «Futter Grotesk» du designer zurichois David Lüthi, et pour les caractères japonais la police Google «Noto Sans».

Deux polices au ductus comparable assurent une typographie homogène.

Les deux polices présentent un ductus similaire et donc une valeur de noir similaire. Toutes deux conviennent particulièrement bien à la lecture à l'écran et peuvent être utilisées aussi bien sur iOS que sur Android, ce qui permet une apparence cohérente de l'application sur les deux plateformes. La «Futter Grotesk» a été spécialement adaptée pour l'application par son designer et enrichie de quelques caractères afin de répondre au contenu de JAPPAN.

Les deux polices épurées et d'une facture artisanale remarquable contribuent pour une part essentielle à l'apparence claire et soignée de l'application.

Credits

Nos prestations : Conception, UX, design, Développement logiciel iOS et Android, Testing
Client : Harubaru Copy Club
Plateformes : iOS, Android

Awards

Best of Swiss Apps Bronze Auszeichnung – Design
Bronze • Design • Best of Swiss Apps 2024