Version: 1.0 (Feb 2020)

Audience: Discovery services, scholarly collaboration platforms, publishers and publishing platform providers

Contributors: GetFTR User Experience (UX) Steering Group

These recommendations provide guidance for discovery services, scholarly collaboration platforms, publishers and publishing platform providers for the implementation of the User Interface (UI) elements of Get Full Text Research (GetFTR), as well as recommendations on the optimum user experience.

You can download the full version of these guidelines here. These include code examples, and some additional information around the user experience principles and practices

Please note that these guidelines are subject to change and we are also looking for feedback from integrators. As it is an ongoing iterative process we are always learning how to best implement the user experience across multiple platforms. You can get in touch here https://www.getfulltextresearch.com/register-your-interest/ or through the ‘contact’ link on the website.

 

Brand guidelines for the button / indicator

View the brand guidelines (PDF)

Downloadable assets

Included in the zip file below is the following;

  • Stand alone indicators – svg and png versions of the green indicator

Download assets (ZIP 155KB)

! Important: It is strongly advised to use the stand-alone indicator on a button which uses live text which is why an image of the button has not been provided in the assets link. This will ensure the text is reliably read out loud by screen readers, as well as benefiting those with low vision, visual tracking problems, and cognitive difficulties which affect reading, making it better for accessibility. Another important factor is to use the native HTML button which has better support by all user agents, assistive technologies, provides keyboard and focus requirements by default without the need for additional customisation. Further information can be found on the WCAG 2.1 accessibility guidelines here.

User Experience best practice

Authentication

There are two types of authentication routes which can be implemented by the scholarly collaboration platforms or discovery services as follows:

1) Deferred Authentication (federated authentication provided by publisher): scholarly collaboration platform / discovery service implements institution lookup, user searches, and the publisher provides authentication when the first article link clicked on.

2) Authentication (federated authentication provided by integrator): scholarly collaboration platform / discovery service implements institutional lookup and authentication before a user searches by implementing federated authentication and making the platform a Service Provider e.g. Shibboleth, or similar provider.

An alternative implementation is to leverage the work done by SeamlessAccess.org to enable Single Sign On. Users will be able to sign in using their institutional credentials, and will not be asked for them again for all Seamless Access-enabled sites.

Deferred authentication (federated authentication provided by publisher)

This section describes the expected experience for a user who has not previously authenticated and whose institution (the Identity Provider IdP ) is not known.

access-pdf-via-institution-button

Button example

It is recommended that a tooltip is included on this button explaining to the user that “you may not have access to this PDF” as they might still not have access after they have selected their institute and authenticated.

If the institution is already set for example, under a profile page, then it is recommended to display the institution name on the button itself instead of the wording ‘institution’, as a display of trust that the user is from where they stated. In the case that this name is quite long it can be truncated providing it is clear which institution it is referring to.

access-pdf-via-institution-button-institution-stated

Button example with institution explicitly stated and truncated 

! Important: During the user testing the majority of users ignored the ‘Find your institution’ button which was displayed above the search results in a top ribbon, preferring ‘Access PDF via institution’ included on either the search results, or the abstract page, as clearer wording for the call to action. The majority of users favoured selecting their institution once they had found an article of interest, however some preferred to do this upfront.

If displaying Get Full Text links on both the search results and the abstract page then it is recommended to display both the ‘Find your institution’ at the top of the page, and ‘Access PDF via institution’ by the article title (see examples below). This is to allow the user the option to either select their institution and then search, or perform a search and then select their institution.

Step 1: user clicks on ‘Access PDF via institution’ (alternatively with the institution name stated),  or a ‘Find your institution’ button displayed at the top of the page

JOURNAL ARTICLE  |  This could also be ‘Book Chapter, Book etc.

Interaction design: beyond human-computer interaction  |  title block – links to abstract

Henderson, A, Smith J et. al See more

Interaction Design Journal (2002), 19(7), 465-470

DOI: 10.1235/512987.584930

access-pdf-via-institution-button |  Call To Action button opens up institution selector

Citation block annotated example – unverified user

Interaction design: beyond human-computer interaction

Henderson A
Ubiquity, vol. 2002, issue March (2002) p. 2

access-pdf-via-institution-button

Example call to action button in the search results, this would display under each search listing

Step 2: user inputs their institution

institution-input-step2

