Landing page features

[maxkfranz]

Description of new feature

Scope out the features that would be useful for a landing page.

Potential features

In no particular order:

• [x] Let users know what they must provide to the app as input (a balance with the breadth of supported input)

• [x] Explicitly let users know what they get from the app, e.g. example query (link to figure, link to original paper)

• [ ] Help documentation

• [x] FAQ -- see #169

• [x] Point advanced users to EM Desktop

• [x] How to cite the app

• [ ] Funding information

• [x] Information about the Cytoscape Consortium and the lab(s) involved in this app

• [x] Contact information

• A separate landing page v.s. integrating these elements in the query page (depends on how many of these features we need)

For each of the above features, we need to scope out the priority (e.g. MVP v.s. short-term v.s. long-term) and the implementation approach.

[maxkfranz]

Which (minimal) elements & how for MVP

For MVP:

• Example result network (link to result page, link to PDF or Pubmed, link to input file). E.g. 'See an example figure for Lorem ipsum dolor sit amet by Doe et al., made from Doe's data'
• Misc. links (lab, Cytoscape, etc.)
• Anything else important for MVP?

For future: File issues for future enhancements to the front page and/or landing page.

[maxkfranz]

Caching the example result

[maxkfranz]

Punt

[chrtannus]

This is a preview/draft of the new EM-Web homepage (on desktop for now), with just the basic structure and sections:

Still many TODOs, including:

• We need a better figure.
• Review all texts.
• The blue text "RNA-Seq file" (description text below the tagline) should open a popup with a quick explanation about the file formats and a couple of samples for download.
• I don't know yet where to put the "Example result network".
• Not sure about the main menus (e.g. should FAQ be inside Help? Cite inside About? etc.)
  • Should we just Github Pages for the content, open them in our own separate pages?
• Footer logos/links:
  • I guess I need to add the Cytoscape Consortium, right?
  • Do we need both Donnelly Centre and Uoft logos?
  • Anything else?

[maxkfranz]

Looks very good

Some discussion points for tomorrow:

• App name SEO, e.g. 'EnrichmentMap: RNA-Seq'
• Title -- general / clear balance
• Citation info close to button
• Paragraphs
• Footer order
• Dialogue
• Video

[chrtannus]

The page so far:

Upload dialog:

[mikekucera]

Overall it looks great. Minor suggestions...

• The format page should probably mention that we accept Ensembl and HGNC gene IDs, and that they are for Human species.
• Should mention that Group B is the control.
• There's a noticeable flash when switching between pages of the popup dialog. It looks like the background darkening effect momentarily switches off then back on again.
• This text isn't exactly correct: "If there are additional columns, such as description, you will have to set them as “ignored” in the next step." The description column is actually hidden by default because its always ignored. We could either remove the "such as description" text or not hide the description column in the class chooser to make it consistent.

[chrtannus]

How about this for the Upload info?

• The first column is the gene name (Ensembl or HGNC IDs, for Human species only).
• If there are additional columns, you will have to set them as “ignored” in the next step.

(*) Notice that I'm suggesting linkouts for Ensembl and HGNC.

And this for Groups?

• Define two sample groups that will be compared against each other — Group A (experimental) vs Group B (control):

[mikekucera]

I like it. However, I don't think the emphasis is necessary, its kind of distracting. "Ensembl" and "HGNC" should be the same color as the rest of the text, and "Human" doesn't need to be bold/italic. Thats just my opinion.

[mikekucera]

Another very very minor issue I see is that depending on the screen width it will sometimes line wrap in the middle of "RNA-Seq", and that just looks weird to me. Apparantly this can be fixed by using a different unicode character instead of a normal hyphen: https://stackoverflow.com/questions/8753296/how-to-prevent-line-break-at-hyphens-in-all-browsers

[chrtannus]

Cool, The NON-BREAKING HYPHEN works!

Regarding the upload text, I'll remove the emphasis and make the Ensembl/HGNC links less distracting, but they still have to be highlighted somehow to indicate that they are links. My suggestion is to use a slightly brighter font:

[chrtannus]

After my latest commit, this is how the landing page looks on the MacBook Air (simulation):

This should be enough to show the whole citation box, even if the browser has tabs. If not, we could still reduce the figure's height a bit.

[chrtannus]

Using a screenshot of the editor as the landing page figure:

[chrtannus]