Mobile UI/UX Design Patterns: What Type of Menu to Choose for Your App?
December 20th, 2016
While there’s no one way to design your mobile app menu (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 patterns for Android mobile apps
- 7 Menu patterns for iOS mobile apps
7 Menu Design Options for Android Apps:
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.
These are several menu design patterns that are widely used in the industry. Paving the way for new designs is also great, just remember that if you come up with your own remarkable design, these new mobile UI menu design patterns have to be checked for user experience as well.
Need help with creating and setting up these menus in your app?