Example of institutional selector

  • Provide clear instructions on what to search for by labeling the search box for example; “Find your institution”, “Add your institution”, or “Change your institution” if they have already selected one. Including descriptive text below the heading is also recommended.
  • Provide labeling that is available to assistive technology. Users need to be aware of control labels, headings, tips, and other content using screen readers. We recommend complying with the most current version of WCAG Accessibility guidelines at the AA level: WCAG 2.1 or its subsequent versions.
  • On page load, bring keyboard focus into the search field so that users can start typing and searching without additional hand movements or clicks.
  • Provide type-ahead in the search field; users expect to see results when they type.
  • Provide support for searching institution abbreviations, e.g., UCLA.
  • Providing support for deriving institution from entered email domain is optional.

Search results display

find-institution-search-results-display-step2

Example of a modal with drop-down suggestions

  • Limit the number of displayed search results to what will fit in the visible frame. Users should not have to scroll through a list. If the number of matches from type ahead is too large to have reasonable confidence of a relevant match displaying near the top of the list (e.g., greater than 10), wait for users to type more characters before displaying the matches, or display a ‘Show more results’ option as in the example above.
  • Display institution domain, in addition to the institution name, to show users that they will be taken to a different site.
  • Support accessibility by providing full keyboard support to navigate to the search result and select it. Provide a visible “on focus” style for all elements so that users know when elements are in focus. Provide information about the number of search results to assistive technology. Users need to be able to learn about dynamically changing results using a screen reader. (e.g., “Five institutions found matching New York. Use Up and Down arrows to move through results.”)

Step: 3 The user enters their institution and is taken to the Identity Provider (IdP)  page straight away to authenticate, and the button changes to ‘View PDF’. Or the button changes to ‘View PDF’ and when the user clicks on this they are taken to the IdP page to authenticate.

! Important: The two step process of selecting an institute and then authenticating was less desirable for users when testing this. Allowing the user to authenticate straight away after selecting their institute could help to mitigate this.

JOURNAL ARTICLE  |  This could also be ‘Book Chapter, Book etc.

Interaction design: beyond human-computer interaction  |  title block – links to abstract

Henderson, A, Smith J et. al See more

Interaction Design Journal (2002), 19(7), 465-470

DOI: 10.1235/512987.584930

view-pdf-button-entitled |  Call To Action changes to ‘View PDF’

Annotated example of the call to action button ‘View PDF’ with the filled in icon if the user is entitled to the article

! Important: During user testing different variations on wording were tested and ‘View PDF’ was the preferred choice. Alternatives tested were ‘Get PDF’, ‘Get Full Text Research’ and ‘View online’. ‘View’ suggested to users that they would see the PDF straight away, whereas ‘Get’ indicated there was an extra step, and ‘View online’ caused confusion as it was not clear enough.

During the usability testing the majority of users did not understand the meaning of the icons but could make an educated guess that the filled in icon indicated access. After testing both tooltips and a popover for further explanation of these it was found that the tooltips were largely found by accident. More information on onboarding users  can be found below.

Step 4: Authentication

When the user clicks on the button or link they are then taken to an authentication page provided by the publisher.

Authentication (federated authentication provided by integrator)

This section describes the expected experience for a user whose institution is known (remembered or pre-defined).

Step 1: Display the institution provider with an option to change / remove this affiliation

Your institution: University of Oxford change-institution-button-step4

Your institution: University of Oxford  Remove  |  Change

Examples of institution display

If using Seamless Access then the instructions on how to display the seamless access button can be found on the site here: https://thiss.io/integration/

Users have the opportunity to find another institution (e.g., if they have multiple Identity Providers (IdPs) , or have moved to a new institution) or to remove or change the previously used institution.

Step 2: Active session with Identity Provider (IdP)

If users still have an active session with their Identity Provider (IdP) , they should be able to by-pass the institution login step and gain immediate access to the full article / other resource, if available through their institution. They should be able to instantly see the results embellished with their access.

In this scenario, if using Seamless Access single sign on (SSO), when a user accesses a second Service Provider (SP) page (e.g. on another publisher’s site), that SP uses the known institution to direct authentication calls to the correct Identity Provider (IdP ), without requiring the user to re-identify their institution to the new provider. If users no longer have an active session with their IdP, they will be redirected to their institution login page and asked to re-authenticate.

