User interface guidelines

Even though there are strict rules on how to set up the MitID user interface, you can still configure some elements.

Add-ons

Some of the UI elements are only possible to adjust when you have the following add-ons:

• The Subdomains add-on allows you to change the subdomain name.
• The Advanced graphical profile add-on allows you to adjust design elements surrounding the MitID box to suit your own brand. The Basic graphical profile is predefined and you cannot change the surrounding elements.

Here is an overview of what you can adjust per graphical profile:

If you have both the Advanced graphical profile and Subdomains add-ons, you can configure all these elements (see blue callouts).

User interface customisation

See an example on how it might look in the Advanced graphical profile section.

Basic graphical profile

The basic graphical profile is delivered as standard by Signicat. This option makes it easier for you to get started without spending time adjusting the layout. This option is predefined and you cannot customise it.

Basic graphical profile

Advanced graphical profile (add-on)

If you want to customise the graphical profile instead of using the basic profile, Signicat helps you setting up the advanced graphical profile. Please, contact us by creating a support ticket in the Signicat Dashboard.

Before you contact Signicat

Please consider how you want to present the adjustable elements described in the following sub-sections. This will speed up the customisation process.

The advanced graphical profile affects the surrounding area (blue area) of the MitID box. It does NOT affect the MitID box itself (white area):

Adjust blue areas with advanced graphical profile

In this example, we have uploaded the Superbank logo to the top left, added a background image for the whole profile, a heading to the right with some welcome texts (help text) and two links to more information.

Advanced graphical profile

Recommendations for images and colours

Logos and background images are hosted by Signicat as web resources:

• Format: There are no limitations as long as you use formats suited to the web format, for example PNG, JPEG, GIF, SVG. PNG is generally recommended over JPEG since it is lossless. File formats are usually written with all-caps in natural language texts (png > PNG).
• Size: Consider the image size to balance the image quality with the time it takes to load. This recommendation is mostly relevant if you want to upload a background image (logos are relatively small anyway, see the next section for logo size). For most purposes, a JPG that is 1000-1200 pixels in width should be sufficient.

You can use all colour formats suited for web, for example RGB, RGBA, HEX.

Ensure you comply with WCAG

Be aware that you must comply with Web Content Accessibility Guidelines (WCAG) regarding contrast between font colours and other elements.

Logo

You can optionally upload your own logo:

• Location: Place it to the left in the header.
• Size: Maximum 150 pixels wide and 40 pixels high.
• Padding: Ensure your logo has enough padding/margin so it is not squished into the corner.

Here is a desktop example containing a logo from "Superbank":

Logo

Header

The header can be visible or hidden. When visible, it should always be on top. You can change the:

• Transparency: This can be useful if you have uploaded a background image that you want to display behind.
• Header colour: You can change this to fit your brand. You can use all colour formats suited for web, for example RGB, RGBA, HEX.

For an example, see the above Logo section showing a white header containing a logo from "Superbank":

The header is hidden on smaller devices

This is to ensure all elements of the MitID client is visible to the end-user.

Border

You can define a border around the centred piece of the profile, for example a drop-shadow or stroke.

This is not the same as the border around the MitID box, which you cannot change.

Here is an example on a border with drop-shadow:

Border drop-shadow

Here is an example on a border with stroke:

Border stroke

Background

On the background surrounding the MitID box, you can:

• Add a colour: Choose a background colour that suits your brand. You can use all colour formats suited for web, for example RGB, RGBA, HEX.
• Upload an image: This image will also cover the header area. You can then make the header transparent or hide it for the image to show. For size and format details, see Recommendations for images and colours.

Here is an example of an uploaded background image:

Background image example

Help text

You can add short texts to provide additional service information for the end-users. For example, it could give value-added information about your service.

You can also decide not to show such a text. If you have an empty body text, the links below will adjust nicely.

This text is not the same as the Help link in the MitID box, which provides specific MitID help.

Requirements for the text:

• Heading: You can only have one heading level
• Body text: Maximum 5 lines
• Paragraph styles: No other styles than heading and body text is allowed.
• Font: You cannot change the text font (IBM Plex Sans). However, you can change the font colour, but be aware of WCAG. For better contrast and compliance with WCAG, you might consider employing a semi-transparent box.

Here is an example of a help text to the right of the MitID box, starting with the heading, "Welcome to Superbank":

Help text example

Links

You can add links below the help text:

• It should be located right below the help text.
• Maximum 2 links.
• The link can be either a text link or a URL.
• If there is no help text (neither heading nor body text), the link is not displayed.
• Links in the footer are not supported.

For an example of added links, see the above Help text section.

Label

You can highlight information by inserting them into a grey label box.

• You can add a link inside the label.
• You can change the text inside the label.
• The grey box adapts to the text length.
• The label is optional to show.

Subdomains (add-on)

The default subdomain name in Signicat’s basic profile is either signicat.id.mitid.dk for authentication or signicat.sign.mitid.dk for signing.

Subdomain: Default name for authentication

This subdomain is only used in the MitID flow. It is an internal redirect in the Signicat applications, so you do not need to take any actions regarding this standard subdomain.

However, if you want to include your name in the domain, Signicat offers a customised subdomain, service-provider.mitid.dk (see screen example below). For setup help, please contact us by creating a support ticket in the Signicat Dashboard.

