There are many ways to navigate on an app or website. Most are dealing with a few pages, but I am looking for a way to navigate amongst several hundreds of pages.
One of the main problem is to find a way to navigate using a small mobile phone.
What do you think about this way to navigate?
People often say best in questions and there is never a best answer. No one knows your application’s requirements better than you and if you do not then no one can help.
In situations like this, simple questions get simple results. If you are more specific about requirements then you are more likely to get more relevant responses.
The link is a forum mockup example. No one knows better than a forum member like you what you as visitor prefer. The user is the judge of what is best way. I just provide a mockup what I think would work for me, but my question was what you think is best for you.
Is the example good enough? Or could it be better or simpler for you?
The fixed side menu takes up too much of the screen on my old iphone5.
It would be much better if the side menu collapsed to a hamburger at the top and out of the way when not in use.
The menu in the example is limited, rigid and inflexible.
Google’s solution to a search is to reduce the matched results when a user supplies more information. Drilling down I believe is the technical expression.
You may be interested in this search which uses Ajax. Source code supplied:
Of course. A search function is on the to-do-list. But that is a complement when you know what you search for. A side menu or hamburger menu is a short cut of what you can search. They works side by side.
I notice that there is always a horizontal scroll bar regardless of the window width which looks as though it is caused by your additional vertical scroll bar.
Just from a personal point of view, I dislike having icons with no words, leaving me to guess what the item is.
Agreed.
It’s also an accessibility fail.
[off-topic]
Yes, this is a bad UI mistake and makes it very hard for people to use properly. Indeed you have to scroll to the right before the inner scrollbar is revealed so that you can scroll downwards.
When you use vw units (100vw) then that includes a scroll bar width and makes your inner element too wide too fit. In most cases depending on situation you can omit the width or use a 100% width.
You also have too many fixed 100vh heights for nested elements resulting in too many scrollbars. You really only want to scroll with the main viewport vertical scrollbar and also eliminate all horizontal scrollbars (generally not by hiding the overflow but by controlling the content properly so that it doesn’t overflow).
Also because you use 100vh height on your mainbox you immediately get a vertical scrollbar when there is no content because you already have a header above that mainbox that already takes up some of the height of the viewport. Your mainbox then goes 100vh from where it starts resulting in the end of mainbox residing a distance under the viewport.
You need to construct it so that the header and mainbox are part of the same flexbox element that resides in a min-height:100vh parent and that allows vertical scrolling back in the hands of the main viewport scrollbar.
It would be better instead of saying “best” to write out your criteria for what you are trying to achieve. That would help you and us evaluate the problem.
I clicked on your link but it was taking too long to resolve so I gave up.
Thanks everybody for your thoughts. Some of them I have addressed in this link:
Better or worse?
The site is up and running, but it is a http with port 3030, so it may be prohibited by some reasons.
Whatever the reason, I’m unable to access it, so I’m afraid I can offer no comment on your improvements. Hopefully others will.
It loads for me. It looks nice and clean and you’ve fixed the responsive issues. Not sure I can say much more than that.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
