Some of the menus are quite large and in order to go to “desserts”, or any other section in the end of menu users have to scroll quite a lot. That’s why i am trying add a horizontal scrolling repeating group, that will allow me to reach following behavior:
The way my menu page is organized is a nested RG (RG inside a RG). So, i have an RG with menu categories (ext. vertical scrolling):
I added a horizontal RG with all the Menu categories, and a click on any of them starts “scroll to entry” workflow.
The problem is that when it scrolls, “lazy load” of ext. vertical scrolling loads new menu items and Menu Categories, and user ends up being in totally other section:
One option would be to load just the categories initially. Then, load only the items in a category when the user selects that category. That alone might improve performance and UX considerably, since you’d be loading only the requested subset of data. It would be a more efficient use of bandwidth as well.
It seems the UI could be implemented either with the categories listed horizontally across the top (like your 2nd design) or as a hierarchical list (more like your 1st design). They key is to use initially-hidden groups for the menu items and then reveal a group (items in a category) when the user selects that category. Data within a group loads only when that group becomes visible.
(BTW, this is a common technique used when creating a single-page application or “SPA”.)
