• Security & Identity
• Authentication
  • About AAI
  • Participants
  • Join AAI
  • Support & Downloads
    • FAQ
    • Helpdesk
    • Documents
    • Presentations
    • HOWTO
    • Identity Providers
    • Service Providers
    • Metadata
    • Tools
  • Demo
  • Contact
• Computer Emergencies
• Certificates

AAI Design Guidelines

Purpose

The goals of these guidelines are:

• A better-looking user interface for the AAI-users
• A familiar look and feel for immediate recognition of an AAI-protected resource
• Avoiding multiple concepts of user interfaces
• A more consistent and easier login process for the users
• Reducing the workload for the web page authors when designing a login interface - templates are provided
• A better support concept that guides users to the right helpdesk

Download Design Templates

The templates are provided as HTML snippets in SWITCHaaiSnippets.tar.gz (23 kBytes, relative links with images).

IdP JSP templates

Download JSP templates for Shibboleth IdP 2: IdP2-jsp-templates.tar.gz

Recommendations IdP login and error pages

Login page

• The login page should contain helpdesk information for users that forgot their password.
• It is recommended to use the blue-framed design elements of this page for a familiar look.
• It is recommended to place the organization logo somewhere on the login page. This is less confusing for users and helps them to get used to the login page.
• Somewhere on the login page, there should be the SWITCHaai logo.
• The AAI login field may be any size appropriate in the context of the page, provided the logos are not resized.

Example:

SWITCHaai IdP error page

• The error page should contain helpdesk information for users, e.g. link to a website, e-mail address or phone number the users can turn to.

Login Link for Resources

Example:

 

The AAI Login field may be any size appropriate in the context of the page, provided the logos are not resized.

It's up to the web page author to include other information as deemed appropriate into the AAI login area. SWITCH provides and maintains a number of links leading to information pages that may be re-used:

http://www.switch.ch/aai/about/	About AAI
http://www.switch.ch/aai/faq/	FAQ
http://www.switch.ch/aai/help/	Help
http://www.switch.ch/aai/participants/	Participating Organizations
http://www.switch.ch/aai/privacy/	Privacy Policy

Dual Login Fields for Resources

A dual login is required if a resource should be accessed by AAI users as well as non-AAI users (e.g. users from foreign universities or private companies). Accounts of non-AAI users have to be managed by the resource itself.

Example 1a, Dual Login, horizontal alignment with two boxes of the same height:

Example 1b, Dual Login field vertical alignment with two boxes of the same width:

It's composed of:

• A standard AAI Login field
• A Non-AAI Login field, equal in height on the right hand side of the AAI Login field (example 1a) or equal in width below the AAI Login field (example 1b)

The Non-AAI Login field typically contains form fields for username and password (see example 1a), or alternatively just the login button leading to another page or another server.
Again, it's up to the web page author to include other information as deemed appropriate into this field.

 

Login Button for Resources

This button can be used instead of an AAI Login field when room is scarce. It may also be appropriate when one can assume the user to be familiar with AAI.

Login Small Button for Resources

This button can be used instead of an AAI Login field when room is even more scarce. It may also be appropriate when one can assume the user to be familiar with AAI.

Login Icon for Resources

If a page contains links to non-AAI resources as well as AAI resources, an AAI Login icon may be placed on the right hand side of a link. This clearly indicates which resources are AAI-protected.

Example:

Journal of Science and Fiction, Vol 324
Organization of Public Knowledge
Professor Genius' Homepage
IoE Research Database
Institute of Example

CSS and Logo URLs for Shibboleth Configuration

A Service Provider can be configured to use a stylesheet and an image when error or authorization messages are displayed to the user. Using the two mentioned URLs below, it is very easy to give them a SWITCHaai-like look. The only thing that is needed, is to set the logoLocation to http://www.switch.ch/aai/design/images/SWITCHaai.gif and to set the styleSheet to http://www.switch.ch/aai/design/shib-error.css in the Shibboleth configuration file (shibboleth.xml) of the Service Provider.

This should then look like this:

And the resulting messages generated by the Service Provider look like this:

AAI Logos

The official AAI logo:

This is the general-purpose AAI logo to be used for presentations or on SWITCHaai related websites. The logo should be an active link to http://www.switch.ch/aai/ on any pages used for information about AAI.

AAI-enabled logo:

This is the logo to be used on web pages to indicate that they are AAI-enabled.

Examples of such usage are:

• Pages on resources
• The login page of an AAI home organization
• The WAYF-page

Compatibility

The html and CSS code is valid HTML 4.01 Transitional code and was also tested using the following web browsers:

• Safari (Mac OS X 10.4/10.5)
• OmniWeb 5. (Mac OS X 10.4/10.5)
• Firefox 2
• Opera 9 (Mac OS X 10.3/10.4)
• Internet Explorer 5
• Internet Explorer 7