S'attaquer aux menus en ligne Conseils et exemples

Les sites Web de restaurants sont souvent des catastrophes de conception et d’utilisation. Même les bons designers peuvent se tromper dans cette tâche particulièrement délicate.

Avant de vous lancer dans la conception du site Web de votre prochain restaurant, consultez cet article. Nous allons passer en revue quelques astuces très pratiques pour réussir, en plus de quelques pièges à éviter.

Une question savoureuse

Joe Elias nous a contactés via notre page Design Dilemma et nous a posé la question suivante:

«J'ai attrapé une poignée de restaurants au cours des dernières semaines par renvoi et je suis coincé sur une chose: afficher leurs menus sur leurs sites Web. Bien sûr, je pourrais le lancer en format PDF. route et appeler un jour, mais je tiens à se démarquer en faisant de mes clients se démarquer. Des idées pour une manière propre et unique de présenter un menu de restaurant standard de 4 pages?

C’est un excellent sujet avec lequel, selon moi, de nombreux concepteurs se débattent. Je pense que Joe a quelques idées clés ici mais a besoin d'aide pour démarrer. Voyons ce que nous pouvons apprendre d’un rapide coup d’œil sur le Web des sites Web de cette catégorie.

Les écrans et le papier sont des médiums très différents

Dans sa question, Joe a mentionné le "lancer dans un fichier PDF". technique utilisée par plusieurs sites. L'idée de base ici est de prendre votre menu d'impression, de le télécharger tel quel sur le Web pour que les utilisateurs puissent le télécharger et de l'appeler un jour. Bien qu'un menu PDF téléchargeable soit un excellent option à fournir aux utilisateurs, ce n’est certainement pas la voie à suivre comme moyen principal pour les visiteurs de voir votre menu.

Certains concepteurs vont encore plus loin dans cette idée et prennent le temps de coder un menu en ligne qui est essentiellement une réplique exacte de leur menu imprimé. Bien que j’applaudisse à la tentative de cohérence, c’est là encore un très mauvais moyen de s’acquitter de cette tâche.

Les concepteurs ayant des antécédents dans l'impression (comme moi) ont tendance à se tromper complètement en matière de conception de sites Web. L'hypothèse est que la conception numérique est fondamentalement la même que l'impression, de sorte que tout ce que vous savez sur la mise en page, les graphiques, etc. est toujours valable. Cela ne pouvait pas être plus éloigné de la vérité.

L'impression est un support statique et passif. Pour la plupart, les possibilités d'interaction sont minimes et vous devez vous fier principalement à l'attrait graphique et à la force de la mise en page. Cependant, le Web est une bête complètement différente, construite sur l'idée d'une riche interactivité. Cliquer, faire défiler et survoler ne sont que quelques-unes des nombreuses actions maintenant disponibles. De plus, vous n'êtes plus contraint par la taille d'un morceau de papier physique, ce qui ouvre un million de possibilités.

Ce que j'essaie de dire, c'est qu'en traitant le Web comme une impression, vous laissez passer une tonne d'opportunités pour rendre votre conception plus conviviale, attrayante et attrayante.

Italien ennuyeux de Carrabba

A titre d'exemple, jetons un coup d'œil au menu en ligne de l'un de mes restaurants préférés: Carrabba's Italian Grill. Il s’agit d’une chaîne assez importante aux États-Unis et devrait disposer de nombreuses ressources pour créer un site de qualité. Cependant, leur menu est assez terne.

Le menu de navigation en itinérance sur la gauche est une bonne idée, mais sinon, il ne s'agit que d'une grande page ou d'un texte ennuyeux. Voir cela ne me donne pas faim le moins du monde!

Assurez-vous que vous pouvez le lire!

Le menu du Carrabba n'est certainement pas si mauvais. En fait, il figure vraiment en haut de la liste des menus de restaurants que j'ai consultés! Malgré le faible enthousiasme, le menu en ligne de Carrabba est très lisible. La conception générale de leur site est assez attrayante, mais ils ne laissent pas la conception gêner la convivialité du menu. En cas de doute, c'est tout simplement meilleur. Je préférerais de loin voir un menu statique et ennuyeux que les utilisateurs peuvent rapidement obtenir grâce à des informations plutôt qu’à un contenu chargé et illisible.

Pour voir ce que je veux dire, jetez un coup d'œil au menu ci-dessus du restaurant Twelve. Pour la plupart, ce restaurant a un site attrayant, mais permet souvent au fond graphique de se fondre juste assez pour rendre le texte du site difficile à lire. L'esthétique est importante, mais rappelez-vous que le design est plus que de rendre les choses jolies! Il s’agit d’organiser et de styler les informations de manière attrayante et utilisable.

