0

I'm trying to display informations from a Json object in 5 tabs at a time with two buttons to go to the next or previous 5 tabs

enter image description here

What do you think would be the better way of you doing it?

  • 3
    Please give more details here. "5 tabs at a time?" What data are you displaying? What is wrong with the design you have? We need to have an actual problem that we can solve, so can you describe what it is that is failing and we'll help with a solution. – JonW Oct 23 '15 at 12:34
  • 1
    i would nest the 5 tabs between the prev and next buttons. i think the flow would make it easier.... – Stanley VM Oct 23 '15 at 12:41
  • 2
    Scrolling tabs are a bad idea unless the sequence is completely predictable for every user, such as January, February, March, or 1, 2, 3, or A, B, C. – JeromeR Oct 23 '15 at 14:46
  • There just isn't enough data here to provide the correct solution. Why are the tabs grouped in 5s? What sort of data is on the tabs? Is there an upper limit to the number of tabs? Why would they move in blocks instead of one at a time?... Too many questions to answer before settling with either tabs or tab groups without even thinking of how they might be moved about. – Andrew Martin Oct 23 '15 at 15:47
  • 1
    Tabs are typically used when you have a limited number of groups (8 or fewer). It sounds like in your case you're dealing with a lot more groups then that. Why don't you tell us more about your context. What information are you trying to show? What are the categories/groups you're dealing with? – nightning Oct 23 '15 at 16:10
1

The most common pattern I've seen is where the arrows are to the right and left of the tabs. Arrows go away if one is at the beginning of the list or at the end.

User should be able to tap/click on the arrows and swiping should be allowed as well for touch enabled devices.

enter image description here

| improve this answer | |
0

It seems that you have hierarchical information here: A number of objects where each object consists of 5 datapoints.

Your UX should reflect this, for example by having two navigations. You should make clear which navigation is lower in the hierarchie. This is often done by placing the lower one below or inside the higher one.

Make sure that the position in the lower navigation is remembered when switching in the higher navigation. Example: When I am in tab 2 of object a and I switch to object b then tab 4 and than back to object a, I want to come out directly on object a tab 2 not 4.

Two layers of tabs would be an obvious but ugly example. The information requested in the comments is needed to come up with something prettier

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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