2013.11.10 - Lab UI Specification

Overview:

This spec covers the bugs, usability issues, and feature requests that the community would like to address at this Wednesday’s dev chat. ( 2013.11.13 :: 6pmEST )

These are ordered by general priority, weighted by number of users reporting issue, and of course bugs come before features, and usability comes before shinyshiny. Please feel free to reorder priority as necessary.

If there are additional issues, please feel free to add comments with a summary including a description of the Issue, a potential Solution, and links to any screenshots or Examples of the issue.

As you can see, a couple issues have already been resolved by the devs, which is reflected in Status. After the dev meeting, I will update each issue with a Status of whether it has been resolved, moved to / redundant to a GitHub issue, is unfixable, etc…

Sources:

Many thanks to Brourd, mat747, Eli Fisker, Zanna, wateronthemoon, Jieux, hoglahoo, Omei Turnbull, Hyphema, jnicol, Nando, TomoeUzumaki, LFP6, steven123505, Malcolm, redsoxwy, and anyone else who has contributed to Eli’s thread or our brainstorming session.

Sincerely,
~ machinelves

Reference of Pages:

A) Lab List:
“Active Labs” -> http://eterna.cmu.edu/web/labs/

B) Lab Project List:
“Participate” -> http://eterna.cmu.edu/web/lab/3381843/

C) Lab Project Popup:
“Show” -> [access via B) Lab Project link]

D) Lab Design List:
“Vote for the Best Designs” -> http://eterna.cmu.edu/web/browse/3381…

E) Lab Design Popup:
“[Name of Player Design]” -> [access via D) link for popup behavior] or http://eterna.cmu.edu/web/browse/view…

F) Lab Design:
“See Result” -> http://eterna.cmu.edu/game/solution/3…

G) Previous Lab List:
“Previous Labs” -> http://eterna.cmu.edu/web/labs/past/

General Assessment:

  • Minimize clicks: Utilize nested content, perhaps hovertips, reduced redundancy of content to minimize total # of clicks to goal.
  • Slow-loading flash: Users have wondered whether the server side is current with platform updates, or needs a cache dump, or ??? to reduce lag reported while opening and solving designs.
  • HTML: Consensus is that html is the right direction, and users support the redesign overall, but express a wish to be consulted about major UI changes so that the efficacy of developers’ efforts is maximized.

Issues:

1) BUG: D) Lab Design List - Cast Votes Display as 0
Issue: In the “My Vote” column, all designs display as “0” votes cast even after casting votes. However, votes were cast and remembered by the system, as evidenced by casting all 8 votes, and the 9th is rejected despite displaying “0”. Additionally, cast votes register in the old lab browser. Issue confirmed by multiple players.
Solution: Unknown
Example: http://prntscr.com/23cu5m
Status: Resolved! Thanks devs! :slight_smile:

2) BUG: E) Lab Design Popup -> F) Lab Design - Javascript Image Doesn’t Match
Issue: In the popup there is a beautiful Javascript image that should essentially be a 1:1 thumbnail representing the actual design. However, the nucleotide colors do not match.
Solution: Unknown
Example:

3) BUG: D) Lab Design List - Base Chunking: Numbers Out of Sync
Issue: Nucleotide bases are chunked by 5s for readability, however header of correlating sequence number becomes skewed as the length progresses.
Solution: Recalibrate.
Example:

4) BUG: D) Lab Design List - Nucleotide Bases Not Correlated
Issue: Nucleotide bases are potentially not correlating.
Solution: Recalibrate.
Example: https://getsatisfaction.com/eternagam…
Status: Unknown

5) USABILITY: Assign Central Hub for Bug / Feature Reporting
Issue: Currently unclear where issues should be centrally reported, as discussions and ideas take place in chat, groups, blogs, wikis, forums, PMs, bug tracker spreadsheet, getsatisfaction, github etc…

  • While the dev chats do give a spot opportunity to raise hot topics, it would be good to have an agreed upon issue-tracking protocol so that issues don’t slip through the cracks.
  • Should players post issues directly to github, or filter through other channels first?
  • Do devs depend on forum comments and/or still reference the bug spreadsheet? Or would it be more helpful to the devs to assign a central hub for feedback?
    Solution:
  • It appears that if a central hub exists already, it is github and/or the bug spreadsheet; therefore the solution may be as simple as placing a more prominent link or guideline to such.
  • Ownership could be assigned to a player or dev to update priority & status of bugs in the spreadsheet. Or is the spreadsheet deprecated? ( there is no year in the date fields )
  • Assign official protocol for full life-cycle of reporting bugs & feature requests:
    i.e.
    A) Brainstorm: chat, groups, blogs, PMs
    B) Define Issues: forums
    C) Formal Issue Filing: dev chat, bug tracker spreadsheet, github
    D) Reference of Current Functionality: wiki
    Examples:
  • player submitted issue: https://getsatisfaction.com/eternagam…
  • GitHub: https://github.com/EteRNAgame/EteRNA-…
  • current bug spreadsheet: https://spreadsheets.google.com/pub?k…
  • example of foldit feedback portal: http://fold.it/portal/feedback
    Status: Unknown

