2

I was providing some feedback on a peers design. And what kept jumping out at me was the fact that these buttons seem to blend together and appear sort of as a block of text to me. This is a native app however these buttons are not unlike ones you might see in any responsive design. [screenshot]

Is this a valid concern? If one shows a list of choices as buttons on a mobile device do they tend to blend together visually?

Part of my reasoning for doubting this concern was due to the fact that i don't know how to fix it other than adding some more space but that would make the surface area for touching smaller.

2
  • What does a selection do? If it is a native app, what is the design choice to not make the buttons look native? Apr 2 '16 at 23:18
  • The buttons show you a list of recipes for that category you would then click on them and drill down for the details Apr 2 '16 at 23:23
3

You seems to have a lot of links. I would usually reserve buttons for call-to-action and limit them to one or two. This is to prevent users from drowning in a sea of buttons and to differentiate them from normal links.

The buttons show you a list of recipes for that category you would then click on them and drill down for the details

If all the buttons carry the same weight (order of importance) then you might want to consider designing them as normal links. In my opinion if you have more than 5 categories, then you have to rank/sort them in a particular order. Higher importance at the top perhaps or alphabetical order?

It does look a bit clutter and intimidating with so many buttons presented on a single screen. You might want to explore other ways of presenting your food category. Some common design pattern includes:


mockup

download bmml source – Wireframes created with Balsamiq Mockups

If I were to design for an app, I would prefer to use buttons in pages that requires some form of control such as form submission etc. If its just a link to any other pages, I would style it like a normal anchor link. I have seen a lot of cases whereby button has been grossly misused especially when designing an web app.

If you are familiar with HTML and writing semantic codes, then you would recognise the difference between an anchor <a> and button <button> tags. One has a "href" and the other don't. But I suppose this would be a topic of its own.

2
  • I really like the bottom design thanks so much for the input Apr 3 '16 at 3:53
  • 1
    +1 for the category list approach. There are lots of fancy solutions to this problem, but this is another case where the simple answer usually wins the test. Apr 3 '16 at 4:37
2

The vertical list option with right hand transitions into the category is the "correct" answer to your problem. In @adamsoh's answer this is the first image.

Something to consider - the words in this list are, mostly, heavy on reading. Here are some possible improvements:

  • Weekly shop & prep

  • Leftover friendly

  • Fit (and delicious!)

  • Nutritionally Complete

  • Family Meals & Dishes

In this way each item starts with its key word.

Then give them each an appropriate background/font colour identity.

Though I'd suggest you get rid of "Nutritional" as a category because it implies the others are inferior options. Add a sorting mechanism inside the listings - like prep skill, expense, time, nutrition, etc.

And add a category for Special Days. Think Valentines, Thanks Giving, Birthdays, etc. Those times when we want to take care of the ones we love by cooking for them something abundant and/or awesome. This assumes much more time and effort can go into cooking and presentation so the dishes are... special.

1
  • I should of thought of the different background color to differentiate each one. All that came to me was a small unique icon for each one to the left but that didn't do it. Also nice point on the more terse word choice Apr 3 '16 at 15:45

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.