2

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?

 

Improve this question
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".
    – Luke Sawczak
    Jul 17 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.
    – user253751
    Jul 18 at 3:55

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

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

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