2

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

enter image description here

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.

  • 2
    It seems to me you're hiding a lot of potentially crucial data. Why not just reveal it all? Stack the information on top of each other? – Majo0od Feb 9 '15 at 13:38
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: enter image description here

Desktop list hover: enter image description here

Mobile list:

enter image description here

Mobile details:

enter image description here

  • thanks a lot. i think that makes more sense. i will refine the design and get back to you for another round of feedback. – Harsha M V Nov 12 '14 at 13:04
  • Thank you buddy. Here is what we have finalized on. Any suggestions ? i.imgur.com/qstboer.jpg – Harsha M V Nov 14 '14 at 5:58
  • @HarshaMV I think it looks neat! It would be interesting to see what it would look like if the rating boxes didn't change color OR had maybe a border (around or at the bottom) with the "rating-degree-color". As it is now it gets quite saturated up in those boxes, since you're using a variety of colors, if you want to keep the full boxes I would suggest you bring down the saturation a notch of the box colors. Otherwise it looks clean and appealing! – AndroidHustle Nov 14 '14 at 7:47
1

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)

Donatos Quick Picks Donatos Quick Picks 2

In Our Lab

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

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

  • wow thanks a lot.. this really gave me a perspective :) – Harsha M V Oct 8 '15 at 2:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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