MD3 Prototype initial improvements
I went ahead and tested out the new Material Design 3 prototype of Briar on my Pixel 5 on stock Android. I am listing here some of the issues I am encountering.
# |
Done? | Issue | Recommendation | Screenshot |
---|---|---|---|---|
1 |
|
Allow connections is a primary button, the buttons here compete for attention. | Allow connections should be a secondary button (outline or differently colored | |
2 |
|
Buttons are completely round | Buttons should have a corner radius of 4-8pt | (see first screenshot) |
3 |
|
Modals are full width | pop-up modals should not be full width and styled like usual popups in MD3 | |
4 |
|
App was set on Light mode in the Settings but the theme active was dark. I had to change to Dark and back to Light to actually get a light theme | App should take over phone default theme settings and set the correct active theme. | N/A |
5 |
|
Primary buttons are white on green. They lack contrast and fail WCAG contrast ratios. | Buttons should be styled such as in Figma (dark green labels on light green button background) | |
6 |
|
Similar issue as on issue 5 on the pop up buttons. | Buttons should be dark green icons on light green button background) | |
7 |
|
Some elements such as the header bar and header title are bigger | Some tweaks on sizing of the header and potentially some other elements should be done so they take less screen space. | Can't do screenshots on Briar production |
8 |
|
turned off toggles are quite strongly colored and can be confused | Toggles should be styled accordingly when they are turned off (proposal to be done in Figma) | N/A |
9 |
|
In the onboarding allow connections screen, a question mark icon is used for more information | The hint icons should be consistently 'i' icons instead of question marks across the app. | |
Edited by Torsten Grote