Interface design fine tuning

[CarlsoFiorention]

The PDF attachment contains a few screenshots with notes for fine tuning the visual components of the interface. I think it would be good if we also could follow this document in a meeting, and having the original design and the current version side by side on the screen. After these adjustments across the home page and search results page we could decide on the next important steps.

Fine tuning.pdf

https://github.com/jchartrand/can-link/labels/needstimeestimate

[jchartrand]

Stuff like colour changes to buttons, eliminating drop shadows, should be easy - like fifteen-thirty minutes each, but it can always turn out that something isn't easy for whatever reason.

Alignment/sizing changes for fields, etc. can sometimes be easy, sometimes not. I'd say several hours to get it all right.

Moving the form into the header might end up taking longer - the header and search page are distinct components (because the header is shared across pages). I'd have to rework the pages, the header, or how state is shared across components. Note too that the header will be significantly bigger with the fields as-is, unless I resize them further, so there would be work to re-align/size everything. A (very rough) guesstimate on moving things into the header is a full day (8 hours).

Renaming widget labels is easy.

Re: the world map comment - we are using open street maps which by default allows pan/zoom across the planet, and shows all countries (and we had multiple countries originally). There is probably a way to restrict the map to just Canada - that might take a few hours to figure out - if it is even possible or feasible given the time. I do know that there is another can-link GitHub issue about the focus of the map on single universities (which is too zoomed at the moment) - maybe this Canada-only issue should be moved there (although it should probably be its own issue). There is also an issue with the size of the bubbles on the map, which at the moment is calculated using an arbitrary ratio calculation I used, but should be refined.

Aligning the visualizations is trickier than expected because each visualization to some extent controls its own layout, and they seem to vary their layout depending on the inputs.. Estimate a couple of hours to get this working, and even then there might be compromises.

Changes to the visualizations themselves, e.g., word orientation, removing outer bubble on Bubbles all depend on the visualizations themselves and how much customization they directly allow through arguments/parameters. If they provide options for colouring/bubbles/layout etc. then it should be easy-is - if they don't, then it is likely infeasible to change them in the time we have.

[CarlsoFiorention]

It all makes sense James. My main concern is that visualizations are not too friendly to customize, thus they may look very inconsistent with the rest of the interface. Regarding the header, I assumed the files need to be resized, they take a lot of unnecessary space as they are now, in addition to the empty space left on top between the logo and the about button. All these elements should be optimized and better integrated if possible.

[jchartrand]

On Sep 11, 2020, at 3:53 PM, Carlos Fiorentino notifications@github.com wrote:

It all makes sense James. My main concern is that visualizations are not too friendly to customize, thus they may look very inconsistent with the rest of the interface.

It may well turn out that way. The alternatives are spending time customizing the code behind the visualizations, developing our own visualizations, or finding different pre-built visualizations.

Customizing/building visualizations is well beyond the scope of this project (they’d be projects in their own right), so we are left with finding pre-built ones. As I’ve mentioned a few times, if anyone has any pre-built javascript visualizations that they know will better do what we want, I can certainly pop those in.

Regarding the header, I assumed the files need to be resized, they take a lot of unnecessary space as they are now, in addition to the empty space left on top between the logo and the about button. All these elements should be optimized and better integrated if possible.

I defer to you all on how you’d like it organized (although I like white space).

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jchartrand/can-link/issues/45#issuecomment-691283759, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEFSXKCW3ANP4SRBCFHVL3SFJ52JANCNFSM4RH55UFQ.

[CarlsoFiorention]

On Sep 11, 2020, at 3:02 PM, James Chartrand notifications@github.com wrote:

On Sep 11, 2020, at 3:53 PM, Carlos Fiorentino notifications@github.com wrote:

It all makes sense James. My main concern is that visualizations are not too friendly to customize, thus they may look very inconsistent with the rest of the interface.

It may well turn out that way. The alternatives are spending time customizing the code behind the visualizations, developing our own visualizations, or finding different pre-built visualizations.

Customizing/building visualizations is well beyond the scope of this project (they’d be projects in their own right), so we are left with finding pre-built ones. As I’ve mentioned a few times, if anyone has any pre-built javascript visualizations that they know will better do what we want, I can certainly pop those in.

We need at least to customize colors, size and alignment as minimum aspects. These aspects are usually customizable without modify the code, for instance fonts, colors, and alignment are options in http://www.wordle.net. Still, it may be behavioural issues we may consider for choosing the right pre-built visualizations...

