Building an app means making choices. What content do you use? What will the app look like? One of the most important choices is that of the main menu; your app’s navigation. Which navigation do you choose, and when?
Navigation types
You want to make the menu as attractive as possible, while keeping the user in mind. How do you present the information? How will you entice users of your app to explore your content further? Keep that in mind when choosing a menu.
Before you start you need to know what you can work with. Do you or the client have a house style or website? Then you probably want to match the app and its menu style by opting for large images, for example, or perhaps only for text. You have the following options for navigating your app:
1. Icon menu
With this menu you navigate the main screen with icons. There would normally be an even number of icons because it looks good, but it’s not a rule. Six icons in two rows of three is an option often used. The icon menu often occurs in apps and is extremely familiar to most users. By placing the icons at the bottom, you leave plenty of space for a nice visual on your main screen, as you can see in the app of DJ Markus Schulz.
Do you have more items than you can fit on the main screen? Then the user has to swipe to the following page. You can also accommodate multiple building blocks under one icon (Submenu block). In this way you can combine Facebook and Twitter under one Social Media icon.
In this menu you have to take the limited space for text under your icons into account. So don’t give your blocks very long names. Words like Discography or Facebook are okay, but a phrase like 'The Facebook Stories of My AppMachine App' is too long to put under an icon.
2. List menu
Do you have lots of items you want to display? Then the list menu may be an option for you. As the name suggest, you get a menu comprising a somewhat longer list of topics. In this way you can accommodate more items on your main screen and the names can be longer. Thus in Friesland’s Watersport app there are nine items like Mooring and Coming Alongside and Guidelines While Sailing (translated). This is very convenient if you use a lot of blocks with longer names. You can choose a list menu with just text or icons. The Amsterdam Dance Event app only has text. And you can certainly see that there’s no chance of a text-only version looking boring – you’ll have plenty of typographical options at your command.
3. Image menu
This type mainly has images – in most cases photos, but other illustrations are possible. The Hotel Tjaarda app is a neat example of an image menu, with the larger photos making it look stylish and luxurious. The photos can be in a single row covering the screen, or side by side in a double row. Do remember that you need fairly large photos to ensure good visibility.
4. Tab bar menu
This option has a menu at the bottom of the screen, usually with five items. It’s a very typical iOS menu, so it’s familiar to iPhone users. If you have more than five items, they’ll be displayed in the next screen. Because the first five are always at the bottom of the screen, the rest will be in a second screen in a list at the top. Your five fixed items do take up screen real-estate, but the advantage is that they are permanently visible and available.
The app always opens with the first menu option of the five. This could be a drawback, but you can use it to your advantage. For instance, if the latest news items are an important feature in your app, you can ensure it always opens with News in the first position.
This menu is less suitable for Android smartphones, because these use hardware buttons at the bottom of the screen. Following general UI principles, we've placed the tab menu at the top for Android users.
Consider your app’s users
It must be obvious by now that the sky’s the limit when it comes to navigation. But always bear your app’s users in mind, ensuring that they receive the information as conveniently as possible. This will entice them to tap further. On one hand it’s great if similar information is grouped, but on the other you don’t want too many submenus. Then a user would have to do too much to get to the information (we recommend no more than three levels to get to any content in the app). Keep a good balance in mind. Fortunately with AppMachine you can always view and test your choices immediately on your smartphone using the AppMachine Previewer app.