3

I have a B2B web app in which users can pay to add elements to their public profile. We are keen not to make it look too "e-commerce" as it is for financial companies rather than B2C.

Currently, there is a link in the main navigation called "Awaiting Payment" and a traditional red badge to show how many items are awaiting payment. See mockup below.

Current mockup

We are now required to show a payment history page so I propose to rename the main navigation link "Payments" and include a dropdown menu of two choices:

  1. Awaiting Payment (which used to be in the top nav on its own)
  2. Payment History

My questions are:

  1. Does it still make sense to show the red badge at the main navigation level? If so, should there still be a red badge in the dropdown menu too?
  2. If there are notifications in the "Payment History" page, should the sum total of the notifications in the menu be shown at the main navigation level?

Proposed mockup

2

1. Yes.

Payments are often time-sensitive and important tasks, so informing your user of one using a notification badge is good practice. As for the badge on the individual sub-menus, I like them; they let users know how many of each notification they need to deal with. However, the current design of two red corner badges is a bit redundant.

You might try something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Or, to keep things clean, consistent, and readable, move the Payments badge to the left as well:

mockup

download bmml source

Note: A disadvantage of this method is plurality, as "one payments" wouldn't read well.

2. Depends.

If the Payment History requires user action, then its notification count should be displayed. If it's a list simply for reference and doesn't require the user's attention, then it should not be displayed. Imagine if every previous post on your social media platform of choice was totaled in with your notifications, and you couldn't get rid of it. Users gain satisfaction from addressing notifications and having them removed.

| improve this answer | |
  • 1
    I think you nailed this issue square on the head. I would upvote more if I could just for If the Payment History requires user action, then its notification count should be displayed. If it's a list simply for reference and doesn't require the user's attention, then it should not be displayed.. I would add these examples: Your email Inbox count doesn't go away simply because you viewed it, an action must occur such as read or delete and then the other example would be this website in the sense that You are notified of rep gain/loss but it's not actionable so it goes away upon viewing it – MonkeyZeus Jun 30 '15 at 21:07
  • @MonkeyZeus I completely agree on all of your examples. I had limited time for my mockups, but I also drafted one that did something similar. Had to scrap it because I didn't want to include a half-assed attempt, but great additions here. – Alan Jun 30 '15 at 21:21
  • Thanks guys that's great! My main concern is that I haven't seen this done before (notifications in menus) so am wary that it's an "anti-pattern" – Gueda Jul 1 '15 at 12:22
  • You've come to the right place to check! – Alan Jul 1 '15 at 12:22

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.