43

Which way are arrows supposed to point on a tabbed web page? Towards the selection or towards the body of the selection? An awkward scenario seems to arise when a user selects another item and the arrow moves to point at nothing in particular when the arrow is pointing to the body. Is there a best practice?

enter image description here

  • 6
    I don't know about best practices. I feel like option A is more common, but both cases communicate very clearly in my opinion. – Tim FitzGerald Sep 23 '14 at 20:06
  • 7
    This is mostly a style issue. As long as the tab 'looks' active, it really doesn't matter. – DA01 Sep 23 '14 at 22:31
  • 59
    You don't need an arrow if you can't figure out which way to point it. – Mazura Sep 24 '14 at 7:03
  • 11
    Look at the top of the page. This website itself uses an arrow pointing to the currently selected option in the menu. You want a better example than this? – Ismael Miguel Sep 24 '14 at 8:17
  • 2
    Contrary to Tim, I think option B makes more sense because the arrow is always pointing to one of the options. In option A, only item 1's arrow points to the page title, while item 4's arrow will point to arbitrary white space in the page content. – SNag Sep 24 '14 at 10:40

11 Answers 11

23

Which relationship do you want to emphasize? Use that to inform your decision. The down arrow in your image indicates a relationship of "is title of" or "is detailed by" or even "has child", whereas the up arrow indicates a relationship of "is detail of" or "has title" or even "has parent".

I suspect the down arrow is more common and thus familiar to more users. In CSS selectors, for example, the ">" operator is for the "has-child" relationship (points from parent to child). Is your user domain consumers? Then I would consider the down arrow. Only for IT or math domains/users have I frequently seen an arrow point from child/leaf back to parent/owner.

On the other hand, especially if your domain is new or unusual, you could remove the directional question with a nondirectional or bidirectional solution.

Spotify Help has a nondirectional highlight between the selection and body: https://support.spotify.com/us/

enter image description here

Essentially:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    The up-arrow version (with styling as shown in the question) evokes a callout, a specific type of "is detail of". I think those are the most common when arrows are used instead of tab styling or underlines – Izkata Sep 28 '14 at 8:13
21

Adding to Will's answer, if you're looking for a non directional highlight, here is a great example from Google's material Design

Material design guidelines on using Tabs

The tab corresponding to the visible content is highlighted.

Tabs are grouped together and the group of tabs are in turn connected with their content.

Keeping tabs adjacent to their content helps maintain the relationship between the two, as too great a separation can introduce ambiguity

http://www.google.com/design/spec/components/tabs.html#

enter image description here

  • 3
    You shouldn't say "above" because the order of answers can change, for example yours is now at the top. – Ben Sep 24 '14 at 13:41
  • 3
    Downvoting this since this is not an answer but an example of an alternate design. – Mervin Johnsingh Sep 24 '14 at 14:42
  • 1
    @MervinJohnsingh my answer is to highlight that the arrows doesn't always have to point somewhere if you are purely trying to display tabbed content and highlight current tab that is in focus. Will explained whether you need arrows and I supported his by quoting a trust worthy source. Also, OP asked for a best practice (which may well be a totally different option from what he's suggested) and I don't know about best practices but just quoted widely adopted design practice. – Balaji Natarajan Sep 24 '14 at 15:40
  • Valid point, but then your original response was just to quote another example without highlighting how that works. Quoting another example without explaining why that design is better just doesnt answer the question and doesnt help the OP in making an uniform decision. I like the change you made and the reference and hence I upvoted your answer now. – Mervin Johnsingh Sep 24 '14 at 15:42
  • @Mervin I believe SE guidelines do allow answers that add additional details relevant to the question even if they don't respond to the question, when other answers already provide a response. Especially when such details can't fit in a comment. So this is OK and doesn't deserve a downvote. The quality of this answer is good. – ADTC Sep 25 '14 at 23:32
12

They both look wrong and unecessary. For a tabbed interface the colour of the tab should be the colour of the selected page.

  • 2
    Is this just an opinion, or can you cite some references? – a CVn Sep 24 '14 at 20:07
  • 2
    That's how tabbed interfaces have been designed since they were invented (probably in the late 80s). The tabbed interface was a metaphor for file index cards which were common at the time. – PhillipW Sep 25 '14 at 8:00
  • @PhillipW: And those (physical) file index cards commonly change their colour when looking at the respective card? – O. R. Mapper Sep 25 '14 at 11:40
  • 1
    @O.R. Yes, because they are brought to the front and hence now receive and reflect the most light, the other tabs are further back and are in shadow. See the latter part of Mervin's answer. – RedGrittyBrick Sep 25 '14 at 13:17
  • @RedGrittyBrick: Physical file index cards do not generally come "to the front"; rather, they are removed altogether from the list of tabs (and later sorted back to their original place). Alternatively, the pages before the interesting file index card are temporarily removed. I do not disagree that coloring the selected tab the same as its page is one viable way of highlighting the selection, but in my opinion, it has nothing to do with the original file index card metaphor. – O. R. Mapper Sep 25 '14 at 13:25
12

My recommendation would be for option A as you are providing a visual indicator from the tab text to the content below stating that this is the highlighted tab and the related content for it is below as shown in the screenshot below

enter image description here

This will hold good even if you move on to the other tabs as the users will scan the content from left to right and with the arrow being the visual indicator, they then scan down.

That said, if you are concerned about the tab arrow not pointing to other content, you can look at alternate tab designs which use colors to highlight the selected tab allowing the user to make a visual connection easily

enter image description here

enter image description here

enter image description here

Hence your tab should visually indicate where you are at any point of time and hence the focus on whether to use an arrow or color should be your secondary concern and the focus should be on making it easy for the user to understand where he is currently. To quote this article from uxbooth

When planning navigation, it’s easy to focus on the “Where can you go” part of the equation and totally forget about explaining where the user currently is. It’s very important to include both the current location as well as the possible destinations. It’s much more difficult to navigate with no relative location.

Well designed tabs clearly indicate current location with active states, or visual appearances that set them apart from inactive tabs. Active tabs can be highlighted by color (or lack thereof), size, and font-weight among other things.

Also to quote this article from usablity geek

The active tab should appear connected to the content area: So as to reinforce the real-life tab metaphor, you must make the active tab appear as being connected with the page containing its content.

Hence the focus should be on establishing a visual connection for the user

  • My thoughts exactly. Although, pointing doesn't add much to the UX. But if you need an arrow, it would make sense to point it towards the content, instead of itself. It dictates somewhat of a relationship between the selected tab and its content. – harsimranb Sep 25 '14 at 19:08
  • An upward arrow would imply that the list of tabs was something like a radio-button collection that was attached to the content below; clicking a tab would not switch to show the content associated with that tab, but would rather redefine that tab to be associated with the current content. Such behavior would be unusual in a "normal" user interface, but might conceivably make sense in the context of a "user interface editor". – supercat Sep 25 '14 at 23:37
8

If you are going to use a skeuomorph you should avoid unnecessary and baroque decoration

Here's some originals from my current desktop (the wooden one) to help us understand what it is we are trying to represent to the user:

enter image description here enter image description here enter image description here

Arrows don't add anything to this visual metaphor, they only serve to distract and confuse.

As an example of this deleterious effect, I cite the confusion that motivated your question.

6

Interface design, historically, was based on physical things from the real world in order to increase familiarity for the user, and hence trivially communicate how the interface should be expected to work through analogy. This is why we call things like "folder", "desktop", etc, by those names. In a tabbed interface, the analogy is to a folder with tabs, where the tabs tell you what is in the folder. Usually the tabs are stuck onto the folder such that the tab protrudes into the folder as below:

folder tabs

Applications that use tabs usually reflect this relationship of "this content belongs under this tab" by making the active tab more prominent and the other tabs less prominent (ie, "in the background"):

