1

I wish to implement an expandable list interface in Android. To show that the list item expands on clicking I have considered the following 2 options:

  1. A plus sign which changes to minus when the list expands.

    enter image description here

  2. Rightward pointing arrow which rotates downwards as the list expands.

    enter image description here

All the submenu items are clickable for the purpose of sending messages. Which of the two is more apt in this case? What are the pros and cons for each?

Edit: The green arrows are temporary. They will be replaced by clearer ones.

  • If you choose to go with the second version (arrow) then you'll need to redo that arrow image. Green on green isn't really ideal for clarity. Both states look exactly the same from a distance. – JonW Aug 11 '14 at 8:38
  • I'm sorry, I should have mentioned this in the question. The images are just representations. I will use clearer images. – Gaurav Bhor Aug 11 '14 at 8:39
4

If the question is taken at face value, i.e. strictly a choice between the →/↓ arrows or the +/- signs, then I suggest using arrows.

Arrows denote the direction and a sense of movement to another place or view.

+/- signs could be construed as meaning add / remove. For example it looks like I can add a manufacturer, or add an Extra item. While, the minus action might be more obvious after having tried to press the plus.

However, I would recommend looking at alternatives. I would prefer to be able to touch any part of an item in order to expand it, whereas the use of the icon suggests that only touching the icon will expand or collapse. It would be better to indicate that the whole row is interactive content - inline with the idea that the content is the interface.

Having said that, you do commonly see both methods (arrows or +/-) on desktop or mobile, so users are unlikely to be entirely stumped by what they see! If you search Google images for mobile accordion - you'll see plenty of examples.

An arrow to the right can seem to indicate moving to a different nested screen, rather than expanding an item in place which I think is the accordion style you are looking for.

Moving the icons to the left rather than the right would hint more to the action being related to the item itself rather than an onward or progressive action based on the item. For example a +/- to the left of the title gives more of an idea that you will expand the item rather than create a new item.

For what it's worth (which is at least a little inspiration), I quite like this example of an informative accordian style from dribbble, not least because 'it's more than just a list':

enter image description here

  • I had considered the idea of keeping the entire list-item clickable. Since, I wish to 'send a new message' from the dropdown that follows, won't the plus sign seem more appropriate? – Gaurav Bhor Aug 11 '14 at 9:54
  • If you're going to be 'sending messages' from items in the list I would make that call to action clear in it's own right, but not confuse it with the action of expanding an item in the list. They are two entirely different intents. – Roger Attrill Aug 11 '14 at 10:17
  • I think I should refine my question, thanks for bringing it to notice. Using the icon, I wish to imply that there is a drop down + new messages can be sent from inside. Plus, arrow or any other icon which suits the purpose. What would you suggest? – Gaurav Bhor Aug 11 '14 at 11:36

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.