0

If I have list and each item has an expand button, should the expand button be on the right or left of the text?

If it's to the left of the text, then all the buttons will align, but if it's to the right of the text, and one item is long and another short, will it be difficult for the user to locate the button?

To the left:

  • btn Short Name
  • btn A Longer Name
  • btn Name
  • btn A Really Really Long Name

or

To the Right:

  • Short Name btn
  • A Longer Name btn
  • Name btn
  • A Really Really Long Name btn
Improve this question
1
  • 2
    Just remember, whichever you use, use it consistently. That will be far more important than which one.
    – DasBeasto
    Mar 10, 2016 at 21:04

2 Answers 2

Reset to default
4

to the right

users won't know what to expand until they read it, so the logical option is to add the button AFTER the text (hence, to the right). To avoid having rows with very short text and then rows with heaps of text, you can limit it in columns so you'll have all buttons aligned.

however...

the above answer really applies to general buttons. If you want to use a expand button, it's because you might have rows with lots of content and therefore need it. So, you should only use this when content is too long (and short text rows shouldn't have any button, of course). So, you might want to consider a more common approach, like a "expand" link right after the text that needs to be expanded. Like so:

this is a very long text. this is a very long text. this is a very long text. 
this is a very long text. this is a very long text. this is a very long text. 
this is a very long text. this is a very .... [expand]

In short: if possible, the best option would be no button and right after the text ends

Improve this answer
2
  • Thanks for the input, but in this case, it will reveal a <div> underneath the button, so each will need a button because each has content to be revealed. Does that make sense?
    – Crafting Demon
    Mar 10, 2016 at 20:07
  • then add the button for all of them and place it on the right side, I'm just explaining what should happen if content is too small. So basically, what you need is to restrict width, like 70/30 or 80/20 of container and you'll be set
    – Devin
    Mar 10, 2016 at 22:54
0

Users are likely to be familiar with both

[+] lorem ipsum
[+] dolor sit amet
[-] consectetur adipiscing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua

and

  • lorem ipsum more...
  • dolor sit amet more...
  • consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. less...

So it probably depends if the expansion is tree-like or not.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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