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.

Design principles for mobile native app

Vad behöver jag veta för att kunna designa för native utan att be om hjälp?

Navigation

Mobile devices are part of our most personal belongings. Both Android and iOS provide users with many different ways to aid, enhance and personalize their mobile experiences to suit their needs. Our navigational principles rely on those pillars.

For specific details regarding navigation guidelines, visit iOS and Android.

Bottom navigation

Our bottom navigation* is used as a quick way to switch between different sections in the app. It flattens the information hierarchy and gives access to top-level categories side by side.

On iOS, the bottom navigation is visible on all views, with the exception for modal views. On Android, the bottom navigation only shows at the top-level, according to Material Guidelines.

*Also known in iOS as Tab bar.

Top navigation

The top navigation is used to move between views at the same level in the hierarchy. Recommended amount of maximum segment items shown per page is four, each representing a larger set of features within a product area.

Consider using short titles for each segment item that is displayed, to ensure that all fit accordingly.

Modals

Use modals used when the user needs to complete a task or a flow e.g. creating a payment. Some workflows in our apps use native technology, and some workflows in our apps use hybrid web. The navigation principles support them both, leaving the choice of technology to be assessed in balancing optimization, re-usability and cost.

Actions

Primary actions, if applicable, are found below the summation cards which are available in the top part of a page. Those buttons can either redirect the user to a native (new page) or hybrid flow (modal) depending of chosen implementation.

Secondary actions can be placed at the bottom of a page, below the actual content. They are specific to the actual shown context and could include actions such as "Quick transfer" and "Manage my other banks".

Tertiary actions are not considered vital for regular usage. They are accessible through a button in the top right of the navigation bar and consists of options depending on what context the user is at, e.g., "Sorting" and "Rename Account" while viewing account details.

Structure

Relevant content types for specific context. Aiming to make the users comfortable in their commitment with SEB.

Product Overviews

The Product Overviews are the core navigation elements, ensuring an overall experience with low friction and low learning curve. In the top of the space, the app hosts access to different Business Contexts. When pressing product features that are accessible via a call-to action button, they open using a full screen modal.

Product Details

The Product Details are also part of the core navigation elements, as it contains detailed information about a service or an account with optional contextual call to actions. An image container placed in the top offers the customer a way to personalize that page with their own image.

Business Contexts

The business contexts may host features, links or content with the purpose of expanding key product features or distribution inside the app. They can be adapted depending on business needs.

Grouped content

Our apps are constantly evolving, containing more features and functions thus adding complexity when trying to fit a lot of content into a small space. Therefore, we need a way to make sure the structure and information hierarchy is clear.

By grouping content and presenting it within cards, we can help the user understand what content belongs together and how it can be separated from other groups in a visual manner.

Communication

We have multiple ways of interacting with our users. Keep our communication specific, clear and consistent.

Message Expressions & Behavior

Top level messages within each product area are stacked vertically. Message cards have different colors and icons to indicate importance.

Cards can be either dismissible or not, depending on their state. Messages that are of high importance or contain critical information cannot be dismissed.

Maintenance & Critical messages

These types of messages are displayed in the event of service interruptions or other critical information for a customer in a logged in state. The yellow color denotes the importance and are not dismissible by the user.

General messages

Messages, information or call to action that are not a part of everyday interactions or that don't pertain to a specific product area are shown in the landing page after login, e.g., “Know Your Customer”. These messages are denoted by a blue color, and are generally not dismissible by the user.

Explore-section

By establishing an Explore-section as a business context, we may add much needed space for customers to view the SEB offering of each main tab.

The space is constructed using different card sizes, depending on type of content and business needs. For instance, editorial content may need richer space, while more static links may differ.

In Context

The main principle is to keep the customer communications as close as possible to the context, e.g., “Achieved savings target”.

The second principle is the future possibility to use empty states to differentiate communication, depending on customer engagement.

Promotional content

When approaching promotional content, one should take into account the nature of the visit in the app.

Push notifications and badges

The primary way of keeping the user informed of important messages is through push notifications.

Subsections

Page last updated

Feedback

Was this page helpful?