"Laws of UX"

[taoeffect]

Problem

Our UI/UX is still being designed, and we should reflect on ways we can improve it given what others have learned.

Solution

• Look at the "Laws of UX" and see how ours stacks up.
• Post any relevant comments here or open issues as needed

[dotmacro]

There's a great tldr here: "10 Laws of UX, Digested"

[sandrina-p]

I'll pick this issue to track our current task in hands. Define Group Income Design System. A complete Design System is a long run effort, so let's start with the basics:

Style guide (the foundation)

• Typography (hierarchy or titles / texts)
• Colors Palette
• Spacing (white space / gutter between elements)

With this first part defined, we can move on to refine the modules that compose GI Visual Language, while having a mindset to support theming (#272) based on Group Income default kindergarten professional theme.

Ecosystem (components)

• Buttons
• Navigation
• Forms / Controls
• Notifications Error notification system #175, Keep track of all errors and warnings in a special database + dashboard #353
• Voting System Build out and polish generic voting / proposals system #343
• Messaging Make UI/UX flow more intuitive #327
• etc... Payments UX #55, MembersCircle.vue component #282, Choose a font-family #385, Make UI/UX flow more intuitive #327

This will be a work in progress for sure, so it's important to have a mindset of quick iterations and fast learning so we can adjust as we go.

[sandrina-p]

So, while studying the Style Guide I've also explored possible solutions to handle theming on Group Income. I've started by checking how others do:

Slack - Team Sidebar color palette themable

A global class is injected on body that loads a chunk of inline CSS at the top of the page with the override styles.

// client.css
.client_channels_list_container {
  background: #0D7E83;
}

// injected on the DOM inline:
.client_channels_list_container {
  background: #0D7E83;
}

Note: On the ejected CSS there is a inline comment:

{!--
 * This file is used to theme sidebar elements that haven't been ported to React.
 * It is deprecated by js/modern/components/channel-sidebar/theme.jsx
 * Yes: this needs to be improved, but this can't be removed until
 * the team menu header block is converted to React (it's also themed).
 --}

---

Notion - Created "Pages" Typography and size themable

A different font-family / font-size are injected on each element style. A lot of repetition... 😨

---

Daverupert - All website is themable

• Using CSS custom properties (CSS Variables).

:root.theme-foo {
  --bg: yellow;
  --text: black;
  --link: blue;
  --link-active: lightblue;
  --nav: blue;
  --headings: black;
  --border: blue;
}

---

My thoughts so far

The current cleanest/simplest way of handling theming is for sure by using CSS Variables. There are a lot of articles out there showing examples. The only downside is its support: Only modern browsers support CSS Variables. I believe we should take advantages of what browsers can offer us and don't be restricted for old browsers. In these moments we should look for a Graceful Degradation strategy. With that I mean: We support theming only for those who use modern browsers (ie Not Internet Explore or Opera Mini). Even without knowing the percentage of users using IE, I believe we can drop them from this feature, showing only the default GI theme.
Another point is that Bulma wasn't designed with CSS Variables in mind neither but I believe we can work around it easily (last option, we fork it).

What do you think guys?

[taoeffect]

@sandrina-p Whatever you think will be the "cleanest" / "simplest" solution. If you think that's CSS Variables after researching all the best options, then go for it. :)

[mmbotelho]

@taoeffect are there any next steps here? Or tasks that are missing?

[taoeffect]

@mmbotelho I'm not sure. This just seems like a useful reminder to me, but I also agree that a lot of good work on this front has been completed at this point, so if you want to close the issue feel free!