Photographie alimentaire

Ce qui fait vraiment la carte d'un restaurant est pour moi une bonne photographie culinaire. Comme je l'ai dit plus haut, les mots ne me rendent pas affamé, la nourriture l'est! Si vous êtes assez chanceux pour travailler pour un client avec des ressources impressionnantes en photographie culinaire, assurez-vous de les exploiter au maximum.

Découvrez comment photo-centrique les deux menus sont ci-dessous. Vous avez vraiment une idée de ce que vous allez manger et la photographie est assez bonne pour que vous ayez faim!

Chaque article n'a pas besoin d'une photo

Même si vous ne possédez pas les images de tous les plats et que ce n'est probablement pas le cas, vous pouvez toujours créer une belle page de menu qui exploite la photographie. Découvrez le menu génial de Ruby Tuesday ci-dessous, qui utilise un système d'accordéon unique qui développe une section de menu lorsque vous cliquez sur une photo.

Ce système accordéon est idéal pour parcourir rapidement les différents types de plats proposés au menu. De plus, cela donne au spectateur juste assez de photos pour que son appétit soit réveillé sans aller trop loin.

Photos mauvaises ou manquantes?

En tant que concepteur Web de restaurant, vous n’aurez probablement aucun contrôle sur les ressources éventuelles que le client vous donne pour le projet. En toute honnêteté, le client typique du restaurant ne vous donnera rien de la qualité de ce que vous voyez de California Pizza Kitchen et Ruby Tuesday. Au lieu de cela, il est probable que ce soit rien ou quelque chose presque inutilisable.

La photographie culinaire est délicate et il faut un vrai professionnel pour réussir avec succès. Si le client vous donne des photos si mauvaises qu’elles réduisent les chances qu’une personne vienne au restaurant, vous devrez trouver un moyen de les convaincre de ne pas les utiliser. Croyez-moi, le texte brut est préférable à une page d'images gag-inductive.

Dans ce cas, il vous suffira de tirer le meilleur parti d'une disposition contenant uniquement du texte. La partie menu du site Web de Marie Catrib fait un travail plutôt décent. Notez à quel point tout le contenu est bien organisé et combien d'espaces sont présents entre les éléments.

Dans le cas où vous avez des images parfaitement bonnes, mais une collection assez étrange, il peut être difficile de trouver comment les utiliser dans votre conception. Le menu Chez Gerard ci-dessous résout ce problème en proposant des photos cachées qui apparaissent lorsque vous passez la souris sur certains éléments du menu.

Typographie

Beaucoup de restaurants veulent paraître raffinés et de grande classe, le mouvement instinctif des concepteurs est donc d'utiliser beaucoup de scripts fluides. Je recommande fortement d'éviter une page remplie de typographie de script, cela devient simplement beaucoup trop difficile à lire. C'est bien de l'utiliser de manière sélective, mais gardez bien en tête qu'il est facile d'aller trop loin.

En outre, il va sans dire que vous devez vous tenir à l'écart de Comic Sans et de toute autre police jugée amusante par votre client. Si vous voulez que votre restaurant ait un look de grande classe, trouvez un serif fort et à l’ancien. Si vous voulez vraiment que ça ait l'air amusant, envisagez-le à l'aide des graphiques et collez un beau sans-serif moderne pour la plupart des personnages.

Cependant, si vous voulez vraiment utiliser des polices amusantes, vous pouvez définitivement tenter votre chance. De nombreux concepteurs peuvent y parvenir sans aucun problème, d'autres se plantent et brûlent immédiatement. Le site The Little Cake Parlour est un site qui, je pense, a fait un assez bon travail. Bien que je ne sois pas folle de la disposition des colonnes alignée au centre, les polices utilisées sur ce site ont fière allure.

Des médias sociaux

Vous voulez que les clients fassent connaître votre restaurant? Pourquoi ne pas travailler dans une intégration unique des médias sociaux? Les meilleures implémentations de ce que j'ai vu permettent aux visiteurs de partager des éléments de menu spécifiques qu'ils aiment.

Par exemple, le menu Giraffe a un bouton comme Facebook à côté de chaque élément du menu afin que les utilisateurs puissent facilement recommander des plats spécifiques à leurs amis.

Conclusion

Les menus en ligne peuvent être une vraie douleur à développer. Il est difficile d’organiser autant d’informations dans un format attrayant et utilisable, mais j’espère que les conseils et exemples ci-dessus sont suffisants pour que votre projet commence dans la bonne direction.

Si vous avez récemment conçu un menu de restaurant en ligne, laissez un commentaire ci-dessous avec un lien afin que nous puissions le consulter!

Poster l'image du titre prise par clspeace.