5

I designed a site with several boxes (which located one under the other). Each box contains information about a specific topic- a title (the name of the subject) and a text (the explanation of this subject).

In the initial state, the box shows only the subject's title. Clicking on the box expands the explanation text (with a slide affect).

How to illustrate this box as an expandable which contains also the explanation of the box's title subject?

I want this to be intuitive and that people will immediately understand that all they need to do to get the explanation is to click on the box.

Before the click:

Before expanding the box

After the click:

After expanding the box

Improve this question
1
  • 2
    Why do you want to do this?
    – Veedrac
    Apr 18, 2017 at 14:44

4 Answers 4

Reset to default
17

There are different ways that you could design this.

Demonstration

  • 1st option has a drawback: The user might think that they are directed to another page
  • 2nd option more intuitive than the others. The icon could also be at the bottom right corner
  • 3rd option has also a drawback: The user might think that the box is going to expand to the whole screen

In my opinion, what is the most important are the cursor events. Meaning, when the user hovers over the clickable element, the cursor to change from "arrow" to "hand".

Improve this answer
7
  • I would suggest the middle option. While it makes sense once people see it, the trick is training them so they know it's there.
    – Rick Henderson
    Apr 18, 2017 at 13:52
  • 20
    I also pick the second one. The third one look like it will make the box go fullscreen.
    – Cave Johnson
    Apr 18, 2017 at 16:07
  • 2
    You might also consider putting the text/icon at the bottom of the frame.
    – TripeHound
    Apr 19, 2017 at 7:40
  • 4
    Why not just write "Expand" instead of "Read more"?
    – KlaymenDK
    Apr 19, 2017 at 8:08
  • 4
    While I like the basic idea of the second option, I find the placement of the down-arrow a bit unusual. I'd expect it horizontally centered on the bottom of the rectangle, where the text will appear once clicked. For bonus points, show half a line of text above that arrow, cut off horizontally. This makes it clear that there is more text than shown, and that the arrow button relates to that text.
    – MSalters
    Apr 19, 2017 at 10:53
10

Consider displaying the first line of "content" text in the display, along with a link to read more.

This will give the user extra context to decide whether they actually want to read more, and will make it very obvious that there is more to read.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
3
  • 1
    I think some kind of chevron would be better than "Read more..." for the reason Dimitra mentioned.
    – user253751
    Apr 18, 2017 at 23:40
  • 2
    Amazon (example picked at random) combine "Read more" with a leading chevron, which changes to "Read less" and the opposite chevron when expanded. This doesn't "feel" like it will take you to a new page (although that may be because I now know it doesn't).
    – TripeHound
    Apr 19, 2017 at 7:37
  • 3
    Why not just write "Expand" instead of "Read more"?
    – KlaymenDK
    Apr 19, 2017 at 8:08
6

Solution 1:

You can implement the + icon next to the expandable box. http://fontawesome.io/icon/plus-square-o/

Image:

enter image description here

Advantages:

  • This will be useful illustration for the users as the + known as his expands attribute.

  • Another advantage is that it will keep your site clean look.

  • clickable as you wish

Solution 2:

Use Facebook See More trick.

Consider change the text to Expand when expanding, and Collapse while minimizing.

Image:

see_more_trick

Advantages:

  • This user experience is already known by many users across the web.

  • It keep it simple.

  • clickable as you wish

Improve this answer
5
  • Can you give more details about why would this solution be appropriate?
    – Joao Carvalho
    Apr 18, 2017 at 11:31
  • 18
    @nivhanin The first solution looks more like Hey, click here to add a new box
    – Weedoze
    Apr 18, 2017 at 14:21
  • Yes, maybe, depends on site subject and content.
    – nivhanin
    Apr 18, 2017 at 17:40
  • I like See More more than the other suggested solutions for the simple reason it doesn't require you to refocus. You've read as much as you can see, and then the See More link is right where your eyes and your cursor is, allowing you to see more instead of having to search for some weirdly placed expand arrow.
    – GiantCowFilms
    Apr 18, 2017 at 19:50
  • I can never remember whether it's "See More" or "Continue Reading" that takes me to a different page.
    – Mark
    Apr 18, 2017 at 22:23
4

My favorite approach to signaling this kind of affordance is a downward facing arrow.

borrowed from the web, ignore the red text XD Exandable

This is a good signifier that something will be shown below the arrow when it is clicked.

While using something like a "+" is a common design pattern, it's meaning is more complex. You're sure to draw the user's attention and get a click, but the result might be unexpected.

I would steer away from "Read More". Unless you're previewing a bit of the body text already, this could be confusing. Read more of what? Is this an article? There isn't enough context for it to make sense.

Good Luck!!

btw - Not sure if you're already doing it, but research shows left justified text is more readable in most scenarios.

UX Stack Exchange - Left Alignment

NN/G Accordions

Improve this answer
1

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.