Responsive Grid View with Hover layer

Question

I have a grid layout which has an hover state which reveals information that are crucial as below.

The Content of each Grid Item

1. Dish Name
2. Dish Photo
3. Rating
4. Chef Name
5. Chef Photo
6. Chef Location
7. Cost of the Dish
8. Order (action button)

Since hover does not work on mobile browsers in the right way which is the best way to translate such a design to the mobile browser compatible design. Since one the main actions of Booking the Dish is placed on the hover state.

Please share your feedback and suggestions.

Answer 1

I suppose that you have a details page for each of the dishes. Most ordering will probably be done in that view rather than the thumbnailed list view. Customers generally want to reassure their decision by acquiring all available information before making a purchase (this need is of course decreased for already experienced purchases).

So I would suggest that in the list view you stick to:

• Dish name
• Dish photo
• Rating
• Cost

With that combination you will provide just the right amount of information for a user to sort out the items which does catch interest and incite her to find out more.

As a reference I would use the NY Times cooking site which has a very nice visual appeal:

Desktop list:

Desktop list hover:

Mobile list:

Mobile details:

Answer 2

I dislike detail pages. If a user is trying to buy items, especially more than one, then why pull them away from the list view?

That being said, relevant information should be displayed from the get-go. However, relevancy changes depending on our context and "configurations" are entirely different beasts.

Scenario

My name is Sally, and I want to buy some food. Before going to a website, I already know:

• My budget is X dollars
• I am hungry for Y type of food
• I never eat food from a chef with two or less stars

To give Sally the best user experience we can, we want to make the process as quick and as painless as we possibly can. A good set of MVP features might be:

1. A simple grid/listview of all available options
2. The options can be filtered on based on criteria like: budget, food type, and chef rating (so our user doesn't have to browse food they would never choose)
3. Grid items with different states to adjust to context:
   • Browsing Context: Displays food image, cost, name, and chef rating
   • Interested Context: When a food is clicked, it expands to take up a row, and contains a short description about the food, with quick links to an ingredient list, chef bio, and an "add to order" button
   • Research Context: Either redirects to a new page (if you have a ton of information), or expands further to include the information the user has specifically requested (chef/ingredients)

In The Wild

Users are presented with high res photos that depict the menu item:

• Tapping or click an item gives them the option to configure the most commonly changed component for a given item.
• They can remove the "tapped" state by clicking the "X" or another item
• Complex configurations are left for the shopping cart/order screen. 80%+ of users do not modify a pre-built pizza further (reduces time to purchase)

In Our Lab

This is just a quick mock-up to provide a visual for the above scenario.

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{download bmml source}

This answer is a little lacking, but hopefully it provides some helpful information. It will need to be tailored to fit your situation a little better, but if you have any specific questions, or want me to elaborate, please let me know