Mobile UI/UX Design Patterns: What Type of Menu to Choose for Your App?

December 20th, 2016

UI/UX / Mobile // Natalie

Mobile UI/UX Design Menu Patterns

While there’s no one way to design your app (thankfully so!), here are ideas to get you going in regards to best practices in mobile app UI/UX design patterns for menus.

Two of our mobile developers - Severyn (Android developer) and Sergiy (iOS developer) have shared their experience about the best practices when it comes to menus.

7 Menu Options for Android:

Among the standard and most popular options for the Android, menus are Side Burger button menu and Tab Bar menu.

1. SIDE BURGER MENU

2. TAB BAR MENU

There are other interesting options that one should consider, depending on the purpose of the app.

3. DROPDOWN TOOLBAR MENU

Drop down toolbar menu is another well-known option for Android mobile devices (and not only them). It is easy to create such a menu using XML files. (You can check out the manual how to do it here.)  

4. STATIC TOOLBAR MENU

Static toolbar menu is actually a version of the above-mentioned drop-down menu. The difference in the implementation lies in XML settings (android:showAsAction="ifRoom").

5. FLOATING ACTION BUTTON

So-called FloatingActionButton is a menu from android.support.design library. It is also a part of Android native design, which often serves as a context menu.

6. TILE BUTTONS

Tile buttons became widely known due to its usage in Windows Mobile, but they can be easily implemented in Android devices as well. They can be created using LinearLayout, GridLayout or RecyclerView.

7. RADIAL MENU

This type of menus is often used in complex Android designs. A library with such menu can be found on Strider’s GitHub.

7 Menu Options for iOS:

1. HIDE MENUS

Hide menus use UIAlertController for presentation and has two types:

  • ActionSheet appears from the bottom of the screen
  • Alert appears in the center of the screen

2. POPOVER MENU

This menu is available for iPad and it is similar to hide menus. It displays a list of available actions or pages and appears in pop-over from sender’s frame.

3. TILES MENU

The menu can be implemented either with UITableView or UICollectionView. It uses a collection for displaying items and can get quite creative (even if traditionally tiles menu is a Windows Mobile one.)

4. SIDE MENU

There are many ways to create a side menu (whether one that appears from the left side, or right side, or both). GitHub offers a way to do it without coding, simply from a storyboard. Get more information about the project here.

5. TAB BAR MENU

It appears at the bottom of an app screen and gives an opportunity to quickly switch between different parts of the app. For example, in the native iOS clock app, you can switch between World Clock, Alarm, Bedtime, Stopwatch, or Timer.  

6. TOOLBAR MENU

An example of iOS toolbar can be found in the iOS Facebook app, this is where you find “Newsfeed,” “Messages,” and more.

7. FLOATING ACTION

This type of menu is a custom one that can be modified to fit your needs and likes in regards to position, colors, etc.

Need help with creating and setting up these menus in your app?

Author: Natalie

Project Manager who is a great team leader for her mobile development team. She is an expert when it comes to iOS and Android development and to building apps that win markets. In her free time, she loves traveling in the mountains and dancing.

Tags Native Design Cross-Platform

See all blog

x

Grossum Startup Guide:
Five Things to Consider Before Web & Mobile Development

Get the Guide