tool-suite-X
tool-suite-X copied to clipboard
odk-x
ODK-X Survey - Menu navigation UI improvement
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
I'd love to jump on this @maprehensive
Also, where can we see the full application?
@phelisa1, @Cveman1, @Praise-Ugwum, @Pamela-owino, @Karimatu05, @EQua-Dev and @Augusta2 you're assigned. Thank you!
Hello, @maprehensive I would also love to contribute to this project and fix the issue.
@phelisa1, @Cveman1, @Praise-Ugwum, @Pamela-owino, @Karimatu05, @EQua-Dev and @Augusta2 you're assigned. Thank you!
Thank you
@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?
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
@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
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.
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 @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
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
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.
@JessicaItepu you can get it at the Repository Check under Applications and click any of the links.
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.
Hello, did you get the survey app to know what it looks like ib full? Thanks in advance for your response
Yes, I did.
@JessicaItepu you can get it at the Repository Check under Applications and click any of the links.
Thank you
@G-ann @jessjaey Yes please go ahead and work on the issue. You no longer need to be assigned. thanks!
@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.