Design Intent - Design Feedback - MHV on VA.gov for Landing Page Onsite Notifications

[allison0034]

VFS actions

• [ ] Assign this ticket to the team member(s) responsible for addressing feedback provided by Platform.
• [ ] Comment on this ticket:
  • [ ] If the Platform reviewer has any Thoughts/Questions that require responses.
  • [ ] When Must feedback has been incorporated. As appropriate, link to any other GitHub issues or PRs related to this feedback.
  • [ ] When Should/Consider feedback has been incorporated, or if any feedback will not be addressed. As appropriate, link to any other GitHub issues or PRs related to this feedback.
• [ ] Close the ticket when all feedback has been addressed.

Thoughts/questions

• No feedback, sounds like you are exploring great things. I wanted to upload what MyChart for medical messages does for you to look at.
• 

Feedback

Practice areas will document their feedback on the VFS-provided artifacts following the Must, Should, and Consider Framework. Platform reviewers may also provide additional notes that don’t comment on the artifacts themselves but are important for implementation (eg. engineering/coding notes).

[humancompanion-usds]

I chatted with @rtwell and @batemapf both during and after the Design Intent today and would like to amend my feedback a bit. Ryan correctly pointed out that there is a distinction between:

• Unread/read message, where we use a dot in Secure Messaging individual messages (along with unbold/bold text)

versus

• New notification, where we use the Tag component with a number inside of it on mobile:

The mobile treatment and placement address the spatial concerns for showing double digits. From what I heard in the discussion the intent here is to indicate that there are new messages in the Inbox. However, that's different from how Secure Messaging is using the dot and different from how mobile is signaling the same thing. Thus I would much prefer we give the badge and go to start with. For the record, Patrick states that he is not anti-badge.

Apologies for the flip-flop. I should have been better prepared for this discussion this morning.

[ajakabcin]

hey @humancompanion-usds - appreciate the additional thoughts here. We're working with @fmccaf1 to firm up designs. As the Auth Experience team moves forward with conducting an experiment on the health care section of My VA, should we be interpreting this feedback

Thus I would much prefer we give the badge and go to start with

as must, should or consider?

Thank you!

cc @aagosto90

[fmccaf1]

Thanks for the feedback and thoughts shared in this thread.

I would like to gently push back on the concept that there is a standardized “correct” usage of a dot indicator vs. the tag component with a numerical counter:

First off, my understanding was that these two components - the tag component used by the mobile team and the dot indicator used by secure messaging - were designed separately by different teams in the absence of a strategy governing how the two would differ and/or relate to one another. I’m curious if that understanding might be incorrect.

Secondly, I did a quick review of several articles discussing notifications and indicators as well as an exploration into several apps, including Slack and Teams, to explore the validity of the idea that counter badges and dot indicators have standardized, specific uses. I have failed to uncover anywhere on the internet where a clear distinction is drawn between when to use an indicator dot vs. a counter badge:

• Microsoft’s Material Design is a helpful resource in this conversation. In Material Design, the two options (dot or counter badge) are semantically interchangeable. The only guidance within the Material Design site is to use the dot when space is more constrained.

• From what it seems, Linkedin's app is another example that takes for granted that the two visual treatments are interchangeable. See visual provided of Linkedin, with both dot(s) and counter badge(s) used within the same navigation menu at the bottom of the screen. Image2 from a Toptal article on notifications and indicators.

• Slack is another example. See visual with dot indicator on the left, pointing the user towards a “space,” then within that space, the app is directing my attention to all direct messages generally (with bolded text) and direct messages with a specific user (with bolded text and a counter badge). This is a case in which the new notification is indicated using a dot (on the digital service at the VA logo) and the unread message is indicated by a counter badge.

  

• Refer to this Mural document for more examples of what I found.

In summary, while I was unable to find any clearly drawn distinction between when a counter badge is necessary vs. an indicator dot, I was able to identify a pattern of apps using both visual treatments interchangeably, and the choice of when to use one over the other is predominantly based on what works visually in each specific instance.

Finally, I’ll explain a bit for your consideration about why I am hesitant to use the tag component with a counter on the health landing page:

• The tag component with a counter works okay on the landing page when used next to a link with the text “Inbox” within the secure messaging section of the page because the thing being counted is clear (messages). Future notification types, on the other hand, are much less clear when it comes to what is being counted. For example, two future notifications include appointment cancellations and new appointments scheduled. We can of course continue to redesign the landing page as needed, but in the current design, the tag/badge would live next to the link with text “Your VA appointments.” In this case, the tag component with a counter doesn’t make a lot of semantic sense (what are we counting?), but an indicator dot does (by simply pointing at the link, implying there’s something for the user to see on the page linked there, similar to how the dot works in the Slack example).
• The design system guidance on using the tag component includes the following, “Users frequently confuse tags as buttons.” I think this is especially important to take into account on the health landing page since there are so many clickable links in a relatively small area (the ui is essentially made up of groupings of links).
• The design system guidance on the tag component also includes, “Don’t overdo it — if everything on a page is called out as important, nothing is important.” On the health landing page, where we are planning multiple notification types, whatever component is chosen will sometimes be visible multiple times within the same view of the page. The louder the component, the more overwhelming that experience will feel to users.

That being said, I think My VA may be better served with a tag component. With so much more content and information within the page, users on My VA may need a “louder” visual cue to notice it on the scrolling page. Therefore, given the following,

1. My VA and the health landing page have different visual constraints for an indicator component;
2. Reputable sites and apps follow a standard of having more than one visual treatment for this component (a smaller dot and a larger badge with counter that are interchangeable dependent on visual context);
3. Between the mobile app and the secure messaging app, VA.gov’s portfolio already essentially includes two visual treatments for one component (the counter “tag” component in the mobile app and the dot indicator in the secure messaging app), unless it is decided now that that distinction between the two visual treatments is beneficial to the site's users (a decision that would go against the norm of what we see on the web).

I wonder if we might be able to get away with adding one component with two possible visual treatments to VA.gov to satisfy the needs of both landing pages.

Curious to hear your thoughts @humancompanion-usds @rtwell @batemapf

[aagosto90]

I agree with what Florence concludes here, that in the end we may need to look at two different visual treatments for a badge component, similar to how Material Design handles it.

The only thing I disagree with is this notion:

the choice of when to use one over the other is predominantly based on what works visually in each specific instance.

It seems like it's been difficult to find really clear documentation on this, but in the examples you shared @fmccaf1 (like in Slack and LinkedIn), there is a distinction between very personalized notifications (DMs, notifications, etc.) and an indication that there's something you haven't seen here but it's not necessarily personalized directly to you, such as conversations in Slack channels that you follow and updates on your LinkedIn feed. In that way, it seems like anything on the logged in experience of our pages is a more direct type of notification. However, I'm not against using different treatments here as long as it makes sense to Veterans and is useful for them.

Our pages are similar but actually serve pretty different purposes. If the My Health landing page was more of a dynamic dashboard of health-related updates, then we'd really need to align on our solution here, but it's really just a list of health care links. To that point, I can see how something not as visually loud as a badge might be better there.

I'm starting to wonder if it'd be best to use a badge on My VA and a dot indicator on My Health and test both in the same research study to see if Veterans have any confusion or if it seems perfectly normal and digestible to them to see both versions on the same website. Just my two cents and curious to keep this convo going.

[ajakabcin]

💯 to @aagosto90's notes and agree the main difference is between personalized new information and non-personalized new info.

