Eterna 2 Mockup ideas

[mat747]

The Eterna 2 Mockup ideas were make in response to Rhiju comments on RNA picture library + new idea on The RNA sequence search tool.
https://getsatisfaction.com/eternagam…

The Mockups below were made in January. All were sent to other players for feedback before sending them to Jee. Text and Mockups below were from emails sent.

Players Puzzle page view options

Mockups/Layouts of the Players Puzzle page. The Layouts I have created with the goal of optimizing the page for players with widescreen monitor.
All the Images I have sent to you have first been sent to Eli, Brourd, Starry, Jandersonlee and Edward for Feedback/Suggestions and discussed in chat/emails.
The Feedback was positive, The words blue space come up a lot when discussing the current players puzzle page. Edward had made some suggestions which I have included. (Below)

Image A - Is the current view (screenshot as taken)
http://img94.imageshack.us/img94/5610…

Image B - Optimized for widescreen. Which would increase the number of icons/puzzles displayed from 24 to 40 per page. (Still using the current 8 rows)
All the icons are still Actual size and I moved the chat box.
http://img825.imageshack.us/img825/14…

Image C - This view/layout would increase the number of icons/puzzles displayed from the current 24 to 60 per page. (Still using the same amount of view area as the current players puzzle page)
The images of the puzzles on the icons are actual size images from the current player puzzle page icons without the names.
http://img59.imageshack.us/img59/7749…

Image D - This layout shows what would happen when a player moves the mouse over a puzzle icon,(in Image C) Two icons would be displayed “play now” and “i” (info).
http://img42.imageshack.us/img42/4720…

Image E - The Layout Shows if the “i” icon had been clicked (Image D), The box would appear with details/info of the puzzle with a puzzle image bigger then any
currently displayed (on that page).
http://img685.imageshack.us/img685/79…

[mat747]

Mock ups/Layouts of the Past Lab Puzzle page. The Layouts I have created with the goal of using the screen space in a efficient way. (optimizing the page for players with widescreen monitor)
All the Images I have sent to you have first been sent to Eli, Brourd, Starry, Jandersonlee and Edward for Feedback/Suggestions and discussed in chat/emails.
The Feedback was positive with Image 3 & 4 being the preferred choices with the capability of the information/image being increased.
Eli had made a suggestion which I have included. (Below)

Image 1 - Is the current view (screenshot as taken)
http://img571.imageshack.us/img571/45…

Image 2 - Optimized for widescreen. Which would increase the number of icons/puzzles displayed from 1.5 to 4 per page. (Still using the same amount of view area as the Past Lab puzzle page)
Players could Expand each past lab information area via the “i” INFO button to view the past winners.
http://img515.imageshack.us/img515/83…

Image 3 - This view/layout would increase the number of icons/puzzles displayed from the current 1.5 to 18 per page. (Still using the same amount of view area as the Past Lab puzzle page)
The images of the puzzles on the icons are actual size images from the current past lab puzzle page icons.
http://img6.imageshack.us/img6/2973/c…

Image 4 - Large icons - I used the second from last zoom in setting.
Should make it easier to see the shapes of the lab puzzle when searching.
http://img706.imageshack.us/img706/64…

Image 5 & 6 - This layout shows what would happen when a player moves the mouse over a puzzle icon, Two icons would be displayed “Lab Results” and “i” (info). If a played clicked on the “i” button Image 7 would be displayed.
http://img341.imageshack.us/img341/27…

http://img69.imageshack.us/img69/4695…

Image 7 - The Layout Shows if the “i” icon had been clicked (Image 5 & 6), The box would appear with details/info of the Lab with a puzzle image bigger then any
currently displayed (on that page). (I used the third from last zoom in setting for the image)
http://img189.imageshack.us/img189/69…

Eli suggestion

“but I think the white is too sharp and and disturbing, as it is too contrasting. You want something lighter than the background, but not too far way from the background. Light yellow, perhaps. I don’t know.”

[mat747]

Pop up scroll/select box

Idea for the in the lab.
A pop up scroll/select box (need a name for it) where a player could browse through the lab designs and could select/load from.
I was thinking that the pop up window could be opened by a Button or Holding you mouse cursor at the bottom of the screen or both.
More then one size option would be more flexible for player with different screens.

http://img840.imageshack.us/img840/76…

http://img214.imageshack.us/img214/76…

http://img513.imageshack.us/img513/76…

http://img402.imageshack.us/img402/96…

