Progressive Web App Frame
Project Type
UX/UI Design
Timeline
September 2020 – November 2020
Description
Presentation and illustration of the use cases and results of the research projects/applications DAIMON and ERPAD.
Client
north.io GmbH
My Role
Conception
Creative Direction
Execution
Contributors
Alessandro Casciaro
Description
Presentation and illustration of the use cases and results of the research projects/applications DAIMON and ERPAD.
My Role
Conception
Creative Direction
Execution
Concept
The goal of the design process was to create consistent navigation within a PWA (Progressive Web App) on desktop and mobile devices, as well as to enable switching between multiple independent PWAs.
The navigation concept is used in a cloud platform that includes different use cases. Specifically, this involves applications for managing and visualizing Big Data, geodata or contacts, as well as collaboration within a workspace with projects and data exchange with other users or workspaces. Since this is an enormously large scope and other use cases must also be taken into account in the long term, the navigation concept is extremely flexible and modular.
PWAs are running in the browser, which means the design faces an unmanageable number of devices and screen resolutions. Therefore, the focus was on developing a flawless responsive design. It was also necessary to ensure that all content is accessible regardless of device and resolution, without drastically changing the navigation concept. The applications should be as user-friendly as possible and the physical and mental interaction cost should be reduced to a minimum.
.
Screen regions
The screen regions organize the entire application content categorically and hierarchically. Each region serves a specific purpose that does not change across all use cases. This ensures that the user can navigate identically in each application and does not have to reorient themself. Regions are as compact as possible and as spatial as necessary to ensure an appropriate balance between information density and clear user interface.
.
.
1 App Bar, 2 Navigation, 3 Left Drawer, 4 Header, 5 Right Drawer, 6 Content
The App Bar is an essential part of any application, as it allows switching between applications, searching for content within an application and accessing notifications and the User Menu. The Navigation is needed when content within an application needs to be divided into several sections. The Drawer on the left contains the primary action of an application section and allows the content of that application section to be divided into subsections if needed. The Header is used to display information, e.g. the category of the current content as well as important information and enables content-related interaction. The Drawer on the right side can be filled individually with content. This drawer is not permanently visible, but appears after interaction with content and can be hidden again. The content is displayed in the center.
Adaptive Design
Due to the different usage of desktop and mobile devices, differences in the frame between these device groups are unavoidable to ensure an optimal user experience. Therefore, on mobile devices, the user menu has been combined with the navigation. In the app bar, only one menu button is displayed apart from the button for switching applications, to reduce the density of information within the app bar and preventing the user from choosing between two menus. The content of the left drawer is displayed as a bottom navigation, as this is the most frequently used and thus optimally accessible for both right-handed and left-handed users.
1 App Bar, 2 Menu, 3 Bottom Navigation, 4 Header, 5 Content
Menus
The App Menu allows users to quickly switch between different applications. The User Menu allows access to the user account, the users workspace as well as the workspaces of other users to which the user belongs.
.
.
On mobile devices, the app menu is directly accessible from the app bar, too. For usability reasons, the user menu and navigation are combined into one complete in-app menu.
Use Case
The PWA Frame is used for TrueOcean's Marine Data Platform, a cloud platform for smart management, visualization and analysis of big sensor data in marine applications.