ODK-X Survey - Menu navigation UI improvement

[maprehensive]

The ODK-X Survey mobile app has a mix of icons and text items under the ellipsis menu

Why this needs to be improved:

• icons do not currently communicate the function they link to. The function needs to be learned by the user.

Objectives:

• Limit icon use to functions that can be immediately recognized from the icon by most users
• Make the menus consistent across the application

Guidance for this issue:

• Look at Survey and become familiar with the current menu layouts throughout the app
• Provide a redesign of the menu items that meets the objectives
• Write a brief description including a rationale for the design that you applied
• Post the description and screenshots back to this issue

Design Guidelines:

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

Outreachy

This issue can be used for an Outreachy application for the project Custom UI components for ODK-X mobile apps This issue is for the User Interface Design stream of the project.

Multiple people can work on this issue simultaneously.

You do not need to be assigned to this issue to work on it for an Outreachy application

[phelisa1]

Hi there @maprehensive may I please work on this issue?

[Cveman1]

I'd love to jump on this @maprehensive

Also, where can we see the full application?

[EQua-Dev]

Hello, please I would like to work on this issue @maprehensive

[Augusta2]

Hello @maprehensive I will be delighted to work on this project.

[Praise-Ugwum]

Hi @maprehensive, I'd love to work on this issue.

[Karimatu05]

Hi, i would love to contribute on this project @maprehensive

[Pamela-owino]

Hello, @maprehensive , I would love to contribute to this issue.

[maprehensive]

@phelisa1, @Cveman1, @Praise-Ugwum, @Pamela-owino, @Karimatu05, @EQua-Dev and @Augusta2 you're assigned. Thank you!

[Thimmo]

Hello, @maprehensive I would also love to contribute to this project and fix the issue.

[Cveman1]

Awesome. Thanks @maprehensive

[JessicaItepu]

Hello, can i be assigned to this project?. Thanks in advance.

[Pamela-owino]

@phelisa1, @Cveman1, @Praise-Ugwum, @Pamela-owino, @Karimatu05, @EQua-Dev and @Augusta2 you're assigned. Thank you!

Thank you

[Praise-Ugwum]

@phelisa1, @Cveman1, @Praise-Ugwum, @Pamela-owino, @Karimatu05, @EQua-Dev and @Augusta2 you're assigned. Thank you!

Hi everyone, I suggest we collaborate since this issue was assigned to seven of us. How can we discuss this more?

[Dimmah15]

Hi @maprehensive

Can i be assigned to this, i would love to contribute

[ghost]

Hi @maprehensive @wbrunette I would love to work on this issue

[maprehensive]

Hello, can i be assigned to this project?. Thanks in advance.

@JessicaItepu I can only assign 10 people, but please still work on this issue and submit your designs here. It will be counted for your application. Thanks

[JessicaItepu]

@phelisa1, @Cveman1, @Praise-Ugwum, @Pamela-owino, @Karimatu05, @EQua-Dev and @Augusta2 you're assigned. Thank you!

Hi everyone, I suggest we collaborate since this issue was assigned to seven of us. How can we discuss this more?

How do you intend to work with us. I would love to collaborate on this

[JessicaItepu]

Hello, can i be assigned to this project?. Thanks in advance.

@JessicaItepu I can only assign 10 people, but please still work on this issue and submit your designs here. It will be counted for your application. Thanks

Thank you, how do we access the previous designs so we can make our additions to it.

[Thimmo]

Hello @maprehensive, These are what I have come up with

• I added a caption to the synchronization icon for more clarity.
• I moved the settings icon to the "meatball menu" as an additional menu allowing the Sync icon to stand out and reducing cognitive load for the user.
• I added a feedback alert/notification to signify success or error during synchronization.

I ensured I followed the updated style guide during the design process.

Let me know what you think about the design. Also, I'm still finding it difficult to locate the file for the logo of all ODK-X Services. Thank you

