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

[Rubadel]

@Augusta2 Hi sir, Could I ask you about the place of the adding menu, I do not find main_activity.xml file or something like that.. could you guid me about that please

[Augusta2]

@Augusta2 Hi sir, Could I ask you about the place of the adding menu, I do not find main_activity.xml file or something like that.. could you guid me about that please

I don't understand. Is it for this issue?

[Rubadel]

Yes about this, see here

I means This menu

[Augusta2]

This particular issue is a Design problem, not technical.

We are required to redesign the Menu navigation and post screenshots of our design here.

So just download the App, go through it and redesign it according to the instructions posted above. I use Figma, there are other softwares you can use.

[Rubadel]

@maprehensive I think is better to be like that, everything organized within single place, clear and very simple, as well as less activity so less resource..

I have conducted the design as all guides that mention in the slides, as I tried it with light blue and light green which are in the design guide slides ,

I am very excited for your opinion ^^) ..

https://user-images.githubusercontent.com/66481905/196797373-c2624a3a-3220-44e3-8931-ba14c3d160b1.mov

[Cveman1]

@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

Yes, the search and sort feature works hand in hand

[Cveman1]

Thanks for your feedback @maprehensive. It's helpful

Okay, the search feature, I understand.

I meant the 'Refresh' to mean 'Scan' on the existing ODK-X Service app.

While 'Contents' is the action hidden when you click on the name of a form in Survey. See here:

For the Sort Action, I'll test the prototype with a few people to see if it works. I'd also find a way to make it look more 'actionable'. Also, since sort and sync is the most commonly accessed, it might be a good idea for me to bring it to view on the UI, and replace it with the Search feature.

Thanks for considering the improvements.

@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!

[Karimatu05]

@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!

Thank you so much sir and i will remove the sync info now

[010220010]

Hello @maprehensive I hope this meets you well, this are my little redesign ideas for the odk-x survey menu for an android frame. Below are attached files for the presentation and a mirror of the overall flow.

The Presentation

https://user-images.githubusercontent.com/105234341/197333692-a5a6a293-8a85-4d52-a13f-e371703a0cf5.mp4

The mirror flow

https://user-images.githubusercontent.com/105234341/197333710-b85f66fa-654e-48a8-aaf1-d3eb62e949b9.mp4

[maprehensive]

@Augusta2 Good to see that incorporated into the design.

It's definitely a way to make the sort more prominent. Do you think that it works well? You could add some notes to your application on this.

Thanks for the iteration – looking forward to seeing this in your application :)

[maprehensive]

@Rubadel Nice work. It's a good start on bringing a full global navigation to the apps.

Feedback:

• the user might be overwhelmed by the number of choices
• some choices may not be as relevant in different contexts (reset configuration, Table specific settings)
• the navigation will change in different parts of the apps, so that might add confusion for the user

I like the overall idea. If you do an iteration, it would be good to see how it works in different parts of the apps and how you would counter potential user confusion.

Thanks!

[maprehensive]

@Cveman1 Thanks! You've gone deep into the application - that's fantastic.

Look forward to the next iteration.

[maprehensive]

@010220010 Good ideas in this design, well done.

Feedback:

The Sort selection looks like it would require custom development - is this the case? If yes, that would be good to revisit, since the focus of this project is to create standard designs that can be easily templated for the community to use. https://m3.material.io/components is a reference for standard UI.

I would like to see the rationale for needing to click the "Select..." button to see the forms. I think that having the forms already listed on the screen makes it simpler for the user - saves them a tap!

The screencasts are great. I would suggest also including static screenshots with text callouts for your application. It's not always convenient for people to review a video.

Great work, thanks for the effort on this!

[Cveman1]

@Cveman1 Thanks! You've gone deep into the application - that's fantastic.

Look forward to the next iteration.

Thank you for this @maprehensive

Yes, and definitely, the next iteration.

[JessicaItepu]

Hello, @maprehensive this is my submission on this project. I would love to get your feedback. Thank you.

[010220010]

@010220010 Good ideas in this design, well done.

Feedback:

The Sort selection looks like it would require custom development - is this the case? If yes, that would be good to revisit, since the focus of this project is to create standard designs that can be easily templated for the community to use. https://m3.material.io/components is a reference for standard UI.