Eli
“I like this idea very much. I would like it to be combined with the one of your other pictures where two designs is side by side on the screen. Like as soon as you choose one of the smaller designs to compare with big one, it jumps up and become as big as the one you compare with.”

JL
“Cool idea. It would be good to be able to scan the labs both in normal and results mode. Perhaps the current mode of the lab would determine which scroll mode pops up?”

Brourd
Nice work If only one scrolling option had to be chosen, I’m starting to lean towards this pop up scroll. It would have to be similar to other designs, where hovering over the design box would enlarge it, but overall it looks great. Thanks for the layout.

[mat747]

Preview a design from the lab page and selecting designs

Image A
How you could select designs that you want to view, with the column on the left.
clicking on the eye icon would select/deselect all designs or you could click the boxes to view multiple designs in the lab using the scroll or next/back (I hope we get those features too) or just click on the line of the design like we do now.

http://img88.imageshack.us/img88/869/…

Image B & C
Preview a design from the lab page, by click on the line of the design. then clicking on the image of the design to enter the lab or click an icon on the preview to close it.

http://img684.imageshack.us/img684/85…

http://img401.imageshack.us/img401/71…

[mat747]

Search fields mock ups/layout

Search fields mock ups/layout for the drop list/menu’s.
The search fields have been sent to other player for feedback.

Nucleotide length
Player could select from two choices Interval or Exact.
Interval - could be used to find shapes with Nucleotide length greater then (Min) or smaller then (Max) or a specified range.
Exact - Find the shapes with the same Nucleotide length that was set.
http://imageshack.us/a/img109/2324/nu…

Hairpin loop lengths
http://imageshack.us/a/img99/7521/hai…

Internal loop
http://imageshack.us/a/img213/2721/in…

Stem lengths
http://imageshack.us/a/img528/4255/st…

The above search fields have the same choices of the Interval or Exact as the Nucleotide length field, with the Exact field having an option that can be enabled to allow a player to specify a sequence.

Multiloop
The Multiloop I done an example of how it could be used, with screenshots of “chalk outline” attached, which the example is based on.
http://imageshack.us/a/img217/3350/mu…

http://imageshack.us/a/img337/7162/ch…

http://imageshack.us/a/img12/9458/cha…

[mat747]

Searching for similar designs idea

Idea of using the wildcard “*” to help search for designs that are similar (Mod/Twin) Via the sequence for those design.

Here are the designs I have chosen to help explain the idea. The sequences are close on those designs.

Design 1: Is my 92% I’m using as the selected design.
Design 2: Ding 100% was a mod of the (92%) adding a “G” on the all the hairpins. A sequence difference of 4 bases from design 1
Design 3: Berex 98% was a mod of the (92%) by adding a “G” on two hairpins and 4 swaps on the neck. A sequence difference of 10 bases from design 1

http://imageshack.us/a/img193/4773/tw…

Below are two methods of searching I think could be used.

Method 1
Using the sequence box and the search field, which would have two options (thinking of a third option)
A player would enter a sequence into the sequence box, then chose the sequence similarity search from the drop box, then pick Exact or Interval to find similar designs with chosen the number of bases different from the entered sequence.
http://imageshack.us/a/img266/9519/tw…

Method 2
A player would enter a sequence into the sequence box, then Using the wild card “*” to change bases in the sequence to “*”., to find similar designs. You would be able to specify specific area or bases.
http://imageshack.us/a/img819/5233/se…

[mat747]

Shape notation

I sent the email Shape notation idea below to Eli, Brourd, starry, edward andjandersonlee. Their comments/suggestions have been included.

When we are looking at the player projects we are going to see elements/section of a shape that we find interesting and want to know are there other projects with that elements/section too.

Shape notation idea which i think could make it easier to copy a elements/section from a shape, then use that section to search.
A player could select/highlight the portion of the puzzle one is interested in, instead of having to type, via a hotkey (something like we have to highlight a single base) then click a button to copy the section of the Shape notation and then you paste into the search box,the computer would change/add the wild card “*” for you.

Notation example copying the multiloop from Quasispecies’s Bulge Sampler: 1-nt

.(((.((((((((…)))).))))…((((.((((…)))))))).))).
to
*((.((*))…((*)).))*

Before selecting
http://imageshack.us/a/img62/6644/bul…

After selecting
http://imageshack.us/a/img411/1622/bu…

Other examples

Before selecting
http://imageshack.us/a/img222/2438/in…

After selecting
http://imageshack.us/a/img442/9483/in…

http://imageshack.us/a/img826/7839/bu…

Eli