[JessicaItepu]

Hello @maprehensive, These are what I have come up with

• I added a caption to the synchronization icon for more clarity.
• I moved the settings icon to the "meatball menu" as an additional menu allowing the Sync icon to stand out and reducing cognitive load for the user.
• I added a feedback alert/notification to signify success or error during synchronization.

I ensured I followed the updated style guide during the design process.

Let me know what you think about the design. Also, I'm still finding it difficult to locate the file for the logo of all ODK-X Services. Thank you

Hello, did you get the survey app to know what it looks like ib full? Thanks in advance for your response

[JessicaItepu]

Hello @maprehensive, These are what I have come up with

• I added a caption to the synchronization icon for more clarity.
• I moved the settings icon to the "meatball menu" as an additional menu allowing the Sync icon to stand out and reducing cognitive load for the user.
• I added a feedback alert/notification to signify success or error during synchronization.

I ensured I followed the updated style guide during the design process.

Let me know what you think about the design. Also, I'm still finding it difficult to locate the file for the logo of all ODK-X Services. Thank you

Also if you mean the general odk-x logo. I found it on Google. Check it out

[G-ann]

Hello. I would love to be assigned to this issue .

[Praise-Ugwum]

Hi @maprehensive. I came up with this redesign.

To fulfil the Objectives:

• I included only the Menu icon because it can be easily recognised by most users.
• I transferred other icons into the menu to simplify the design.
• I included descriptions of all icons in the menu.
• This design will also create uniformity and consistency on all screens.

[jessjaey]

@maprehensive I would like to work on this issue

[Augusta2]

@JessicaItepu you can get it at the Repository Check under Applications and click any of the links.

[Thimmo]

Hello @maprehensive, These are what I have come up with

• I added a caption to the synchronization icon for more clarity.
• I moved the settings icon to the "meatball menu" as an additional menu allowing the Sync icon to stand out and reducing cognitive load for the user.
• I added a feedback alert/notification to signify success or error during synchronization.

I ensured I followed the updated style guide during the design process. Let me know what you think about the design. Also, I'm still finding it difficult to locate the file for the logo of all ODK-X Services. Thank you

Hello, did you get the survey app to know what it looks like ib full? Thanks in advance for your response

Yes, I did.

[Thimmo]

Thank you for this reply. @Augusta2 also mentioned something helpful.

[JessicaItepu]

@JessicaItepu you can get it at the Repository Check under Applications and click any of the links.

Thank you

[maprehensive]

@G-ann @jessjaey Yes please go ahead and work on the issue. You no longer need to be assigned. thanks!

[Augusta2]

@maprehensive This is the design I came up with. I removed the settings icon from the top bar. I met some people and had them test the app and I observed that they did not notice the 'Sort by' feature. To remedy this, I tried to make it more visible and within the reach of the users.

Click here to view the prototype on Figma

Here is the complete document on the Study and Description of this project.

[Karimatu05]

@maprehensive Design Rationale Declutter the menu navigation System feedback for users (success and error state) Icon usability (Proper labels and consistent icon pack)

NOTE: Interface icons are from Material Icon Waiting to see your feedback soon, thank you

[caxrii]

@maprehensive I'd like to work on this

[jessjaey]

@maprehensive I'd like to work on this

Hi there, Read through the instructions, you can work on any issues without being a assigned

[maprehensive]

@Thimmo Nice work, this is well laid out and clearly expressed.

Note that this issue is focussed on the Survey app. I note there was a type in the body referring to Services - I've corrected that. The Services designs can go in a separate issue.

It's good that you've simplified the nav by removing the cog from the header.

You should also show what the menu looks like when it is open / selected, and how the 'Sort by' functionality will be treated.

Hope the helps for a next iteration. Well done.

[maprehensive]

@Praise-Ugwum Thanks - this is a nicely presented design.

The design shows Services app - this issue is for the Survey app navigation. Do you have a design for Survey?