I would like to see the rationale for needing to click the "Select..." button to see the forms. I think that having the forms already listed on the screen makes it simpler for the user - saves them a tap!

The screencasts are great. I would suggest also including static screenshots with text callouts for your application. It's not always convenient for people to review a video.

Great work, thanks for the effort on this!

Hii @maprehensive, a big thanks to you for your detailed review on my design but I still find the statement "The Sort selection looks like it would require custom development" confusing, I don't know if you can just briefly explain that to me so that I can tap from your ocean of knowledge in this field. And as for the rationale for the "select form..." button, I thought that since the aim of the whole redesign was to make the end-user experience with the apk seamless, I felt that opening an apk and having an outrageous list of forms on the first screen to select from could be overwhelming so I decided to chunk them all up under a single button since they're to perform similar functions...as par the "Miller's law of UX" in a bid to simplify the screen as much as possible and with the hope that implenting it all through can be relatively easy so that the entire apk can be up to par with the contemporary apks we see around. I don't know what you think about this...

[Pamela-owino]

@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 Thank you for your feedback. I have made the necessary improvements.

[Thimmo]

Thank you for your feedback. I have made reiterations, and this is what I have come up with.

• Reduced the icons on the navigation bar to the synchronization function and the menu bar. I tried bringing the whole contents of the "settings" to the menu to improve the navigation, but it turned out to be overwhelming to the users after testing.
• I brought the "sort by" icon to be in line with the "select the form to open". I tested this icon (from material design) with some users to see if there'd be confusion, but users are already familiar with the icon to filter out results.
• I decided to go with the same radio button to avoid bringing complexity to the interface.

Here is a short prototype

https://user-images.githubusercontent.com/105228037/197655057-eb53bd3d-a6ae-4a6e-8cee-851b18f5b176.mp4

[010220010]

@010220010 Good ideas in this design, well done. Feedback: The Sort selection looks like it would require custom development - is this the case? If yes, that would be good to revisit, since the focus of this project is to create standard designs that can be easily templated for the community to use. https://m3.material.io/components is a reference for standard UI. I would like to see the rationale for needing to click the "Select..." button to see the forms. I think that having the forms already listed on the screen makes it simpler for the user - saves them a tap! The screencasts are great. I would suggest also including static screenshots with text callouts for your application. It's not always convenient for people to review a video. Great work, thanks for the effort on this!

Hii @maprehensive, a big thanks to you for your detailed review on my design but I still find the statement "The Sort selection looks like it would require custom development" confusing, I don't know if you can just briefly explain that to me so that I can tap from your ocean of knowledge in this field. And as for the rationale for the "select form..." button, I thought that since the aim of the whole redesign was to make the end-user experience with the apk seamless, I felt that opening an apk and having an outrageous list of forms on the first screen to select from could be overwhelming so I decided to chunk them all up under a single button since they're to perform similar functions...as par the "Miller's law of UX" in a bid to simplify the screen as much as possible and with the hope that implenting it all through can be relatively easy so that the entire apk can be up to par with the contemporary apks we see around. I don't know what you think about this...

Hello there @maprehensive I hope this meets you well. This is a presentation of the screenshot with their respective text call outs as earlier suggested by you

[Karimatu05]

@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 what about now please. and please what is the project timeline? are we explaining our design brief more or what? because i really don't understand what this timeline is

[Cveman1]

Yes, I made an iteration. I've made all the changes to focus on improvements to the existing functionality without all the extra work feature.

Here it is @maprehensive.

Based on your feedback, I adjusted the following;

• I removed the 'Search' feature from my first iteration since it is out of the scope of this project.
• The 'Sort' action is now tappable, and within reach. The quick usability test I did with a few people showed they had no idea it's clickable, due to its italics form and the faintness of the fill.
• Also, I brought both the Sort and Sync actions to the fore of the top bar since they are commonly accessed.

Menu behaviour

Sort Action

Other updates;

• I maintained the initial design because of the positive feedback it got.
• I also left the tick button used for the ‘Sort’ feature since it was a nice improvement.

View the prototype here;

https://user-images.githubusercontent.com/80982139/199960803-7a74e7b2-2d05-48c1-8f4e-5bf873fa8556.mp4

@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 bost 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!

[Cveman1]

I think the solution in #403 has also addressed some of the issues here