Interaction design: beyond human-computer interaction

Henderson A
Ubiquity, vol. 2002, issue March (2002) p. 2

view-pdf-button-entitled

Example of a search result for a full text article which the user has access to

‘No state’ – when a user is authenticated but does not have access to the full text article

In the case that the user has authenticated and does not have access to the full text article (or this is unknown), which could be because the publisher is not participating in GetFTR, then the user will follow the current existing route of hitting a paywall for that article on the publisher’s site.

In this instance it is recommended that the call to action button wording is changed to ‘Get PDF’ to reflect this state. Or if no button is provided then this would be an article link without an indicator.

! Important: During usability testing users commented that ‘Get PDF’ implied there was an extra step involved in reaching the article, which in this instance is the case, and ensures the user is not mislead into thinking that they definitely have access to the PDF.

Interaction design: beyond human-computer interaction

Henderson, A, Smith J et. al See more

Interaction Design Journal (2002), 19(7), 465-470

DOI: 10.1235/512987.584930

get-pdf-no-state

Example of the call to action button ‘GetPDF’ if it is a no (or unknown state)

The Psychology of Human-Computer Interaction

Huesmann L, Card S, Moran T et al. See more

The American Journal of Psychology (1984), vol 97,  issue 4, p. 625

Example of a search result when no call to action button is provided, that links to the publisher site from the article title

Onboarding users

Contextual onboarding (also known as just-in time) adds additional information regarding the level of access which cannot be easily conveyed from an icon alone. These are also known as coach marks, tooltips and guidestones and provide an interruptive experience.

! Important: During the usability testing the majority of users did not understand the meaning of the icons but could make an educated guess that the filled in icon indicated access. After testing both tooltips and a popover for further explanation of these it was found that the tooltips were largely found by accident. Labels were also tested but found to add additional clutter to the interface, although they provide upfront clarity as to the level of access.

Tooltips as part of an onboarding flow

These are focused tooltips which target the user’s attention on one single message at a time. It uses instructional overlay to explain the meaning of the icon for an unfamiliar interaction before the user interacts further with the interface.

! Important: When testing with users the tooltip was described as “annoying”. Users liked the more interruptive in-context on-boarding experience and thought this could work well for first time users for the first couple of times. It was suggested that it would be an irritation for users who are already familiar with the site or platform so it is important to allow the option to not view again, or only show for the first 2 or 3 times the user visits (or both).

Contextual onboarding – tooltips

tooltip-entitled-user-example

Example of onboarding and wording for an entitled user

In the scenario where the user enters their institution (deferred authentication), and is not then taken to the Identity Provider (IdP)  authentication page straight away to authenticate, it is recommended to use the wording “You may be prompted to login with your institution to access this PDF”.

tooltips-entitled-user-not-authenticated

Example of onboarding and wording for an entitled user who has not yet authenticated

  • Guide users to one element or action at a time, avoid explaining too much of the obvious. Provide brief and helpful information inside the tooltip.
  • Allow users to select a ‘don’t show this again’ option, as well as only serving this up for the first 2-3 times maximum when a user visits your site or platform
  • Do not cover up poor design decisions by bombarding users with lengthy instructions, or a barrage of tooltips
  • Do not use tooltips for information that is vital to task completion
  • Support both mouse and keyboard hover for greater accessibility
  • Use consistently throughout a site / platform
  • Allow for sufficient contrast between the text and the background of the tooltip for example, a white page with a light-grey tooltip is difficult to read by users with visual impairments. There are various contrast checkers online such as WebAim which can help to ensure that this meets the minimum AA standard of compliance for accessibility.
  • Position these so they do not block any related content within the interface, and use arrows when there are multiple elements nearby to indicate which icon the tooltip is referring to.
  • Tooltips are a last resort when space is a premium, it would be recommended to use labels and upfront information wherever possible

Tooltips that appear on hover

These are tooltips which appear when a user hovers their mouse (if viewing on desktop) over the button to provide additional meaning of the icon and are always available in the interface.

! Important: When testing with users having tooltips on mouse hover these were largely only found by accident.

tooltip-entitled

Example of tooltip wording for an entitled user

In the scenario where the user enters their institution (deferred authentication), and is not then taken to the Identity Provider (IdP)  authentication page straight away to authenticate, it is recommended to use the wording “You may be prompted to login with your institution to access this PDF”.

