npm Community Forum (Archive)

The npm community forum has been discontinued.

To discuss usage of npm, visit the GitHub Support Community.

[Website] Confusing memberlist UX

What I Wanted to Do

Remove a user from a private npm organisation

What Happened Instead

  1. A friendly user reported to our npm organisation that they had been accidentally added to it, and wanted to be removed. I went to the members page at haste, typed their name in the search-looking box above the list of members and pressed enter. It was then that I realised that this wasn’t a search box, but an invite box, which is presumably how they were added in the first place.

  2. I was worried whether pressing enter in this form had done anything (e.g. re-inviting the user), because there wasn’t any visual feedback, so I typed my own username in and pressed enter. I didn’t alter the [Member/Owner] radio buttons next to the box. The form submitted my name and removed my owner permissions, demoting me down to a member. Now I can’t remove the user!

Reproduction Steps

Navigate to organisation members page as an owner and see the box above the member list

Enter own username into the box and press enter

Ping-ponging this over to ideas. I passed this over to @gabra, who does web product stuff, and the UX for these flows is definitely something we want to revisit.

@danhaller Thank you for providing these details to our web team so that we can work on giving ya’ll a less error prone invite flow. Currently it’s on our backlog but I will keep you updated of any changes via this ticket.

@danhaller We pushed a fix to address your first pain point of originally thinking the invite box was a search box. Confusing the two is a sign that we need to make things more clear, so we decided to hide the invite form behind a button. There is now an “Invite Members” button which reveals the form to invite.

To address your second point, we actually have some visual feedback. The person gets added to the top of the list if you’ve invited them. After you add a member, the form should clear. After you refresh the page, it is a bit wonky but we sort the list by alphabetical order.

We intend to improve more UX issues you mentioned in npm Organizations over time as resources clear up. Thank you.

Thanks for the update on this. I used the new button today :+1: