Design Discussion - Factoid Landing Page

[d2fong]

From the Factoid Dev meeting 2018/01/31

General Ideas

Vertical split of text A description of what Factoid Links to databases (pathway commons)/other projects People who worked on it (different labs) More distinguishable form of choosing mode (easy to miss that there are different modes) About page Github links Links to Reach, cytoscape General Idea - More context as to what Factoid is

Goals and Key Concepts

• What will entice a user to actually use Factoid if they go the landing page?
• Can we come up with a call to action to get them to use Factoid?
• Who can we reasonably expect to visit the Factoid landing page?
  • publishers?
  • random people?
  • scientists?
• Knowing the target audience would help us focus on the things we need for this page

[d2fong]

https://www.landingfolio.com/category/gallery/application/ for landing page ideas

[d2fong]

Resources to read:

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions, 2nd Edition

Will help gives us context as to what a landing page should do

[d2fong]

Mockups

new.doc.2018-02-02.13.24.40-20180202134850.dragged.pdf new doc 2018-02-02 13.24.40-20180202134850 (dragged) 2.pdf

[sacdallago]

More mockups: Project - Drawing 1.pdf Project - Drawing 1_1.pdf

The proportions are a bit off, apologies for that!

The idea is:

• Have users land on a page where there is a sentence with "Create document" [from text] // [blank], where [] are buttons, whereas "" is just normal text put nicely in-line with the buttons. - The buttons are "color-coded", as you see from the other screen: this gives the users a clue about what they are doing when the text area expands, and that they still have the option to create a blank document.
• Giving color to the buttons and leaving the rest black/white should attract the user's attention there, which is what we want.

Opinions welcome :)

[metincansiper]

@sacdallago seems nice to me. I agree that color-coded buttons would be a good cue for users. However, my concern is that users still would click to "Blank" button by mistake and that would make them loosing their work on the text area.

Therefore, I think that either blank document could be opened in a new browser tab or a confirmation dialog could be prompted when "Blank" button is clicked and the text area is not empty.

[sacdallago]

I am not a huge fan of confirmation dialogues and having "non-bloking" behaviours was a huge concern in this project, if I recall correctly (@jvwong, @maxkfranz ).

In the end, the user will have a way to input text also in the editing stage again (via a separate tab), so, there's a "backup" system right there. I don't think to put an extra layer to make sure the user doesn't miss-click is necessary, so I would go for the simpler version.

@d2fong , @maxkfranz , @jvwong ,... ? :)

[metincansiper]

