Spec, design, and present a wireframe for the Katsu browser

[sh-ura]

As observed in the completion of #19 , the process of {collecting specs, wireframing, collecting feedback, and iterating} lends itself towards a feature-complete, consistent, accessible, and good-looking frontend design.

This time, all stages of the wireframing process will be covered by one ticket. Refer back to the subtasks of #19 for details on how to complete each stage of the process.

You do not need to wait for "review" on the subtasks below in order for them to be completed. Mark them as completed (and move on) once you have met the Acceptance Criteria listed for them.

Acceptance Criteria

• [x] Write up a list of questions to use during the spec-collecting stage. Document your questions in the comments below this ticket.
• [x] Collect and document specifications for the Katsu browser from stakeholders
• [x] #29
• [x] Mock up first-draft wireframe for the Katsu browser. It does not have to be final-draft levels of detailed, but should be detailed enough to garner useful feedback.
  • [x] The wireframe should include your original chart.
• [x] Collect and document feedback on your wireframes from at least Kat. Remember to give them context on what they are looking at so that they can analyze your wireframes with the general specs in mind.
• [x] Integrate the feedback received into 1 detailed second draft of the wireframe
• [x] Collect feedback on your second draft from Kat.
• [x] If necessary, integrate any final suggestions to produce 1 final draft of your wireframe.
• [x] Link the wireframe in the comments below.

Resources

The cancogen_dashboard that we installed together two weeks ago contains some example UI for the Katsu individuals endpoint. Try to match its style and dependency list as closely as possible, as the goal is to integrate your UI elements into this dashboard in the long term (ie. after you leave.) According to Jimmy, the package used for the chart components is highcharts cancogen_dashboard Individuals Overview source code: https://github.com/CanDIG/cancogen_dashboard/blob/develop/src/views/IndividualsOverview.js cancogen_dashboard charts components source code: https://github.com/CanDIG/cancogen_dashboard/tree/develop/src/components/Graphs

Time Estimate

The assigner estimates that this story should take ~1 week to complete. In fact it must take at most this amount of time, or we will run out of time for the implementation work.

[Samarth-Agarwal1]

What sort of branding information should be visible in the UI?

Are there specific colours or shapes that I need to incorporate to maintain brand consistency?

Is there any copyright/trademark/licensing-related information that should be present in the UI?

Are there any accessibility-related concerns I should prioritize in the design?

What browsers is this expected to be compatible with?

What are the key goals you want the users to achieve when using the Katsu Browser page?

Should the data be displayed in a tabular format or a different format?

Is there anything else you would like to see in the UI?

Is there anything that you are worried about?

[Samarth-Agarwal1]

First draft of the wireframe: https://whimsical.com/dycons-pages-7N798qN5CaJqawW4GsUFGG

[sh-ura]

Generally speaking, people read images with the pattern that they read text. Most people who read English are accustomed to reading text left-to-right, then from the top-down (imagine two lines of text 二; they are skimmed by the eyes in a Z pattern.) Their eyes will scan any webpage, ad, image, etc. in the same Z sequence.

The decision to make when designing something is: what is the first thing you want the user to see? If it makes sense to, you should put that feature in the top-left corner. The second thing the user sees should usually go in the top-right corner if it is small, or in the middle if it is larger. The third thing they see goes in the bottom-left corner. The last thing they see goes on the bottom-right. Design a webpage around this Z sequence (or whatever other visual scanning sequence is relevant to the language that the user reads in.)

Here are some questions to think through, applying this best-practice to the Katsu browser wireframe:

• Where should the Chart/Table toggle be? How should it be shaped; with the options stacked horizontally next to each other, or vertically?
• Where should the pie chart be?
• Where should the pie chart's legend be? (Your pie chart might not have one, but consider where you would locate the legend if it existed.)
• What kinds of information usually go in the header vs. the footer? How do your obsservations and decisions about this correlate to the Z pattern of visual scanning?
• Why did you decide to make the titles of the Individuals and Phenopackets left-justified instead of centred?

[sh-ura]

The final draft of the wireframes looks great! Closing this ticket as completed.