User Interface Design

[sprintell]

High Fidelity Mockups: Visual representation of how the catalogue will look when development is done.

Create High Fidelity Prototype: Clickable prototypes of the new appearance of the catalog using Blasmiq or Figma or Invision ... This allows us all to test the catalog prior to development, and discover edge cases and improvements which would have otherwise been missed. It also improves the accuracy of our estimates.

[sprintell]

[ljwh2]

@eks-ebi to review and also look into EBI web guidelines

[ljwh2]

@sprintell for the table, do you also have a mockup of the studies table (as well as associations)?

Also. is the current plan to allow searching in every field? If not, then we should think about how it will look for fields with no search box.

[eks-ebi]

@sprintell I think the EBI website style guide is here: https://www.ebi.ac.uk/style-lab/websites/. It has a number of links to different topics (e.g. colours, page structure etc.). The only thing I notice that doesn't quite match is the page structure (https://www.ebi.ac.uk/style-lab/websites/meta-patterns/page-structure.html), because they recommend a number of universal EBI navigation elements that link back to the EBI homepage etc. Although, as our project is externally funded, we may not have to comply to all of these requirements.

[eks-ebi]

Some more specific comments on the mockups:
Screenshot 1:

1. I think the Catalog Summary (here) and Catalog Statistics (screenshot 2) panels are conceptually the same thing, but they show somewhat different information. Could these be harmonised and reused across both pages?
2. Images on the Submit, Summary Statistics etc. buttons should be all from the same icon set, and I think ideally simpler. I would also like to reorganise these options to better reflect the user flow, as in my lo-fi mock-ups (but that would be low priority).
3. There is some redunancy with (A) the "Submit data" button in the Catalog Summary panel and (B) the "Submit" button in the main set of links - I think I would remove (A).
4. What is the purpose of the "Search for" and "Show all" elements in the Catalog Summary panel.

[eks-ebi]

Screenshot 2:

1. There are two different types of formatting in the Catalog Statistics panel: "Released", "Genome assembly", "Publications" and "SNPs" look different to the other 5 elements. Also, I think these should be reordered to separately group what you could call "release metadata" (i.e. release date, genome assembly, dbSNP build, Ensembl build) and "current Catalog content" (i.e. publications, studies, top associations, full summary statistics, mapped genes).
2. Filter results panel: I think we discussed that the number in a circle next to each page type may give users the wrong impression that this is an accurate count of the number of e.g. publications related to their search term (i.e. if they search for "diabetes" and this say Publications (20), they may assume that there are only 20 publications about diabetes. Removing this number may nudge users to click on the actual "diabetes" Trait page to find this information.

[eks-ebi]

Screenshot 3:

1. The trait label (Parkinson disease) should be much more prominent as the title of the page.
2. If trait label is used as the heading, it may not be necessary to include it again as a separate line in the next panel. So EFO ID should be the first row after the title.
3. I find it a bit misleading that the external links on the right are now embedded within the individual metadata rows. For example "View in Open Targets" appears in the "Synonyms" row which seems to suggest that this link is somehow related to Synonyms, which is not true. Could the external link buttons be pulled out into a completely separate panel, or otherwise separated from the information on the left?
4. The Associations table example here doesn't show all required columns (e.g. EFO trait) - will this be scrollable left-to-right to view additional columns? Or should there be a button to select/deselect additional columns?