8

I am currently tasked with the problem "Users don't notice that there are comments placed on the recipe". This is a pharmacy application, where it is important that users can see which comments / actions are linked to a certain recipe that they are handing out to the patient. These comments are visible on a dialog which can be opened via the blue button 'Open receptdetails'.

My predecessor has decided to display a speech bubble icon on the button when there are any comments. Users don't always seem to notice.

Button when there are no comments;

The button when there are no comments

Button when there are comments;

The button when there are comments

Now I have tried a few alternatives ranging from filling the icon to an alternative color for the button.

enter image description here

Does anyone have any advice on this?

6
  • 13
    If it is important to see the comments / actions, why they are hidden in a separate dialog? Commented Oct 19, 2022 at 12:03
  • 4
    Can you post the full screenshot of where this button lives in the UI? You’re needing to attract attention to it, but without a larger context it’s hard to see other options. It’s helpful to see what it competes with for attention, and it’s position in the view.
    – Mike M
    Commented Oct 19, 2022 at 12:09
  • 1
    What page does this appear on? If it's on a form, you can add a required checkbox that says eg. "acknowledge recipe comments" similar to checkboxes requiring acknowledgement of ToS
    – mowwwalker
    Commented Oct 19, 2022 at 17:40
  • 2
    It's not super important, but did you mean to say receipt instead of recipe? Based on your screenshots it almost looks more like receipt. Recipe is a list of instructions to make something, especially for consuming (which could also be for a pharmacy). Commented Oct 20, 2022 at 4:26
  • 2
    I think it's meant to be "prescription". In some languages, like Spanish and Italian, the same word is used as for a culinary recipe. @oeds, in case you're not a native speaker, in English, it's: prescription = doctor's instruction for a pharmacist | recipe = cooking instructions | receipt = bill, proof of payment that you get in a shop.
    – typo
    Commented Oct 20, 2022 at 5:19

5 Answers 5

14

No big surprise that users miss the meaning of the presence/absence of a small cryptic icon. Are there details when there is a speech bubble, or only if there is a speech bubble filled with "text"? Or is it just static decoration like most icons on buttons?

The button itself looks pretty obvious. Don't show the button at all if there are no details. Or (better) disable it or replace it with "No details for this recipe" in case users can't remember where the button/details might be. Afterall, what's the point of having a button that shows nothing?

Even better, if users must read the details if they are present, then show the details on the main page instead of the button and dialog, as implied by the comment by locationunknown. Don't make users do unnecessary and error-prone work to get to the details if they're that important.

In any case, don't rely on arbitrary graphics to represent presence or absence (e.g., does red mean there is something important to click for, or "Stop! Don't click this!"). I'd wager the problem isn't the users don't notice the button. The problem is they can't tell/remember when they're suppose to click it. Sometimes they don't have to. Sometimes they guess wrong. Even animation won't help with that. Don't rely on users noticing or remembering that the graphics have changed, and then correctly interpreting what that might mean. Just explicitly say or show if the content is present or absent, and take the cryptoanalysis out.

4

Sounds like an interesting question, thank you for posting it in a detailed way.

There are already good answers here regarding the specific screen design, so I will take a different approach and would urge you take a step further back:

I think this may be a problem of process and user motivation!

Long-winded background explanation, Example 1

Sorry, this is going to be a tad long-winded, but let me start with an example:

Classic 'hot singles in your area' ad

I am sure you've seen something like this before. Although this specific one looks a bit outdated, the point is that this ad does most everything right from a catching-my-attention point of view. I still would not click it, and neither would you! Why?

Possible predicaments of your users

Because merely catching your visual attention is not enough. You also need a reason to click something, right in the moment. To bring it back to your situation, here a few scenarios that may still apply even if your button design is excellent:

  • your users may be confronted with a lot of 'alarms', 'news' or 'warnings' during their workday, so they are already fatigued and trying to make specific notes stand out is a race to the bottom
  • no matter if this alarm is red, animated or blinking, your users are going to see it a million times (this is expert software used again and again, right?) and eventually not notice it anymore, just like background noise.
  • your users may be under time pressure (of any kind, wanting to go home ASAP also counts) and so may be subconsciously motivated to skip anything adding time to their process
  • none of this may apply but your users may still not see the point of reading the message (like: "OK there is something with the receipt or whatever but I just want to print so whatever, next")
  • your users may see the importance but may be planning to access the information at a later point ("I will do this thing first")

