web-dev-qa-db-fra.com

Moyens d'améliorer la lisibilité des ingrédients de la recette?

Je construis un site Web de recette et j'essaie d'améliorer la lisibilité et la scannabilisation des listes d'ingrédients. J'ai essayé un tas d'options différentes mais je ne suis pas sûr de ce qui est préférable.

Voici quelques styles que j'ai essayés

Pas de formatage:

  • Moitiés de poitrine de poulet sans peau sans peau et désossées - cubes
  • 1 tasse de carottes en tranches
  • 1 tasse de pois verts gelés
  • ½ tasse de céleri en tranches
  • ⅓ beurre de tasse
  • ⅓ tasse d'oignon haché

Montants audacieux:

  • 1 livre moitiés de poitrine de poulet sans peau et désossées - cubes
  • 1 tasse carottes en tranches
  • 1 tasse pois verts gelés
  • ½ tasse céleri en tranches
  • ⅓ tasse beurre
  • ⅓ tasse oignon haché

Nombres audacieux:

  • 1 Pound Skiness et désossé de poitrine de poulet - cubes
  • 1 Coupe des carottes en tranches
  • 1 tasse de pois verts gelés
  • ½ Coup de céleri en tranches
  • Coupe Beurre
  • tasse d'oignon haché

Presque tous les livres de cuisine/site Web que j'ai regardé suit le style "Pas de formatage". Est-ce vraiment la meilleure option?

17
StackOverflower

Tout d'abord, si vous regardez simplement une liste de texte d'ingrédients, je dirais que cela ne va probablement pas trop importante que l'option que vous prenez.

Sur les 3 options, je préférerais personnellement l'option "quantité audacieuse". La raison en est que la quantité est la partie de la recette qu'une personne est plus susceptible de devoir regarder plus d'une fois. Donc, la partie audacieuse aide à attirer l'attention sur cette partie plus rapidement.

Vos exemples ne soulignent pas vraiment ce besoin car vous êtes susceptible d'avoir les quantités pour ces ingrédients préparés à l'avance avant la cuisson. Cependant, une mesure de liquide (par exemple 200ml de stock de légumes ) est probablement quelque chose que le lecteur voudra double-vérifier Quantité de la phase de cuisson. Donc, je dirais que cela doit se démarquer davantage.


Cela me conduit à ma suggestion actuelle ...

option 4: table

Créez une table simple. Il n'a même pas besoin d'avoir un style, il apparaît donc comme un texte. Cependant, la partie clé est l'espacement entre la quantité (colonne A) et l'ingrédient (colonne B). Les avoir comme colonnes séparées faciliteront beaucoup plus facilement de numériser pour l'utilisateur.

1 pound   skinless, boneless chicken breast halves - cubed

1 cup     sliced carrots

1 cup     frozen green peas

½ cup     sliced celery

⅓ cup     butter

⅓ cup     chopped onion

Après une pensée ultérieure, il pourrait être utile de prendre la queue d'approche de la table une étape ultérieure et de fractionnement "ingrédient" et "méthode". Par exemple:

Quantity    Ingredient        Method          

1 pound     Chicken Breast    Skinless - Cubed
1 cup       Carrots           Sliced         

Jouez avec l'ordre des colonnes et voyez ce qui fonctionne mieux dans votre conception finale.

42
musefan

de plus, l'idée de @ Musefan avec une table: l'utilisation d'une police monospace pour les chiffres (ou tout) peut aider à analyser les entrées plus rapidement visuellement. Il ajoute également que certains "écrivaient cette recette sur mon type de machine à écrire", donnant la recette plus d'authenticité. ;)

8
gerald

J'ai remarqué comment les autres réponses se concentrent sur l'amélioration de la mise en page de la liste des ingrédients. J'aimerais ajouter une suggestion pour rendre la recette plus pratique pour analyser tout en le cuisant.

Vous pouvez également ajouter les quantités dans le texte. J'aime vérifier que j'ajoute les montants corrects, alors quand je vais au pas

Mélangez le sucre et la farine, puis ajoutez lentement le lait en remuant.

Je continue de retourner à la liste en haut pour vérifier la quantité de sucre, de farine et de lait. Quelque chose que je ne vois presque jamais mais préférerais avoir les quantités là-bas, soit explicitement comme