application tabs

In your case, the first example illustrates the "real world" analogy best, the arrows should point down, just as the plastic tab would have a bit protruding downward into the content. And though it is non-standard (and hence unexpected and perhaps could lead to confusion for some users) the second example is still OK, but not optimal. I would go with the first option, or even a modification of it, kind of like this:

enter image description here

Notice the underlining bar for all tabs becomes the color of the active tab.

  • Note that for some 20 years, "folders" were often called "directories", if the concept even existed at all. (In the Microsoft world, directories were introduced with DOS 2.0; DOS 1.x only supported a single directory per physical storage media, and the only physical storage media it supported was floppy disks holding less than 200 KB per disk.) Again in the Microsoft world, it was Windows 95 that introduced the term "folder". – a CVn Sep 24 '14 at 20:10
5

Option B is breaking the horizontal line between tabs and content. #it just feels unpleasant.

Option A is a complete menu plus an arrow dictating the flow direction telling you to read the content, feels good.

Maybe try another option C without arrows, but A is good.

  • 1
    This works in the example posted, but when the other items are selected, the arrow moves pointing to other sections of the page. – Aaron Benjamin Sep 24 '14 at 1:32
  • @AaronBenjamin The arrow would point to another section of a different page, not the same page, so it should not be that much of an issue. – nwp Sep 24 '14 at 8:38
  • I completely agree that Option B looks odd. Option A I think is actually really nice and visual. – Ian Sep 25 '14 at 12:27
2

A "down" arrow points to the headline, which directs a user's eyes and attention to follow it toward the text below. If your goal is to get them to read the text, that's a good visual cue.

The "up" arrow has the opposite effect, pulling the reader's eye back to the nav bar. Option 2 has me constantly going back to read "Item" instead of the headline or copy below. That's probably not what you want.

As for having the arrow point at "nothing in particular" that's a valid point. Using an "up" arrow instead doesn't really seem to solve the problem, for the reason described above. It still might be preferable to point downward, if not directly at the headline, at least toward the body text.

You could also use highlighting or contrast/color as already suggested to simply indicate the "active" tab.

  • 1
    right... but when the arrow is on Item 3 for example... then the arrow is pointing at nothing... – Aaron Benjamin Sep 24 '14 at 1:33
  • I addressed that - it's not pointing at "nothing" it's pointing toward the article text. Maybe not the headline, but still in the desired direction. – mc01 Sep 24 '14 at 15:21
2

I think the core problem is the arrow or triangle.

Most important is for the tab to stand out from its fellows as the selected tab.

Beyond that is the principle of connection to the content.

One way is to have the content background colour seamlessly flow onto the tab, as shown in Mervin Johnsingh's examples.

If you must have a different coloured protrusion at the bottom of the tab, I suggest you use a small rectangle rather than a triangle. It still emphasises connection as if a tab were taped to the top of the page but gets away from the directional confusion of the arrow.

1

One interpretation of the arrow up in your rendering (alternative B) is that the body of the text is like a speech-bubble. This makes it look like it comes from the header, which feels more natural than an arrow in my opinion. But as many have said, it is probably better to give the tab the same color as the content in that case.

0

Arrow pointing down is the right way.

I am sure the focus here was the arrow direction, I am just covering related points:
There are a couple of incorrect usages in this sample. The top rectangles are like switches with bulbs embedded inside them. When you press, they should light up. Here, they become dark. The untouched buttons are brighter. Maybe suitable for a page about blackholes in astronomy.

Page title font size is somehow not fitting, between the title and body. There is no progressiveness.

The reason for the arrow direction is, they are like pointers, think street signs in old towns. They point to where the real thing is.

  • In this case the arrows aren't directional pointing to "the next" step. They're simply used to orient a user within the navigation. That said, pointing up would be correct. – Aaron Benjamin Oct 2 '14 at 0:53

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.