Yes, it is the same with iOS and the tab bar should be visible everywhere.
Don't hide a tab bar when people navigate to different areas in your app. A tab bar enables global navigation for your app, so it should remain visible everywhere.
It's perfectly ok to use bottom nav bar, and also recommended to do so considering the size(height) of current smart phones.
Thumb is the primary finger most users use for single hand interactions and bottom navigations make it easy for the thumb to reach almost all primary menu options without a need of another hand.
Facebook, WhatsApp, ...
The mockup below is just and example but some general advice would be to save some fixed space to display
"Where I am?" => Indicate the place where they are (eg: page 3 of 10).
"What should I do?" => I forgot to put it in the mockup but it could be a tittle like "Answer all questions to continue".
"Where I can go?" => Show the navigation buttons, so they ...
I would strongly advise against navigating back through the tabs. Here is why:
The back button is usually for going up one level, not for ‘horizontal’ navigation. That is what the tabs are for!
Especially when the tabs are all reachable, stacking the tab navigation under the back button is only an inconvenience when the user actually wants to ‘go back’.
It is unclear how Users will navigate between your two main pieces of content, but it seems that by pressing the More... button the Bottom Sheet will be displayed offering navigational menu items....
You could apply serial-position effect to your navigation.
The serial position effect, a term coined by Herman Ebbinghaus,
describes how the position of an item in a sequence affects recall
accuracy. The two concepts involved, the primacy effect and the
recency effect, explains how items presented at the beginning of a
sequence and the end of a ...
So, drawing inspiration from James Coyle's and ADOConnection's ideas, I gave it multiple attempts and wanted to share my thoughts.
First, this is how I initially planned it:
Second, James' corner FAB. Not too sure about the color style yet, but since I wanted it to not be too prominent (since the options aren't that important) I couldn't use my accent ...
If a large number of orders needs to be managed in the same window, the best option is to divide them into different areas according its status, with easy access for each one.
Main division should be Active and Completed orders and Active orders should be grouped by their service status relative to the customer.
As in a restaurant efficiency in service time ...
With so many elements it's somewhat complex. In fact I see some redundancy in the explanation and elements to show.
What can help is to put a little order in the arrangement of the elements.
At a glance you develop all the lower information in no order. I think it can be simplified to a double or triple entry table.
Orders have two states: ...
Add number grouping to quickly navigate to a particular part in the set of orders/numbers.
As an example I have added an idea to your current design. It's based on a time-line and allows to press on the range buttons, but ideally also in between them. Or if this is a native app, it could work with swiping to swipe fast through the whole range of orders (a ...
My main question would be how the chefs and waiters are going to use this app. You might end up with two different views for these two user groups!
As for the chefs, are they doing to focus on a single order all the time, prepare everything from it, finish it, and only then move on to the next? Or are they going to "peek" ahead to see what they ...
I presented my idea below with it's roughly described content so that you may customize with the components you already have more concisely.
Mainly I removed the below components to the left of the screen which
actually keeps the same tab bars but only have a CTA button to show
at first glance. You may still try to use the same tab bar, I
Looking at the Material Design docs some more, it seems that Tabs would be the option here since tabs are for grouping similar related content where as bottom navigation is primarily for navigation between distinct pages.
From the info you provided I see correlation with mobile games UI:
custom-made home screen with few primary actions and some secondary actions
I think you can grab the same idea.
Even if your UI is not that heavily drawn and does not look like cartoon frame, this pattern still applies and you dont need to use common navigation ...
Think about these two questions:
What is the purpose of the tab-based navigation?
What is the mental model of the user?
A tab-based navigation is great because it allows for multiple independent sections in your app, increases context of where the user is and where they can go, and lets users jump between places in the app quickly.
I would ...
Option 1: Allow users to freely move around your app wherever they are inside the platform.
A permanent tap bar allows users to recognise where they are on the platform. How to efficiently get to another page. And how to return back to a previous state directly without having to go through multiple steps.
It's almost like an accelerator.
Having the tap bar ...
I would say it depends. I think is more about avoiding accidental exits of processes and details. If you consider that this could affect your app consider not showing the bottom bar on second level navigation. Also if you want to place a bottom action bar, for example, it could potentially increase the risk of accidental navigation. So you can show two bars, ...
There are no such specific norms to use any component of Android.
But Yes, There are some usage and anatomy of every component or criteria from the design and Usage perspective.
Bottom navigation should be used for:
- Top-level destinations that need to be accessible from anywhere in the app
- Three to five destinations
- Mobile or tablet only.
Have you considered doing a segmented control nav design instead? That seems to me the more common solution to this kind of problem: https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/
As for answers to your questions:
Is this [collapsed] pattern a good idea for a mobile web app? Is it unexpected enough to result ...
When using a stepper or progress tracker, think of it as going up the stairs to (say) 4th floor. Reaching 1st, 2nd or 3rd floor doesn't accomplish the goal, only reaching 4th floor. Each intermediate floor is just a part of the whole goal
In the same way, your goal here is to have a questionnaire completed. Each step is intermediate, ...
If you're doing user-centered design, ordering should also be based on user needs coming out of the research, e.g., are most users looking to access the checklists function more than the others? It might make sense for checklists to be first in nav, then. Hard to generalize too much here.
You theorize "the best order is by importance" -- perhaps, but "...
I don't think there's a correct answer other than test validation. I'd suggest you run a multivariate test and get your own conclusions. However, I think you can start with ergonomics considering the physical dimension of devices and how users interact with such devices. In that scenario, you may find different results even on same brands. Take a look below:
My two cents: 'Home' is nearly always on the left to anchor navigation. That's where users have been trained to look for it since the early days of web design.
Other than that, which content areas do you want/expect your users to spend most of their time? 'Checklists?' If so, that should probably be placed next after 'Home.'
'Search' and 'Favorites' are ...
First of all, lets understand the use of tabs and navigation drawer.
Tabs are used when you wish to display data of similar importance simultaneously to user. while navigation drawer is used to keep data that is important but not very related to each other.
SO it is better if you first group your information in a related pattern.Then put the most un related ...
You've done a great job, Dan, with the UX, UI and developing a responsive web app. The desktop-view hierarchy works well and is intuitive. It was promising to read your first sentence that claims that you built this as a mobile-first responsive web app. But it appears you didn't fully solve the mobile platform first. (poke in your ribs)
Using a bottom nav ...
Combining a few rules of thumb:
Bottom navigation should persist in all views which can be accessed directly from it. So it should persist on the archive list page. The article view is a level deeper, and does not necessarily need the bottom nav.
stacked nav bars take up valuable real estate and lead to misclicks thanks to crowding click targets, so they ...