ODK-X Services - Menu navigation UI improvement

[maprehensive]

The Outreachy 2022 branch of the ODK-X Services mobile app has a redesigned menu navigation.

This menu navigation needs to be updated to match the current style guide, and to review for usability.

Objectives:

Update the UI to match the current style guide, and new styles introduced in the Outreachy 2023 project. Review the navigation for simplicity Ensure that the navigation is suitable for each 'state' - logged in, not logged in etc. (examples below)

Look at Services and become familiar with the current menu layouts throughout the app Provide a redesign of the menu items that meets the objectives

Design Guidelines:

Colours, icons and other user interface elements used should conform to the ODK-X Design Guidelines

These guidelines may be updated during the Outreachy 2023 project.

[Cveman1]

Thank you @maprehensive. But I even think the old top app bar works much better than this side menu.

This side menu has a repetition of the items on the 'Settings' screen. I think the '3 dots' menu works, and the solution to #385 would solve the problem of 'each state' - logged in or not.

[wbrunette]

@Cveman1 Remember we are designing a new top menu for ALL 3 applications so that all three applications look the same.

Also, remember that according to material design guidelines (which we are using the material design), the navigation should be done with a drawer coming in from the left with Android ... from my limited understanding of listening to others. Maybe this is incorrect, but you should follow material style and verify that your proposals fall within the style guidelines.

https://m3.material.io/components/navigation-drawer/overview

Our hope is to stay current with the Android design style, so it's intuitive for the user. https://developer.android.com/design

[wbrunette]

@Cveman1 also as we said on the call, we know there is repetition, that is why we need a new revised designed.

[Cveman1]

Okay, I understand @wbrunette. Thank you. I'll go through the links you sent and trying solving the issue again.

Thanks a lot!

[Cveman1]

Hi @maprehensive

Here's a better solution to the Menu navigation UI.

Guidelines

• This follows Material Design principles for navigation drawers
• Every colour used is also included in the recent update to the ODK-X Design Guidelines
• All the icons can also be found in Google fonts
• All the icons are 24px in height and width.
• The navigation drawer is 360px wide and has a #F2F7FC fill.
• The headline text is 14px, medium and the fill is #787579
• The other texts and icons are #1C1B1F
• Each item in the list has a margin of 16px between the icon and its label. There is also an external padding of 16px on all sides.
• The fill of the active Nav item is #C9E1F4

Concerns

• I can't exactly tell the difference between 'Update' 'Switch sign-in' and 'Server login'

[wbrunette]

A couple of issues:

1. There is no need for the word "Services" in the title; it should only be ODK-X or logo. (Creates a unified feel between the three apps and prepares for possibly combining them)
2. I do not like the bug icon for conflicts. Make it seems really negative... also maybe we can come up with better verbiage. Perhaps "Resolve Data Divergence." Other ideas?

[Cveman1]

Okay.

1. I'll update the top bar to just ODK-X. But I have a question. How would users tell which app they are on at any given time?
2. I'll replace with a more suitable icon. How about 'Resolve sync conflicts'?

[Redeem-Grimm-Satoshi]

@maprehensive @Cveman1 was this issue sorted out?

[Cveman1]

Hi @wbrunette

Here's an iteration of the Navigation drawer that addresses all our discussions and feedback. It also takes into account the different user states described here: Screen Designs - GSoC'21@ODK-X

The Changes

• Updated the 'Resolve sync conflicts' icon to a clearer representation of what it stands for.
• Each drawer captures the different user state at any time.

The design specifications remain the same @Redeem-Grimm-Satoshi, and also in accordance with the ODK-X Design Guidelines

[Cveman1]

Minor change to the 'Switch Sign-In' Icon @Redeem-Grimm-Satoshi

The icon here:

/* switch */

width: 24px;
height: 24px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Vector */

position: absolute;
left: 8.33%;
right: 8.12%;
top: 12.5%;
bottom: 12.5%;

background: #13932C;

[NinaWendy]

@wbrunette Has this issue been sorted out?

[Redeem-Grimm-Satoshi]

@NinaWendy Yes it has been sorted out

[Redeem-Grimm-Satoshi]

@Cveman1 Looks good

[maprehensive]

@Cveman1 and @Redeem-Grimm-Satoshi was this changed committed? Or is there still development to be done?

[Cveman1]

I'm not quite sure. It was last in development.

The UI was updated already though.

[Redeem-Grimm-Satoshi]

It wasn't completed yet..

[Redeem-Grimm-Satoshi]

Still in development

[maprehensive]

Still in development

thanks @Redeem-Grimm-Satoshi. Are you working on it at the moment? If so I will assign you to the issue.

[Redeem-Grimm-Satoshi]

@maprehensive You can assign to me