Tuesday, March 6, 2018

New Features: Flag, Rate, Group, Highlight Stories

To help readers navigate RSR's large lists of Hugo eligible stories, we've added features to let you flag stories to read ⚑ (and not read ✖), rate stories you've read ★, group and highlight stories by various criteria, and save your ratings to a URL that can be bookmarked and accessed on other devices.

You can quickly try it out on last month's ratings below by clicking here to skip a detailed walkthrough of the features that follow.

(For best results, view the images in portrait mode.)

Here's how you rate and flag stories. Click "My Ratings" in the grouping listbox to see all your flagged and rated stories by category.

Here's the Campbell page grouped by Eligible Year and Author, then Eligible Year and Score, then with free stories highlighted by Price.

Here's the Best SF/F page with stories from the four "year's best"anthologies red hghlighted, nestled among same-scoring stories from the Hugo page to show what other worthy stories did not make the lists. Next, highlighting by Nebula+2 in the listbox shows Nebula finalists in yellow highlight and an orange highlight where the story is both a year's best AND a Nebula finalist. The third image shows the user creating a bookmark after clicking the backup button which packages the user's ratings into the URL for saving in the browser and potentially accessing the ratings from other devices.

We'll eventually update all RSR monthly, year-to-date, and Hugo-related articles with dynamic tables.

Here's last month's ratings done with a dynamic table so you can try the various new features.

Dynamic Table Features

  • Rate & flag stories with next to each story title. Your ratings carry over to all RSR pages with dynamic tables
  • Navigate big tables with . Click ↻Mobile View if the full size page is hard to read on a small screen or window. Click to minimize/maximize the gray command box.
  • Change table groupings with . Changing the grouping to Magazine is useful if you're a magazine subscriber. Grouping the Campbell page by Score after seeing it by Author could help prioritize your reading.
  • Highlight stories with . An highlight occurs if a highlight intersects an existing highlight (such as the Best SF/F and Locus lists).
  • See your ratings with . They're grouped by Category to simplify Nebula and Hugo nominations.
  • Backup your ratings with (BETA Feature). It updates the URL with your data, which can be saved in your browser as a date/time stamped bookmark. If your browser replicates bookmarks across platforms, access the bookmark from another device to transfer your ratings. Repeat after you use each device.

10 comments (may contain spoilers):

  1. I do not like this new feature.

    Is there any way to disable it for individual users ? It makes the page way too busy and a bit hard to read. The annoying grey box follows you on the bottom of the screen until you are at the Comments part.

    With the Hugo nomination deadline 8 days away, this probably is not the best time to introduce a significant new feature to the RSR website. I know I am too busy to assess it properly, and my first impressions was not good.

    1. Thanks for the quick feedback.

      I found the previous version cached on Bing and Google and have put those links at the top of the Hugo page for now.

      I'll look into the styling put into the tables by Word and replicate it in my new dynamic table code. What you see now is basically no styling, just the default from Blogger, whereas Word seemed to have over a dozen style attributes for the font, word spacing, line spacing, paragraph spacing, table margins, etc.

      Can you tell me what browser and device/screen size you use? It's possible a particular browser/screen combination doesn't do well with Blogger defaults. Also, I don't have an Apple device so I haven't been able to see how my code renders in the Safari browser.

      As for the pinned command (grey) box, I'll provide a one-line version that's the default on mobile devices and can be toggled between desktop and mobile sizes.

      I wanted to get the flagging/rating features out before Hugo nominations closed because I use them myself to track my reading, and those features needed a per-story id which could only be put in with my own table-generation code (no more hacky Word/Excel mail merge!).

      In hindsight I should have saved a copy of the Hugo page myself and included a link to it with the new version to ease the transition for long-time users and be a backup in case of bugs in features or usability.

    2. June, while you use the workaround, can you clarify which new features contribute to making the new page busier than the old page?

      The five big UI changes include: 1) Story/time/word counts for the two levels of grouping (Category & Score by default), 2) Rating box left of each story title, 3) Trophy/red book/thumbs up emojis left of each recommended by, 4) Command box that's pinned to the bottom of the screen, and 5) Blogger default styling which is less visually compact than Word's complex styling.

      There are also four minor UI optimizations where one-character symbols replace multi-character words like Time, Issue, Other Reviews, and RSR Mini-Review. I've also surfaced the RSR rating as stars and a one line pitch.

  2. Wow. I'm extremely impressed.

    I need to play around with this and see how it works, but this could be invaluable. Going to check it out now...

    1. Eric is having lots of fun playing with the new code, so if you have suggestions, this is the time to offer them.

  3. It seems like this will kind of build-in to the site something similar to what I do on my own. Don't have time to play with it now, but will let you know if I have any feedback later.

  4. Added max/min button to toggle the size of the gray command box from full to minimal functionality.

    Added Mobile View option in Jump To... list for cases where Blogger shows the desktop page but the device screen is too small to read it comfortably.

    Added a search field to the command box to support search in mobile view (when the search field in the right sidebar isn't available).

    Fixed bugs with jumping to labels with ' (Asimov's) and broken series links.

  5. The grey box was the most annoying thing, AND that it followed you around at the bottom of the screen when you are scrolling.

    I have found the toggle button to minimize it, and it works.

    I will get back to you after Hugo nominations close, and after I have read all about the new features and given them a proper go.

  6. Fixed highlighting. I accidentally broke it with my command box min/max button change.

  7. Made the font-size and font-family match the Word-generated tables and now the story text looks the same and makes the overall table look a bit cleaner.