I recently got the following question: “Is it possible to get a text preview from News in a Carousel? This would be for those users who want to see more than just the title, but without clicking.”
I love this type of questions, so I decided to find out.
Carousels and me
I am not a big fan of Carousels. I can imagine the large images look nice, but I have read too many negatives. The quick why? This website: https://shouldiuseacarousel.com/
They do not provide good usability, for instance:
- People tend to overlook them.
- Most people do not spend enough time on a page to see all the items in the Carousel, so generally only 1 or 2 posts are being seen by most visitors.
- The buttons to move them forward are too small and not easily clickable for people who have problems with their motoric skills.
- Screenreaders cannot deal with them.
At the bottom of this post I have added a number of articles.
When Microsoft introduced a Carousel for SharePoint News, I honestly thought that they had solved the issue because why would they, who are pretty big on usability and accessibility, introduce functionality that would not have a good usability? But when I saw the product, I noticed that it just looked like all others. I could not find a usability review by anyone. (Please let me know if you know one).
BTW, I really love the below image (from Microsoft’s Inclusive Design pages) to show that inclusivity issues are more common than you might think. Not everyone has a permanent issue, but many people have temporary or situational issues. A small part of the population is blind, but many people have eyesight issues, including myself before my cataract operations – I had problems with colour contrasts and very small print, for instance.
But I digress! The question was: Is it possible to show a preview of the post, and not just the title, in a Carousel?
I checked a number of items:
1. News web part
I started out with changing my Intranet site’s News web part to Carousel. This is what the Carousel looks like in Edit Mode:
- You can determine the number of posts to show (recommended is max. 5, but you can go to 8)
- You can change to the next item automatically (not recommended) and set the interval for change.
- You can show a call to action. We will come back to that later.
So, there is no option in the Carousel itself to make extra information, such as the Description field, visible. On to the next option.
2. News post
The next step was to open one of the posts and see if there is any option for an extra text, image description or anything that could be shown in the Carousel.
In the web part menu, you can add “Text above title” where you can add 40 characters of text, so I did. It is immediately shown. I also added an Alt Text for the image.
3. Page Details
Then I looked at the Page Details, changed the Description into a snappy summary and added a Call to Action with a link to a Form.
More on the Description field in this post.
Publishing the end result
So, I have 4 possible options to display:
- Text above title
- Alt text for the image
- Call to Action
I republished the page and looked eagerly which of the items would manifest itself on the News page.
Nothing. Zero. Zilch. It still just showed the title. Hovering over any element (image, title) did not show anything. 😥
- The Description is only visible in the web part layouts Top Story, List and Side-by-Side.
- “Text above title” is only visible on the news post itself.
- Alt text for the image is only available on the news post itself, in the Immersive Reader
- The Call-to-Action does not show up, and the text and link in the Page Details are deleted after publication, so I guess this does not work. I added a Call-to-Action web part, hoping that it perhaps needed this nearby, but nothing. I will look into that; I remember a discussion on Twitter but forgot between whom.
I think it is currently NOT possible to show a preview, neither by default, nor by hovering over an element. If any of my readers have found a way to do it, please let me know!
At this moment I can only suggest using another web part layout, such as Top Story, List or Side-by-Side. Use the Description text to provide a good summary of the article. This is better for usability and accessibility and would allow users to see what the story is about, so they know whether it is worth their while to click.
Additionally, you can use the Microsoft feedback portal to make a suggestion to allow a preview.
Articles on Carousels:
- Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility
- Why Image Carousels Are Almost Always A Bad Idea
- Image Carousels and Sliders? Don’t Use Them. (Here’s why.)
- Why Homepage Carousels Are Bad (& 3 Alternatives to Try Instead)
Carousel Photo by Mihai Vlasceanu: https://www.pexels.com/photo/carousel-with-lights-1403653/