Browsing feedback

We want to solve the user's problems. To do this we always want to give the user relevant feedback, regardless of the cause of errors. The last resort should be to send the user to a browser's or app's default error messages.


When writing single page applications (henceforth referred to as SPAs) we need to manually handle some aspects of user feedback that the browser normally handles in a classic web site.

DO

  • Give feedback when the user's connection is slow
  • Give feedback if the user loses the internet connection

Distinguish between connection lost and internal server error

When the client can't reach our servers (on valid URLs) it could either be because they have no internet connection or because there is some kind of internal server error. When browsing a classic web site the browser will give you information about which of the two errors that occurred, but this is not automatically true for SPAs.

Chrome connection lost page (non-SPA sites only)

chrome-connection-lost

For SPAs it can actually be technically challenging to distinguish between the two, but it is important for the user to get information about which kind of error that occurred.

Example on feedback for connection loss

svtplay-connection-lost

Suggestions on messages for different types of errors (in swedish)

Loader

When a user clicks a link on a classic site the browser loader will show. However, if one changes "page" within a SPA the load indicator of the browser will not show. To address this you have to manually add a loader to your page and control when it should show. Compare images below.

Chrome's loading indicator (only for non-SPA sites)

load-indicator

SVT Play's loading indicator

svtplay-progress-bar

Give feedback when loading is slow

A user may be on a slow connection when browsing our sites. It's important to inform the user that the content actually keeps loading even if nothing seems to happen. To relieve this situation we want to give feedback that everything is still working. As a rule of thumb we want to show a message 1-2 seconds after loading has started.

Example of feedback message

loading-still