I'm building a webApp with mobile support, and I'm facing a big issue when dealing with mobile screen and it's size limitations.
It's important to note this webApp isn't about a single company. It's a multicompany service, this is why on the screen I'll show below, there is a big header with the company name (Model) and it's category (shoes - dress - shirt).
Currently my webApp is an e-commerce project, some of the requeriments is to have a search function within the list of products so I have these main objects I need to keep:
- Search field, to search for products;
- FAB button (or other method) to show the shopping cart (once user clicks on it, it animates to fill the entire screen with the shopping cart, checkout methods, etc..);
- Main menu, to navigate on the webApp;
The problem is, these fields are either conflicting a lot with each other, taking too much attention away from the product, or being too small so the interaction is even harder. This is an screen example of the app:
And this is a basic menu (which I still didn't placed on the screen, but will be fixed at the top):
The big tab and header is just at the beggining, once the user scroll down, they go up and don't fix at the top.
Why am I using this tab?
I'm using it with those 3 links (products, contact, info) because it's a multi-store webapp, it's not about a single company.
So instead if I had it in the main-menu, the user wouldn't be able to access those pages until he selects a company and then the menu would appear. By putting this tab, I can show users how to access the company info, contact and products.
As you can see, if I keep both elements: menu, search and FAB cart, they start to take too much space and conflict, specially when user opens up the keyboard to type on search.
Note: All those 3 elements must be visible all the time, or at least in a obvious/very easy place to access.
What I tought
I was planning to mix the search field with the menu, once the user clicks to search, the field opens up to type. But I tought it was going to be very compressed as weel. Unless I remove the page title, which will take away the information about where the user is.
I'm in a huge conflict on what to do in this case and I'm running out of options/ideas. What do you guys think?