I ran into an issue while setting up analytics on my website using Vercel.
While following the setup guide, I got to the section “Add @vercel/analytics to your project”. The default command shown was using pnpm, but my project setup uses npm. I tried looking for an option to switch the command, but I couldn’t find it immediately.
At first, it wasn’t clear that there was a way to change the command type. I spent about 20 minutes trying to figure it out and even left the page to search for alternatives. Eventually, I came back and discovered that the small icon in that section was actually meant to switch between different package managers (npm, yarn, pnpm, etc.). When found, it took me less than 5 minutes to set up the feature.
Problem
The main issue is the poor discoverability of the command selector.
- The icon doesn’t clearly communicate that it is clickable or a dropdown.
- There is no visible label like “Select command” to guide the user.
- For a task that should take a few minutes, this caused unnecessary confusion and frustration.
- Users who are not very familiar with documentation patterns or UI conventions may easily miss it completely.
This can lead to a poor user experience, especially for beginners who may assume the documentation is fixed to pnpm only.
Impact
- Wasted time trying to find the correct npm command.
- Temporary frustration over a simple setup step.
- Potential drop-off if a user gives up and tries another tool or guide.
Suggestion
The UI should make this interaction more obvious.
A simple improvement would be:
- Replace or supplement the icon with a clear label like “Select command.”
- Or use a visible dropdown with text, for example:
- “npm”
- “yarn”
- “pnpm”
Since a default command is already shown, users should immediately understand that this section is interactive and meant for switching package managers, not just a static instruction.
Example Reference
Here is a screenshot example of a dropdown that clearly communicates the action to users:
I ran into an issue while setting up analytics on my website using Vercel.
While following the setup guide, I got to the section “Add @vercel/analytics to your project”. The default command shown was using pnpm, but my project setup uses npm. I tried looking for an option to switch the command, but I couldn’t find it immediately.
At first, it wasn’t clear that there was a way to change the command type. I spent about 20 minutes trying to figure it out and even left the page to search for alternatives. Eventually, I came back and discovered that the small icon in that section was actually meant to switch between different package managers (npm, yarn, pnpm, etc.). When found, it took me less than 5 minutes to set up the feature.
Problem
The main issue is the poor discoverability of the command selector.
This can lead to a poor user experience, especially for beginners who may assume the documentation is fixed to pnpm only.
Impact
Suggestion
The UI should make this interaction more obvious.
A simple improvement would be:
Since a default command is already shown, users should immediately understand that this section is interactive and meant for switching package managers, not just a static instruction.
Example Reference
Here is a screenshot example of a dropdown that clearly communicates the action to users: