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

  • 2
    Why do you want to do this? – Veedrac Apr 18 '17 at 14:44
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".

  • 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 '17 at 13:52
  • 20
    I also pick the second one. The third one look like it will make the box go fullscreen. – Kodos Johnson Apr 18 '17 at 16:07
  • 2
    You might also consider putting the text/icon at the bottom of the frame. – TripeHound Apr 19 '17 at 7:40
  • 4
    Why not just write "Expand" instead of "Read more"? – KlaymenDK Apr 19 '17 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 '17 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

  • 1
    I think some kind of chevron would be better than "Read more..." for the reason Dimitra mentioned. – user253751 Apr 18 '17 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 '17 at 7:37
  • 3
    Why not just write "Expand" instead of "Read more"? – KlaymenDK Apr 19 '17 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

  • Can you give more details about why would this solution be appropriate? – Joao Carvalho Apr 18 '17 at 11:31
  • 18
    @nivhanin The first solution looks more like Hey, click here to add a new box – Weedoze Apr 18 '17 at 14:21
  • Yes, maybe, depends on site subject and content. – nivhanin Apr 18 '17 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 '17 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 '17 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

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.