Dodona 5 redesign

[bmesuere]

This topic is used to discuss the individual ideas implemented in #2760.

Please use threaded comments to give feedback.

Update: Most of these changes were implemented. I'll leave this thread open for now to gather feedback after version 5.0 is released.

[bmesuere]

Increase the border radius for cards

Motivation
A more playful appearance.

Changes
Change border-radius from 6px to 12px.

Status
Implemented in #3024

Before

After

[bmesuere]

Don't uppercase button text

Motivation
Less aggressive style and a bit more compact for longer labels.

Changes
Remove the text-transform uppercase from buttons.

Status
Implemented in #3024

Potential future changes

• Bring the padding in line with the material design spec (should be 16 instead of 8px for the primary button)
• Try to remove the manual button style overrides and try to replace them with variables

Before

After

[niknetniko]

I'm not fully convinced on this, as the secondary buttons loose a lot of their distinction from normal links (the only difference as far as I can tell is that the text is bold, while links are generally not).

[bmesuere]

I'm not sure this is a big issue because in a lot of cases, they actually are links and not "actions". In combination with their specific placement (and :hover), it's still clear they are buttons. For example on the home page it seems quite natural to me:

Screenshot

[bmesuere]

✅ Wider drawer

Motivation
The material design spec suggests using a width of 256px, we used 240.

Changes
Increase the drawer width from 240px to 256px.

Potential future changes

• Disable line breaks for longer menu items and add an ellipsis overflow.

Status
Implemented in #2887

Before	After

[bmesuere]

This was released as part of Dodona 4.7 🚀

[bmesuere]

Rework tokens

Motivation
The current tokens were very compact and at the same time quite heavy because of the dark background color and border. This change lightens things up.

Changes
Set the background color to the *-200 value of each color, set the text color to black with 75% opacity, remove the border and bring the padding and margin in line with the spec, capitalize the first letter.

Status
Implemented in #3020

Before

After

[niknetniko]

I'm not sure if the background colours aren't too dark (resulting in not enough contrast). Sometimes when I look at it it seems fine, but other times it seems to lack contrast (so unsure if this is an actionable comment).

(but they are an improvement over the existing ones, whether we change the contrast or not)

[bmesuere]

Believe it or not, but the original tokens have an accessibility warning because, according to chrome, their contrast isn't high enough (3.36 for the green token) while the new ones pass the Aa level (7.12 for the green one).

[bmesuere]

✅ Extra submission feedback

Motivation
Correctly solving an exercise should be a rewarding experience. With this change, after a submission is judged, the FAB temporarily changes color and icon to indicate the result of the submission.

Changes
For the duration of 4 seconds, the color and icon of the FAB is changed after judging is completed. If the submission is incorrect, a sad emoji is shown on a red background. If the submission is correct, a positive emoji is shown on a green background. The positive emoji's are picked at random from a list of 10 with a strong bias towards the first elements in the list (emojis[Math.floor(Math.pow(Math.random(), 3) * emojis.length)]). This will make some results rare than others.

Currently, the list of positive icons is: ["check-bold", "thumb-up-outline", "emoticon-happy-outline", "emoticon-excited-outline", "emoticon-cool-outline", "emoticon-kiss-outline", "robot-outline", "unicorn-variant", "cow", "emoticon-poop"].

Status
Implemented in #2889

Positive result

Screen.Recording.2021-05-26.at.12.21.35.mov

Negative result

Screen.Recording.2021-05-26.at.12.36.31.mov

[pdawyndt]

Seems like the icon is not 100% centered in the button.

[pdawyndt]

This one definitely will be an eye-catcher!

[bmesuere]

This was released as part of Dodona 4.7 🚀

[bmesuere]

Tweak home page colors

Motivation
We currently use saturated colors for the home page cards in combination with white text. The potential mix of prominent colors diverts attention from the actual content (and the contrast didn't always pass the accessibility thresholds) . This update switches to more muted, desaturated pastel colors with a darker font color. These are the same colors that are used for the token rework.

Changes
Set the background color to the *-200 value of each color, set the text color to black with 75% opacity for the primary text and 60% opacity for the secondary text.

Status
Implemented in #3024

Before

After

[bmesuere]

An issue here is the multitude of colors on the home page. This is also an issue with the current design and is amplified with the the home page action cards idea. We can only use a single color, but this might be a bit boring. An alternative is to use a single color for each academic year. This will group the colors for users with a lot of cards.

[BTWS2]

Maybe Dodona can let the teachers change the color in the settings: https://dodona.ugent.be/en/courses/???/edit/ (first mentioned in #2240)? I prefer the saturated colors, because they match with the Dodona blue. My suggestion would be to use the same color for the course and in the overview to be consistent. This helps to tell the difference between different courses and the same course of a different academic year.

[bmesuere]

Home page action cards

Motivation
The homepage currently is quite static and could do more to surface relevant information. Especially for users that are only subscribed to a single course, the home page is relatively empty. This suggestion adds a row of "action cards" to the top of the home page.

Changes

• The leftmost card is "jump back in" and is shown in blue. This shows a recent exercise that wasn't yet correctly solved. If there are no such recent exercises, the card could lead to a recent incomplete series. Clicking on the card brings the user to the respective exercise, potentially with their last submission already loaded in the editor.
• Next, a number of relevant "deadline" cards are shown. These cards are sourced from all courses a student is subscribed to. The color of the card depends if the series status. It is green if the user successfully solved all exercises and red otherwise. For teachers, it could indicate how many students already completed the series.
• A maximum of 4 cards is shown.

Todo

• Include a marker/icon (bottom right?) to indicate the cards are clickable.
• Include a progress bar and more status information in the deadline cards. We do have to make sure all of the card types have the same height.

Open questions

• Should we always show these cards, or only on desktop screens?
• Are there other cards/actions we could show here?
• Can this replace part of the right sidebar?
• I'm not sure about the style of the action cards. An alternative could be to have white cards (with or without drop shadow) with a colored (more saturated) border instead.

Status
Still exploring options with static mockup

Current mockup

[bmesuere]

This was moved to a separate issue: #3033