Consider adding ellipsis to non-immediate buttons
This is an actionable insight from the UX Department: MRs experience async critique research (insight).
What
Throughout our product UI, we often use button labels that could be read as immediately triggering an action, when actually they are just a small navigational step towards that action. Here's an example and quote from a user:
Before using this button for the first time, I was afraid what would happen if I clicked it. I thought it would check it out for me and lock it from everyone else, but was relieved to discover it was just a directional modal on how to check out a branch
Here are a few other examples where none of the buttons do immediately what they say:
Why
As seen in the user quote above, using button labels like this can create anxiety and false expectations in users. Using our product should be a reliable, no surprises, and joyful experience!
How
How can we set the right expectations before users clicks these buttons? One option might be to append an ellipsis …
to the button label, like macOS does:
Include a trailing ellipsis in the title when a push button opens another window, dialog, or app. — https://developer.apple.com/design/human-interface-guidelines/macos/buttons/push-buttons/
- Stackexchange question on the topic: https://ux.stackexchange.com/questions/30420/what-are-the-rules-of-using-ellipsis-on-buttons
- Windows guidelines: https://docs.microsoft.com/en-us/windows/win32/uxguide/cmd-menus#using-ellipses
- Article on the origins of this pattern: https://medium.com/@jsaito/the-mighty-ellipsis-6c2c00ddc864
Documentation
https://design.gitlab.com/components/button/#label