Discussion: Add guidelines for alternate visual treatment for links
Problem
We have the visual treatment for links identified in the GitLab UI, but do not have a dedicated section under Pajamas guidelines to specify them. Today, we treat copy blue with an underline
as a standard and desired state for links, but from recent feedback on Verify features, we were able to surface a need for multiple visual treatments for the same.
There are pages in the product that list resources, and for their contextual identification it is vital to retain links to associated resources. Example- a pipeline can be best identified in the presence of the commit name/number, branch name, merge request details and triggerer information. Not every user would make use of all of these link, but the personas interacting with these pages are varied and through research we have learn that removing any of these information can prove to be disruptive to a huge number of users.
Presence of many different links as a group, with each demanding user's attention can turn out to be very visually disorienting. To combat this discomfort, we should consider providing different visual treatments to those links. For example - the link that belongs to the resources that is primary to the page can have a blue color, while for the other links we can go for a subdued visual affordance, ma be dark gray with an underline?
We are already doing this on a few pages, such as issues, where we do not give a blue color to link, and at other pages where many different links in a single line have different treatments. To ensure that we provide our users with a coherent experience across platforms, we should document primary and alternate treatments for links and the circumstances under which they should be used.
Use cases
I'm listing use-cases from Verify since I'm more versed in those.
Pipeline Execution: Pipeline index page
Image | Resources linked |
---|---|
![]() |
Commit, Merge request, Branch, Pipeline |
Release: Environment list view
Image | Resources linked |
---|---|
![]() |
Commit, Branch, Deployment |
Another example of what to avoid:
Links with no affordance inline with plain text. Here, they should have at least an underline, and probably different color too.
What's a link? | Links |
---|---|
![]() |
![]() |
@jeldergl in a slack thread:
Few consideration highlighted by
- Ensure these are understood as links in context.
- See what can be done to make the gray links look more like a link.
- Be extremely clear when documenting the use case while referencing all of the factors.
- Ensure that what’s decided on and documented here can be abstracted out enough to address similar parts of the UI without creating loopholes.
Resources
- WCAG Success Criteria 1.4.1 Use of Color
- https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-link--default-link
- gitlab-org&6414
- UI type scale link style in Pajamas UI Kit
- Documentation markdown link style in Figma
- Compact markdown link style in Figma
- Link styles (ideal state) in MR widget instances
Also view linked issues