Zero state for no results

[sean-roberts]

We need a zero state for search results. I do not know if we have a pattern already for this but we need to indicate to the user when we have no results instead of a blank screen.

[seanh]

Current zero state in the client sidebar (with bug):

My suggestion would be to keep any zero state text message generic, just "No results" or "No annotations matched your search" or something. Rather than trying to do something cleverer like "There are no annotations that matched <some representation of the user's query>", because that gets more complicated (for example you would need to replace group pubids with names etc), and as the client sidebar is demonstrating for us it's more likely to break. Also it just seems pointless doesn't it?

[dwhly]

@conordelahunty Part of our discussion today was that since the user profile will be the first page that a new user sees now, the blank space where there are no annotations (on a user's profile only?) might include a call to action to begin annotating.

Clearly an interesting design challenge.

[seanh]

If you're on your own user profile page, and you haven't made any annotations, then we probably want to say "You haven't made any annotations yet" (we'd probably also want a call to action, how do you make annotations, what are some interesting things to annotate, but probably ignore that for now).

If on another user's page, we probably want it to say "Jeremy Dean hasn't made any annotations yet."

If on a group's page, "Foogroup doesn't have any annotations yet."

But if doing a search query within a user or group page (including within your own user page), or on any non-user or group search page, then the generic "No annotations matched your search."

[dwhly]

👍

[sean-roberts]

I think that is a good start on dialog. There are several layers where we can be smart as well. Like if the search results have no findings but we know that there are some facets that will always cause zero results - we can inform them of that.

For example, search query = "tag:x group:"group Y"". If we know the user does not have access to "group Y", we can say things like "Looks like you're searching for a group (group Y) that doesn't exist or you do not have access to. Check the spelling or make sure you are logged in to get access to this group"

That might be a phase 2 thing, but it's really important with zero states to give users a clear path forward. I don't think we have the tooling in place, but it would be very good to capture metrics on reasons why there were misses - if we know them.

[ghost]

Those suggestions sound good @seanh . Also, @sean-roberts I'd love to be able to do clever things with these states but that is probably a bit of a stretch for where we are now (also, we need to be careful about not exposing group names/ids accidentally to users who might not be members - our security model is, well, lacking)

I think there are two things that we can do now...

A basic zero state on the groups page and search pages that simply shows a message to let users know that there are no results. For example:

Then the other important zero state is when you are looking at your own page. I think we can use this as a way to help users onboard and orientate themselves. Here is a quick example of what we might show:

[seanh]

Regarding this How to get started mockup for your own user page, there's a fair bit of complexity behind that. I could do a static "You haven't made any annotations yet" message instead for now, but I realise that isn't very good. Here are some suggestions for simple ways to implement first versions of the four links in the mockup, I could get these done this week, then we could make these smarter later:

• Let other users know more about you by adding more information to your profile could just be a simple link to the edit profile page, same as the Edit profile link in the sidebar

• Read more about how to annotate with groups could be a simple link to this zendesk help center article (we don't have any how to annotate with groups page as part of the hypothes.is site itself, afaik)

• Install our Chrome extension could just be a simple link to the extension's page on the Chrome store. That page will tell you to install Chrome if you're in another browser.

  We can of course get much cleverer about this, but I would suggest not doing so for a first version. Clever things: a popup dialog that actually installs the Chrome extension if you're in Chrome, an alternative link to the bookmarklet (perhaps only shown if you're not in Chrome), detecting when they already have the extension installed ... But this gets complicated. The current Hypothesis home page already tries to do some of this but I think gets it wrong in a few cases.

  What I would suggest for a clever version of this:

  • It should say Install our Chrome extension or bookmarklet (always this same text and links, regardless of which browser you're in)
  • Chrome extension would be a link that pops up a dialog to install the extension if you're in Chrome, or a link to the extension's page in the Chrome store if you're not in Chrome.
  • Bookmarklet would pop up a dialog about installing the bookmarklet as our home page does, although we may want to implement it differently, as the one on the home page has no URL / can't be linked to and doesn't work without JavaScript.
  • If we can detect that they already have the Chrome extension installed, then maybe don't show this at all.

• Check out some of the most popular recently annotated documents. This is the most difficult one. I'm not sure what it could link to? I don't believe we have a most popular recently annotated documents page yet. I don't think the new search page, for example, can do that kind of search. Options:

  • The new search page can do simply "recently annotated documents" without the most popular (just a simple link to the /search page with no query). That doesn't seem particularly useful, but might do for now. That would be my suggestion for a first version of this.

  • Design and implement a new most popular recently annotated documents page. I think this is separate from the new search pages. It may be doable with our existing Elasticsearch search index, but I'm not sure without investigating. It may be able to look and work very similarly to the other search pages and even use the same template, but that's a design question. This seems like something for later.

[ajpeddakotla]

@seanh +1 on your approach that you outlined above. The other approach (the cleverer one) is great, but we'll hold off until we make a concerted effort to improve our on-boarding process.

[dwhly]

(we don't have any how to annotate with groups page as part of the hypothes.is site itself, afaik)

@jeremydean Has created some excellent resources on groups: https://hypothes.is/annotating-with-groups/ https://hypothes.is/creating-groups/

[dwhly]

I suggest we consider aligning both panels as top and left justified. The panel that is centered seems a bit off, particularly on mobile. >> @conordelahunty

[ghost]

@dwhly Sure, no reason to have two different styles for the same thing. Less work, not more, etc.