Simeon Griggs with some nice UX ideas for a recipe website:
- No math. Swap between units and adjust servings on-the-fly.
- Offer alternative ingredients.
- Re-list the ingredient amounts when they’re referenced in the instructions.
I totally agree, especially on that last one:
Of all our improvements I think this is my favourite.
A typical recipe layout contains ingredients with amounts at the start. Then, a bullet point list of instructions to perform the method.
The method though typically does not reference those amounts again, so if you don’t prepare all your amounts ahead of time (which is what you’re probably supposed to do but come on who does that) you’ll have to keep scanning back and forward.
Part of what makes this stuff possible is how you set up the data model. For example, an ingredient might be an Array
instead of a String
so that you’re set up for offering alternatives right out of the gate.
Just in time! I just made a recipe website a few days ago and now I can use these
Thanks for the link Chris!
Thanks for sharing. You can also add the Screen WakeLock API, so your device will not dim/sleep, while following a recipe!
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
https://dev.to/madsstoumann/staying-alive-the-screen-wake-lock-api-31fh