Regarding the header, I assumed the files need to be resized, they take a lot of unnecessary space as they are now, in addition to the empty space left on top between the logo and the about button. All these elements should be optimized and better integrated if possible.

I defer to you all on how you’d like it organized (although I like white space).

We just need to follow the provided design, get as close as possible. We can discuss this in a meeting and I can produce additional sketches if needed.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jchartrand/can-link/issues/45#issuecomment-691283759, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEFSXKCW3ANP4SRBCFHVL3SFJ52JANCNFSM4RH55UFQ.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jchartrand/can-link/issues/45#issuecomment-691310331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGFMUPJXUPRQULMFU52LAXLSFKF53ANCNFSM4RH55UFQ.

[jchartrand]

On Sep 12, 2020, at 9:29 AM, Carlos Fiorentino notifications@github.com wrote:

On Sep 11, 2020, at 3:02 PM, James Chartrand notifications@github.com wrote:

On Sep 11, 2020, at 3:53 PM, Carlos Fiorentino notifications@github.com wrote:

It all makes sense James. My main concern is that visualizations are not too friendly to customize, thus they may look very inconsistent with the rest of the interface.

It may well turn out that way. The alternatives are spending time customizing the code behind the visualizations, developing our own visualizations, or finding different pre-built visualizations.

Customizing/building visualizations is well beyond the scope of this project (they’d be projects in their own right), so we are left with finding pre-built ones. As I’ve mentioned a few times, if anyone has any pre-built javascript visualizations that they know will better do what we want, I can certainly pop those in.

We need at least to customize colors, size and alignment as minimum aspects. These aspects are usually customizable without modify the code, for instance fonts, colors, and alignment are options in http://www.wordle.net.

Wordle is a java application (we need javascript), built for its own use, packaged up as a windows and Mac OS application, and the developer has spent probably a significant amount of time making sure everything works as it does, all in a very controlled setting. Even then, in his FAQ, the author acknowledges that it doesn’t always do what people want. And, Wordle’s source code (or most of it) is not open source - http://www.wordle.net/faq#code

Any visualizations that we can feasibly use (given the scope of the project) have to be javascript (not java) and open source.

But, yes, I expect that colour/font should be changeable with the visualizations that we are using, but again, we are constrained by what the libraries expose/allow. And yes, size and alignment are also likely customizable, but even so could be trickier because the visualizations themselves sometimes change their layout depending on input (I had a lot of trouble, for example, with the bubbles, and even then they didn’t always show properly as the input changed.) Hopefully everything works out fine -- I am only trying to give fair warning that we may have to compromise on how the visualizations fit in. The limiting factor (as usual) is time.

Still, it may be behavioural issues we may consider for choosing the right pre-built visualizations...

As I’ve said several times, I’ve looked for visualizations that match what you’ve proposed, and what I’ve found are what are in there now. And again, if you know of any others (that we can use - i.e, are javascript and open source), please suggest them. However, we are closing in on the end of the project, and I fear the time will soon be past (if not already) for choosing different visualizations.

Regarding the header, I assumed the files need to be resized, they take a lot of unnecessary space as they are now, in addition to the empty space left on top between the logo and the about button. All these elements should be optimized and better integrated if possible.

I defer to you all on how you’d like it organized (although I like white space).

We just need to follow the provided design, get as close as possible. We can discuss this in a meeting and I can produce additional sketches if needed.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jchartrand/can-link/issues/45#issuecomment-691283759, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEFSXKCW3ANP4SRBCFHVL3SFJ52JANCNFSM4RH55UFQ.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jchartrand/can-link/issues/45#issuecomment-691310331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGFMUPJXUPRQULMFU52LAXLSFKF53ANCNFSM4RH55UFQ.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jchartrand/can-link/issues/45#issuecomment-691488162, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEFSXKHAUGDU2TOXVGIKPTSFNZUZANCNFSM4RH55UFQ.

[sfarnel]

Thanks @CarlsoFiorention and @jchartrand I agree that these are challenging issues and that we are, be necessity, constrained by our time and funds for the project. I think we should focus on getting colour and font as close as we can to the design concept, knowing that more will need to be done down the line. There are also a few remaining things from the home page and search results page (spacing, placement of logos, etc.) that need to be finalized so that we have as much consistency across the site as it is now that we can. This can include issues #10 and #11

[jchartrand]

I think this is all done now, except the bit about moving the form into the header, and having the map show Canada only.

[sfarnel]

Looks complete, with remaining issue in other tickets or being held for future development.