CWRC Writer Redesing

[lucaju]

This thread is dedicated to discussing the CWRC Writer design refresh.

After a few years of development, CWRC Writer has expanded in capability, introduce tons of features and functionalities, improve interoperability, and give support to a variety of different use cases. However, the overall look and feel kept the same face. It is time to reimagine CWRC Writer's interface to improve user experience and give a refreshing look to the project. However, we can't change the frontend without reworking the code using the latest web technologies and frameworks. So, this redesign is not just a facelift, but a completely new version of the code, from the backend to the frontend.

Under the surface, we decided that we will adopt React and Overmind (a better alternative to Redux) to rebuild the code. To build a new GUI, we choose to work with Material-UI to replace three different frameworks the project currently uses. Material-UI is backed by Google's Material Design Principles made exclusive for digital materials. A thorough overhaul wouldn't be complete without updating the base dependency of this project: TinyMCE 5.

Over the last few weeks, I have been working in a series of sketches reimagining each aspect of CWRC Writer front end and user experience. These sketches were made using Adobe XD, and the first mockup can be accessed here: http://labs.fluxo.art.br/cwrc/#/

Or you can see each screen as a PNG (check the zip file). https://app.zenhub.com/files/82123127/60532662-3e67-43da-a20e-c471a6218618/download

[lucaju]

One important aspect we should take into consideration is the icons and colours assigned to each entity. These are the set of icons and colours we chose. Feedback is welcome.

[SusanBrown]

Thanks for sharing this, Luciano. May reply bit by bit.

[SusanBrown]

The icons are great. Not sure about the entity one though. I can see pros and cons but it looks like a bulleted list. I think an icon that suggest linked data would be better. E.g. this one from mindmap, suggesting a central node (the document) and related entities.

[SusanBrown]

I see that what you have for merge is similar though. What about something like this for merge?

[SusanBrown]

Context menu: love the tags. Are Remove entity / Convert to entity no longer needed?

[SusanBrown]

Is the LOD button for showing or hiding the RDF in the XML viewer? Might we want to use the RDF logo instead?

[SusanBrown]

The menu bar icons look great.

I imagine a lot of work has gone into the colours in terms of differentiation, colour blindness etc. Could you confirm? If so, then I hesitate to suggest much, and I think my general tendency towards a more muted palette is probably out of line given the need to differentiate so many things and have them work on two different backgrounds. However, I will mention that I find the red very intense, and wonder about taking it a bit in the direction of ruby or cabernet.

[lucaju]

I liked the icons you suggested. I think the 'mindmap' icon reflects better what the entities means (linked data), as opposed to representing how they look like on the interface (an ordered list).

It is not too similar to merge. I think the merge can still have the current form.

I was unsure about the icon for RDF. Perhaps because I don't know if RDF and JSON-LD are the same things. For sure the icon is better than just LOD.

[lucaju]

There are some assumptions in relation to the menu bar (ribbon) and the way the document is showed up. I have to investigate TinyMCE to see what is possible. I'm considering rendering the ribbon outside of TinyMCE to have more control over them. Currently, the buttons and their actions are passed to TinyMCE, which in turn configure and render them. The page break effect might be possible from withing TinyMCE, but I must study the API to be sure.

[lucaju]

The colour palette is still open to discussion. Currently, we have to differentiate 11 types of entities. They don't have (and perhaps don't need to have) a "natural" connection to the entities. But it is pretty difficult to have 11 distinct colours that don't share similarities between them. On top of that, some colours are not very suitable for the job (like bright yellow, white, or black).

The current palette was chosen using a collection of options I generated using 3 different web apps. Mihaela helped to fine-tune them, but we might need to run some user testing to double-check if they work well.

It would be beautiful if these colours work well in light and dark themes to avoid introducing colour mismatch between the two. But if the dark theme is not something we don't want to pursue, we can just drop this part of the conversation.

[SusanBrown]

I'm happy to go forward with these for now and see what user testing reveals. I appreciate the challenge of the task!

On Jun 29, 2020, at 12:31 PM, Luciano Frizzera notifications@github.com wrote:

CAUTION: This email originated from outside of the University of Guelph. Do not click links or open attachments unless you recognize the sender and know the content is safe. If in doubt, forward suspicious emails to IThelp@uoguelph.ca

The colour palette is still open to discussion. Currently, we have to differentiate 11 types of entities. They don't have (and perhaps don't need to have) a "natural" connection to the entities. But it is pretty difficult to have 11 distinct colours that don't share similarities between them. On top of that, some colours are not very suitable for the job (like bright yellow, white, or black).

The current palette was chosen using a collection of options I generated using 3 different web apps. Mihaela helped to fine-tune them, but we might need to run some user testing to double-check if they work well.

It would be beautiful if these colours work well in light and dark themes to avoid introducing colour mismatch between the two. But if the dark theme is not something we don't want to pursue, we can just drop this part of the conversation.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/cwrc/CWRC-WriterBase/issues/275#issuecomment-651229031, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEFJIDHNRM4FS32PQ6SF4TRZC6URANCNFSM4OJQSAWQ.

[lucaju]

Great. I changed the icons for the "entities" menu. Also, I added to the design of how "notes" will be displayed in the text. Image attached.

[lucaju]

I guess the next step is to plan how to implement this new design. I've been talking with @ilovan about this. I want first to map CWRC Writer's functionalities to figure out how to build the structure: how to split the code into modules and repos to keep the modularity and flexibility it has already.

I also want to dig a little deeper into TinyMCE documentation to see if I can predict if and where things will break. This way I can try to plan ahead during the development.

[SusanBrown]

Nice! Entities panel tab would have the word on it as well, right?

On Jul 15, 2020, at 12:07 PM, Luciano Frizzera notifications@github.com wrote:

CAUTION: This email originated from outside of the University of Guelph. Do not click links or open attachments unless you recognize the sender and know the content is safe. If in doubt, forward suspicious emails to IThelp@uoguelph.ca

I guess the next step is to plan how to implement this new design. I've been talking with @ilovan https://github.com/ilovan about this. I want first to map CWRC Writer's functionalities to figure out how to build the structure: how to split the code into modules and repos to keep the modularity and flexibility it has already.

I also want to dig a little deeper into TinyMCE documentation to see if I can predict if and where things will break. This way I can try to plan ahead during the development.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/cwrc/CWRC-WriterBase/issues/275#issuecomment-658850787, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEFJIFM3MLUGHMQEOCX42TR3XH3TANCNFSM4OJQSAWQ.

[lucaju]

Oh yes, for sure.

[lucaju]

Move to Gitlab: https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer Currently on stage here: https://leaf-writer.stage.lincsproject.ca/