{"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph","content":[{"text":"The Seamless Access call to action can be presented as a static or dynamic component or “button”* made up of the following basic elements: ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Background","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":612,"id":"45635235-5dc6-4986-8c6d-5a3d82cb15c1","collection":"contentId-458783","type":"file","height":104}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Icon ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Stroke","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Text ","type":"text"},{"type":"hardBreak"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":608,"id":"c5041a9a-ddd6-4cfa-b66a-fdf7e01e0805","collection":"contentId-458783","type":"file","height":152}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Text and institution name ","type":"text"},{"type":"hardBreak"},{"text":"(dynamic button only)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add or change institution link ","type":"text"},{"type":"hardBreak"},{"text":"(dynamic button only)","type":"text"}]}]}]},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Button Color","type":"text"}]},{"type":"paragraph","content":[{"text":"We recommend using the standard button color, to ensure recognizability across many sites implementing Seamless Access. You may also use the primary call-to action color in your design system, provided that you follow all accessibility rules (particularly for color contrast) and use recognizable elements of the Seamless Access button including, the icon, wording, and spacing.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Reusable Assets","type":"text"}]},{"type":"paragraph","content":[{"text":"SVG files can be colored and scaled in your code, or edited directly in any vector-based design app like Adobe Illustrator or layout apps like Adobe XD or Sketch. ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":4},"content":[{"text":"Seamless Access icon","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start","width":30.0},"content":[{"type":"media","attrs":{"width":72,"id":"237d44a1-04df-47cd-9621-60a6d01771d1","collection":"contentId-458783","type":"file","height":72}}]}]},{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"heading","attrs":{"level":5},"content":[{"text":"White Icon ","type":"text"}]},{"type":"paragraph","content":[{"text":"https://service.seamlessaccess.org/sa-white.svg","type":"text","marks":[{"type":"link","attrs":{"href":"https://service.seamlessaccess.org/sa-white.svg"}}]}]}]}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":72,"id":"91a5349e-bb73-4b64-883d-35243a146f9b","collection":"contentId-458783","type":"file","height":72}}]}]},{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"heading","attrs":{"level":5},"content":[{"text":"Black Icon","type":"text"}]},{"type":"paragraph","content":[{"text":"https://service.seamlessaccess.org/sa-black.svg","type":"text","marks":[{"type":"link","attrs":{"href":"https://service.seamlessaccess.org/sa-black.svg"}}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Edit/change icon","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":72,"id":"de5161f3-8572-47f9-ba60-0872e8c03a9f","collection":"contentId-458783","type":"file","height":72}}]}]},{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"heading","attrs":{"level":5},"content":[{"text":"Pen Icon","type":"text"}]},{"type":"paragraph","content":[{"text":"https://service.seamlessaccess.org/sa-pen.svg","type":"text","marks":[{"type":"link","attrs":{"href":"https://service.seamlessaccess.org/sa-pen.svg"}}]}]}]}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"Note that although the call to action is often described as a button, it is technically a styled link and is not created using a UI button component.","type":"text"}]}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Static Button Specifications (Limited) ","type":"text"}]},{"type":"paragraph","content":[{"text":"The limited implementation may use a static button presentation to link to the SeamlessAccess central IdP Discovery service. Specifications and HTML to create the button are provided below. ","type":"text"}]},{"type":"paragraph"},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Button ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Icon (same specs for all versions): ","type":"text"},{"text":"28px high","type":"text","marks":[{"type":"strong"}]},{"text":" (Centered in first 50 px of button)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Vertical stroke: ","type":"text"},{"text":"32px high, 1px weight","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Single line of text: ","type":"text"},{"text":"Arial bold, 14px ","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"(Sentence case)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Corner radius: ","type":"text"},{"text":"5px","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Minimum width: ","type":"text"},{"text":"256px","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Maximum width: ","type":"text"},{"text":"328px","type":"text","marks":[{"type":"strong"}]}]}]}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":379,"id":"c067bc89-d4ca-4fff-897e-db1e4378ce0e","collection":"contentId-458783","type":"file","height":124}}]}]}]},{"type":"paragraph","content":[{"text":"Margins on either side of the text inside the button, should be not less than 24px which includes 30 character spaces plus the ellipsis.","type":"text"}]},{"type":"paragraph"},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Hover & Focus State ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"box-shadow CSS property injected by JS.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"box-shaddow: 0 0 0 1px, 0 0 0 4px","type":"text","marks":[{"type":"code"}]},{"text":";","type":"text"}]}]}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":365,"id":"27df2c56-91f8-492c-afa7-52c5f17a0c6e","collection":"contentId-458783","type":"file","height":100}},{"type":"caption","content":[{"text":"Focus and hover outline","type":"text"}]}]},{"type":"paragraph"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Mark-up for static button ","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"HTML","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n

\n $\"Seamless$ \n

