UI: Add more contrast to the hierarchy of elements on the page
complete
M
Matt Vanderzalm
As a graphic designer, I have two UI suggestions. I'll talk about them in reference to the Object type views, but they could be extended to many views on the app.
- Make it clearer what Object type you are viewing
- Add more contrast to the typographic hierarchy, particularly the range of type sizes
First:
Visually emphasize what Object type you are viewing.
When I am in an Object type dashboard, the first thing my eye should be drawn to is the name of the object type. When you click on the Page object type, for example, there are at least three different places that indicate you are looking at the Pages object type. (See numbered elements in the attached screenshot.) But none of them draws my eye. My second recommendation follows from the first:
Add more contrast to the typographic hierarchy
. In particular, I would love to see a wider range of type sizes. On the Object type dashboard view, that range is 8px pixels between the smallest and largest text (see the other attached screenshot). If you take out the content previews — whose headers are awkwardly larger than the card titles — the range is only 4px. On the Wall view, that range is 2.5px. For an app that is mostly black-and-white and uses very thin light lines to separate elements, you are making it challenging for your users to (1) know where they are in the app, and (2) find what they are looking for in the view.
Anyhow, I don't want to get too prescriptive (unless you want me to). I mostly wanted to point out that you have a very useful graphic design tool still hanging out in your toolbox.
Log In
Steffen Bleher
complete
This is part of the latest release! 🚀 You can read more about it here: https://capacities.io/whats-new/release-36
N
Nicola Fern
I'd raise a flag for contrast everywhere. I like to have different colours for my heading levels. Many UI elements are hard to see in either light or dark mode, e.g. when you have a grouped block or a text entry box for properties they are barely discernable.
I just checked the contrast for e.g. the background colour and the disabled settings sliders on the Editor settings page and in dark mode the contrast is 1.28, and in light mode it's 1.22.
P
Pascal Jacob
Nicola Fern: I second that. The color of the scroll bar thumb in the cards is too pale and difficult to distinguish, especially as the outline of the cards is the same gray. On the setting page, the scroll bar thumb is virtually invisible before you click on it.
S
Sean Dorsy
You hit the nail on the head with text sizes. I find myself spending time going back and forth between heading size or color to try and build a hierarchy.
Similar to text size, I feel that the color palette could use a hierarchy and more unison.
Some of the adjacent color hues are too similar to each other for differentiation from each other--yet too far from two spots over for continuity. Also, graphically dark vs light presents a different graphic experience between colors.
Another thought on color for text or background/highlight (wrong thread, I know), is sometimes I want to differentiate something subtly. Such as heading vs body or important highlight vs supporting highlight. I think there should be some less saturated color options that pair with the bright options.
In short, I think the quantity of color hues could be reduced, but provide additional tones/saturation for each hue.
michael_v_h
in progress
Thanks for the detailed and helpful, we'll look into it! 👍
Don't expect any radical changes soon, but we'll take a look and consider your suggestions.
M
Matt Vanderzalm
michael_v_h: Awesome! That’s all I can ask for. Thanks for all you’ve put into making Capacities amazing.
D
Damian Morales
michael_v_h - FWIW, I've increased the contrast setting on my Mac and it has greatly improved my ability to discern different aspects of the UI.
M
Matt Vanderzalm
For what it's worth, there is already a request for fixing the size imbalance between the content preview headers and the card title