Improve UI of search results for "Status" section

[amccoy95]

Suggestion to add available mice to the search results was mute as it already exists but this posed a UI problem were these details were being ignored for the information in the left hand column.

Suggestions so far are:

• change status to something more specific
• "phenotype data available" to colour code

Before making any changes to code, mock ups would be the best way to go. All ideas and images welcome

Acceptance Criteria:

• A decision on the mockup of the new search page to implement is agreed upon by CDA / DCC / other interested parties

[amccoy95]

Refactor of data search results design. This design has a stronger focus on heirarchy of information.

• Primary colours take you to the data.
• Follow button is a secondary function to the results page and has been coloured accordingly.
• Common colour recognition. Green = Success = There is Data, Red = Bad = No Data, Blue = Neutral = Highlight information
• Eye now naturally traces over the key information (phenotyped?, order and view data button)
• Fill the now empty space as advertisement for the register interest functionality
• Disabled button to emphasise there is no data yet
• Other: Gene name font size is now bigger for clearer heirarchy, overall button font size lowered by 2

Thoughts?

[amccoy95]

@tkonopka has provided me with some feedback with this mock-up:

I created a high fidelity mock-up of what the page could look like with these ideas. My only issue in the extra spaces created by widening the container. I thought either split results into 2 columns or show the significant phenotypes table (similar to the phenotype icons in Tomasz's mock-up).

Tomasz also mentioned that it would be a good idea to use these mock-ups to find out what people actually want to see on the results page. With a simple survey sent out to the DAWG which will provide useful feedback and giving a reason for our design decisions. Would everyone be happy for me to discuss this with Annie and Terry?

[ficolo]

I love the idea of having the grid on the search result 🤩

[amccoy95]

https://docs.google.com/forms/d/1ABw3_zN2QklWYk57jkgVXGCUrL7aU88gJfSHCcO2HxI/edit?usp=sharing

Results of the questionnaire. I'll do so quick sorting to order item by priority and share those results later

[amccoy95]

https://docs.google.com/spreadsheets/d/1N1qkO7BRrnT_WKSjAmVbsRfR5lJWkBZHIcvuScAQYmc/edit?usp=sharing

Basic analysis of the results.

The bottom table in the spreadsheet was ordered by the average overall scores to get a general order of preferred information. I then created a count of each time a level of priority was voted for.

I then highlighted the numbers next to each other that counted for over half of the points for that item of the gene page. If options 4 and 5 were the majority this gave the item a higher priotity, if 1 and 2 had the majority they were no priority. Option 3 was treated as a mediator, if neither side added up to over half (7) the score from column 3 will be added to both sides and the one with the highest number was chosen as the priority (this has all be colour coded).

I then ranked the items in order of total points in the highlighted groups. The final results, in order are:

• Gene Name

• ES Cell and mouse availablility

• Physiological systems tested (Grid) *

• Significant phenotypes *

• MGI Id

• Synonym

• Viability

• Asscociated disease models

• LacZ Images **

• Number of images available **

• These were to see if there was a favourite on displaying the phenotypes and as the grid won, we don't have to include Significant phenotypes as text.

** These were the 2 that had more votes for low/ no priority so these do not need to be displayed

If there are any other thoughts or better ways to analyse this information please put it here; otherwise I will start with the mock up.

Graphs of results below.

[amccoy95]

Here are the 2 designs created using the feedback from the survey. I have made one to fit the current width of the search results and another the width of every other container which was feedback from Tomasz.

On the wider design there is a lot of whitespace, if anything can think of something useful to fill it let me know. Otherwise I'd suggest sticking to the current width of the container.

[amccoy95]

I received an email from Tomasz with a couple of comments from the designs based off the feedback. These where:

• The viability information appears in a way that suggests it is an annotation from a database (like the gene names and synonyms). But viability is an experimental result obtained by the IMPC procedures. Consider moving that to the right alongside the phenotype grid, perhaps add an icon?

• The phenotype icons and the text summary (e.g. "20 phenotypes in 5 physiological systems") have overlapping information. Consider putting them nearby, or removing one of the representations.

• I would remove the line about diseases because that refers to results that are calculated (as opposed to measured in experiments)

• I would add information about histopathology (microscope section on gene pages) and images. The survey asked about number of images, but the result can nonetheless signal whether they are available or not. (perhaps with a small gray/orange icon)

I made a couple of edits with these comments in mind.

Unless there's any more feedback, this will be the last part of the design phase and we will need to make a decision and think about developing this solution.

[jmason-ebi]

Hi @amccoy95 and all. Please see #157

1) It looks like this design proposal removes production status from the search results. Centers have said that they want people to see that there is production occurring so that researchers can order while products are available from the center.

2) Centers have said they want to see the microinjection status on the search results (See Issue number 2 in #157).

We could remove the production status, but I believe we may need to add it back in later.

[amccoy95]

I would say for point 1, the UI provides all these states already. Maybe not in the specifics but the general notions are there. E.g :

• Phenotype data available. This is indication by state of the "View Data" button, if it's disabled there's no data available to view. This is also backed up by the Significant Phenotypes and Disease associations. If there are non the Phenotyping Abandoned status appears.

• ES Cells and Mice availablilty. This is also indicated by the button state. However the wording does suggest only mice. I have changed the wording in the mock up below.

• Microinjection. This could be similar to the Phenotype status but also display green and with a tick icon when there is data available?

If we want to keep the statuses on the page I have created a mock up where we can display the full text status for ES Cells, Mice and Microinjection. The phenotype data availability will still be indicated by the button state; but in this design this is also backed up by the visibility of the phenotype grid. All grey and low opacity to give the feel of nothing available.

[amccoy95]

Comments from F2F was that UX previously said to keep the search results simple.

[amccoy95]

I've updated the design based of the feedback that it needs to be simple. The addition of the background to the production status give the seperate the eye needs to be able to digest all the text information.

I feel the text could be smaller though, what are people's thoughts on this? How important is this information?

I've also stuck with the button groups as having just the follow button may feel like it'll take you to the content instead of following the gene. Users rely on previous experience more than reading button text. So having a buttons with colours that match the action will help users go to where they want to be.

[amccoy95]

Here is the HTML structure for the search results.

I've added some custom css and the jquery popper library script at the top of the file which will need to be added to the correct locations.

The container structure will need to change, for the header and the thinner containers.

I've utilised the bootstrap library as much as possible to save on custom css

The HTML is to replace the container with the class container single single--no-side on the currently search results page

search-results.txt

[amccoy95]

This has been deployed on beta