website design - Which way do arrows point on a tabbed web page?

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?

Answer

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/

Essentially:

^{download bmml source – Wireframes created with Balsamiq Mockups}