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
What do you think would be the better way of you doing it?
-
3Please 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, 2015 at 12:34
-
1i would nest the 5 tabs between the prev and next buttons. i think the flow would make it easier....– Stanley VMOct 23, 2015 at 12:41
-
2Scrolling 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.– JeromeROct 23, 2015 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.– Roux MartinOct 23, 2015 at 15:47
-
1Tabs 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?– nightningOct 23, 2015 at 16:10
Add a comment
|
2 Answers
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.
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
