Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to link to resources #47

Closed
jeddy3 opened this issue Mar 2, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@jeddy3
Copy link
Contributor

commented Mar 2, 2018

As a user of the Design System
I want to be able to access a component for linking to resources
So that I can make my service consistent with others

Description

Linking to resources is a fundamental aspect of interfaces. There needs to be a component that can be applied to other components and elements to make them links.

Links and resources

  • Builds on the findings in #33

The key findings from WebAim:

  • Links should look like links, and nothing else should.
  • Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS)

Acceptance criteria

  • Add component to design system
  • Addresses accessibility/usability considerations
  • Works on target devices and browsers
@kelliedesigner

This comment has been minimized.

Copy link
Contributor

commented Mar 2, 2018

Key findings from Buttons shouldn’t have a hand cursor

Links have always been handled this way since the web came along — this is the convention of the web that you need not innovate on.

You can rest easy knowing that browsers have you covered. This leaves you and your team to solve real problems.

@jeddy3 jeddy3 closed this in #48 Mar 5, 2018

@jeddy3 jeddy3 changed the title Create link component How to link to resources Apr 5, 2018

@kelliedesigner

This comment has been minimized.

Copy link
Contributor

commented Jun 10, 2019

Key findings from NN Group:

  • don't use bold-facing as a hover effect, because making the font wider may cause the text to re-align.
@kelliedesigner

This comment has been minimized.

Copy link
Contributor

commented Jun 10, 2019

Key findings from UX Booth:

  • Don’t underline text that isn’t a link
  • Use different colors for visited and unvisited links
  • Make links accessible by writing semantic HTML
  • Write specific messages for your links, that indicate where the user will be directed (avoid uninformative phrases such as ‘click here’)
  • Keep linked phrases short, 3-5 words
  • Maintain overall style consistency and integrity across the site
  • Don’t put more than 100 links on any one page
@kelliedesigner

This comment has been minimized.

Copy link
Contributor

commented Jun 10, 2019

Key findings from Prototypr:

  • Provide visual cue to suggest clickability for all types of links.
  • Distinguish the visited and unvisited for navigation links
  • Links labels should make sense standing alone
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.