A smaller screen real estate drives us to prioritise content. We need to figure out what is relevant for the current user in a given situation and context. We should strive towards guiding the users in a way that gives them the ability to understand and complete a certain task easily and effectively. We do this by optimising the content in order to minimize the user’s cognitive load.
How to design for smaller screens
- All views must have a clear title.
- Important content should be positioned at the top, with an option to become sticky if necessary when a user scrolls past them.
- Primary buttons should be positioned at the bottom of a page.
- Group objects that are related. Make sure content fits and flows gradually vertically by importance on smaller screens.
- Place secondary types of information, such as descriptions and explanatory texts in modals, collapsable panels or separate views requiring the user to trigger them when needed.
What differs between a web and hybrid view
- Menus, footers and other elements that are presented in mobile web should be hidden when in a hybrid environment.
- Only “Zone 2” content (with a minified “Zone 1” header) deriving from the new Internetbank shells should be visible in a hybrid context.
- Certain actions such as CTAs can be placed in the bottom of the viewport as sticky elements for easy access.
- A hybrid view can be reached from both the app and the web. The context the view is presented can therefore differ, making it important to understand what information should be presented so that it fits both in the app and the web.
In a confined space it is easy to overwhelm a user. Restructure content in a way that it gives users the opportunity to view other relevant content/information on demand. Keep in mind that certain content will be mandatory due to legal requirements and might be required to be shown in context.
By applying graceful degradation we can design an optimal user experience per screen size, ensuring that content is scaled down appropriately to fit a mobile workspace.