6) USABILITY: E) Lab Design Popup - Exit / Close Button
Issue: Difficult to navigate out of Lab popup window, currently must click outside of popup.
Solution: Add Exit button at the top, same style as Prev / Next green buttons.
Examples: http://prntscr.com/23ky6t
Status: Unknown

7) USABILITY: E) Lab Design Popup - Vote Button
Issue: Old popup allowed clicking of vote button without scrolling; currently for players in smaller resolution browsers, one must scroll down to see the vote button, thus increasing time and disorientation in navigation.
Solution: Add Vote button at the top, same style as Prev / Next green buttons.
Examples:

8) USABILITY: D) Lab Design List - Bottom Scroller Offscreen
Issue: One must scroll down to use the bottom scroller, players request for the Lab Design List to fit the screen, to prevent a lot of extra moving & clicking.
Solution: Resize window according to user resolution, so that users not on a widescreen desktop monitor can still play. Or could look at Google Analytics and see what what range of screen resolutions people have, and then target the UI design to be easily usable for lower mid-range and up.
Examples:

9) USABILITY: D) Lab Design List - View Options
Issue: Players feel inspired to drag & drop the options from left to right, as opposed to using the arrows.
Solution: If possible, enable drag & drop across the chasm.
Examples: http://prntscr.com/23m5da
Status: Unknown

10) USABILITY: D) Lab Design List - Horizontal Guide Lines: Chunking x5
Issue: There used to be horizontal guidelines that chunked the list of user designs in 5s. Without this guidelines, especially with increasing lab participation, it is difficult to navigate the browser.
Solution: Return the guide lines.
Example:
https://d2r1vs3d9006ap.cloudfront.net…
Status: Resolved! Thanks devs! :slight_smile:

11) USABILITY: E) Lab Design Popup -> F) Lab Design - Load in New Window
Issue: Old E) flash browser loaded F) flash design window quickly; however, since redesign change to E) html browser, now the F) flash design window takes at least 5x as long to load. Therefore, players find the back and forth loading between html & flash to be cumbersome.
Solution: Open to suggestions. Current idea is to make the “See Result” button in E) load the F) flash design in a new window, so that F) can simply be closed, and E) does not have to be reloaded.
Examples: Opening a link in a new window is already implemented for loading the D) Lab Design List from F) the Lab Design itself, i.e. http://prntscr.com/23ctxn
Status: Unknown

12) USABILITY: F) Lab Design -> D) Lab Design List - Load in Same Window
Issue: Players find navigating back to Lab Design List tedious due to new UI opening D) in a new window.
Solution: Load D) in same window as F).
Examples: http://prntscr.com/23luv8
Status: Unknown

13) USABILITY: A) Lab List - Navigating Back
Issue: The new UI works seems to work like a google browser session. It used to be that when the user was finished in a lab, they could click the browser ‘back’ button to get back to the Lab List overview, in order to select from the other active labs. Now, since the game remembers each step B) - F), the user must click back through all the pages to return to A), or re-navigate through the parent menu.
Solution: If not possible to revert this behavior while keeping new UI elements, could add Return to Lab List button.
Example: http://prntscr.com/23lu2p
Status: Unknown

14) USABILITY: D) Lab Design List - Global Lab SHAPE Preference
Issue: Global Lab SHAPE preference now resets to disordered when reloading page in new UI, whereas old lab remembered this preference once set.
Solution: Remember global lab SHAPE preference.
Example: http://prntscr.com/23lt8f
Status: Unknown

15) FEATURE: E) Lab Design Popup - Increase Size of Popup
Issue: Currently the popup contains some information that is useful enough that players do not want to lose it, but the increased clicking is not quite outweighing the benefits. In order to move forward with this new direction in development, they would like to ‘run with it’ and increase the size of the popup so that more useful information can be included without cluttering, and potentially obviate the need to load the slow-loading F) Lab Design every time one inspects an E) Lab Design Popup.
Solution: Increase size of E) Lab Design Popup.
Examples: http://prntscr.com/23cr9k
Status: Unknown

16) FEATURE: E) Lab Design Popup - Increase Size of Javascript Image
Issue: Currently must open slow-loading F) Lab Design to view sequence image clearly.
Solution: Increase size of javascript image in popup.
Examples: http://prntscr.com/23coif
Status: Unknown

