3

Front page of food delivery service when logged in. It's divided into horizontal rows, each with a different title and a selection of options to choose from, such as "Hot summer deals", "Free delivery", "Top-rated", and "Fastest delivery"

Here we see the main landing page of a food delivery app. The page is crammed full of recommendations; the user is presented with several different "channels" of recommendations as well as different kinds of objects in each channel. Obviously the intent is to maximize the chance of the user seeing something they like. They can order from a recommended restaurant; browse all restaurants in a major category; scroll right to view more niche categories; order ice cream or groceries or alcohol (completely separate tasks in my opinion); order the same thing as last time (cropped from screenshot for privacy reasons).

I've seen similar UX in some other apps and I am considering using it in my own app as well.

This is not a simple gallery of items as seen in e.g. the Microsoft PowerPoint start screen. That screen shows all installed templates in alphabetical order. This food delivery app does not simply show all nearby restaurants in alphabetical order, but uses many different recommendation strategies and shows the results concurrently.

Does this UX pattern have a name?

 

2
  • 1
    I would call it "overwhelming", myself. But perhaps you could just think of this as a category meta archive (to use WP terminology) -- a page where you can choose which category to delve down to. I agree that it would be nice to know a name for the subjective impression it makes, and if there isn't one, I second "smorgasbord". Commented Jul 17, 2023 at 5:35
  • @LukeSawczak This is the homepage. If you're looking for something in particular you're not expected to spend a while staring at this page; you go to the search page and search for what you want. If you're not looking for anything in particular, then staring at this page is a great way to find something. Note that for the screenshot, I zoomed out. In reality you see 3-4 rows of content and scroll down for more. Commented Jul 18, 2023 at 3:55

2 Answers 2

0

I am not sure there is a specific name for this type of design pattern, but if you use the Atomic Design analogy I would say that it is a page made up of repeated molecules (or card like components).

In fact, you could say that landing pages or home pages of e-commerce like websites often like to use a combination of content to drive different user actions, such as highlighting particular deals (to drive sales) or providing a visual way to navigate products (to nudge people to browse).

So other than the second row that looks more like a top level navigation into different types of food items, every other row just looks like a single row of cards that are already filtered and sorted. This probably makes it similar to some kind of visual list. But your name suggestion is kind of catchy and can be added to other food related UI components and design patterns like the kebab and hamburger menu?

You should remember that the user's view is probably only limited to the first three or four rows on a desktop, and for mobile it will be even less.

0

Individualized Recommendations

It's quite common nowadays. In fact, your example is essentially HBO+ in white, or a cleaner Amazon. These are more common now due to AI and the ability to quickly create personalized content based on user preferences measured through analytics.

There are specific guidelines for this pattern. However, it's an evolving pattern, so they will likely change in the short term.

3
  • BTW: machine learning was used for individualized recommendations long before the current AI hype cycle. Commented Jan 8 at 18:30
  • I'm not asking about the way the recommendations are generated but the way they're presented. In particular, the pattern of showing many categories of recommendations simultaneously. Commented Jan 8 at 18:31
  • I've already answered it. Additionally, I explained how they are generated, as there's a reason for it, which you can read in the provided links. However, if you prefer, you can refer to it as "listing" or "product group" if it's for eCommerce. This variety of different products, categories, and looks for each of the elements is part of the mentioned pattern, which uses common design principles to separate and group elements. This is because recommendations are for completely different items, as you already mentioned, so visual cues are an aid for that generated list.
    – Devin
    Commented Jan 8 at 18:35

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.