Modular home

Main navigation and selected content

Meanwhile, as a general trend within our industry, we've also started noticing more and more apps using the home to manage their main navigation.
Both these observations have brought us to imagine a radically new Home concept for V4 apps. With GoodBarber 4.0, the Home lets you choose which content to highlight upon opening the app. It also lets you display links towards the primary destinations making up your app, in your opinion. Consequently, we really believe that this concept will allow you to better distribute traffic within your app.
Infinite modularity

Widgets are functional modules. To design them, we first considered the different templates’ displays on mobile. Usable space on mobile UI is not easy to come by! Thinking mobile first challenged our creativity, from which originated a resolutely modern design, with a level of rich functionality aligned with our offering, but with a cleaner interface at the same time.
Templates associated with widgets have a mobile, tablet and desktop declination. When you add a widget to your Home, the views to match each size screen are automatically deducted. And yet, you are still in charge when it comes to setting up particular details when it comes to a specific screen size.
The widgets

On the UI Index page of the GoodBarber portal you can view the mockups of all available templates for navigation widgets and for content widgets related to each type of section.
Content widgets can be used to display items belonging to sections of the app, on the Home. They belong to 3 families.
- list: the content is displayed in list format, with the possibility to highlight certain items (widget n°1 and n°6 from the example above). You can choose to display items belonging to a specific category within a section (widget n°2 displays the “Radar” category of the “News” section).
- banner: these widgets optimize usage of the usable space on the home. Browsing content is achieved through horizontal scrolling (widget n°3).
- highlight: these are semi-dynamic widgets. The first element displayed is a link to the section, the following elements are items belonging to the section (widget n°5). Sorting options to display items are plenty: per date, randomly, alphabetical order,…
These widgets can be used to create links towards sections, trigger actions or direct towards external urls. They belong to 3 families.
- list: these widgets take up the maximum space available. Links are displayed in list format. They can show a title, subtitle, button, images or icons, in order to highlight the action to be performed (widget n°4 from the example).
- banner: browsing the links displayed within these widgets can be achieved through horizontal scrolling. As a result, they can be used to minimize space usage. Titles, subtitles, buttons, images and icons are also available with this widget family.
- remote: these widgets can display up to 6 links, with a title and icon only. They are meant to be compact and generally, to be located at the bottom of the Home, as a footer.
Design

