tool-suite-X
tool-suite-X copied to clipboard
odk-x
ODK-X Tables - Menu navigation UI improvement
The ODK-X Tables mobile application has multiple menu navigation states, depending on where the user is in the application.
The menu navigation is a mix of icons and text items under the ellipsis menu. The mix changes on different screens:
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.
- the placement of menu items is different across the screens
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 Tables 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
Since multiple people can work on it simultaneously, @maprehensive can I join @Iceey01 to work on it?
Hi @maprehensive @wbrunette Here are my proposed changes to the menu navigation
Issue 1
Issue 2
Issue 3
@NiranjanNlc @G-ann @jessjaey @Praise-Ugwum @mishymia @Augusta2 Please go ahead and work on the issue. You no longer need to be assigned to work on it for your Outreachy application. Thanks!
@maprehensive Can i create a pull request when I'm done working on the issue?
Presently, there is no consistency across the screens for the menus. The user needs to be familiar with the screens without giving them the stress of learning. To remedy this situation, I have changed all the menu items to be locked in the overflow menu and thus the user clicks the overflow menu for the items to be revealed.
Why is this a better way?
- The user does not need to guess the purpose of the menu items as they will instead see the titles rather than icons and they will know exactly what is required of them.
- The user understands that they will always see an overflow menu if a screen has one.
- The title of the toolbar now has enough space to be displayed without being trimmed
Screenshots.
After changing all the attributes of the menu items to "showAsAction='never'" we will have the following screenshots
This fixes issue #357
@maprehensive this is what I have done and i believe it solves this issue
fix-menu-navigation-ui is the branch
@maprehensive
This is my own opinion on the issue. For consistency of menu and icons that does not communicate the function they link to i used only the ellipsis icon which the user is familiar as a menu where other functions are listed. 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
Hello @maprehensive These are my iterations on this issue
Sometime this week while studying, I came across the Floating Action button and I decided to try it out. Let me know what you think.
Hi @maprehensive . For this issue, the goal is to make icons clearly communicate their functions, so that users can easily know what they do. And also create consistency in the menu bar across the application. So here's my redesign and idea:
-
For the first screen; The old menu bar has 4 different icons which can be properly improved as shown in my design. I placed the "sync icon" and "settings icon" into the "more or kebab icon". And instead of using the icon itself which can be sometimes difficult for users to grasp, I replaced it with text to clearly convey its function. Hence reducing the number of icons and simplifying it.
-
The second screen For the old design, the icons changed to different set of icons which isn't consistent. And also, they don't clearly communicate their function. Like the + and "arrow icon" functions in the app as Import CSV file and Export. The icons and what they mean do not tally, hence the redesign. I placed them in the overlay. That way , users are not confused and it is consistent with the first screen.
-
The third screen I tried to make it as similar as the rest of the screens. I placed the "settings" into the "more icon overlay" to create consistency.
@maprehensive,
This is my suggestion about Navigation bar and the icons.
- It solve -different menu for screen- problem.
- It consistent across the application for all devices.
- It is simple, clear, familiar with most users.
https://user-images.githubusercontent.com/66481905/197285458-61d4b004-591e-4d0f-aadf-aefaa071c76b.mov
And for the sync status Icon, I sagest this solution there, Sync status icon will appear diffrent just based on the sync status, and when click on them show the related function,
I recommended it before, this Navigation bar for all related apps in following comments, Nav bar improvement in survey there As well as for service app
@BlueSkiez-dev Apologies for the slow feedback.
This is great. The issues are clearly identified and solutions well articulated and justified.
1 and 3 establish a pattern of a single action promoted on the top app bar, the visual treatment is a nice reinforcement.
The table view content options are good. Redesign #1 does a good job of promoting the different views which may not be easily found by users.
Some questions I would pose if you were doing another iteration:
- Could the import / export removed to the top, like the table views? Or vice versa? Or is there a reason for the top and bottom placements?
- Are there Material design components that you can reference for the Import/Export and Table view bars? If yes it would be good to note these, as that aligns with the goals of this project.
A great set of design solutions. Thanks!
@Emenyi95 This is a good start. Great that you've gone deep into the app, and down into the lower levels!
Feedback:
- is there an action / navigation item that could be promoted to the top app bar? There is the potential to save the user a few taps.
- is the order of the menu items optimized and logical? Since the design relies on the menu, ordering, grouping etc could be considered to improve the user experience.
Thanks!
@Caxri7 A nice, clean design solution and good presentation.
My feedback (as with Emenyi95)
- is there an action / navigation item that could be promoted to the top app bar? There is the potential to save the user a few taps.
- is the order of the menu items optimized and logical? Since the design relies on the menu, ordering, grouping etc could be considered to improve the user experience.
Thank you.
@Augusta2 Great work - very thorough and well presented.
The icon improvements are good - although Table Manager and Table Settings may not be obvious to all users.
The floating action buttons are interesting, and can be a good way to introduce contextual actions. Do they require custom development? Is there a Material component that could achieve a similar outcome? That would align with the goals of this project.
Thank you!
@mishymia This is really nice work. Consistent and thoughtful, I think it improves the design.
Organising by screen has strengthened the design rationale by referencing the context. Thanks!
Good work creating clear text labels, like "Import CSV File". That's effective.
Feedback: You could expand on your reasons for hiding some icons, like Sync on the first screen. And I would be interested to know if you think that icons like Table View and Add row are obvious enough for users?
Nice work. Thank you :)