Access through your institution

\n\n\n\n

\n $\"Edit$ \n

Add or Change Institution

","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"CSS","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Flexbox properties that keep button text centered horizontally and vertically.\n\n.d-flex {\n display: flex;\n}\n\n.align-items-center {\n align-items: center;\n}\n\n.justify-content-center {\n justify-content: center;\n}\n\n// Text truncation that keeps the button fully responsive.\n\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n// Button styling that utilizes Libre Franlin Google Font.\n\n.sa-button, .sa-access-text {\n font-family: Arial, sans-serif;\n line-height: 1.4;\n}\n\n.sa-button {\n cursor: pointer;\n background-color: var(--primary-blue);\n border-radius: 5px;\n padding: 9px;\n}\n\n.sa-button-logo-wrap {\n text-align: center;\n width: 50px;\n height: 100%;\n border-right: 1px solid var(--white);\n padding: 5px 5px 5px 0;\n}\n\n.sa-button-logo {\n width: 30px;\n vertical-align: middle;\n}\n\n.sa-button-text {\n padding-left: 10px;\n text-align: center;\n width: 85%;\n color: var(--white);\n}\n\n.sa-button-text-primary {\n font-size: 14px;\n font-weight: 700;\n}\n\n// Styling of the \"Add or change institution\" text under the button.\n\n.sa-access-text {\n cursor: pointer;\n text-align: center;\n width: 100%;\n margin-top: 5px;\n font-size: 13px;\n font-weight: 400;\n line-height: 1.46;\n color: var(--primary-blue);\n}\n\n.sa-cta-access, .sa-cta-plus {\n display: inline;\n padding: 0 3px;\n}\n\n.sa-cta-plus > img {\n height: 13px\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"See ","type":"text"},{"text":"Limited Implementation ","type":"text","marks":[{"type":"link","attrs":{"href":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/38273057/Limited+Implementation"}}]},{"text":"for additional implementation guidelines. ","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Dynamic Button Specifications ","type":"text"}]},{"type":"paragraph","content":[{"text":"There are two ways to implement the dynamic button, through the ","type":"text"},{"text":"standard implementation","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"/wiki/spaces/DOCUMENTAT/pages/84738148"}}]},{"text":" (iframe) or through the ","type":"text"},{"text":"advanced implementation","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/38240282/Advanced+Implementation"}}]},{"text":" (api). ","type":"text"}]},{"type":"paragraph","content":[{"text":"Specifications for the button are provided below. The dynamic button has two states: No remembered institution (sometimes called the “cold state”) and Remembered institution. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Button States","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"No remembered institution","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":612,"id":"45635235-5dc6-4986-8c6d-5a3d82cb15c1","collection":"contentId-458783","type":"file","height":104}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Single line of text: ","type":"text"},{"text":"Arial bold, 14px","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"(Sentence case)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Icon (same specs for all versions): ","type":"text"},{"text":"28px high","type":"text","marks":[{"type":"strong"}]},{"text":" (Centered in first 50 px of button)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Vertical stroke: ","type":"text"},{"text":"32px high, 1px weight","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Corner radius: ","type":"text"},{"text":"5px","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Minimum width: ","type":"text"},{"text":"256px","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Maximum width: ","type":"text"},{"text":"328px","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Remembered institution with add/change link","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":608,"id":"c5041a9a-ddd6-4cfa-b66a-fdf7e01e0805","collection":"contentId-458783","type":"file","height":152}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Two lines of text with button:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"First line: ","type":"text"},{"text":"Arial Regular, 13px","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"(Sentence case)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Second line: ","type":"text"},{"text":"Arial bold, 14px","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"(Title Case)","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add/change link","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Fontawesome icon, SVG file: ","type":"text"},{"text":"24px","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Arial regular, 13px","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"(Sentence case)","type":"text"}]}]}]}]}]},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"For ","type":"text"},{"text":"advanced implementers","type":"text","marks":[{"type":"link","attrs":{"href":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/38240282/Advanced+Implementation"}}]},{"text":", the Add or change institution link should point to the remembered institution list which lets users: ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"select another saved institution","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"find and add another institution","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Edit or remove a saved institution* ","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"In a coming release, you may use the SeamlessAccess Edit screen by pointing to https://service.seamlessacces/ds?return=[your page url]&profile=edit","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff5630"}},{"type":"strong"}]},{"text":"For more details on the Add or change institution experience, see","type":"text"},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff5630"}},{"type":"strong"}]},{"type":"inlineCard","attrs":{"url":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/884787"}},{"text":" ","type":"text"},{"type":"hardBreak"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Long institution names","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":782,"id":"af2ec8d8-dc6c-446f-b531-3ba13bb1ff62","collection":"contentId-458783","type":"file","height":196}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Institution names should truncate after a maximum of 32 characters, including spaces, followed by an ellipsis (…) without a space.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Language support","type":"text"}]},{"type":"paragraph","content":[{"text":"The dynamic button should recognize a language parameter and display appropriate text.","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Standard Integration Implementation Considerations","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"Standard Implementation","type":"text","marks":[{"type":"link","attrs":{"href":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/38240282/Advanced+Implementation"}}]},{"text":" for more information. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"I-frame","type":"text"}]},{"type":"paragraph","content":[{"text":"The i-frame is responsive, however our recommendation is to provide space with the following dimensions:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Width: 350px","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Height: 85px","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Break down of height:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Button Height: 55px","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Margin at the bottom of the button: 3px","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Link “Add or change institution”: 18px","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Margin at the top of the link: 5px","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Extra space under the link to allow any overflow from the “pen” icon: 4px","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Configurations","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Standard button implementation (Java script and HTML) ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"Color: The standard implementation has a default background and text/icon color, but you may override those default values by injecting parameters into the script, available controls:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"backgroundColor - controls the color of the iFrame where the button is rendered","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"color - controls the color of the button","type":"text"}]}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Example:","type":"text"}]},{"type":"paragraph","content":[{"text":"The following example will render a green button with white text:","type":"text"}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"Language: The standard dynamic button should recognize a language parameter and display appropriate text.","type":"text"}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"additional parameters and configurations","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/pages/resumedraft.action?draftId=458783"}}]},{"text":" required to implement the standard button. ","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"DOs and DON’Ts when implementing the Seamless Access button","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Do","type":"text","marks":[{"type":"textColor","attrs":{"color":"#36b37e"}}]}]},{"type":"panel","attrs":{"panelType":"success"},"content":[{"type":"paragraph","content":[{"text":"Use a consistent presentation of the “Access through your institution” button. ","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1280,"id":"33457a77-19e5-4854-a690-85566310a4d9","collection":"contentId-458783","type":"file","height":437}}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Do Not","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}}]}]},{"type":"panel","attrs":{"panelType":"error"},"content":[{"type":"paragraph","content":[{"text":"Change “Access through your institution” text label.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"error"},"content":[{"type":"paragraph","content":[{"text":"Use low contrast for the text and button background. (See ","type":"text"},{"text":"Accessibility","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/DOCUMENTAT/pages/884780"}}]},{"text":" guidelines)","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"error"},"content":[{"type":"paragraph","content":[{"text":"Show “Access through your institution” as a link when it is the primary call to action for access.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":2388,"id":"c2ed8442-af8b-4fa3-8153-2d4c08025863","collection":"contentId-458783","type":"file","height":856}}]},{"type":"paragraph","content":[{"text":"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. ","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"configuring standard button parameters","type":"text","marks":[{"type":"link","attrs":{"href":"https://thiss-js.readthedocs.io/en/latest/components.html#login-button-component"}}]},{"text":" for more information. ","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Design Rationale","type":"text"}]},{"type":"paragraph","content":[{"text":"Why use a button?","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"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).","type":"text"}]},{"type":"paragraph","content":[{"text":"Why have a symbol or icon?","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"Why are words like “log in” or “sign in” not used?","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"The specific labeling and design of the call to action button were informed by best practice models and multiple rounds of iterative ","type":"text"},{"text":"user testing","type":"text","marks":[{"type":"link","attrs":{"href":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/28966993"}}]},{"text":".","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"Accessibility Notes for Button","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Follow overall principles for ","type":"text"},{"text":"Seamless Access Accessibility","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/DOCUMENTAT/pages/884780"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"For the button to be accessible:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Ensure if you do alterations to the color of the button that you maintain at least a ","type":"text"},{"text":"4.5:1","type":"text","marks":[{"type":"code"}]},{"text":" contrast ratio (compliance with ","type":"text"},{"text":"WCAG 2.1 AA","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"}}]},{"text":"). This ratio is to be applied to both the color contrast of the text and the button and its surrounding color.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Provide clear ","type":"text"},{"text":"focus","type":"text","marks":[{"type":"code"}]},{"text":" styling, to indicate that the button is selected, this can be color but must be at least one non-color based visual technique (e.g. underline, outline).","type":"text"}]}]}]},{"type":"paragraph"}]},{"type":"paragraph"},{"type":"rule"},{"type":"paragraph"},{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"text":"<< ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}},{"type":"strong"}]},{"type":"inlineCard","attrs":{"url":"https://seamlessaccess.atlassian.net/wiki/spaces/DOCUMENTAT/pages/851969"}},{"text":" | ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://seamlessaccess.atlassian.net/wiki/spaces/~55705809fa39bfa60645c4b31a971e5dc6d98f/pages/426004"}},{"text":" >>","type":"text","marks":[{"type":"textColor","attrs":{"color":"#4c9aff"}},{"type":"strong"}]}]}],"version":1}