Long-winded background explanation, Example 2

Now, consider this example:

address sticker example

This is the address for the parcel for my Mom's birthday gift (not actually), so I just read it 6 times in a row very carefully, to make sure everything is right and the parcel will not be lost. Even though there are no visual alerts of any kind! So would you. Why?

Research questions that probably matter more than visual design

I hope you see the point I am trying to make. Now I don't know your business at all, but I think some valuable questions you need to answer are:

  • When do your users should read this extra information ideally (after doing X, before doing Y)?
  • What is the desired behavior when users read the receipt notes? Do extra stuff? Inform someone? Just be in the know?
  • Why are they currently not reading it? Do they really don't know it's there?
  • How could you motivate your users to want to achieve the goal researched above?

Closing words

If you achieve this - to move your button from annoying ad to ignore towards Mom's address - then any decently styled button and maybe a reminder or a validation at the right point will do. For which your existing buttons are entirely fine. (I think the second one of your options is the best option btw)

This was really long - I hope you got some value out of it. I understand that this stuff is kind of soft (also part of UX, though) and that you might not have all the power you would need to redesign a process in your org. However, I think there is danger here in just looking at the visual design of the button.

TLDR: You need to understand what your users need and want, and then have them want to click the button by showing it at the right time and place. Visual design is second.

2
  • 1
    Obligatory XKCD : xkcd.com/570 Commented Oct 20, 2022 at 11:15
  • 1
    Thanks! My life goal is to be able to have a relevant xkcd for every situation, bookmarked :)
    – Kolja Sam
    Commented Oct 20, 2022 at 12:05
2

Users don't notice that there are comments placed on the recipe.

Right, users pick the path of least resistance. They are willing to skip anything and everything which they are not forced to interact with.

This is a pharmacy application, where it is important that users can see which comments / actions are linked to a certain recipe that they are handing out to the patient.

It sounds like there is a workflow problem. These recipes are so important, yet their optional for viewing.

Have you considered forcing the end-user to view the recipes before being allowed to print/distribute stuff to the patient?


One thought for a UI improvement would be the use of a counter instead of a speech bubble.

enter image description here

1

I actually designed a similar button last week for our own system.

The default button is shown when there are no (newly) received messages and allows you to navigate to the chat where you can send the company a message.

When you receive a new message, the button changes visually:

  • It becomes a different blue, to show there is an "active" change, something that draws your attention in contrast to the default state of the button.
  • The text in the button changes to "View () message". The button leads to the same place (chat with this company), but the copy is more direct to give more context and encourage the user to click on it.
  • Also, the amount of (new) messages is shown in the button, providing even more context to what the user can expect from clicking on this button (users are scared of unclear buttons) and again, gives even more reason to click on it. ("1 new message" just sounds way more direct than "new message")
  • What is important to remember is that both of these button states does the exact same thing: bring the user to the chat with this company. Except for very specific situations, you don't want different button states doing different things, because users will become confused or wary of your buttons.

What I personally like about this solution is that you don't need any new elements, and thus extra space. You can do, tell and show a lot within the same space and keep information dynamic. When the user navigates to the chat by clicking on this button and comes back later, the button will have returned to its default state, and gives the user the feeling that they've 'cleared' their new messages/notifications, just like the standard notification indicator does.

Hope it helps to solve your problem, or at least spark your inspiration!

Image

-8

We are talking about contrast, if the most relevant in terms of notoriety such as shape, color, position, size, do not achieve the desired effect, it is necessary to resort to an action with greater visual impact: contrast by movement, from a simple blink to something more elaborate.

enter image description here

enter image description here

enter image description here

3
  • 13
    Animation certainly gets attention, but can also backfire. It distracts from the more important information on the page (which is certainly present; otherwise the details wouldn't be relegated to a dialog). Worse, animation is so annoying (and so associated with useless advertisements) users habitually hide it immediately (scrolling, resizing, or even using their hand), and thus never really read it, or forget it's there. I scrolled your answer away in order to write this comment. Commented Oct 19, 2022 at 12:26
  • 5
    This is more clickbait material than it provides meaningful communication for a professional application.
    – jazZRo
    Commented Oct 19, 2022 at 12:44
  • 3
    Combatting bad behavior with bad UI, interesting...
    – MonkeyZeus
    Commented Oct 19, 2022 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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