6

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?

Improve this question
1
  • Looks like you forgot to attach your image. – Eric Apr 8 '13 at 13:42
6

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

Improve this answer
2
  • 5
    +/- 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. – Bruno Bronosky Feb 13 '14 at 6:17
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.

Improve this answer
1
  • 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. – Bruno Bronosky Feb 13 '14 at 6:13

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.