1

Here's the situation:

  • At the bottom of all pages, there is a NEXT button that links to the next Page.
  • There is a series of tabs, of which the tabbed content can be exceptionally long.
  • So, on Tabbed pages, the NEXT button will link to the next tab in the series, instead of the next page. (until the final tab, the NEXT button will then link to the next page)
  • NEXT button does not explicitly say "Next tab" or "Next page".
  • Auto-scrolling is not an option

Question is: when linking to the next tab, should the view refresh at the top of the page. Or should the view refresh at the top of the tabs?

See my attached example. I have been advocating Option 1 (Refresh at top of page), but i am encountering a lot of internal pushback.

Anyone have any way to chop this argument apart? Or perhaps just weigh in on other approaches?

Much appreciated. Pageview wireframes

Improve this question
2
  • 1
    Did you consider the case, say on small laptops or tablets, where the tabs will appear below the fold?
    – Izhaki
    Commented Aug 31, 2015 at 21:24
  • Thank you for asking. Yes I have considered that, and it is not an issue because the tabs are accordions in tablet/mobile views. In that sense they are already sequential.
    – mrmac
    Commented Aug 31, 2015 at 21:49

2 Answers 2

Reset to default
1

Mobile first (even for desktop)

I'd urge you to take a mobile-first approach, even if this interface will never be presented on a mobile device.

Mobile, in this context, means 'a small screen' (and not 'on the go'), and basically means that you work the design bottom-up, rather than top-down.

In other words, you start with atomic content/actions/use cases, group them together (into so called 'sub-views'), and then start composing sub-views into bigger views.

In your case

I think that it is clear by your design that the tabs and the next button are grouped; once users are interested in the tabs area, it seems reasonable for the interest to remain on that subview.

The problem with your design

Not scalable

Scalability wise, I wonder where will you put error messages if such may need to be shown?

Consider vertical nav

Your has 3 levels of hierarchy (Section/Page/Tab) and it seems you have chosen the same strategy for each level, whereas in practice mixing things up a bit could help (see more in this question).

Consider flex layout

Another common problem with your design is that the interface is potentially too high to fit into the display this means that users either miss what's on top, or what's on the bottom.

In the days of desktop there where far less of these issues because layout options were far more advance than web page layouts. Recently flex layout were introduced and are now supported by all modern browsers (ExtJS, by the way, offered such layout for years now).

What flex layout allows you to do is to determine the scrollable areas of the screen, which means that neither the tabs, nor the next button will move on scroll.

Improve this answer
3
  • Izhaki, i greatly appreciate the length of your advice here. Although the mobile view has no problems with this because the Tabs => Accordions for mobile. Accordions being sequential (and all closed on initial page view), the NEXT button is simply at the bottom and leads to the next page. So basically, this is a Desktop-specific problem. Although, i'll put more thought into your ideas on layouts. I'm sure our overall architecture has us cornered into this situation... the project's history is rife with IA requirements that make me very sad.
    – mrmac
    Commented Aug 31, 2015 at 22:01
  • 1
    @mrmac And is it technical limitations that prevent you from using accordion on desktop?
    – Izhaki
    Commented Aug 31, 2015 at 22:03
  • Right. I see where you are going with this. =]
    – mrmac
    Commented Aug 31, 2015 at 22:04
2

Since the user has already read the top of the page, why should he/she get to see that part again?

Also, the button says "Next tab". So the user expects to see the next tab rather than the next page.

When the button says "Next page", it should jump to the top of the next page, because the user hasn't seen that content yet, right?

Improve this answer
4
  • Sorry, i may not have been clear. We are not labeling the NEXT button with "Page" or "Tab". Simply a Title for the next piece of content-- page or tab. Top of page may be irrelevant, so thats helpful. My opinion is that to keep it consistent it would just refresh the page on selection of NEXT link, whether it be a new tab or not. But im so close to this its hard to untangle at this point.
    – mrmac
    Commented Aug 31, 2015 at 19:32
  • 1
    But isn't it more user friendly to label them individually? Consistency doesn't always have to be user friendly :-)
    – Max de Mooij
    Commented Aug 31, 2015 at 20:26
  • 2
    @mrmac Consistency in its origin meant to reduce cognitive load (patterns are good), but there are many instances where being consistent actually increases cognitive load, and consistency has many dimensions (being consistent in one place will break consistency in another). Consistency is a proxy of cognitive load - it is the latter that really matters and the one you should always keep in mind.
    – Izhaki
    Commented Aug 31, 2015 at 21:22
  • Thank you. Both of your comments have been very helpful.
    – mrmac
    Commented Aug 31, 2015 at 21:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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