0

So my scene looks like this:

img

As you can see, in this case I highlighted the distance value because the card is near the user. As I couldn't think of any neat-looking way of highlighting a value that wasn't just changing the text color (this is far from optimal, because some color blind users wouldn't notice the new color), I decided to also add a label which would write what's interesting about this card.

Would the case of a non-colorblind user seeing a card which is telling the same information twice be detrimental to good user experience?

Should I keep thinking of another way of highlighting important values?

In the case that I keep this structure (color and message highlighting), is there any problem with using just one variation of the message (keep in mind that possibly the message could be seen multiple times at once, just like in the image).

Thanks!

  • Is redundancy bad, in this case? Why? – Confused Dec 1 '18 at 6:49
4

Design should be focused on the business, and also be usable and pleasant for users.

Drawing attention for the deal is good both for business, and the users: the business will sell, and a user will not miss a deal (Win-Win!).

This is a wide field of A/B testing to get the best design, which will be proven and backed by numbers. So you can start from some options and gradually grow.

From the aesthetic point of view, you can make message a bit bolder, to draw users' attention. There are a bunch of ways to do it, using graphic designer's tools, like shape, color, etc. Just as an example, I've attached an option, the trick, where the highlighting and the message are combined, think in this direction.

enter image description here

enter image description here

The other example of combining the highlighting and the message is a traffic light:

enter image description here

You got the idea, right?

As to your question:

Is highlighting something and then putting a message redundant?

I'd say, absolutely not, on the contrary! Highlighting itself draws user's attention (it's Gestalt principle). But user should understand the reason of highlighting. If it's not obvious, it's at least confusing.

See the real world example. What if there weren't labels under the indicators? And how confusing the middle indicator looks without any label? ;)

enter image description here

  • Thanks for such a great answer! I really liked your example of a card, and the fact that you cropped the photo really caught my eye, I never thought of doing that, in my head a product picture had to be square. Now that I'm redesigning my app I could use your example as inspiration, as it looks great. My only question is, how much do you think that a picture can be cropped in order for the user to still be able to see and recognize what it is without stressing too much? Thanks – Levon Dec 16 '18 at 0:30
  • @Levon there are several options. I'd try to use object-fit: cover property for an image, so central area is visible. I believe most significant area on the users' photos is central one. You can also magnify the photo on hover, so the photo takes the whole area of the card. – Alexey Kolchenko Dec 16 '18 at 15:25
  • The photo on my card takes 1/3, following the rule of thirds, which is good from aesthetics point of view. I think it's enough to recognize an image by its central part which is displayed on the card. – Alexey Kolchenko Dec 16 '18 at 15:34
  • I've attached the image with object-fit: cover, see above – Alexey Kolchenko Dec 16 '18 at 15:56
  • Two things, that's not an user's picture, it is a post, consisting of a picture, title and some other information. So, as long as I keep the center of the picture and don't crop too much there isn't a problem? Secondly, in my app, when you tap on the post more information is displayed, and the image is seen cropped horizontally, imagine the aspect ratio you chose but horizontal. Should I be consistent when cropping? Thanks!! – Levon Dec 16 '18 at 19:54
0

Think as a user: Where/what are you focused on when using this? How can you help making this easier?

Redundancy is not the problem here I think. It is the negative type of highlighting; the red color and negative label (“away"). While the possitive label (“this card is near you”) is grey and looks disabled or something. But isn’t this the most important message your user wants to see?

Color and/or icons in conjunction with a label may seem redundant or not, in UX this is very common and a recommended thing to do. It is a way to be able to quickly identify something or to learn to identify something. Redundancy is not a bad thing by definition.

But to get back to the use of red and the label “away”. Does a user want to quickly identify the cards that are available? And is red a color of availability? Would it help users if “away” changed in “available” and becomes green instead? Also I would make the text “This card is near you” more noticable as this is very useful information (for new users). Those are just thoughts and you should know what helps the user to understand and quickly identify which cards are near. I suggest to give this design a second thought and think a bit more out of the box.

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.