search

odk-x / tool-suite-X

ODK-X Tool Suite Project roadmaps, issue queue, release notes and wiki.
https://www.odk-x.org
Apache License 2.0
25 stars 43 forks source link

Redesign the Preferences (Settings) Screen. #400

Open Cveman1 opened 1 year ago

Cveman1 commented 1 year ago

This is to improve the design and visual hierarchy of the settings screen of the ODK-X Tools.

Image

Why this needs to be improved:

  1. The labels for each setting on the screen are not very descriptive
  2. Some of the icons do not adequately represent their actions, therefore need to be updated.
  3. 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
Cveman1 commented 1 year ago

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: Image

Why this works;

  1. It follows the Material Design Guidelines
  2. 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.
  3. Also, I improved all the text labels by using clear headlines to communicate the subject of the action when clicked.
  4. More importantly, I used icons that properly represent what each setting means. All the icons are gotten from Google Fonts.
  5. The UI looks cleaner, is less cluttered and is easier to understand for diverse kinds of users.

Image

Guidelines

Text labels update

What do you think, feedback and suggestions?

Redeem-Grimm-Satoshi commented 1 year ago

@Cveman1 Great! the ui looks cleaner as compared to the previous one

some few questions;

  1. The description seems incomplete; what font is being used? name of icons?
  2. "About Us" is already present so adding it again will confuse the users more. "User Documentation" instead of "About Us" will be fine.
  3. The last item down "About ODK-X", The icon is not centered vertically, Is it part of the design?
  4. Status bar and edge-to-edge? The new app bar shares same color as status bar, does it consider light and dark mode?
Cveman1 commented 1 year ago

Thank you.

Okay.

  1. 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
  2. About Us is the same as User Docs. That's why I want to redesign the navigation drawer.
  3. You can implement using the same colour system as in the dark mode in the ODK-X Design Guidelines.
Cveman1 commented 1 year ago

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.

Image

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.

Redeem-Grimm-Satoshi commented 1 year ago

@Cveman1 Some admin preference items were left out, I've highlighted them in the screenshot below:

Image

maprehensive commented 1 year ago

IN PR https://github.com/odk-x/services/pull/257

Cveman1 commented 1 year ago

A minor update to the UI:

Image

Cveman1 commented 1 year ago

@Redeem-Grimm-Satoshi

maprehensive commented 1 year ago

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?

Cveman1 commented 1 year ago

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

Redeem-Grimm-Satoshi commented 1 year ago

@maprehensive It appears lighter grey in order for light and dark mode to work properly