AppMachine Help Center

How can we help you?

Follow

Select a suitable menu

Various different design options are available for the main menu of your app. There are apps where users have to click icons, apps that only feature text or images and apps that let users navigate using menu options at the top or bottom of the screen. 

Clipboard.jpg

To the left you see the ADE app, which features a text menu. To the right you see Markus Schulz's app featuring a menu based on icons.

You can roughly choose from four types of navigation. Since your choice of a particular menu will affect your subsequent design options, we have drawn up the following overview of navigation styles along with their pros and cons. Incidentally, these are the default options. Your set of options will be even more extensive as we've added variations of certain types of navigation. 

Draw up an inventory of what is already available

Before you start building your app, you will want to draw up an inventory of existing material. Is there a house style and/or website? If that is the case, you must ensure your app's navigation style matches, e.g. by selecting large images or using text only.

The following options are available for your app’s navigation structure:

The icon menu

This menu lets your users navigate the main screen using icons. In most cases, there will be an even number of icons, as this will provide your app with a more convenient look but this does not have to be the case. Six icons in two rows of three icons is a frequently used option. The icon menu is used for many apps, so it will be highly recognizable for most users.

If you lay out the icons at the bottom of the screen, there will be enough space to include a nice visual on your main screen, as is the case with the app by DJ Markus Schulz. Do you have more items than you can fit in the main screen? In that case, the user will have to swipe to a subsequent page. You can also accommodate multiple building blocks with a single icon (the Submenu building block). This will allow you to, for example, combine Facebook and Twitter under a single Social Media icon. 

With this menu option, you should take into account the fact that there is limited space for text under your icons. This is why we recommend avoiding long names for your building blocks. Words like Discography and Facebook are OK, but 'Archie App’s Facebook page' will be too long to fit under an icon.

The list menu

If you want to show more items and use longer names, the list menu is the way to go. It will allow you to use a menu comprising a longer list of topics. For instance, in the Dutch Watersport app by the province of Friesland you will see 9 items with terms such as 'Afmeren en aanleggen' (Mooring and coming alongside) and 'Regels op het water' (Guidelines while sailing). This is very convenient if you use a large number of building blocks as well as longer names.

MOBILE.jpg
You can choose a list menu featuring text only or featuring icons. For instance, the Amsterdam Dance Event app only features text. As you can see, there is no need to worry that a text-only version will look boring. You will have plenty of typographical options at your disposal.

The image menu

This menu type consists predominantly of images. In most cases, these will be photographs, but it is also possible to use illustrations. The app by Hotel Tjaarda offers a neat example of an image menu. The larger photographs lend it a stylish and luxurious look.

05-Home.jpg
You can place the photos in a single row that covers the entire screen or side by side in a double row. Please note that this menu requires reasonably large photographs to ensure proper visibility.

The tab bar menu

This navigation option comprises a menu at the bottom of your screen that usually consists of five items. This is a typical iOS menu and therefore highly familiar for iPhone users. Do you have more than five menu items? In that case, the remaining items will be displayed in a subsequent screen. Since the first five items are always listed at the bottom of the screen, the remaining items will be presented in a second screen in a list above it. Although the five fixed items will take up some screen space, the advantage is that your menu items will be permanently available to the user.

The app does not have a separate 'home screen', but will always open with the first menu option active (the first building block). This may be regarded as a drawback, but you can also use it to your advantage. For instance, if the latest news items are an important feature of your app, you can make sure the app always opens with the News item in the first position. 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments