Button placement & access panel best practices
- Bojhan Somers
Access panels give the user orientation which options are available to be able to access the given content item.
Seamless Access does not require a certain access panel setup.
Seamless Access does provide additional guidance on this page to implementors who struggle with creating an access panel that is usable and accessible. We found that access panels often endure the stress of many requirements, from commercial desires to orientation across all of the options.
Seamless Access strongly suggests to avoid moving the cognitive load to the user, of distinguishing between the most commonly used options and the less commonly used options.
❌ Common challenges
The following key challenges, are often on the article/content pages:
Multiple buttons have primary button styling, making it hard for users to find the primary access option.
Secondary or tertiary access options such as rental (used significantly less) are equally prominent as the primary access option.
Panels are often placed in many different locations between content providers/publishers, users have no consistent understanding where to find access options.
Access is often confused with account registration, and not clearly marked as “log-in”. Driving users to believe it will inherently give them access to the content item.
Special options such as logo’s of society branding and software tooling are marked next to options, potentially confusing users whom are not familiair with the brands and/or their relation to access.
No help channels are provided close to the context of access, leaving users with no resolution when they are unable to figure out access.
✅ Placement - Access panel
Users should be able to quickly find all access options, as users can often quickly assess if a content item is valuable to read - they will want to gain access as quickly as possible.
Place the institution access above the fold.
Group all institution access methods in one single area.
Avoid placing access options across several pages.
Avoid placing access options in a modal/overlay.
Do not give users a false sense of access (e.g. calling it Download PDF/View article).
✅ Content item teaser - Access panel
Presenting a panel at the end of a “trimmed” or “behind pay-wall” type article, gives users the instant direction towards possible access methods.
Hierarchy between the access options:
Single primary button
Secondary link styling for purchase options
If a given purchase option requires additional steps, a pop-up to complete them.
If a price is known, it should immediately be presented to avoid a guessing game for users.
Tertiary link styling for login options
All options where some login/account is required which is not institutional and access cannot be guaranteed - should be placed here.
Additional information on vendors/societies if needed:
Add help text above the button, only if needed with your audience for recognisability of access.
We believe in most cases, this information should not be necessary as vendors integrate with Seamless Access - the users will always be able to gain access.
Help to resolve access issues:
Provide an entry point to help resolve any access issues.
Users can end-up in a loop when encountering access issues due to unforeseen problems - giving them help options close to the access may reduce support need.
Provide clustering of options:
Group access options visually as clusters, this to reduce the need to go down a long list of seemingly similar access options.
✅ Content item sidebar - Access panel
Implementors may chose the sidebar as a way to gain access to the content item. This often comes with significant size restrictions, our suggestion limits the vertical height.
We typically recommend to only implement one of the access panels.
Hierarchy between the access options:
Single primary button
Secondary link for all other options
Login options are presented next to purchase options in similar styling to denote the key primary action.
No additional tertiary styling is applied, due the limited vertical space and lacking horizontal space for two columns -tertiary styling would make the area less scannable for users.
Dialog for purchase options
If a given purchase option requires additional steps, a pop-up to complete them.
Multiple options can be grouped in the pop-up, reducing the need to show many options in the sidebar.
Additional information on vendors/societies if needed:
Add help text above the button, only if needed with your audience for recognisability of access.
We believe in most cases, this information should not be necessary as vendors integrate with Seamless Access - the users will always be able to gain access.
We recommend not providing this information when possible, due to it increasing the cognitive load.
Help to resolve access issues:
Provide an entry point to help resolve any access issues.
Users can end-up in a loop when encountering access issues due to unforeseen problems - giving them help options close to the access may reduce support need.
Purchase Dialog
We recommend in the sidebar pattern to expose all the options directly with call-to-actions per each option. Where possible this should always also expose the price that a user would pay, this to help them make a more informed choice between the purchase options.