17) FEATURE: E) Lab Design Popup - Lightbox Javascript Images
Issue: Currently must open slow-loading F) Lab Design to view sequence image clearly. Also, navigating between designs requires many clicks; this would provide an additional navigation method intuitive to how we browse images in slideshow-style services.
Solution: Implement lightbox toggle for javascript image in popup, including prev / next for all designs in that lab.
Examples:“flickRNA”
Status: Unknown

18) FEATURE: E) Lab Design Popup - Add Plot Graphs
Issue: Currently must open slow-loading F) Lab Design to view plot graphs.
Solution: Add plot graphs field to popup.
Examples: http://prntscr.com/23kwqs
Status: Unknown

19) FEATURE: F) Lab Design - Toggle Modules
Issue: Players requesting to have a dashboard view of data, with the option to toggle modules desired to be shown.
Solution: There could be description, melt, dot plot, temp module, author/title module, etc… so the user can choose to display an always-on view of exactly what one needs and nothing more.
Examples: http://prntscr.com/23lx82
https://github.com/EteRNAgame/EteRNA-…
Status: Unknown

20) FEATURE: G) Previous Labs - Sort by Cloud Lab Round
Issue: In the ‘Previous labs’ tab, would like sorting option ‘Sort by Cloud Lab Round’, as the default.
Solution: Add sorting option.
Examples: http://prntscr.com/23m34o
Status: Unknown

21) FEATURE: E) Lab Design Popup - Copy Sequence
Issue: Currently must open slow-loading F) Lab Design to copy sequence.
Solution: Add Copy Sequence field to popup.
Examples: http://prntscr.com/23l19p
Status: Unknown

Wow! Incredible work Machinelves.

Not sure if this has been mentioned already: in the current HTML-based lab viewer, I see things like “location: 0 shape value:0.5993” when hovering over the very first base, and things like “location:102 shape value: NaN” when hovering over the last one. Obviously, a minor shift by one bug in an array.

When will we get the [Switch] Tutorials and Lab Tutorials, which have been marked as “Coming Soon” for over a Year?
I’ve also suggested once before to have a button (and/or a keyboard equivalent) on the Design pages to deselect all selected NTs. Is there any chance of this happening. Thank you.

Machinelves, I love what you have done. I think this will be very helpful to both devs and players. Big thanks!

Here are a few additions from Mat and I:

Comment for point 6

Esc works as exit of the Lab design popup.

Wish for the future: Always announce new shortcuts in news or forum when they gets made. Thumbs up to Diana for introducing some of the new lab features.

Comment for point 8 (from Mat)

Vote option seems to currently be missing. Even with scrolling.


http://eterna.cmu.edu/web/browse/view…

Extra free bug (from Mat)

There are no design name on the designs for the current labs, just lab names.

Current
The design name is Bender

http://eternagame.org/game/solution/3…

Old

http://eternagame.org/game/solution/2…

1 Like

Comment for Comment for point 8

I believe mat is currently accessing the designs by clicking the word “Designs” on the active labs page.

http://prntscr.com/23p4qm

For some odd reason, the html browser does not have the vote option there.

Thx Brourd, for pointing out the location of the bug.

If you could these in:

https://getsatisfaction.com/eternagam…
https://getsatisfaction.com/eternagam…
https://getsatisfaction.com/eternagam…

Just a few things I would like to get addressed, I’m sure there’s more.

Also, this brings up another point for the feedback item. Currently, using the forum, I can’t see the status, or find new things that have been missed I would like to bring up (that I don’t bump into accidentally. With a regular tracker, you can set status (open, closed, noted, etc.) so if one was mssed, I can see that without all the clutter of old cases.

Also, though it’s a big task, I personally would like to see this entire forum sifted through. I know there is TONS of stuff that could be used.

Here is a mini guide on how to avoid that bug:

  1. http://prntscr.com/23rru2

  2. http://prntscr.com/23rrzy

  3. http://prntscr.com/23rs5c

  4. http://prntscr.com/23rsb8

  5. http://prntscr.com/23rspk

Thank you kindly! :slight_smile: And thank you for all your help!

Thank you, this sounds like a bug indeed! I tried to reproduce in both Safari & Firefox, with Javascript enabled, and I think I am not understanding, since I could not replicate it. I am adding it to the list in case the description is sufficient to identify the bug, but if you can please confirm the page and behavior, that would be helpful:

  1. Is this from the following type of html page? ( for example ):
    D) Lab Design List:
    “Vote for the Best Designs” -> http://eterna.cmu.edu/web/browse/3381…

  2. If not, please clarify location of bug

  3. If so, does the following screenshot reflect an example? http://prntscr.com/23tmhc

  4. I do not see any hovertip, url info, or anything on mouseover of any base in this html lab browser, or for that matter in the E) Lab Design Popup javascript image, or the F) Lab Design flash design nucleotides… but I am new to labs and may be missing something. Do I need specific view or column options set to see this perhaps?