@fmccaf1 using your slack as an example, I think it's worth point out that in your screenshot, if you were to click out of the A6 workspace you would in fact see a badge with a count in the workspace column. It's possible this may be specific to the user's notification settings - for example mine are set to notify me when I receive a DM or I'm mentioned. So in that case, I get a badge with a count on the workspace, but if there are generic, non-personalized new things (like new messages in the many other slack channels we're all in) it's just a dot on the workspace, and then within the workspace it's just bolded text. So your point about seeing both in play is valid!

Sharing some screenshots from my slack to elaborate on this example:

(Note that I happened to receive two new DMs in my AH workspace in the time between I took these screenshots, hence the 2 badge count on the AH workspace)

I really appreciate the conversation on this as it's helpful and important as we navigate the many intricacies, nuances and variations of notifications and how to align them within the authenticated experience as a whole. So thank you @fmccaf1 !!

[allison0034]

@fmccaf1 @aagosto90 this is all interesting. Have you considered A/B testing on MHV to see if a dot is as clear as a badge with a number?

[humancompanion-usds]

I have no issue with a potential continuum of dot to circle style badge. Nor do I have issue with moving away from Tag and to a circle with numbers. Agree about personalized versus non-personalized.

...in the absence of a strategy governing how the two would differ and/or relate to one another

These are emerging designs for new elements that haven't been on VA.gov before. Thus it is pretty typical at this point to not have a strategy because teams are exploring. We're in the divergent or storming phase but with an eye on converging and norming. Usually my goal at this point is to understand what the guidance in the Design System would be for this component or pattern.

I'm gathering that you all don't feel that there should be a distinction between a single message being unread/read versus a series of messages being unread/read? I believe, though I don't want to put words in his mouth, that was the main crux of what gave Ryan pause. Essentially, that Secure Messaging has laid claim to the dot + bold text and that it operates at the single message level rather than at a higher level. But I can see the argument that perhaps the distinction isn't significant.

I also would be willing to bet that just the bold text without the dot would be sufficient to indicate an unread message in Secure Messaging as that's a fairly common pattern in email clients. The dot may not actually be necessary there.

Ryan's out today and I'd like to give him a chance to weigh in.

must, should or consider?

I'm not going to force you to use the Tag badge version. I certainly think you need to take it into account though, which you are doing in this thread, which is great. We can't really ignore that the mobile app has over 1 million users.

[fmccaf1]

I love hearing everyone's thoughts here. Thanks everyone for chipping in!

Perhaps strangely(?) my slack looks different than yours, @ajakabcin. I never have a "count" badge associated with the DSVA space! But this is an interesting idea that it seems you and Angela are aligned on.

And @aagosto90, this is not something I had noticed before!:

It seems like it's been difficult to find really clear documentation on this, but in the examples you shared @fmccaf1 (like in Slack and LinkedIn), there is a distinction between very personalized notifications (DMs, notifications, etc.) and an indication that there's something you haven't seen here but it's not necessarily personalized directly to you, such as conversations in Slack channels that you follow and updates on your LinkedIn feed. In that way, it seems like anything on the logged in experience of our pages is a more direct type of notification. However, I'm not against using different treatments here as long as it makes sense to Veterans and is useful for them. I'm curious if you've been able to find any documentation on this? Or maybe you haven't had a chance to look.

Angela and AJ, do you have thoughts on the mobile version of Slack that uses the dot for DMs? Does that feel like a departure from what you're saying or does it fit the pattern?

I guess for me, the outstanding question is this: Does it make sense on the Health landing page to have a counter badge for new secure messages and a dot for everything else? I think the consistency makes more sense and would bring up less questions (why is this one a count? does it mean something different from the dot I'm seeing connected with appointments?), but we don't have research on that (yet).

@humancompanion-usds, you wrote:

These are emerging designs for new elements that haven't been on VA.gov before. Thus it is pretty typical at this point to not have a strategy because teams are exploring. We're in the divergent or storming phase but with an eye on converging and norming. Usually my goal at this point is to understand what the guidance in the Design System would be for this component or pattern.

I agree / would expect this^ What I was trying to explain in my earlier post is that the distinction between the badge that the app uses and the dot and bolded text that secure messaging uses don't necessarily seem like an intentional use of different visual treatments, so I was hoping we wouldn't just see that these two separate teams are using something different and assume they're following a rule that then everyone coming after them should also follow. I was hoping for a more intentional planning process around what is in use now and what do we think should be in use going forward.

[batemapf]

I guess for me, the outstanding question is this: Does it make sense on the Health landing page to have a counter badge for new secure messages and a dot for everything else? I think the consistency makes more sense and would bring up less questions (why is this one a count? does it mean something different from the dot I'm seeing connected with appointments?), but we don't have research on that (yet).

do we need to answer this today? can we start with just dots and if — after we've gathered data and can better understand non-SM MHV landing page use cases — later on we want to switch the SM dot to a counter badge, we can have the conversation then?

[ajakabcin]

@fmccaf1 I wouldn't be surprised if it is dependent on personal settings! My guess is that it's aligned to the preference I set for receiving notifications (on my computer and my phone) - i.e. make a noise and show on my screen when I get a DM or I'm mentioned. But I think that gets at Angela's point - personalized vs non-personalized.

Also, I see the dot as well as the badge count in the mobile screenshot you shared - same as mine below. I think you're referring to the dot in the bottom DMs though?

My assumption is that was done perhaps for space reasons as you noted with Teams. I would say that's still a different use case though on a smaller mobile menu than what we're talking about? (sorry not a designer don't know the official terminology 🙃 )

However, the workspace still uses a badge on a mobile like on desktop: (don't mind beachscoob LLC, just my family's slack space 😆 )

Sorry the screenshots are so big!

[aagosto90]

I'm good with @batemapf 's proposed approach. What I'm gathering from this convo is we can probably find a way to incorporate both the dot and the numbered badge because we will likely need both for different circumstances, but we're still trying to determine the distinction between them and when they apply to our specific uses cases.

[fmccaf1]

Cool, feels like we're in a good place to do some testing and learning and then figure out what's next. It's hard sometimes to find where I can add my two cents async, so thanks ya'll for bearing with me writing out my thoughts here.

[rtwell]

Hi I am back—my thoughts about read/unread vs new notification was more about solving specific problems—that one doesn't necessarily dictate the other (but clearly they are related). Loving the convo happening here and glad we're thinking platform/ecosystem-wide and not just about one.

that said, some notes about the mobile app to keep in mind as we learn/expand:

1. the mobile app will be implementing deep linking soon. deep linking = user gets a push notification about a new secure message, user taps on push notification and is taken to the VA app, is able to login, and then automagically taken to the that specific secure message.
2. adding a badge counter in the app won't be far in the future, but that is its own feature.
3. as it stands right now, the mobile notification ux architecture works like Slack (individual features aka Secure Messages, Appointments, Claims) in the sense that each feature can post a badge + number. there is no aggregate notifications home where a user of the mobile app can see all notifications.