Currently a Random article is shown as a card in the Feed, with a refresh icon to update the preview of the random article shown in that card.
Problem
- The initial issue surfaced in user testing was that the refresh icon icon was not recognisable.
- The underlying problem is that the current behaviour of refreshing in place is unexpected since:
- it is at odds with how the other 'cards' on the feed work;
- different to how users expect Random to work based on web and Android, where users are given a "surprise" factor on user initially selecting random;
- users are not able to keep selecting random to refresh a new random article whilst still remaining in the complete article view.
- The random article is not refreshed when the whole feed is refreshed
User story
As a user I want to get the surprise factor of a complete random article loading when pressing a button/link to view a random article, and be able to keep selecting a "random" button/link to refresh random complete articles.
Solution
- Removal of refresh in place icon
- Addition of a footer on the random card to load "Next random article"
- Addition of a refresh 'die' button on the full random article page
- When die is tapped, it animates to 'land' on another face, whilst another complete random article is shown.
- Upon scrolling downwards, the random button scrolls off the screens
- If user scrolls back to the top of the random article, the random button scrolls back into view.
Random card on Explore | Random button on random article |
Prototype of the solution can be accessed here:
https://htmlpreview.github.io/?https://rawgit.com/reetssydney/prototypes/master/Random/index.html
Step 1. Drag to scroll down to the Random card on the feed
Step 2. Tap "Another random article"
Step 3. Tap the blue circular random die button (loads next random article)
Step 4. Drag to scroll down the KFC article to see the random button scroll off screen
Die roll CSS animation concept:
http://codepen.io/reets/pen/RaJJZj