New main page

[AlexanderPico]

Design ideas and implementation for the main landing page for the new WikiPathways site

[AlexanderPico]

From meeting notes on front page design ideas:

• Center six from https://www.ncbi.nlm.nih.gov/
• Search
• Browse: facet (default) and table (advanced)
• Download: link to data
• Learn: link to academy
• Link to communities
• Footer links
• Header links: +download

[AlexanderPico]

Some "essentials" we should have consensus on before picking on details:

• Layout: top row of 2, bottom row of 4. I think this is a good balance of content and clutter. It's also nicely responsive per screen size. If we are going to change this, we need to do it early.
• Top row content: intro (left) and stats (right).
• Dynamic stats: the stats were designed to be easily extracted and updated. The plot comes from an Rmd (click on plot to see it), which can be run monthly. That numbers either come from Jekyll automatically (each build) or from two data tables, which can be updated by GitHub action.
• Bottom row content: Let's settle on the major categories before picking the particular links.

Color choices, link styles, button styles, etc. all need more work as well (hopefully with input from graphic designers). But these are separate (and lower priority) than the essentials above.

Any other essential decisions for the main page?

[khanspers]

The new main page is fantastic! A couple of comments after reviewing and reading previous comments:

• Layout: I vote to keep the current top row of 2, bottom row of 4.
• The Download link in the collapsible menu at the top goes to a missing page, should probably go to the same as the link in the footer, https://data.wikipathways.org/current/.
• Minor: About the placement of footer, there is some whitespace above the footer that could be decreased.
• Minor, color: The contrast between the light grey outline boxes and rounded rectangle outlines of links is not great. But not sure how to fix it.

[AlexanderPico]

Thanks for the feedback!

• Download link -- fixed
• Footer padding -- fixed

Saving color decisions for professional graphic designers. But if anyone has suggestions, feel free to try them out.

[danidi]

Hi, it looks good, but I must admit I feel a bit lost when I first look at it. My first instinct is to look at the picture, but from there I can't access any of the data. The bullet points with pathways, diseases, etc. could link to pages where I find all these. These links are instead in the Browse section, so I'm wondering if there is a way to combine these two (having the counts as well as the linkouts). For the diagram, I would add a "last updated" info, so people see it is really active. Also very prominent, because it is in the middle, is the Analyze section. There is information in the mouse over, but just seeing the buttons, I'm not excited to follow the links. Maybe these would be better in the "How to use" section? Something I really liked on the old page is the "Today's Featured Pathway", which can bring you to a pathway very quickly if you just want to see any pathway (e.g. to get to know the page or show it in a presentation). Is something like this planned here as well? Is the search functionality on the left the same as on the top right of the page?

I might have a few more comments later, but need to leave now.

[AlexanderPico]

Thanks for the feedback! Some quick responses:

• the bullet points are now links. There isn't a specific link for 'diseases' yet, but maybe someone could add that in the future.
• Adding a "last updated" tag would be cool. I'm not sure how to do it. Perhaps once we've figured out how to automate the updating of the figure, then it will be clearer how to add this tag.
• We could add icons to links. I'd rather not bury them again; it really is the main activity for our content.
• Maybe a "featured pathway" could be added to the top of the current "Analyze" block (which could be a shorter list). Rather than a random pathway, maybe it'd be better if it displayed the newest or more recently edited pathway? [[I also use the current one a lot to just get to a pathway page quickly :) ]]
• Yes, the search is the same. The one on the top is present on all pages.

Keep the feedback coming!

[AlexanderPico]

Here's an attempt at adding a "latest" pathway card and analysis logos...

[khanspers]

Great updates! Regarding the comment of adding "last updated" info to the stats graph/area, we have the "updated" tag in the footer (generated from commits). Can we just reuse this and also add it to the stats area also?

Question: In the "Latest" block, where you thinking that the link to "New pathways" would go to a page similar to the current page? https://www.wikipathways.org/index.php/WikiPathways:NewPathwayReleases

[AlexanderPico]

• Oh, I thought they meant the last time the figure was updated, which is different from the last time the a database commit was made (i.e., the "updated" tag in the footer). Depending on how the figure is actually updated in the future (yet to be determined), maybe it will be updated with each edit? Currently, I'm planning to manually update it monthly.
• You make the NewPathwayRelease page by hand, right? I'll leave it to you to either migrate that practice to the new site or find a way to automate it so you don't have to do it by hand. For example, Jekyll can probably just list the last n pathways in order on a page... I'll try that now!

[AlexanderPico]

@khanspers that wasn't too hard! There are now "new-pathways" and "recent-pathways" pages that are dynamically updated and linked to from the main page.

One really cool thing about the new pages (in addition to the fact that you don't have to manually update them) is that we can easily pull out all the authors of these subsets, thus highlighting "Recent Contributors" for edits and new pathways.

Note: the WPID sorting is currently broken (e.g., WP999 > WP1234), but that should be fixable. (edit: sorting fixed)

[khanspers]

Super cool! Thanks!