I have a Mobile app for recipes, the user can click on recipe to see its details, in details page we have image, title, tags, ingredients, and steps for preparation.

So my question is, is it right to make ingredients as horizontal scroll instead of put it in vertical scroll?

This is an example for horizontal scroll enter image description here

And this is another example for vertical scroll enter image description here

in this case what is better to use, horizontally or vertically?

1 Answer 1


You should use the vertical scroll for the ingredients.

The main reason being is that it isn't clear to the user if there is actually anything to scroll. For example, in your screenshot, is there an ingredient after "Lemon". We can't tell.

Sure, you could style it so it is obvious and it partly solves the problem. However, that then adds a non-intuitive experience for the user, because suddenly you have a mix of vertical and horizontal scrolling elements.

On top of that, the ingredients is an important part of the recipe that the user will most likely want to scan first, before they even need to look at the method, etc. So having this take up a big chunk of the vertical space isn't really a problem you need to worry about, because it's likely that is what your users will want to see in that space anyway.

Plus you get the bonus of seeing the quantities next to the ingredients (as per you last screenshot).

In summary, we can provide lots of good reasons for a vertical list, but we don't really have any counter-arguments that warrant considering a horizontal list.

  • +1 for this answer, and please keep in mind that your cook might have hands that are covered in flour. The more you can show on the screen to minimize touching the screen, the better.
    – Izquierdo
    Dec 29, 2022 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.