Wp-calypso: Reader: Search on Manage (master issue)

[samouri]

The Reader Manage page is getting a big upgrade!

• Refreshed UI
• The ability to search for feeds/blogs instead of needing to type in the url

Copy/pasted from @fraying's p2 post here: p5PDj3-1lP-p2

Default View

The default view includes two recommended sites.

• The search box accepts both text and URLs.
• Recommended Sites formatted just like in-stream recommendations. Clicking Follow or Dismiss causes that site to disappear and a new one to appear. Newly followed sites appear at the top of the Followed Sites list.
• Followed Sites list includes gravatar, site description (if present), owner name, and last updated timestamp (using the date of the most recent post on that site). If any of those data types are missing for that site, omit them.
• “Search Followed Sites…” is the search box that filters the list. If a term is entered, only matching sites are displayed (as now). Looking glass icon has been removed so it won’t get confused with the primary search box.
  Use settings icon for changing notification settings (see below) because the disclosure triangle is frequently missed in user testing.

Follow by URL

If the user enters a URL.

• When text is entered, the recommendations disappear.
• There may be a brief state when the user is entering text before they get to “.com” (or any other TLD) where text search results are displayed. That’s okay!
• When the form detects a valid URL, the user can hit return or click the link to follow the site.
  Unfollowable URLs produce the red error box as now.
• Clicking the “X” clears the form and the recommendations return.

Follow by Text Search

If the user enters a search term.

• Search results are formatted just like the Followed Sites (including gravatar, site description, author, and timestamp).
• Clicking “Follow” on a result disappears it from the results and adds it to the top of the Followed Sites list.
• Top X results are shown (showing 3 in this mockup, should be higher for live site – 10?). If the “More” link is clicked, Followed Sites disappear and the page goes to an endless scroll of all results.
• Clicking the “X” in the search form clears the term and any search results, returning to the default state above.

Editing Settings

If the user clicks “Settings".

Manage Following (Mobile)

• Everything remains the same functionality-wise, but Import/Export buttons should be omitted at <660px as those are not needed on mobile.

Related Work:

• https://github.com/Automattic/wp-calypso/pull/10284

[samouri]

New UI Components:

• [x] ReaderSubscriptionListItem block https://github.com/Automattic/wp-calypso/pull/11571
• [ ] Settings popout https://github.com/Automattic/wp-calypso/pull/12330
• [ ] import/export/sortby/search followed sites block
  
  
  
  • [ ] export
  
  
  • [ ] import
  
  
  • [ ] search followed
  
  
• [ ] ReaderSubscriptionListItem css https://github.com/Automattic/wp-calypso/issues/12752

New Data Layers:

• [x] follow subscriptions https://github.com/Automattic/wp-calypso/pull/11159
• [x] query feeds https://github.com/Automattic/wp-calypso/pull/12675
• [ ] email subscriptions https://github.com/Automattic/wp-calypso/pull/12703

New Reducers:

• [ ] query feeds https://github.com/Automattic/wp-calypso/pull/12675
• [ ] email subscriptions? https://github.com/Automattic/wp-calypso/pull/12703

[bluefuton]

Looks fantastic!

Just a small accessibility note on the "hit return to follow" behaviour in Follow by URL - I think the functionality is great but we should consider whether to mention it in the label below the search box.

A lot of users won't have a return key to hit. Virtual keyboards on mobile devices often have a "submit" or "search" for an input instead, and those using assistive technologies might not be hitting keys at all.

[fraying]

@bluefuton Re: "hit return to follow" - good point. iOS has "return" in the keyboard. Android has an icon, but the icon means "return" and I think we can count on people to know that.

I want to use "hit return" here because the user is already typing, so it could save them some time and they won't know they can do that unless we tell them. In the end, if they can't "hit return" they can still click the text and complete the action.

[bluefuton]

I want to use "hit return" here because the user is already typing

They might not be typing, though :) They might be dictating the characters, and navigating the page using a screen reader.

I can see that it's a really useful instruction. Can we think of another way of saying it that doesn't reference the input device? Like "Submit to Follow giraffesaregreat.com" or something along those lines?

[fraying]

"They might not be typing, though"

That's a tiny percentage. If we can change the message for that browser, great. If not, we have to speak clearly to the majority of users. "Submit to" is not clear.

[blowery]

@fraying why do you think we need to call it out explicitly? It's a standard-ish thing to hit enter in a textbox to kick off the action associated with the textbox. I can see the concern that by explicitly saying "Hit enter..." we're setting up the expectation that the user _needs_ to hit enter, not that it's a handy affordance for folks with keyboards.

[fraying]

Because if we don't call it out, the only way to discover it is by accident.

[blowery]

Because if we don't call it out, the only way to discover it is by accident.

but...

It's a standard-ish thing to hit enter in a textbox to kick off the action associated with the textbox

also, it's a bit confusing because for that to work, the textbox must have focus. Do we want to tie the message appearing to the textbox having focus?

[gibrown]

Throwing out ideas: maybe just highlighting the selected result is a common enough pattern? Letting arrow keys change what is highlighted?

A nice thing there is that we could highlight the result that is not first. So we could let the user try to follow a url that we don't know about.

[fraying]

This is the least critical decision to getting this working. Let's not rabbit hole on it. We can tweak text once we have something to play with. Ok?

[samouri]

Behavior for when clicking "See More" results:

1. Followed Sites disappear and the page goes to an endless scroll of search results.
2. As you scroll the search bar sticks with you.
3. Clicking the X in the search bar (or esc on keyboard) is the way to exit and have the list of followed sites return

[jancavan]

In "Follow by Text Search":

If the user enters a search term, clicking “Follow” on a result disappears it from the results and adds it to the top of the Followed Sites list.

Clicking "Follow" doesn't make it disappear from the results. It just changes the text label from Follow to Following.

[fraying]

I thought about this overnight and realized where the problem was. We have two states:

1. Right after searching, when there are a limited number of search results shown (design shows 3 but the text calls for 10), and the Followed Sites block is showing below the search results. In this case, it would make the most sense for a newly followed site to disappear from search results and appear in the Followed Sites block below it (this is what happens now when entering a URL).

2. After searching _and_ clicking the "X More" link. In this state, the Followed Sites block is gone so we can use infinite scroll. In this case, it might be confusing for the result to disappear when followed, because there's nowhere for it to appear, so the user doesn't see it go anywhere.

Having two different behaviors for two different states is too complicated for our own good, so if we have to choose one, I suspect _not_ disappearing the result is the right call. Either way, triggering a success message ("You followed Site Name") in the green pill will be helpful.

[jancavan]

I've updated this issue's description to include a mockup of Manage Following's mobile view and updated popover design.

[fraying]

@samouri: Note also that we should go with @jancavan's design for the larger widths, too. That means we're omitting the Last Update timestamp and URL, and moving the byline to the end.

[jancavan]

we're omitting the Last Update timestamp and URL, and moving the byline to the end.

I'm updating these in the ReaderSubscriptionListItem component.

[bluefuton]

Closing in favour of individual issues: #12950, #12951, #12952, #12953, #12954, #12956, #12958, #12959, #12960, https://github.com/Automattic/wp-calypso/issues/12752