Customised subdomain name

Pop-up or redirect?

You can set up MitID as either redirect or pop-up.

Redirect is recommended

Signicat recommends using redirect instead of pop-up for initiating MitID transactions.

The choice is up to you and is all about user experience since both ways are equally secure.

The following sub-sections describe the advantages and disadvantages of both redirects and pop-ups. If you still want to use pop-up, we provide some general guidance in the pop-up section below.

Redirect

A redirect means the end-user is redirected to be authenticated on the page where the MitID box is shown inside the landing page. When the authentication is successful, the user is sent back to your website.

Opening MitID as redirect looks as follows on a desktop (basic profile):

Redirect with basic graphical profile

Advantages of redirect

• The user can bookmark the redirect page to log on directly.
• Easier to implement.
• A pop-up on a mobile device would be displayed in a new tab, so redirect is recommended for those devices to avoid a bad user experience when switching between tabs.

Disadvantage of redirect

The user leaves your web site.

Pop-up

As an alternative to redirecting the user, the MitID transaction can be initiated in a pop-up window. From the end-user’s perspective, they would click the MitID call-to-action button, which opens a pop-up window where they perform the MitID authentication. Upon termination of the transaction, the pop-up window is closed and the user is redirected to the original window where the pop-up was triggered.

Here is an example sketch where the MitID box is initiated from the service provider page as a pop-up with the basic graphical profile:

Pop-up example

Advantage of pop-up

The end-user does not shift context and can see your website behind the pop-up when using a desktop.

Disadvantages of pop-up

• Pop-ups on mobile devices are handled as new browser tabs.
  Due to this, Signicat strongly recommends against using pop-up if the user is on a mobile device.
• End-users may have pop-up blockers installed in their browser, which can prevent the MitID Logon box from opening at all.
• If the end-user enlarges the text, a scroll bar may appear. This is not allowed.
• Some flows may require more space than is suitable for a pop-up.

General recommendations when using pop-up

If using pop-up

We strongly recommend using the basic graphical profile in combination with pop-up. This creates a more familiar experience for the end-user across service providers. The advanced graphical profile can be seen as "noisy" in the context of a pop-up. Also, pop-up needs a larger window size to properly display the advanced graphical profile (see the next bullet point).

• The MitID box is always 400x588px, which is the mandated minimum size of the pop-up. To properly display the contents with the basic graphical profile, we recommend a minimum pop-up window size of 710x700 px. If you still choose to use the advanced graphical profile in combination with pop-ups, we recommend a minimum pop-up window size of 820x820 px.
• Centre the pop-up window on the screen. Dual monitor setups should be taken into account when attempting to centre the window.
• Anchor the MitID box to the top.
• As a service provider, you must handle the lifetime of the pop-up window. This includes closing the window upon termination of the MitID transaction and properly redirecting the user in the original parent window.
• The design, structure and behaviour of the landing page is subject to change over time. This may in turn have consequences for how the solution looks when displayed in a pop-up window.

Desktops

When using a pop-up on a desktop, the surrounding page around the MitID box should be as limited as possible to create a familiar experience for the end-user. So, avoid unnecessary elements around the MitID box.

Mobile devices (tablets and smartphones)

When using pop-up on mobile devices, set up the switch between the original tab and the MitID tab automatically so the users do not get stuck nor must navigate themselves.

Texts

In the MitID box, you can set up an action text, your service provider name and a reference text.

Texts

Action text

Here you can choose between a predefined limited set of action texts, for example "Log on at..." , "Sign at...". For a full list of available action texts, see UX requirements > Action texts.

Service provider name

Here you display the name of the company (recognisable for the end-user). There are some length restrictions. For more details, see the UX requirements > Service provider name.

Reference text

This is the body text in the MitID login box (max 130 characters), giving the end-user additional information about the action. Here you can choose between two setups:

• Static reference text: Here you can add a static reference text of your own choice. This is a general text for all transactions (see also MitID UX requirements).
• Dynamic reference text (Transaction consent add-on): Whereas the static text is a general description, the dynamic text describes specific transactions, for example "Transfer 1000 DKK to {account number}". Here you set up a dynamic reference text. This option requires the Transaction consent add-on from Signicat.

Signicat helps you define both these options in the configuration. To get help with this, please contact us by creating a support ticket in the Signicat Dashboard.

See also more details in the next section.

Transaction consent add-on (dynamic reference text)

You can define a dynamic reference text yourself using the reference text parameter. For more details on how to set this up, see the Integration guides for the respective protocols, OIDC and Authentication REST API.

This also requires that you have set the "Transaction consent add-on" to true in the MitID configuration. This parameter overrides the static reference text (see section above).

The parameter must be signed per request to ensure that the text is authentic, meaning it comes from you as a service provider and has not been tampered by other parties. For how to set this up in an OIDC context, see the Encryption/signing of the request object in the eID Hub section.

Language

Supported languages are Danish, English and Greenlandic. See also MitID's UX requirements for text alternatives in the supported languages.

See also

You can also find some guidelines about usage of UX materials in the Information package for the MitID end-user campaign (in Danish). This package contains documents and videos about primary messaging, timings and guidelines for the usage of graphical elements (logos, illustrations and images) and communication.