Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

A responsive approach has been taken to the current project I am working on. It is a corporate website with 3 levels of navigation. Attached is an example of the solution I have come up with for drop down navigation on the desktop site for mobile.

enter image description here

Accessing second level is done via clicking on the arrow which expands to reveal second level pages. However, usually when I see this type of navigation clicking on a single row will lead to that particular page. Is there any usability issues with having the arrow expand to reveal second level and by clicking on "landing page" text it leads you to that page?

share|improve this question
    
Looks like you forgot to attach your image. –  Eric Apr 8 '13 at 13:42
add comment

2 Answers 2

The usability issue is that your arrows point off-screen (right), which is a convention for indicating that content will scroll from right-to-left, as a transition to a different page than the current one.

share|improve this answer
    
I totally agree. The "right pointing chevron" paradigm comes from the computer interface where such a thing would be on the LEFT. Putting it on the RIGHT communicates that a new view is going to side in from the right. However, putting that vertical line separator does indicate that there are 2 separate actions. It would just be better to use DOWN and UP chevrons for clarity. –  Richard Bronosky Feb 13 at 6:13
add comment

If you have a separator line between the "Landing page" text and the chevron (arrow), it implies that selecting each performs a different task, which is fine.

An app that I did usability testing on used this separation, and it was clear to those that I tested that they performed different actions. Interestingly, when I used the iOS detail disclosure button (which is supposedly the iOS way of handling things like this), most users tested did not understand how to use it.

However on iOS, a right pointing chevron means that it will link to another page, not that it will expand the selection. I would opt either for (+)/(-) buttons; left/down chevrons; or up/down chevrons. With (+)/(-) buttons, it may not be necessary to separate them with a vertical line as they already show affordance without it.

Example:
enter image description here

share|improve this answer
4  
+/- could be construed as add/delete. The down/up chevrons would avoid this potential confusion. –  poke Apr 8 '13 at 18:34
    
I dismissed @poke's comment at first before my brain could process that he said UP and DOWN chevrons. That is the correct answer! do not use right pointing arrows on the right side of your title. Also, don't use a down pointing arrow when the content is expanded. You are blending desktop and mobile paradigms and it falls apart. –  Richard Bronosky Feb 13 at 6:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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