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.
Vad behöver jag veta för att kunna designa för native utan att be om hjälp?
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.
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.
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.
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.
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.
Relevant content types for specific context. Aiming to make the users comfortable in their commitment with SEB.
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.
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.
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.
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.
We have multiple ways of interacting with our users. Keep our communication specific, clear and consistent.
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.
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.
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.
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.
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.
When approaching promotional content, one should take into account the nature of the visit in the app.
The primary way of keeping the user informed of important messages is through push notifications.