tool-suite-X
tool-suite-X copied to clipboard
odk-x
Redesign the Preferences (Settings) Screen.
This is to improve the design and visual hierarchy of the settings screen of the ODK-X Tools.
Why this needs to be improved:
- The labels for each setting on the screen are not very descriptive
- Some of the icons do not adequately represent their actions, therefore need to be updated.
- The visual hierarchy of the information listed here should also be organised better. Guidance for this issue: The ODK-X Design Guidelines and Material Design System
Hi @Redeem-Grimm-Satoshi and @maprehensive, I finally got around to finding the appropriate icons and redesigning this screen to improve the visual look.
See here:
Why this works;
- It follows the Material Design Guidelines
- Lists should be sorted in logical ways that make the items easy to scan. I used a divider to group settings according to how related they are–so it's easy to find a specific setting in the list.
- Also, I improved all the text labels by using clear headlines to communicate the subject of the action when clicked.
- More importantly, I used icons that properly represent what each setting means. All the icons are gotten from Google Fonts.
- The UI looks cleaner, is less cluttered and is easier to understand for diverse kinds of users.
Guidelines
- The Top Bar can be implemented as described in #397
- Each divider is an inset, this means it isn't full width. It is 1px and has a margin of 16px.
- Each headline is 16px font size and 24px leading.
- The subtext is 14px and 20px leading.
- Each list item has a left and right padding of 16px and a top/bottom padding of 12px.
- All the colours follow the ODK-X Design Guidelines
- All the icons can be gotten from Google fonts for free
Text labels update
- 'Open Data Kit Documentation' to 'About Us'
- 'Server settings' updated to 'Server'
- 'Device settings' to 'Preferences'
- 'Enable user restrictions' to 'Privacy'
- 'Reset configurations' to 'Clear settings'
- 'Verify user permissions' to 'Permissions'
What do you think, feedback and suggestions?
@Cveman1 Great! the ui looks cleaner as compared to the previous one
some few questions;
- The description seems incomplete; what font is being used? name of icons?
- "About Us" is already present so adding it again will confuse the users more. "User Documentation" instead of "About Us" will be fine.
- The last item down "About ODK-X", The icon is not centered vertically, Is it part of the design?
- Status bar and edge-to-edge? The new app bar shares same color as status bar, does it consider light and dark mode?
Thank you.
Okay.
- The font is the one we agreed on already: Source Sans Pro, just like you've been using. It's the same one in the ODK-X Guidelines
- About Us is the same as User Docs. That's why I want to redesign the navigation drawer.
- You can implement using the same colour system as in the dark mode in the ODK-X Design Guidelines.
Okay. I've seen what you meant by 'About Us'. That was before I had the new version of Services installed.
Here's a revised version with User documentation included.
Also, one of the issues includes compiling a list of all the icons used. But for now, I'll tag you to the icons on the design.
@Cveman1 Some admin preference items were left out, I've highlighted them in the screenshot below:
Reviewed on outreach-2023 and looks good to me. I am ok to deploy.
Note that the icons are a lighter grey than in the design, but I don't think it's a problem.
@Cveman1 will you review?
Reviewed on outreach-2023 and looks good to me. I am ok to deploy.
Note that the icons are a lighter grey than in the design, but I don't think it's a problem.
@Cveman1 will you review?
I'll confirm with Redeem on this
@maprehensive It appears lighter grey in order for light and dark mode to work properly