====Description
The new design of the read next story option will let users select & read stories attached to an article which will improve story reading experience. The current design has some problems, such as the visibility of "read next story" button on some images can be problematic, distracting users from reading the story text available on the last story page. This will improve the story reading experience.
|{F35224003 width=260}|
====Description/User story
As a reader,
I want easy access to other related stories
so that I can learn more on the topic
====Design
**If an article has only one story attached**
- Do nothing.
**If an article has more than one story attached**
|One story attached|Multiple stories attached|
|{F35491290 width=260}|{F35491293 width=260}|
- Insert a story page at the end of a story to show list of stories attached to an article.
- Inserted page has a blue background(#3366cc) to separate it from rest of the story. We can experiment with different colors when code will be ready.
- If there are more stories than what can be displayed on device screen then randomly select set of stories to show.
- Similar to other story pages, this page will too have other items like status bars, play/pause button, etc.
- Click/Tap on "View" will link will open the story.
- Click/Tap on "Close" icon will take user back to article.
|{F35491411 width=260}|
- Truncate long story titles if they exceed more than two lines.
**Loading state**
- Show thumbnail placeholder while story image is loading.
**Error state**
|Page loading error|Connection error|
|{F35490768 width=260}|{F35490769 width=260}|
- Show an error message when page fails to load.
- When some of the stories fail to load then show other available stories.
- Show no connection message when connection goes off while loading the page.
- Tap/Click on Retry button will load the page again.
|At present|After removing the next story button
|{F35489955 width=260}|{F35489954 width=260}|
- Adjust the padding between text box and image license as currently we have it to keep "Next story" button. We can try different values once the code is available is ready.
[[ https://www.figma.com/file/pj2ASYTU23ieu3hFvclMer/Wikistories-MVP?node-id=4961%3A9467 | Design file
]]
====Acceptance Criteria
Given a reader is looking at the currenlast page, of a Wikistory
When reading wikiit is the only stories,y on a Wiki page
Then theyre should be able to see clearly and click on the "read next story" button to move to the next page.not be a final slide that presents other stories to read
Given a reader is looking at the last page, of a Wikistory
When reading wiki stories,
Then theyre should not be able to the "read next story" button and close the storynother page to prompt the user to viewer to go back to the article other stories.
====Test Scenarios
1. When there is only one story on a wiki page, there should not be a last slide to view more stories.
2. When there are few stories on a wiki page, viewing a story should show an additional page after the last page with text.
3. Choosing to edit the page that has the prompt to view stories should open the editor on the last story page.
4. Only stories on the wiki page should be suggested. Stories from another wiki page should not be suggested.
5. Clicking on the "View" CTA of any suggested story should view the story.
6. Tapping the browser's back button should open Story Builder on the last page of the Wiki story.
7. Tapping the back arrow navigation should take the user to the last story page.
====Open questions
1. After reading a story, will the extension exclude it from the list of the next suggestion?