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
And this is another example for vertical scroll
in this case what is better to use, horizontally or vertically?
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.
