Page MenuHomePhabricator

As an iOS user the Random feature is hard to find and use
Closed, ResolvedPublic3 Estimated Story Points

Description

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

  1. Removal of refresh in place icon
  2. Addition of a footer on the random card to load "Next random article"
  3. Addition of a refresh 'die' button on the full random article page
    1. When die is tapped, it animates to 'land' on another face, whilst another complete random article is shown.
    2. Upon scrolling downwards, the random button scrolls off the screens
    3. If user scrolls back to the top of the random article, the random button scrolls back into view.
pasted_file (670×379 px, 211 KB)
Random - article page.png (1×750 px, 546 KB)
Random card on ExploreRandom 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

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Per our sync discussion, I'll iterate further on styling of the random button concept 4B, looking at some ways to introduce more pizzazz to the animation and action when loading a new random action item.

JMinor renamed this task from As an iOS user the refresh icon on Random is a bit confusing to As an iOS user the Random feature is hard to find and use.Apr 28 2016, 9:50 PM
JMinor raised the priority of this task from Lowest to Low.
JMinor updated the task description. (Show Details)

Retitled the ticket and reprioritized based on expanded scope.

@JMinor

Proposed interaction example:
https://youtu.be/J8G-WM4m7wE

Key points:

  • Dice animation continues from preceding stopped state (e.g., if starting value of die is 1, and animate to 'land' on a value of 4 when tapped, the next time it is tapped the starting value will be from 4.)
  • On scroll down, the random button moves off screen
  • If user scrolls back to top still within the same Random article, the random button scrolls back onto the screen.

Dice roll animation test here:
http://codepen.io/reets/pen/RaJJZj

Initial estimate includes only the basic interaction change. The animated dice may need to follow on if its complex to implement.

JoeWalsh moved this task from Ready for Development to Doing on the iOS-app-v5.1.0-Saturn board.
JoeWalsh added a subscriber: RHo.

hey @JoeWalsh, just uploaded the newer version of the random button styling on the task desckiption and also here:

Random - article page.png (1×750 px, 546 KB)

Recapping some minor feedback we discussed briefly in the mtg earlier:
Random card on the Feed page

  • icon color on the random card is the hex#3366cc blue die on hex#EAF3FF icon background (ie., same colors as the "Trending" icon)
  • card's footer link text is "Another random article"

Random article

  • die and background blur animates onto the screen from below
  • the resting die is 37pt x 37pt, and has a 4pt border-radius, with 8pt diameter dots
  • let's start on the three-dot face instead of the one-dot face so it is more obvious that it represents a die.

After evaluation by @pizzzacat it looks like there are no discoverability or usability issues with the implemented change.

The last remaining concern for me is the load times, but lets make this new version the default behavior in 5.3.0, and we'll dog-food and also ask beta testers to focus on testing this.

If we stick with this, I'll also just want to do a quick check that this works with VoiceOver and the right analytics calls are in place, but will file a follow-on task for that.

JMinor raised the priority of this task from Low to Medium.Sep 28 2016, 6:13 PM

Can we look at updating the button styling on the article per the update post-user testing?

Random - updated pill button white (1×750 px, 535 KB)

Zeplin: https://zpl.io/2oeMq1

I did also experiment with lightweight options that only loads a preview card for Random articles that we can revisit depending on dogfood and beta testing feedback.

Lightweight exploration 1

Button only on feed
Lightweight Random - Feed button.png (1×750 px, 879 KB)
Random as preview card overlay
Lightweight Random - Article preview card.png (1×750 px, 517 KB)

Lightweight random exploration 2

Preview card on feed
Lightweight Random - Tinder Edition 1 - Feed.png (1×750 px, 498 KB)
Swipeable random preview cards
Lightweight Random - Tinder Edition 2 - Random cards.png (1×750 px, 507 KB)

@JMinor @RHo for the first step here should I enable the updated random feature we had before? or start on the newer designs in this thread?

Hey @JoeWalsh @JMinor – perhaps for discussion in the planning meeting but I would like to update the visual treatment to this 'pill' design if it is not a lot of work.
Actually think it works better inverse blue and white and I've updated the Zeplin with the iPad version as well if that helps with decision-making (look at screens tagged with 'Random').

I'm okay with making small visual tweaks before we turn it on in beta. If the changes require more than a couple hours dev or change the flow at all lets discuss in next sync.

Per discussion in the meeting today, let's update the visual treatment to the blue colored pill button.

iPhone
364D5752-9E06-44A9-8938-E536CC13F0FF.png (1×750 px, 514 KB)
iPad (centered on device width)
EDBE19DC-951E-43D1-AE35-6959FC32F3DE.png (2×1 px, 1 MB)

Redlines: https://zpl.io/Z1ojvBo

To test:

  1. Open Feed
  2. Scroll to a random card
  3. Tap on the card
  4. Verify that the article tapped, is displayed
  5. Verify that the random button is visible at the bottom of the screen
  6. Tap the random button
  7. Verify it opens a new random article
  8. Go back to explore
  9. Tap the footer that says "Another Random Article"
  10. Verify another random article is displayed

Testing on iPhone (iOS 9.3.2) and Wikipedia app 5.3.0 (960).

steps 1, 2, 3, 4 - First random card on Feed: Image Museum of Hsinchu City (it opened when tapped)
steps 5, 6, 7 - Tapping random button opened: Jan Ladislav Dussek
step 8 - Swiping back to explore (or tapping W): Image Museum of Hsinchu City (again)
steps 9 and 10 - Tapping "Another Random Article" from Feed: Mierzyn, Świętokrzyskie Voivodeship

This looks fixed. It is no longer possible to refresh random articles directly on the feed itself - "Another Random Article" must be tapped.

@Fjalapeno – are we able to update the visual treatment of the button? I'm still getting the older style in 5.3.0 (959) build:

Expected:

iPhone
364D5752-9E06-44A9-8938-E536CC13F0FF.png (1×750 px, 514 KB)
iPad (centered on device width)
EDBE19DC-951E-43D1-AE35-6959FC32F3DE.png (2×1 px, 1 MB)

Actual:

pasted_file (132×403 px, 24 KB)

@RHo yep - sorry toss it back… forgot to get that in

@RHo how do I change the dice color for the new design?

Just needs the new design implemented

@RHo I updated the design - my only concern is the localizability of "Randomizer" - mainly if the translations are very long strings, we might end up with small button text

Hmmm.. @JMinor – do you have suggestions for a more translate friendly term? I suppose we could stick with the same as the random card footer "Another random article" or "Next random" ?
Actually, we could just use simply "Random" on the button in the article view since they will be familiar already with the concept of it generating a random article then. In which case localizing will be easier and shorter.

"Another random article" is nice and clear and re-uses an existing localized string. But it seems too long, esp for German or other long string language.

Lets try "Next random"

@RHo @JMinor I'd suggest keeping "Randomizer" but watching the translations to ensure everything still looks good (or if we get any feedback from localizers). We can always fall back on "Another random article" as the translations are already there.

@JoeWalsh @JMinor – what about just 'Random' then? Less jargony than Randomizer.