@sacdallago Currently, when you create a new document in factoid you are not directly directed to the new document but a div that shows links to private and public address of the document appears (Go to http://alpha.factoid.baderlab.org/debug/new-document/fill then click "Create Document" button).

Do you want to keep this feature when the "next" button is clicked in the landing page or should it navigate the user to the private (editable) address of the document instead?

[metincansiper]

I am assuming that it must be kept and implementing in that way. If it should not be kept please let me know.

[sacdallago]

Hi @metincansiper ,

thanks for bringing this up. Good point. Was part of the original idea "someone else submits the abstract for you".

This adds an extra click (and possibly confusion) for the users. Verdict: get rid of it (and redirect the users directly to the private/editing link).

The public link will most likely appear in the right/left context bar ( agree @d2fong ?)

[d2fong]

More mockups:

[d2fong]

Target Audience

• Depending on who our target audience is, we want to say different things.

User Groups

I think there may be three main user groups that will see this page:

• Users who know nothing about biology
• Average biologists
• Super knowledgeable Pathway Curators/Computational Biologists

Given that they will expect different things when visiting this page, we could try applying customer segmentation to this landing page problem:

• Create three landing pages for Factoid which contain different ideas/selling points based on who that person is
• Create a tab that the user can click on
• Best idea would be to have the default landing page be for users who dont know anything
• All other users are funnelled in via ref links that contain implicit assumptions about the e.g factoid.com/?ref=biologist, factoid.com/?ref=comp-biologist

[jvwong]

Let's put aside those who know nothing.

In line with our PC about page, what about putting the most essential information for the widest audience 'above the fold' then layer more detail as the user scrolls down?

I was looking at some examples in the link @d2fong posted for HelloPingPong:

[d2fong]

Ok we can try that.

[d2fong]

What font do you use for the factoid logo? @jvwong

[jvwong]

It's called 'Marion'.

[d2fong]

Design Details

I am making these decisions but if you have opinions on any of these, feel free to voice them.

Font Combos

http://www.dwuser.com/education/content/how-to-mix-match-fonts-effectively/

• Logo/Title: Marion
• Paragraph Header Font: Roboto Slab (Reasoning - slightly less ornamental than Marion, but still has that serif academia feel assuming we are targeting academics)
• Body Font: Open Sans (Reasoning - current Factoid font IIRC, clear and readable )

Colour Palette

Heres an album of minimalistic colour palettes: https://imgur.com/a/X4ub6 http://colorhunt.co/ http://colorhunt.co/c/2763 https://coolors.co/eeeeee-00adb5-222831-ed4a31-767676

[maxkfranz]

Let's not introduce other fonts. That adds a lot of expense to page loads. We already have Open Sans to guarantee the UI is the same across systems.

[jvwong]

Content-wise. Here's my 'Author invite to Factoid':

[d2fong]

First section of the landing page, there are 2 versions 1 with the logo at the top of the navbar another without. IMO the logo floating alone at the top looks out of place.

[d2fong]

Value proposition copy

Here is what I think the value proposition should be:

Publishing and getting your research noticed is essential. Factoid helps you increase the visibility of your publications by linking your research to pathways.

Thoughts on the wording/if I am missing anything?

[sacdallago]

Publishing and getting your research noticed is essential. Factoid helps you increase the visibility of your publications by linking your research to pathways.

this works for me

First section of the landing page, there are 2 versions 1 with the logo at the top of the navbar another without. IMO the logo floating alone at the top looks out of place.

I agree. Also the different size w.r.t font of the navigation is strange

For a first version, to me, this looks good. I'd bring this up with people here

[d2fong]

Thoughts on these words?

Our Mission

Increase the Visibility of important biological Research

Our mission is to increase the visibility of important biological research. Factoid is a cutting edge platform that digitally captures information from academic papers. This provides a means for better search and discovery capabilities academic papers.

By encoding your paper's information in a Factoid document, the future research possibilities are endless; providing opportunities to perform large scale research and analysis over thousands of papers efficiently.

Revolutionize the Future of Academic Paper Curation

The current processes for finding and reading biological literature are time consuming and inefficient. Factoid solves these issues by providing services to search and view thousands of papers in a unified digital format, making it easy to understand a vast array of biological phenomena.

For Biologists

Increase the Impact of Your Research

Factoid makes your paper easily searchable and accessible by encoding it as a Factoid document, a format that makes it easily searchable.

Contribute to the Future of Academic Paper Curation

The current processes for finding and reading biological literature are time consuming and inefficient. By contributing to Factoid documents, you will help seed a ecosystem that has the potential to revolutionize the way academic knowledge is stored and accessed.

For Journals

Increase the Visibility and Traffic of Your Journal

Factoid makes your collection of papers easily searchable and accessible by encoding it as a Factoid document, with each document linking back to your journal to increase awareness and influence.

Become a Pioneer in the Future of Academic Paper Curation

Free your journal from the burden of archaic paper curation processes. Factoid documents for your papers will allow you to easily manage and curate your papers while increasing the channels for accessing your content.

[jvwong]

let's move the text editing into the Google doc.

[jvwong]

Couple of typos.

• Infographic: 'Share your pathway your pathway with the world'. Repeated text.
• 'Crowd-sourcing Pathway Knowledge Curation..' there is a single open bracket. Remove.

[jvwong]

FYI figshare owned by Nature Publishing Group.

[sacdallago]

Possibly add three new sections (as three new components that might be reused in other parts of the application):

1. Examples of text and what they turn into:

Possibly make these clickable, such that a user clicking the "example" factoid will be forwarded to a new document page containing that network (useful for Demo purposes).

2. An explanation of what "IDs" are and how databases work. Nothing too fancy, just a list of 10(?) identifiers amongst proteins, chemicals and whatever not, their IDs, their common names, etc.

3. An explanation of what interaction types are (same as above, just a table with a couple examples of what "activates" means in text form).

[d2fong]

Initial landing page finished. New additions and discussions for the landing page should go in new, smaller scoped github issues.