Long names should be truncated to fit the available width of the button or the IdP discovery service results panel. The dynamic button is designed to be responsive to the available display space and additional handling rules will be developed as the service is built out.
Institution names should truncate after a maximum of 32 characters, including spaces, followed by an ellipsis (…) without a space.
Margins on either side of the text inside the button should be a minimum of 24px, but can be more in the case of short institution names.
The recommended minimum button width is 256px (important for mobile screens). This reduces character count to a maximum of 21 character spaces plus the ellipsis.
The dynamic button should recognize a language parameter and display appropriate text.
Standard Integration Implementation Considerations
The dynamic button may be added to a webpage by creating an i-frame that calls the button from Seamless Access. See the section on the Standard Implementation for more information.
The i-frame is responsive, however our recommendation is to provide space with the following dimensions:
Break down of height:
Button Height: 55px
Margin at the bottom of the button: 3px
Link “Add or change institution”: 18px
Margin at the top of the link: 5px
Extra space under the link to allow any overflow from the “pen” icon: 4px
The text inside of the button has built in truncation, therefore the width is flexible (responsive), but our recommended width of 350px assists in avoiding the truncation for most of lengthy institution names.
The Iframe packs the button and the link below without any outside margins or padding, we recommend applying padding around the Iframe of at least 6px, to prevent collision with other elements on a website.
Standard button implementation (Java script and HTML)
DOs and DON’Ts when implementing the Seamless Access button
Use a consistent presentation of the “Access through your institution” button.
Repetition of the language and visual styling of the access button including icon, text, button, contrast and behavior will significantly reduce friction and build recognition and confidence for users.
Change “Access through your institution” text label.
Use low contrast for the text and button background. (See Accessibility guidelines)
Show “Access through your institution” as a link when it is the primary call to action for access.
Note that Seamless Access has not yet taken a position on the color of the button. During the Beta Phase, Service Providers may choose a background color, font and button shape consistent with their primary call to action style definition.
The standard implementation has a default button color, but you may override that default by providing color configuration parameters in the call to the SeamlessAccess Discovery component. See configuring standard button parameters for more information.
Why use a button? For most users, institutional access is the best bet for accessing the full text, so the call to action for institutional access needs to be easy to find and easy to choose. In most cases, institutional access should be presented as the primary or preferred path for a user, as opposed to an equivalent option. (It should only be presented as a secondary option if it truly is not the preferred access path.) Alternative presentations of the call to action (versions with an icon and link) were tested and were significantly harder for users to recognize. This design recommendations in this section also follow best practice/ familiar conventions for similar experiences users encounter in everyday digital experiences (e.g., button signaling option to check out with PayPal).
Why have a symbol or icon? The unique open-door institution symbol aides in quick recognition across different publisher sites. Along with the label, it reinforces the relationship (the institution) that is most likely to gain them access. With that association, the user knows what to expect and can confidently complete the subsequent steps with minimal friction.
Why are words like “log in” or “sign in” not used? Several versions of the call to action text were tested including “log in through your institution” and “Get full text”. While users generally understood these labels, they also introduced ambiguity or incorrect expectations, because users possess multiple login credentials and they are uncertain which ones are being requested. “Access through your institution” was clear and unambiguous and set expectations that were aligned with what users then experienced once they clicked the button. Seamless Access recommends reserving Log in or Sign in in utility navigation for experiences where the user has a direct account with the Service provider.
The specific labeling and design of the call to action button were informed by best practice models and multiple rounds of iterative user testing.