When is it appropriate to render a "Show less" action once the user clicks a "Show more" link after exposing a truncated description?
I personally like something similar to the App Store experience (without a "Show less" link), but I'm curious of your findings/experiences.
A "show less" is an appropriate contextual action when a list of items may have a lot of text to be displayed. Overwhelming amount of text in listed items is not the best UX practice. Therefore, to toggle between seeing all and some of the text can be a good provision using "show less".
ex: A pic with some basic info and detailed info. You can show the information you would like to the user at first glance and toggle the detailed info with "show more and show less".
As a thumb rule, every "show more" should be accompanied by a "show less".
Let's work through this logically. Why would you want to "show less"? Because there's not enough space to display everything.
Now that scrolling is the norm and a natural thing for users to do, we really have very little instances where you don't have enough space to display content. We just scroll down to view the rest.
The only case I can think of is if the system remember and persists settings on a particular view. A user may want to always view the details or always have it condensed upon loading the screen.
e.g. For business intelligence, a user may want to view a large dataset in a particular way for reporting purposes. For some people, seeing the detailed numbers may be important aspect of reviewing the data. For others, a summary may be enough. A persistent "view more" "view less" option maybe useful then.
When you concluded that you need a 'Show More', you relinquished control of the display option to the user.
To put it differently: You concluded you cannot decide yourself how much data to show, and you have to burden the user with the decision. Now don't withhold the controls they need to take control.
Or, to put it differently: preferred user interaction is try - see results - undo. You are taking away the undo.
You should default to full control, in this case, a Show less. Usually it can be integrated easily with the show more, ideally it remains in place so content can be toggled without re-aiming the mouse.
There may be cases where a show less could be omitted: When the original reason to show less goes away. One case would be sequential processing of records, where an (expanded) record is never visited again.
What's the alternative to have an interface which you can interact with but only in one direction?
In other words you are given a heirarchy of information but the only way to collapse back to the high-level view is to reload the information from scratch.
Trees with plus/minus buttons to expand the information are good for this.
I have seen some applications that contain just the "Show More" link but lock you into it without giving you the option to "Show Less". IMO if it's too much text and it makes the screen cluttered, give the option to do both. At times I've encountered that the "Show more" link is meant for a quick glance or consumption and then the data meant to be hidden again.
This has hit the sweet spot of good questions for me. It's simple, has resonance, and sits at the back of your mind all day.
So yesterday I was attuned to this sort of interaction and questioned it whenever it occurred and have an answer that I'm satisfied with at least.
No. There is no value to Show less.
The main problem is with language.
You are using the term 'Show less' because they have selected 'Show more'. But replace 'Show more' with 'Read more' or 'Learn more', which describe what they are doing and not what the interface is doing. You can't read less or learn less when you've already read or learned something. This is why it feels wrong to say 'show less' - because the language is in dissonance with the action.
You could relabel it 'Expand' and 'Collapse', only now we've agreed 'Read more' is really what the user is here, then it's good UX to use that as the label.
But wait. There is no antonym for Read less.
The solution that seems to work best is to design the interface with a 'close' interaction. That signifies nicely that they have finished reading what they have expanded, and are ready to move on.
Of course, this won't work if you only have a small amount of content as per your example.
I'd go with 'Show less' if I were you.
If you decide to use progressive disclosure, then check out the Microsoft guidelines for progressive-disclosure controls to ensure you correctly signal what has happened, by using the correct interaction and glyph.
It's a long topic, so be sure to scroll to the Progressive disclosure controls section, half-way down the page.
As a rule of thumb "show less" should be used carefully and the user experience has to be designed depending on the context. Just using it to complete a two way user interaction is not sufficient here.
However, there are some cases where "show less" is really hepful, e.g.
Lean display in a gallery style display (one item per screen with next/prev actions): "Show less" should be remebered for the next items to be shown. Thus the user can concentrate on the main focus without getting distracted by details.
Lean display in a list view display: If a single click "show more" expands lots of items on a single page, "show less" brings back a better overview for faster viewing items
So every usage of "show less" should be evaluated depending of surrounding context.
To not guess you always can run A/B test to see what works best . let's say with next possible experiences :
1)show more &show less are present ,part of text is hidden by default ; 2)just show more , part of text is hidden by default ; 3)all text is shown , just "show less" is present by default ; 4)while description is shown by default , no ability to hide / show description
You'll need to pick target metrics and see how real users to your website react and then just implement version which leads to highest conversion .
Testing allows to eliminate all guess work.
Call to actions like "Show more / Read more / Learn more" are context relative. An itemized list would call for a "show more"; a news item/blog post would call for "read more"; a product description would need a "learn more".
Respectively, the presence of a counter action (show less) should also be derived from the context. A news story or blog post might expose further reading, sometimes long enough for the reader to have forgotten that the further text was revealed by a "read more" call for action therefore rendering a "show less" action useless. A product description on the other hand, if placed in a list of other products (where a product comparison, for example, is part of the scope), a "show less" action might serve other contextually relevant functions - like displaying more information on a single view for the purpose of comparing products.
