In order to show more information in as little space as possible I thought of changing the gradient that's underneath depending on the category of the ad. Purple to pink gradients show services and blue to turquoise shows products. Was this a good decision or the category (Which there will be only 4 different categories; services, products, job and vehicles) is obvious enough that's not worth displaying each card differently?

  • To be honest, before I read your description, I thought the different colors were for negotiable/fixed cost. I would suggest separating services and products into tabs or categories. Also, the mock isn't realistic in scale as the fonts are too big. On a phone/tab, your smallest font would be the default font size allowing you enough space probably to add tags for separating services from products. Cross/arrow; great for UX but seems unnecessary. I would recommend avoiding the swipe gesture. Tap to open and swipe to dismiss is a common pattern. Follow that to make the actions more intuitive Jan 28, 2019 at 6:21
  • 3
    You should never use color alone to convey information. Any of these posts are related and there might even be duplicates: ux.stackexchange.com/search?q=is%3Aquestion+color+blind Jan 28, 2019 at 8:38
  • @ShreyasTripathy I forgot to add that the user will be shown each categories colors when filtering the ads, that's before reaching the part of the app I showed you. If the user knows what the colors mean, do you still think it's misleading? (Maybe the user forgets about the colors). If the cross/arrow seems unnecessary, do you think I am better off using that space for other information? Thanks!
    – Levon
    Jan 28, 2019 at 15:30
  • @locationunknown makes sense, but even if it is non critical information? You should be able to recognize the category just by looking at the ad, I thought of coloring each card as an easier way to make the user get to what he is looking for. Thanks!
    – Levon
    Jan 28, 2019 at 15:32

2 Answers 2


Looking at the screen, you are showing 3 offers (customer has provided no input like a product or service they are looking for) and the customer can either view / avail it or dismiss it to see a new one. In the view there is no need to differentiate the category. Also, in the current style it is not clear why the color is changing and customers can misinterpret it like Pink denotes negotiable price or closer distance.

Think about the value the category information will add for customers in the context and take a call. If you want to show the category stick to the text representation.

Hope it helps.


I think your intention to communicate different categories is right, but I see several problems with your solution:

  1. The actions should be coloured consistently, so the users can always be 100% what is clickable an what is not
  2. right now you have to deal with only four categories, but in the future this number mit increase.
  3. Also thinking into the future, you might also want to communicate tags, discounts, usp‘s, countdowns, you name it. So you should carefully decide which information get‘s how much visual attention

I hope that helps

  • Thanks for answering! What do you mean by consistently coloured? Are my example's cards consistently coloured? Both the X and the arrow can be clicked, and when you click on every other part of the card you are shown more information about that card, are you saying that I shouldn't be colouring the location and price icons? Also, what do you advice for making my solution more future-proof? Thanks
    – Levon
    Jan 28, 2019 at 15:24
  • By consistently coloured I mean: the right arrow should always be green(just an example) while the x should always be red. If the location icon and the dollar icon are not clickable, you should color them different than the arrow. You could also think about making the whole card clickable to „appreciate“ the offer and only when the user clicks on the small x area make it disappear.
    – marcelgro
    Jan 28, 2019 at 16:42

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.