[Cveman1]

Hi again @maprehensive

I'm certain you must be getting loads of notifications.

As part of the efforts to uplift the UI of the ODK-X tools, I redesigned this menu navigation UI to give it a modern look and feel. This involved:

• Applying my UX Writing knowledge to improve some of the microcopies to make menu labels clearer, easy to understand and navigate the app.
• Using proper information architecture to group similar menu items together. This way, users can easily scan through the menu without friction.

I used icons from the material design library as stated in the ODK-X Design Guidelines

I used fewer icons for only common affordances recognised by most users, in this case: The search and kebab (ellipsis) icons.

For two reasons:

• The menu list is not so long.
• It reduces the clutter caused by the icon and results in a more cleaner UI.

Also, I introduced the search button which can be used consistently throughout ODK-X tools. This would help users search for terms in Surveys forms and retrieve data in Tables without having to scroll the length of each app. This addition should improve the overall user experience.

For the Menu:

I organized menu items into scannable groups, like most modern UIs.

The New Menu navigation UI now contains:

• Sort by
• Refresh
• Content
• Sync now
• Switch user
• User Permissions
• About
• Settings Each of these items would be dynamically visible across ODK-X Tools. For instance: 'Contents' would not be in the Services tool.

For Sorting

It is now simpler with a check mark to indicate a selected sorting type. This gives the user clearer feedback rather than a radio button.

View the prototype here:

https://user-images.githubusercontent.com/80982139/196041702-9e7e4a7f-4299-4bcf-ad79-807afd0816e8.mp4

Interact with the prototype here

Please, let me know what you think, I love feedback.

[maprehensive]

@Augusta2 Well done getting user feedback on the navigation and highlighting user issues in your design.

Moving Sort by into the page is a good way to address the issue of discoverability. Can this be done with standard Android design components? You could reference the material design guidelines to see if there is a standard design pattern that can be used.

Including a home button in the header may present some problems. It compromises the icon by adding elements to a small space, and in ODK-X you actually move between different applications (e.g. Survey > Services > Survey) so an app Home button will not solve the problem. The Android back button may still be the best solution here.

Good work. I would look forward to seeing another iteration with work on the Sort by proposal.

[maprehensive]

@Karimatu05 This is a well presented, clean design proposal.

It looks good, and it's great to see your icon design in there as well!

The menu for Survey has Sync, Settings, About and Sort by – your design has different options.

The sync icon rotates in different screens, is there a meaning behind this?

The behavior of Sync is mainly handled by the Services app, so showing the success/fail state in Survey may not easily work – it's a good concept, but the execution may be difficult.

Good stuff, thanks a lot.

[Augusta2]

Thanks @maprehensive I will get right to it

[Augusta2]

@maprehensive You said i should follow desighn guidelines. I assume you meant font colours and styles?

If yes, then I adjusted it

I also came up with other designs for the sort by option.

