Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Errors and incidents

Sometimes errors will occur and we need to handle them uniformly, and sometimes escalate them to incidents or close the function with a stop page.

Errors

Error types

We try to differentiate the content of errors that happen inside MFE:s into 2 groups:

  • Server/programming-generated
    Examples of this can be error-codes like 400-BadRequest or 500-InternalServerError. They are happening because we may be experiencing some kind of server, or implementation, problem.
  • Interaction-generated
    Examples of this can be 404-NotFound or 403-Forbidden. They may be because of the user interaction, or the setup for this particular user

Practically for development it's the same types of problems, but we may be more helpful to telling users what to do to solve their own problems when the error is interaction generated.

General usability of error messages

All error texts should follow the following guides.

  • Written in plain language rather than technical terms.
  • Precise by explaining exactly what went wrong.
  • Constructive so users know what needs to be done to fix the problem.

Design of error messages for MFE:s

Desktop & mobile design

Channel governance

Errors should always be monitored so that we as a bank knows that things are broken. If we start learning more about a certain problem we may change the text of the error to be specific of the situation that is happening right now or if there is an alternate way to handle the users task right now. i.e. “We are experiencing problems with the system X. Technicians are solving the issue and it should be up and running within a few hours. In the meantime you may use the mobile app to perform your task”.

If a problem is causing large issues a decision may be made to close the feature temporary. The page is then replaced with a stop page or incident.

Stop pages

When a part of the site is temporary closed due to maintenance or an ongoing error SEB may choose to close the page or a part of a site.

Stop pages should include information about why the page is closed and information about when it’s planned to open again (if possible). Also include option for the user to continue using other features or if it’s possible to perform the task through another channel.

At a further point we wish to add the possibility for the user to be contacted when the problem is fixed.

Design of stop pages

Desktop & mobile

Incident

Incidents are used to communicate with the user when we are experiencing issues with our services. They may also be used to proactively inform that we are planning service that may affect users. Incident’s use the alert ribbon component.

Severity

Incident’s are given a severity level that assigns the message with the proper design (colour).

  • Minor: Typically used for minor effect for users or for proactive communication about planned outages
  • Major: Used when it effects all or most users badly
  • Critical: A very hard problem that effects most or all users. Only used on a global level. Seldom used!

Behaviour

They should always be possible for the user to close. If they have read the message it should no longer take up valuable screen space. The closing is not saved permanently but only in the active session.

Local or global

The feature may mostly be used on a local page or section of the site. In this case its placed on top of that page.

Some issues may be global and is then placed above the site, pushing the entire page down. Should be used sparsely. This may for example be used if there’s an issue that effects the entire experience or is related to a general service such as BankID.

Examples

Global

Local

Subsections

Page last updated

Feedback

Was this helpful?