We've recently updated ORCID'S Privacy Policy to be simple to understand and easy to navigate. We invite you to read it here.

Connecting research and researchers

You are here: Home / Documentation / Integration Guide / User experience display guidelines

User experience display guidelines

We recommend our integrators follow our display guidelines when presenting ORCID within their systems. (For more information on using the ORCID-branded materials as you work to promote ORCID at your organization, visit ORCID Brand Guidelines.)

Using the ORCID iD icons, buttons and styling helps to build a consistent ORCID user experience across different integrations.

Contents hide
1 Introducing ORCID
2 Displaying ORCID iDs
3 The ORCID iD icon
4 Buttons or links connecting ORCID via OAuth
5 ORCID OAuth sign-in screens
6 Provide feedback that their record has been connected

Introducing ORCID

Your users may not be familiar with ORCID and the services we offer. Giving a short introduction to ORCID and an accompanying link to the website (ORCID.org) can help break the ice.

Example ORCID introductions

ORCID provides a persistent identifier – an ORCID iD – that distinguishes you from other researchers and a mechanism for linking your research outputs and activities to your iD.

Learn more at ORCID.org

ORCID is an independent non-profit organization that provides a persistent identifier – an ORCID iD – that distinguishes you from other researchers and a mechanism for linking your research outputs and activities to your iD. ORCID is integrated into many systems used by publishers, funders, institutions, and other research-related services.

Learn more at ORCID.org

Displaying ORCID iDs

A common integrator requirement is to display an ORCID iD in a paragraph of text, a key item in a list of services or as a membership link on a profile page.

ORCID provide 3 different iD display formats for maximum flexibility when integrating with your site or application.

ORCID iD display formats

  1. Full ORCID iD
  2. Compact ORCID iD
  3. Inline ORCID iD

An ORCID iD consists of two elements:

  • The ORCID iD icon
  • The ORCID iD text

Notes

  • We don’t allow references to authorized ORCID iDs without an ORCID iD icon
  • An ORCID iD (icon and text) should only ever link to one ORCID record URL
  • Only use the ORCID iD Icon for authenticated ORCID iDs

Full ORCID iD

The full ORCID iD displays the iD icon before a complete ORCID record URL. This is the preferred format for links to ORCID records.

A green Orcid ID icon followed by a URL for an Orcid record

Why use a full ORCID iD?

  • Displaying the full ORCID iD URL helps search engine robots and crawlers to recognize the iD as a resolvable URL.
  • A full URL is simple for people to copy, reference or link to the URL and share it with others.
  • Using the familiar URL pattern reinforces that ORCID iDs are both a persistent link and a persistent identifier.
  • The https protocol builds confidence in the security and privacy of ORCID iDs.

When to use the full ORCID iD format

  • the ORCID iD is shown on its own, or in a list of links
  • there is sufficient space to show the full ORCID iD

Example HTML

<a href="https://orcid.org/0000-0001-5727-2427">
<img alt="ORCID logo" src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png" width="16" height="16" />
https://orcid.org/0000-0001-2345-6789
</a>

Compact ORCID iD

A shortened version of the ORCID iD that displays the iD icon before the 16-digit ORCID identifier.

A green Orcid ID icon followed by a 16 digit Orcid record number

When to use the compact ORCID format

  • you want to reference a specific ORCID record but need a shorter/smaller format
  • you have limited space available in which to fit the ORCID iD link

Example HTML

<img alt="ORCID logo" src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png" width="16" height="16" />
0000-0001-2345-6789
</a>

Inline ORCID iD

The simplest format for displaying a link to an ORCID record. The ORCID iD icon is displayed after a record holder’s name, short phrase or sentence fragment.

Examples of the different ways in which an Orcid ID icon can be used within blocks of text

The ORCID iD icon should be linked to the full URL of the relevant ORCID record. Optionally, the preceding text can be linked to the same record.

When to use the inline ORCID iD format

  • when the link to record is part of a sentence or paragraph (“… recently updated information on Susan Gerhard’s ORCID record (iD)”)

Example HTML

… recently updated works on <a href="https://orcid.org/xxxx-xxxx-xxxx-xxxx">Susan Gerhard's ORCID record <img alt="ORCID logo" src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png" width="16" height="16" /></a>

Notes

  • The ORCID iD icon can be scaled to match the line height of the surrounding text.
  • The ORCID iD icon should not be displayed smaller than 16x16px.

The ORCID iD icon

The Orcid ID icon in three different colours - Green, black and white

The ORCID iD icons can be downloaded from the ORCID brand library.

Sizes

  • 16 x 16px
  • 24 x 24px
  • 32 x 32px
  • 64 x 64px
  • 128 x 128px

Colours

  • ORCID green
  • Black
  • White

Formats

  • PNG
  • SVG

Notes

  • Use the scalable SVG icon wherever possible.
  • The optimal size for the ORCID iD icon is 24 x 24px. If you have the space, use a larger version.
  • The smallest size – 16 x 16px – should only be used when space is severely limited.

Use buttons and links to let users easily sign in to ORCID via OAuth. Using OAuth ensures that you receive the correct ORCID iD, preventing errors that can occur when users manually type in their ORCID identifier.

The URL included in your button or link sends the user to ORCID and prompts them to sign into their ORCID account via OAuth. Signing in grants your application permission to access their ORCID record.

Buttons and links connecting to ORCID should use the ORCID iD icon. Make sure that the  button/link text clearly describes what will happen when it is clicked or selected.

Button examples

Two Orcid example buttons. The first reads 'Create or connect your Orcid ID'. The second button reads 'Sign in with Orcid'
Two example links using the Orcid ID icon

ORCID OAuth sign-in screens

ORCID OAuth sign-in screens can be displayed in a variety of ways:

  • a fixed-size popup window
  • a fixed-size modal window
  • a fixed-width panel within the page

We don’t support embedded OAuth forms or forms contained in an iFrame.

Fixed-size popup windows

If you are displaying the OAuth sign-in in a popup window then be sure to trigger the event by user action to avoid popup blocker issues. The simplest method for doing this is to use the JavaScript onclick() event to trigger the window.open() method.

Always show the full page URL in a popup window address bar. A readable URL helps to reassure users that the window or page is genuine and that they are where they expected to be.

Remember that your redirect URI call will also be displayed inside this popup window. Make sure your content and formatting are appropriately styled and sized.

OAuth dimensions

  • Minimum dimensions – 500px x 600px
  • Optimal dimensions – 540px x 700px

Always include vertical scroll bars for fixed size popup or modal windows as the height of OAuth content can vary.

Completing the OAuth sign-in process

Once the user has completed the OAuth sign-in process you should either:

  • close the OAuth window automatically
  • provide a clear button to manually close the OAuth window

Provide feedback that their record has been connected

You will need to create your own redirect page in order to send users back to your site after OAuth authentication.

The page should make it clear that their ORCID record has been successfully connected and that they will now be automatically redirected back to the submitting service.

Example redirect

An example Orcid redirect page