UI v3

[nliautaud]

The UI/UX should :

• As an infographic : show useful information at page load, don't show too much information, be readable quickly and disturb the page flow as little as possible.
• As an interactive dataviz and filter : allow to change as many parameters as possible and create the most possible combinations in the least possible interactions.

It wasn't really possible to keep the donuts of the first UI as soon as the number of data parameters increased, as the circles would take more space and the complexity increase as well. The second version of the UI allowed to show a large range of numbers in a single screen, regardless of the number of jobs. But the donuts of the first version, by making an emphase on jobs, included the graphs as a part of the author profile, of the biography. A sort of "Mr. X is a director, writer, producer born in...".

UI 1 (up to v0.3)	UI 2 (v0.4...)

As the number of parameters will rise again with the someday inclusion of type (movies/shows) #11 and duration #12, a third version need to be designed, and should mix the advantages of each previous one. It will require the selection of which information would be available at the same time.

[nliautaud]

First wireframe for a third version :

https://app.moqups.com/nliautaud/wL0oPoWhP6/view/page/ad64222d5

Jobs :

• Use badges-like UI, to act as a biographic element. Icons (camera, pencil...) could event emphasis that, but would take additional space.
• Use loading bars to gain some space over donuts and allow more text inside the same radius.
• Get rid of "All". The visual sum of each element should be enough to interpret the overall. Every jobs block would be selectable/unselectable. The "loading bar" would reflect the current filter, and by default being seen/not seen.

Filters "bar"

• Use filter-like UI : selects and buttons.
• The first input allow to switch between movies and series.
  • It may include options for feature-length films and short films that would act as shortcuts for the next input.
• Another input select the duration.
  • As there will generally be not enough data to see a relevant visual distribution, there would be no graph of this data.
  • As there is probably no use to be able to select precise intervals, the input would give options to some specific ranges like less than 1h, about 1h30, about 2h, about 2h30, more than 3h.
  • This input may be automatically set and greyed out by the previous input
  • Is this input relevant for series ? Would it be hidden when series are selected ?
• seen / rated / collected / listed would be shown once and act as switches. To be able to reach didn't seen etc, we could consider activating seen on first click, then not seen on second click, and deactivating on third click.
• Other inputs to give shortcuts to existing data and expose new notions :
  • liked : would select ratings ranges, for example don't liked / liked for 1-4 and 6-10, or don't liked / liked meh / liked, or don't liked / liked / loved ?

Graphs

• Only decades and ratings. Duration don't seem relevant.
• Aligned with the watchlist... buttons, as a sort of sidebar, to mark a separation between "dataviz" and "biographic elements" as the jobs.