0

I have some doubts about my project, I am making a small hybrid app, so far everything I am doing without PhoneGap, directly with PHP, HTML5, CSS3 and JavaScript on my local server. Then I will use PhoneGap to turn my project into an application.

In my application there is a navbar with 3 tabs, my question is about the second tab, I explain how I imagine the structure should be:

When the user clicks on the second tab for the first time, the user should see a list, such as a menu of options:

Option A
Option B
Option C

When clicking on any of those options on the same screen (tab 2) should change the "view" and display the suboptions of the chosen option, the structure is the following. For example, if you choose "Option A", you will see something like this:

Photo1
Name1
Link1

Photo2
First Name2
Link2

...

PhotoN
NameN
LinkN

I guess it would be great to do "pagination" since it is likely that each option has many suboptions and I do not want to saturate the memory.

Finally, when clicking on some of the Links, we will assume "Link1", in the same tab 2 I would like to see all the complete information about that element in the list. Obviously all that information is in a database. My question is:

What is the best way to do the navigation of the interface I just raised?

I was thinking of making a "container" div on tab 2 and changing its DOM, but then I wonder how I will manage the "back" action - ie the "return" action and obviously the user will think he/she can return by pressing the Back button (in case of Android).

I must clarify that I am not using any framework like ionic, react or angular. ALl is from scratch, the only thing I use is jQuery.

Thanks for reading and please forgive my horrible way to write english.

closed as off-topic by Devin, Mayo, JonW Jan 16 '17 at 9:31

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Devin, Mayo, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

1

If I understand everything correctly I want to suggest a bottom navbar for your option ABC. Bottom navbars should contain 3 to 5 elements.

As for the rest of your content... I think a list view might work best. One you can also find on Settings on your phone. If I understand correctly you could have a lot of items with a lot of things under it. A new page with a clear button at the top to go back a step might work best.

  • It is not about the scheme, it's about the "navigation system" no matter how items are designed – alessadro Jan 15 '17 at 23:28
  • I don't know what you mean by scheme and system, but I just suggested a navigational structure that I thought might suit best as I thought that was what you asked for. – Paul van den Dool Jan 16 '17 at 6:23
  • If this is a manner of implementation, your on the wrong stack. Try Stackoverflow instead. – Paul van den Dool Jan 16 '17 at 7:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.