Mélangez 100 g de sucre et 250 g de farine, puis ajoutez lentement 0,5L de lait en remuant.

ou sur un support numérique, en ayant la possibilité de toucher ou de survoler l'ingrédient et de voir les quantités.

Cela vous permettra de formater les étapes de préparation optimale, tout en formant la liste des ingrédients en haut pour des achats optimaux. Pour ce dernier, vous pouvez utiliser les suggestions déjà fournies, que cela écrivait d'abord l'ingrédient ("Poitrine de poulet, coupée en dés, 200 g" ou en la mettant sous forme tabulaire.

4
CompuChip

Pensez à la façon dont les gens utiliseront les ingrédients.

Avant de pouvoir les cuisiner, ils doivent aller au magasin pour les acheter.

Quand vous allez au magasin, allez-vous à l'allée de 1 livre ou l'allée de poulet?

Je suggérerais de charger vos lignes:

  • moitiés de poitrine de poulet sans peau et désossées, cubes - 1 livre
  • carottes, tranches - 1 tasse
  • pois verts gelés - 1 tasse
  • céleri, tranché - ½ tasse
  • beurre - Coupe
  • oignon, haché - ⅓ tasse
3
Natalie L

Premièrement, ingrédients, non quantités, donnez une meilleure idée de la façon dont la recette aura goûter et regarder et comment elle sera cuite (pas de graisse? Probablement bouilli.)

Deuxièmement, des quantités doivent être considérées comme des estimations approximatives.

Troisièmement, l'ordre des ingrédients aide la lisibilité. Si vous fristez des oignons, des carottes et du céleri pour un soffrito italien comme première étape d'un ragú, alors l'huile, les oignons, les carottes et le céleri doivent d'abord être placés. Sinon, vous devez localiser l'ingrédient entre autres de numériser la liste de haut en bas.

Donc, je suis essentiellement d'accord avec @natalie L, mais changez l'ordre des ingrédients et en ajoutant des audacieux (je suppose les étapes de la recette.)

  • Beurre - Coupe
  • carottes, tranché - 1 tasse
  • céleri, tranché - ½ tasse
  • oignon, haché - ⅓ tasse
  • poitrine de poulet moitiés, sans peau, désossées, cubes - 1 livre
  • pois verts, gelen - 1 tasse
3

N'ignorez pas le fait que les gens ont joué des recettes pour littéralement des centaines d'années et que vous essayez de réinventer la roue et de former des personnes à lire un format différent de celui qu'ils ne l'utilisaient. Il existe de nombreuses conventions stylistiques bien connues pour les recettes et vous ne devriez pas les violer sans très bonne raison.

  • Ne mettez pas en place une liste d'ingrédients non standard, telles que la mise en place de la quantité après le nom de l'article ("poulet, 11/2 livres" n'est pas un format utilisé par des cuisiniers et des éditeurs expérimentés).
  • N'ajoutez pas d'emojis.
  • N'utilisez pas de glyphes de caractères de fraction; Ils peuvent être remplacés ou apparaissent de manière incorrecte si le codage de texte ou la police est rendu différemment par différentes combinaisons de système d'exploitation/matériel/navigateur.
  • Énumérez tous les ingrédients avant les procédures.
  • Regardez plusieurs livres de cuisine bien considérés et copiez leurs conventions de formatage et de style pour résoudre toutes les questions.
  • Les navigateurs ont construit dans la recherche; Vous n'avez pas besoin de faire des recettes plus "scannables" lorsque tout ce qu'il faut est Control + F pour trouver le mot "poulet" chaque fois qu'il apparaît sur la page.
  • Regardez la ponctuation: les traits d'union ne sont pas des disciples m. Les virgules ne sont pas des deux points.
  • N'utilisez pas de balles pour décorer davantage une liste qui est évidemment une liste.
1
user8356

Aligner la table comme d'autres réponses ont suggéré une bonne idée. Cependant, lorsque je cuisine cela arrive très fréquemment: je vais faire du beurre, oublier le montant, puis je regarde la liste et je dois retrouver du beurre à nouveau.

C'est juste une idée, mais cela pourrait aider à avoir des emojis sur chaque ligne. Ceci fournit une référence visuelle rapide pour aller à une ligne particulière.

  • ???? Moitiés de poitrine de poulet sans peau sans peau et désossées - cubes
  • ???? 1 tasse de carottes en tranches
  • ???? 1 tasse de pois verts gelés
  • ???? ½ tasse de céleri en tranches
  • ???? ⅓ beurre de tasse
  • ???? ⅓ tasse d'oignon haché

Même si on doit recourir à des icônes de placement pour certaines lignes (comme des pois et du céleri ci-dessus), on a l'impression que cela pourrait toujours vous aider à numériser visuellement la liste.

0
jpa

Fournissez deux versions des ingrédients

  1. Commande utilisée, regroupée par étape.
    [.____] Si la première chose que vous faites est de saisir la viande, les épices et la viande devraient être d'abord. Puis une ligne vide. Ensuite, les oignons et les poivrons que vous utilisez dans la deuxième étape. Puis une ligne vide. Etc. Si vous utilisez le même ingrédient de différentes taches, cela devrait être dans ces deux taches, avec la quantité de chaque étape.

  2. Vue d'achat
    Les articles doivent être regroupés par type. Viandes ensemble. Produits frais ensemble. Conserves ensemble. Si un élément est utilisé dans plusieurs étapes, il ne doit être répertorié qu'une seule fois avec le montant total nécessaire.

0
Kevin

Je suis personnellement TRES Fond de la manière dont les recettes sont présentées dans la joie de la cuisson, où elles sont énumérées une fois, dans le flux des instructions de la recette, indiquées sur des lignes par elles-mêmes et en gras. Je saisirais un exemple mais je ne sais pas comment le formater ici; Si vous trouvez la version 2019 du livre sur Amazon et choisissez les aperçus de page, l'une des pages affiche des recettes partielles dans ce format. La joie de la cuisine est le seul endroit que j'ai vu cela, donc je suppose que pas beaucoup de gens comme ça, mais je le trouve inestimable. Pour les achats et la préparation des ingrédients, vous ne faites que scanner la recette et les lignes audacieuses sautent à vous. Ensuite, comme vous suivez les étapes, les ingrédients sont vraiment clairs, rien de tout cela "attend maintenant quand l'ail est censé aller dans" ou "hé, il dit d'ajouter du beurre mais ce n'est pas répertorié en haut". Je ne fais pas beaucoup de cuisine, alors peut-être que je suis dans la catégorie des personnes qui ont besoin de recettes présentées dans le sens opposé. Toute recette que je m'attends à faire à nouveau, je vais généralement retrouver ce format pour mon propre usage.

0
CCTO

Bien que vous ayez de très bonnes réponses, je pense que l'approche générale a un (gros) problème: nous essayons de Port Meilleure pratique d'un support (imprimé livre) à un autre moyen complètement différent (application Web). Kevin (dans sa réponse ) a un très bon point et je voudrais développer davantage.

Les livres imprimés ont une mise en page et c'est un compromis pour toutes les étapes, votre application Web peut (et devrait) s'adapter aux différentes phases de l'utilisateur . L'utilisateur doit être capable de se déplacer facilement entre les différents Vues que IMHO sont:

  • Scannez la recette pour déterminer s'il s'agit d'une option viable. Les étapes de cuisson doivent être cachées (mais disponibles en un seul clic). Ici, je suis intéressé par:
    • Liste des ingrédients: savoir si j'ai - ou je peux facilement obtenir - tout ce dont j'ai besoin. La meilleure commande est discutable, je ferrais probablement correspondre à la commande utilisée lors de la cuisson, à l'exception de secondaire Ingrédients - comme le sel et l'huile - que je liste à la fin. "1 carotte" Pourriez être parfaitement bien ici (des informations supplémentaires peuvent être présentées légèrement dimédées pour faciliter la numérisation rapide.) N'incluez pas les détails de la cuisson ici: tranché carottes N'est-ce pas ce que vous achetez et cela ne dit rien au nombre de carottes que vous avez réellement besoin. Comme quelqu'un d'autre déjà mentionné, vous devriez - lorsque cela est possible - étant donné une option de modification de l'unité de mesure (cela est particulièrement vrai lorsque vous travaillez avec un public international); Sinon, vous pouvez au moins - fournir un lien pour effectuer la conversion ailleurs (Google est facile à intégrer, par exemple).
    • Allergènes: C'est ce que vous voulez audacieux dans la liste pour cette étape. À Bold Allergens est une convention assez bien établie et est utile lorsque vous essayez de déterminer si la recette que vous lisez est une option pour votre et vos invités.
    • Il est temps de préparer, de difficulté, de coût. Celles-ci sont courantes dans de nombreuses recettes et je suis intéressé à ne les voir que dans cette étape.
    • SUGGESTIONS (par exemple en tant qu'atous info-bulle ou en tapotant sur un ingrédient) pour des alternatives. Justification: Ce délice blanc de la pomme de terre douce pourrait ne pas être disponible mais peut-être un Nemagold Orange facilement disponible fonctionne bien aussi.
  • Achetez des ingrédients : Ici, vous avez besoin de la liste des ingrédients. Vous connaissez tous la douleur à travers la liste des achats à plusieurs reprises, car il n'est pas commandé correctement (légumes, viande et ainsi de suite). Un bon à avoir Vue d'achat Où: [.____]
    • L'utilisateur est capable de réorganiser la liste . Justification: Vous pouvez acheter à partir de différents endroits (légumes du marché de la rue, des conserves de supermarché, etc.) et chaque supermarché pourrait avoir une organisation légèrement différente. Cela compte vraiment si la liste est longue.
    • Utilisateur peut Supprimer les éléments de la liste . Justification: Pas besoin d'acheter ce qu'ils ont déjà vérifié, ils ont à la maison et que vous ne vouliez pas qu'ils impriment la liste ou pour l'écrire à la main.
    • Un moyen simple de partager la liste en tant que texte brut avec une autre application (ou au moins dans le Presse-papiers). Ceci est utile si, par exemple, vous devez demander votre SO d'acheter quelque chose sur le chemin du retour du travail.
    • Si possible (et uniquement si vous avez été ajusté à l'emplacement de l'utilisateur), vous pouvez fournir des liens vers des supermarchés en ligne (même mieux si vous pouviez pré-remplir la liste, mais ...)
  • Cuisson : La liste n'est pas requise. Pour chaque étape, l'utilisateur doit avoir tout ce dont ils ont besoin pour terminer cette étape. Quelqu'un a mentionné que lorsque vous cuisinez, vous devez souvent revenir en arrière et transmettre à la liste des ingrédients:
    • Divisez le processus dans petites étapes claires . L'étape actuelle doit être clairement identifiable (je déteste scanner une grosse mur de texte toutes les 30 secondes car je devais me déplacer les yeux de l'écran en ... Cook). Ne pas masquer les prochaines étapes (je pourrais vous préparer à l'avance.)
    • Dites-moi tout ce dont j'ai besoin sur les ingrédients: "Hachez les carottes (les deux) ..." . Justification: Je sais immédiatement ce que j'ai besoin d'utiliser et de la quantité (au cas où j'étais acheté un paquet, pas le nombre exact). Cela me sauve le Trip à la liste des ingrédients. Si vous avez fourni des alternatives, ils doivent être visibles (surtout s'ils ont besoin d'une cuisson/préparation différente) également ici et avec le même mécanisme (tapotez, info-bulle, etc.).
    • Donnez-moi un moyen rapide de voir la liste des ingrédients sans faire défiler la page (ou, pire, naviguer). Justification: Si - pour une raison quelconque - les étapes précédentes n'étaient pas suffisantes, puis je peux rapidement appuyer sur, lire, rejeter la liste sans perdre le étape actuelle.
    • Si possible, donnez-moi la possibilité de Ajouter des notes (ici et dans la liste des ingrédients). Ceci est particulièrement utile si certains matériaux ne sont pas largement disponibles (ce qui est souvent le cas lors de la cuisson de quelque chose d'un autre pays.)

Comme la dernière chose: N'oubliez pas de donner à l'utilisateur une option d'imprimer la recette (1ère et 3e vues ensemble) et la liste des ingrédients. Quelqu'un voudra/besoin d'utiliser une version imprimée lors de la cuisson. À cause de ce:

  • La version imprimée ne doit contenir que les informations nécessaires. Pas de liens, pas de trivia.
  • L'utilisateur peut vouloir l'imprimer avec des caractères plus gros.
  • Pour la version imprimée, vous devez prendre en compte toutes les autres bonnes réponses que vous aviez ici.
0
Adriano Repetti