1

Let's suppose we have a table that shows a list of users and their basic contact information.

First Last 1 | Phone 1 | Address 1
----------------------------------
First Last 2 | Phone 2 | Address 2
----------------------------------
First Last 3 | Phone 3 | Address 3

...and so on.

We want the user to 1) quickly understand which user is the primary contact for the account and 2) be able to quickly designate a different contact in the table as the primary contact.

Initially I was thinking that the primary contact should be the first row (by default), bolded, and a "filled star" icon could be added to the left of the name. Other contacts would have an "empty star" icon. Clicking on the "empty star" would make that entity the primary contact, bold the row (and move it to the top of the list when the view is next opened.)

What I'm struggling with is that a star icon usually means "favorite" or "follow up on this", not "this is a primary x of a collection."

I also struggle with putting the primary contact at the top of the list and then everyone else under it in alphabetical order -- that feels wrong.

What's a better way to indicate this?

  • how many possible users in a typical list? – Mike M Apr 10 at 15:33
  • I'd estimate 1 - 6 contacts in a typical list. – Stacy H Apr 10 at 16:01
1

Don't be afraid to use text here: I would just add a column where it says (Primary contact) on the primary one, and replace it with a link/button that says Make primary on the other rows.

A common rule of thumb is that if it takes you more than a few seconds to think of an icon that will be universally recognised, then it's likely that the icon you choose will not be obvious to everyone on its own. Look around existing apps that have this functionality, and you will see that they generally don't have a standardised icon to indicate the primary contact.

If you only have one account per page, you could also just separate the presentation of the primary and the additional contacts. Instead of having all the contacts in one table, emphasise the details of the primary contact above, and then underneath use a table for Additional contacts -- and clearly label both with headings. This would work better if you have many contacts, but it definitely solves your issue with the list order.

A mockup showing a primary contact block highlighted, and a table with additional contacts underneath

1

Text instead of icon and keep the alphabetic order!

I agree to Victor's point in his answer regarding using text. This is a commonly used design that seems to be working great. See Examples:

1- If you have an Actions function (opens a drop down to multiple options), you can benefit from Hubspot design.

enter image description here

2- Or you can add "Make Primary" next to each record (of course except the Primary one).

enter image description here

Remember if you have one record only, make it the primary by default.


Your concern regarding the order:

  • Since you have a short list, you do not need to move the primary contact to the top of the list. You just may want to highlight it in bold, or a highlighting color in your theme in addition to the text "Primary" next to it.

  • If you have a long list, then yes move the primary user to the top and keep the alphabetic order. Users will understand that this top user is there because it is a primary one and they will appreciate the alphabetic order and will not get confused.

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.