“I like very much the idea of being able to highlight the portion of the puzzle one is interested in, instead of having to type.
It would be even better if I didn’t had to paste the sequence, but simply could highlight and choose the option search.”

Brourd
"I really like this idea. A very intuitive way of sorting through shape notations, without having to spend large amounts of time deciphering complex shapes, and deciding what the shape notation would be.
Another great idea "

Jandersonlee
"cool idea. I’m assuming that * means any arbitrary sting. It might be
useful to introduce a second symbol like _ for a string the contains a
balanced number of dots and left and right brackets with no unbalanced
brackets. Then the search string would be:

*((.((_))…((_)).))*

and would select a true three-branch multi-loop rather than part of say:

…(((.(((((…))…((…))))).))…

which could be selected by an arbitrary * match.

I really like the idea of search by example though.

Another thought: When creating a search by example, you should probably
select stack bases () in pairs. That will make sure that any missing
parts can be elided by _ in the middle of the search string."

Edward

"Yes shape notation searching is going to have to be important

I think the problem with searching for *((((…))))* may be that it
will pick up
*(((((…)))))* and *((((((((((…))))))))))* etc1

and if you want to look at size 4 endloops with exactly a 4stack
holding it bound
what you really want is it to pick up is going to be

*.((((…))))* and *((((…)))).* and *)((((…))))* and *((((…))))(*

so learning how best to search and what the tricks to that are might
be difficult

“?” might be a good second wildcard after “*” to give you any “one
wild character”

Edward "

I believe this idea would help newer players to search for shape they are looking for in a Toy like way and save older players a extreme amount of time.
Being able to select then paste to search for the Exact shape would be great, with the option changing shape notation by hand to add “*” , “_” symbols this would give ever more flexible.
(I have an idea how this could be done via the interface too, when you are selecting the bases.)

[Eli_Fisker]

I will love being able to find near twin designs. By the way, I would love if the trunckating or wild card could be placed in the design with a fifth colored nucleotide too As I would soon get lost in the letter sequence. Unless the nucleotide lights up, like it do in the puzzlemaker, when you are changing something there. So I like a letter search, but combined with the possibility of a visual search too.

[bentrem]

/* paper trail */
Apparently SHAPE data and “shape notation” is not name-space collision. Something I’m missing here.

p.s. just my way of “Following” a thread. this one is ace

[jandersonlee]

SHAPE data is part of the lab results. It is an estimation of the binding potential of various nucleotides in the strand which gives feedback on how the strand is folding in-vitro. Each nucleotide (or most – not all can always be measured) is measured for free-binding potential and given a number. That measurement is confounded by the fact that the RNA in solution may actually be folding into many different shapes at the same time and the number for each nucleotide is therefore a weighted estimated AVERAGE of the free-binding potential of a nucleotide across all shapes in various relative concentrations (plus experimental error).

The “shape notation” is the string consisting of dots and brackets that specifies a particular shape by specifying the bonding pattern. What we are discussing above is how might one extend that notation by adding symbols such as * and _ which would enable a search pattern that could be used for example to find designs in a database that contained a particular sub-shape, such as a tetra-loop with attached 4-stack “*((((…))))*”, or a 1-2-1 multi-loop with attached 2-stacks “*((.((_))…((_)).))*”.

[bentrem]

@janders - If those terms work in practice, then that’s that. I had imagined someone talking referring to a string of notation as “shape data”.

[mat747]

Mockup idea for switch puzzle info pages.

I would like to be able to see both shapes of a switch puzzle, when I open its puzzle page.

[Eli_Fisker]

Iroppy came up with an idea related to the above idea, but different. I have added the chatlog here.

lroppy: while we are on ideas [0:50 AM]

Eli Fisker: yes, Iroppy [0:50 AM]

lroppy: another one comes to mind [0:50 AM]

lroppy: any firefox users? [0:50 AM]

Eli Fisker: yep [0:50 AM]

lroppy: ok [0:50 AM]

lroppy: when you open a new tab in Firefox [0:50 AM]

lroppy: you get the thumbnails of MRUs [0:50 AM]

Eli Fisker: MRU? [0:50 AM]

lroppy: Morecentlytly used [0:51 AM]

lroppy: list [0:51 AM]

Eli Fisker: yes, same in chrome [0:51 AM]

lroppy: I am spending a lot of time clicking through results to get a the blue-yellow visual box [0:51 AM]

lroppy: would be nice to post them when they are assessed [0:51 AM]

lroppy: as a UI [0:52 AM]

lroppy: so we could visually review all [0:52 AM]

lroppy: synthesises [0:52 AM]

lroppy: results [0:52 AM]

lroppy: and [0:52 AM]

lroppy: one could quickly [0:52 AM]

lroppy: scan visually [0:52 AM]

Eli Fisker: It would be really great to get easier access [0:52 AM]

lroppy: see [0:52 AM]

Eli Fisker: As a UI, not sure I understood that part [0:52 AM]

lroppy: if a particular hairpin had closed [0:52 AM]

lroppy: in one design [0:52 AM]

lroppy: ok [0:52 AM]

lroppy: right now [0:52 AM]

Eli Fisker: you mean scroll through them? [0:52 AM]

lroppy: no [0:53 AM]

lroppy: we get list results today [0:53 AM]

lroppy: that say [0:53 AM]

Omei: Eli, you have my blanket OK to post from chats. [0:53 AM]

Eli Fisker: Thx, Omei [0:53 AM]

lroppy: designer X - NAMEY - Score Z [0:53 AM]

lroppy: that is the display or UI [0:53 AM]

lroppy: when you go into past labs [0:54 AM]

lroppy: a list report [0:54 AM]

lroppy: agreed? [0:54 AM]

Eli Fisker: yes [0:54 AM]

lroppy: ok [0:54 AM]

lroppy: imagine if the UI showed like the new tab screen on [0:55 AM]

lroppy: chrome or Firefox [0:55 AM]

Eli Fisker: tab? [0:55 AM]

lroppy: and visually showed all the designed results as thumbnails [0:55 AM]

lroppy: does not have to be a tab [0:55 AM]

lroppy: imagine it just replaces the list [0:55 AM]

Eli Fisker: yep. that would be great too [0:55 AM]

Eli Fisker: I will love to keep the list reports for comparison of designs. I use it a lot. [0:55 AM]

lroppy: not saying lose the lists [0:56 AM]

lroppy: but as alternate presentation [0:56 AM]

lroppy: and the images are static [0:56 AM]

lroppy: so easy once they are posted [0:56 AM]

lroppy: to scan all of them on one long page [0:56 AM]

lroppy: of thumbnails [0:56 AM]

Eli Fisker: agree, it will be very easy compared to now. Way too many clicks to get to the information and back [0:57 AM]

lroppy: with the 3 text parameters [0:57 AM]

lroppy: underneath them or something like that [0:57 AM]

lroppy: designer, name, score [0:57 AM]

lroppy: = our 3 currently provided text parameters [0:57 AM]

Eli Fisker: yep and good ones [0:57 AM]

lroppy: ok [0:57 AM]

lroppy: end of idea [0:57 AM]

lroppy: and [0:57 AM]

Eli Fisker: What you are saying reminds me of something else. Is it something like this: [0:57 AM]

Eli Fisker: https://getsatisfaction.com/eternagam… [0:57 AM]

lroppy: re: your link from mat [0:59 AM]

lroppy: yes to thumbnails, but [0:59 AM]

lroppy: imagine a whole screen filled with them [0:59 AM]

lroppy: as a UI [0:59 AM]

lroppy: and clickable [0:59 AM]

lroppy: obviously [0:59 AM]

Eli Fisker: Ok [0:59 AM]

lroppy: think of it as [0:59 AM]

Omei: I don’t have the long experience of judging designs that you guys do. But at this point in my “career”, I find the dot plot a lot more informative than the design itself. [0:59 AM]

lroppy: do you want text or images or both [1:00 AM]

lroppy: Omei, I don’t trust the dot plots very much [1:00 AM]

Eli Fisker: Omei, the dot plot is based on Vienna and it is not truly accurate, just an estimate. [1:00 AM]

lroppy: Eli and i agree completely on this one [1:00 AM]

Eli Fisker: A bad dotplot is usually always bad, but perfect dot plots can lie [1:00 AM]

lroppy: y [1:00 AM]

lroppy: like too many GC [1:01 AM]

lroppy: look good [1:01 AM]

Eli Fisker: I will like to see the design itself and then use the dot and melt plot as an extra [1:01 AM]

lroppy: y [1:01 AM]

lroppy: brb [1:01 AM]

Eli Fisker: But it would be fine if we could set the options after what view we prefered [1:02 AM]

Omei: Absolutely. They only represent one aspect, and they are completely dependent on the energy model. But as a visual summary for comparing designs, they are the first thing I would want. [1:02 AM]

Eli Fisker: Yes. And I think we should be able to set it. I like to see the shape data beside the design [1:03 AM]

Eli Fisker: and as is I can’t [1:03 AM]

[Zanna]

This is fantastic! We need something like this. It would make it much easier to study lab results.

[Eli_Fisker]

Just wanted to highlight that Nando has found a solution on a long time wish. The next and back button that Mat has been proposing. Even without the planned button yet, but a shortcut, it is already super useful. Making a way to watch through the lab data without having to go back and forth a lot. This is simply amazing.

Way to go, Nando!

The chat holds a description of how to use the new tool:

Nando: well, I meant to present the thing I was hinting at in the last item of http://www.eternagame.org/web/blog/6175540/ [0:48 AM]
Jennifer Pearl: Sorry I step back and hand Nando the mic [0:48 AM]
Elves: heheh [0:48 AM]
Nando: it is just a last minute addition that I incorporated just minutes before John pushed the build 116 to prod [0:49 AM]
jnicol: good timing [0:48 AM]
Elves: hahaha  [0:49 AM]
Nando: the simplest way is to demonstrate, I guess [0:49 AM]
Nando: so please guys, open http://www.eternagame.org/game/browse/6171039/ [0:49 AM]
Nando: pick a design and load it in the puzzle viewing [0:50 AM]
Elves: opened! [0:50 AM]
Nando: switch to PiP and natural mode, for good measure [0:50 AM]
Astromon: i have mine opend 2 [0:50 AM]
Astromon: Okay! [0:51 AM]
Nando: as you can see, the name of the design appears at the top [0:51 AM]
Astromon: Yay [0:51 AM]
Nando: now, please press ‘D’ [0:51 AM]
Astromon: d [0:51 AM]
Astromon: D [0:51 AM]
Astromon: is something suposed to happen? [0:52 AM]
Jennifer Pearl: cool [0:52 AM]
Nando: click on the puzzle astro, to give it the focus [0:52 AM]
Jennifer Pearl: so pressing U does the opposite [0:52 AM]
Nando: well guessed Jenn [0:52 AM]
Jennifer Pearl: :_) [0:52 AM]
Astromon: Oh great! [0:52 AM]
Jennifer Pearl: [0:52 AM]
Astromon: awesome [0:52 AM]
jandersonlee: TANK YOU! THANK OU! THANK YOU!!! [0:52 AM]
Nando: understand this: it’s minimalistic and primitive, but I thought some players may find the feature useful [0:52 AM]
Brourd: A player like jandersonlee as an example? [0:53 AM]
Astromon: very [0:53 AM]
Astromon: indeed [0:53 AM]
Astromon: thanks for putting the submit button on the main ui also [0:53 AM]
Nando: the future for me is to associate these shortcuts with graphical elements, and expand them eventually [0:53 AM]
Elves: so this is the next / previous button?!?! [0:54 AM]
Nando: by the way, if you have inputs as to where to put buttons, and how they should look like, please PM [0:54 AM]
jandersonlee: <<< and >>> [0:54 AM]
Elves: it’s so cool to see the design morph as well [0:54 AM]
Nando: ah, forgot to mention, this will follow the filters and sorting you set in the design browser [0:54 AM]
Elves: ya on either side of the title perhaps? [0:54 AM]
jnicol: I like that you can filter the browse window and only view those deisgns, well done! [0:54 AM]
Elves: wow Nando thank you!! [0:54 AM]
jandersonlee: evn more awesome! [0:54 AM]
Jennifer Pearl: i agree that is even more awesome [0:55 AM]
AndrewKae: head explodes [0:54 AM]
Elves: hehehehe [0:55 AM]
Elves: round of applause for implementing much requested feature [0:55 AM]
jandersonlee: Eli will aprove I’m sure [0:55 AM]
Elves: yay!!!  [0:55 AM]
Nando: planned is also to acces descriptions and comments, and later, expand the lab results viewing similarly, specially with flourescence data [0:55 AM]
Nando: fluo* [0:55 AM]
jandersonlee: [CLAP][CLAP][CLAP] [0:55 AM]
Nando: flourescence was funny though [0:56 AM]
Nando: @JL: I thought a lot of you doing this glad you like it [0:56 AM]
Elves: super cool thank you very much Nando [0:56 AM]
jandersonlee: your efforts are much appreciated [0:56 AM]
Nando: yw guys [0:57 AM]
Nando: and again, this is not meant to stay just that way, but I suppose it’s possibly already useful [0:57 AM]
Elves: omg how many clicks have been saved, and the loading time. very awesome. [0:58 AM]