For the first design, I agree with @Cveman1 and I think a search button will really be helpful especially as we have a long list of forms to go through. I think the search button really balances the sort by button visually (Although it's not the main function)

or

or

For this second design, the sort by option stands alone

[Karimatu05]

@Karimatu05 This is a well presented, clean design proposal.

It looks good, and it's great to see your icon design in there as well!

The menu for Survey has Sync, Settings, About and Sort by – your design has different options.

The sync icon rotates in different screens, is there a meaning behind this?

The behavior of Sync is mainly handled by the Services app, so showing the success/fail state in Survey may not easily work – it's a good concept, but the execution may be difficult.

Good stuff, thanks a lot.

@maprehensive ,The sync icon was added to aid user understand the system feedback and how that will enable them know what happening to the sync at a point. But since the implementation will be hard to fit in we can have it pending I believe. here is my second iteration. i would be waiting for your feedback please thank you

[Pamela-owino]

I removed the settings icon on the navigation bar and replaced it with the filter icon because the latter is more essential to the user. The filter button was hidden in the menu and, therefore, not easily accessible. Bringing it to a location where it can be seen makes the navigation bar more user friendly. I then placed settings, account, and about inside the menu.

[caxrii]

@maprehensive Here is my thought on the issue the navigation needs to be simple and minimal for users to be able to understand the function and for easy use so i made all functions to be under the ellipsis menu as a drop-down list and made use of text to communicate the function, that way the user does not need to learn the function and it allows users using screen readers able to use the app effectively.

[maprehensive]

@Cveman1 Fantastic contribution - very ambitious, thoughtful and clearly explained.

My feedback:

Search - good feature suggestion. At my organization we have built a search field - except in Tables, where we render our forms -it's a useful feature. It is out of the scope of this task though, because we want to focus on redesign of existing functionality. That's not a problem, as I think your design changes still work without it.

New menu - this is a bold suggestion - I can see the potential value. I'm not clear on what Refresh and Contents are though - that needs more explanation.

Sort - good point about the radio button, that's a nice improvement. At first glance to me the italics made it seem less tappable. Could be just me, but would be worth checking with a few users if we were going ahead with the changes. Also, putting Sort by at the top is good - Sort and Sync may be the most commonly accessed actions.

If you do an iteration, I would remove the extra feature work, and focus on the improvements to the existing functionality.

Great work, thanks!

[maprehensive]

@Augusta2 great to see these iterations, nice work.

Search - same feedback as for @Cveman1 - good feature suggestion – it's a useful feature. It is out of the scope of this task though, because we want to focus on redesign of existing functionality. I agree that your treatment has a nice balance between the Sort and Search functions, it's nicely executed.

If you iterate again, remove the search feature, and I have a suggestion to evolve your good idea of exposing the Sort feature. Material design has a segmented button that could be a new way of presenting the sort options: https://m3.material.io/components/segmented-buttons/overview

You don't have to iterate again though! Your work here is good for your application, and if you want to move onto other issues that is ok.

Thanks again, good work!

[maprehensive]

@Karimatu05 This is looking really consistent and clean. The Material icons work well with your app icon, and the navigation looks very clear and usable.

I'm not completely sure what Sync info is, so that could may be be explained further.

Nice work!

[maprehensive]

@Pamela-owino Great to see the grid layout in action! 📐

Bringing the sort icon out of the menu is a simple and effective solution to make it more findable. And I think the icon is well-known enough that it works without a label. This is a good design solution.

Some feedback for improvements:

• ODK-X is Android only, so it's better to reference an Android device / screen size rather than iPhone
• the menu panels for Sort and the hamburger menu are different widths - is there a reason for this?

Nice work, thank you!

[maprehensive]

@Caxri7 Very clean and simple design and well explained.

The decision to remove the icons is a strong design choice. A possible improvement that wouldn't affect the simplicity is to change the order of the menu options by frequency of use.

Thanks!

[caxrii]

Thanks @maprehensive

[Augusta2]

@Augusta2 great to see these iterations, nice work.

Search - same feedback as for @Cveman1 - good feature suggestion – it's a useful feature. It is out of the scope of this task though, because we want to focus on redesign of existing functionality. I agree that your treatment has a nice balance between the Sort and Search functions, it's nicely executed.

If you iterate again, remove the search feature, and I have a suggestion to evolve your good idea of exposing the Sort feature. Material design has a segmented button that could be a new way of presenting the sort options: https://m3.material.io/components/segmented-buttons/overview

You don't have to iterate again though! Your work here is good for your application, and if you want to move onto other issues that is ok.

Thanks again, good work!

Wow, thanks @maprehensive. I definitely learnt something new and I enjoyed the process.

Here is my design. I designed this in 3 states;

• Unselected state
  • Pressed state
  • Selected State

Unselected state

Pressed State

Selected state

I used the dimensions given by material design. Colours used are from the ODK-X design guidelines.