tooltip-entitled-not-authenticate

Example of onboarding and wording for an entitled user who has not yet authenticated

! Important: To ensure that tooltips are accessible by screen readers use aria-describedby and the role=”tooltip” as not all labels and descriptions work with elements unless you incorporate the role. The aria-describedby describes a programmatic relationship between the widget or groups, and the text. Please refer to the Accessibility Working Group’s guidelines on using the aria-describedby property to provide a descriptive label for user interface controls.

Tooltips and mobile

If using tooltips on your site or platform there are a few things to be aware of regarding implementation on mobile. For Android long press or focus gestures can be used to access tooltips. Please refer to the Android Developer guide for more information.

For iOS there is no straightforward way to implement a tooltip and the only solutions available are custom made, open source options created by individuals.

Open Access recommendations

! Important: When testing with users two different alternative versions of Open Access; one with just the icon and an alternative with a label and icon, the former was ignored by users and caused additional confusion over why the article was available when no institution had been selected. The majority of users understood what Open Access means.

It is recommended if using an Open Access label that this is displayed either just as text ‘Open Access’ with / or without the lock icon, but not as a stand-alone indicator. The GetFTR indicator or button must appear any time an article is accessible to the user via the GetFTR API, this includes Open Access articles.

Users were familiar with Open Access and understood what this meant once they saw the associated label. The identification of Open Access needs to be understood by an audience who may not be experienced with scholarly and subscription content as stated in the NISO guidelines on access licence and indicators. These guidelines also suggest that clear identification of free-to-read content could help reduce time wastage as readers attempt to reach alternative versions. It is up to each site or system to determine how best to convey the status of Open Access content to their users.

Download open access lock icon (ZIP 4KB)

OPEN ACCESS

Interaction design: beyond human-computer interaction

Henderson A
Ubiquity, vol. 2002, issue March (2002) p. 2

view-pdf-button-entitled

Example of a search result with Open Access stated

Placement of the indicator

The indicator can be used as a standalone icon either next to the button or the article title. Alternatively the icon can be placed within the button. If an existing article link in the user interface (UI) is being overwritten with a GetFTR link then the indicator should be used. If a new link is added then the button should be used instead. In some instances links cannot be overwritten as they lead to abstract pages.

The stand-alone indicator should not be placed adjacent to a button as this causes a disconnect between the call to action and the indicator of access type.

! Important: User testing found that users were more likely to click on a link with this indicator next to it, and in the majority of cases they clicked on the button call to action over the title link. There was a strong preference for the button, although some users stated that they preferred the indicator next to the title and just wanted access from the article title in the search results page.

Users will click on the links regardless of whether the indicator is there or not but overall users saw the benefits of the embellished links.

The recommendation for the optimal user experience is to overwrite the existing links with the indicator next to it with GetFTR links, alternatively new links can be added. The GetFTR link can be added wherever there is a DOI for example, search results, abstract pages, save articles / library.

access-pdf-via-institution-button

Button example

view-pdf-button-entitled

If a user has access to the article then the wording dynamically changes to ‘View PDF’

Download assets (ZIP 155KB)

View the brand guidelines (PDF)

Option 1 – if a new link is added

Interaction design: beyond human-computer interaction

Henderson A
Ubiquity, vol. 2002, issue March (2002) p. 2

view-pdf-button-entitled

Button call to action example if a user has access to the full text article

Option 2 – if an existing article link is being overwritten

Interaction design: beyond human-computer interaction

Henderson A
Ubiquity, vol. 2002, issue March (2002) p. 2

Indicator next to the title example if a user has access to the full text article

File formats for full text article

When linking to the Version of Record (VoR)  of the full text article it is upto the integrator to decide whether to provide this as a PDF or link to the HTML version. The recommendation from testing with users would be to provide the VoR as a PDF.

! Important: During user testing both ‘View PDF’ leading to a full text article, and ‘View PDF’ leading the HTML version of the full text with the option to download the PDF were tested. Whilst users generally preferred to access the PDF straight away they did not mind being taken to the HTML version either as they were used to this page layout and it would not act as a deterrent. This was a less preferable option in terms of creating an additional step to access the content.

We use cookies to improve your website experience. To learn about our use of cookies and how you can manage your cookie settings, please see our Cookie Policy. By closing this message, you are consenting to our use of cookies.