Sorry I am a little dense! Thank you for bringing up the bug. Once the spec update is posted, likely to the wiki, I will update everyone, and then if I haven’t already received your confirmation you are welcome to edit/correct the spec directly if that helps.

p.s. thank you for all your help! :slight_smile:

Thank you for the reminder, that’s how we keep things from falling through the cracks. I am putting both of these on the list, and if you could please clarify the following for your second point re: deselecting NTs, that would be very helpful:

  1. Here is a screenshot for reference: http://prntscr.com/23tq2q
    Do you mean:
    A) Button to deselect all command/apple-selected nucleotides?
    -or-
    B) Button to deselect / revert all G, U, and C nucleotides back to A

I assume you mean A, but since I always wanted a button for B, and I may be missing something altogether, I thought I would clarify.

Once the spec is updated & posted, likely to the wiki, I will update everyone, and then if I haven’t already received your confirmation you are welcome to edit/correct the spec directly if that helps.

Thank you for all your help! :slight_smile:

Scratch option B), I don’t know why it never occurred to me to use the reset button in labs, just when designing player puzzles. So we already have that functionality.

Here’s one more option:
C) Button to deselect / unlock all locked bases ( I think it is just one at a time currently )

p.s. sorry for the stray delete, first time using this forum :wink:

  1. this is from the D) lab design list, yes, for instance http://eterna.cmu.edu/web/browse/3312…

  2. I haven’t tried with any other browser than Chrome, for one. And the behavior is possibly browser-dependent, since the mentioned texts are coded as the title attribute of a span element (in HTML, no javascript there), which is not necessarily to be displayed as a hover-tip. Example:
    G

  3. It wouldn’t happen at the spots indicated in that screenshot, because there is no SHAPE data there, you need to hover over a synthesized design

I believe the issue to be important, because the very last measured base always appears as pure white, which means that this NaN value is “interpreted” as a “don’t know”, neither blue nor yellow. And it can’t be right, I believe.

Nando, thank you for this clarification! I don’t know why I didn’t think to try Previous Labs, probably because I am still new to using SHAPE data.

I was able to reproduce the bug:
http://prntscr.com/23u0e3
http://prntscr.com/23u1c1

  1. In this example the NaN is occurring at nucleotide 74; and perhaps I am missing something else as well, but I thought I would mention that the design has a total of 102 nucleotides.

FYI, 75-102 do not produce any hover tip at all for me, whereas 1-73 and 74 function as you described, if 74 is “last”.

=> What would be the correct “last” nucleotide if this were functioning? 74 or 102? In other words, are the greyed-out nucleotides 75-102 meant to be lab markers { or ? } and not relevant to the synth? Or are they malfunctioning as well?

The reason I ask is in case the miscalculation throwing an NaN at 74 is then truncating / failing to populate any further calculation for the rest of the strand, as opposed to an intentional omission of the tail from analysis, and *just* column 74 is missing data.

  1. Regarding your final point, I confirm that in the flash design we see 74 does have a value assigned correctly ( A : yellow ) even though in the html shape data, as you say the indeterminate value is producing a white non-nucleotide in the shape-data color-wise, despite having ( I think ) the correct letter listed ( A : white ). It seems highly likely this is related to the NaN value returned in the hover tip, and potentially related to the value change of 75-102.

Without further feedback I will submit the bug and avoid using the term “last” or discussing 75-102, since I am not sure I understand; and if you can pretty please illuminate my [mis]understanding about whether the tail should or should not be greyed out, I’ll incorporate that accordingly.

Many thanks for helping me understand how to submit the bug!

:slight_smile:

Reference:
http://eterna.cmu.edu/web/browse/3463…
http://eterna.cmu.edu/game/solution/3…

hmm… http://prntscr.com/23u6j6 ( firefox )

http://prntscr.com/23u70d

Due to experimental constraints, one can never get SHAPE data for all bases. In the case you’re presenting, only bases 1 to 74 have been measured, and it is totally normal to have 75-102 grayed out.

thank you that is very helpful to understand!

I started to write up a number of things associated with the page http://eterna.cmu.edu/web/browse/view/3413591/?row=0&o_row=0&current_round=1, which I accessed this morning while looking at the second reproducibility lab. However, just now when I went to describe how to get to that page, I could no longer navigate to it. On the theory that it has been withdrawn, either for rework or because it is obsolete, I’ll not write up the details. But I made notes, so if it still accessible, please bring it to my attention.