ODK-X Tables - Menu navigation UI improvement

[maprehensive]

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

[Iceey01]

Hello @wbrunette Can I be assigned to this

[maprehensive]

@Iceey01 You are assigned to this issue. Thanks!

[Cveman1]

Since multiple people can work on it simultaneously, @maprehensive can I join @Iceey01 to work on it?

[EQua-Dev]

Hi @maprehensive, please can I be assigned this task?

[Iceey01]

Thank you @maprehensive

[maprehensive]

@EQua-Dev @Cveman1 you're assigned. Thanks!

[BlueSkiez-dev]

Hi @maprehensive, can I be assigned to this task?

[lhurvedavies]

Hi @maprehensive, can I please be assigned to the task?

[Cveman1]

Awesome. Thanks @maprehensive

[ghost]

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

[Augusta2]

@maprehensive please assign this task to me

[G-ann]

@maprehensive I would love to work on this, can I be assigned to it please.

[Praise-Ugwum]

Hi @maprehensive, please can I also be assigned to this issue?

[jessjaey]

@maprehensive Can I be assigned this issue

[mishymia]

@maprehensive please can I be assigned to this issue?

[BlueSkiez-dev]

Hi @maprehensive @wbrunette Here are my proposed changes to the menu navigation

Issue 1

Issue 2

Issue 3

[NiranjanNlc]

Please assighn me this issuse . I want to work on this issuse. Thanks.

[maprehensive]

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

[caxrii]

@maprehensive Can i create a pull request when I'm done working on the issue?

[ghost]

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

[caxrii]

@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

[Augusta2]

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.

[mishymia]

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.

[Rubadel]

@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

[JessicaItepu]

...

[maprehensive]

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

[maprehensive]

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

[maprehensive]

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

[maprehensive]

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

[maprehensive]

@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 :)

[maprehensive]

@Rubadel Great to see this 'global' solution linking across all apps.

Feedback: for Tables, there's a few variations of the navigation, so if you iterate on this design, it would be good to see how the solution handles the different requirements of the screens in Tables. There's a few functions that aren't currently represented in your design.

Thank you 🙏🏻

[mishymia]

@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 :)

Thank you

[BennyMakachi]

@maprehensive, Kindly review my redesign for feedback and approval. Thank you!

[Augusta2]

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

Thanks for pointing me in the right direction. I studied the material components and designed a Floating action button similar to that of the Material component. Colours and fonts used are from the ODK-X design guidelines

I have updated the design in this document

[realdipo]

@maprehensive Here are my iterations for the issue.

2. I set out to reduce the complexity of the original menu design by simplifying the actions available to user on the app. A big problem that I thought the design had was passing on too much thought to user, this potentially set them up to fail or be frustrated using the app. I did this by making the primary action buttons chips right below the menu button with clear and brief copy to that effect. See below

3. Use of bottom menu to house key functions such as profile(this can be used to keep user info, verify user status), sync, settings. This frees up space for other features or functions tied to the More button and potentially a 'create table feature' to sit within the navigation bar or as a floating action button

4. Key here is the use of cards to further reinforce the primary use of the ODKX Tables apps; a way to handle on field data. I think the use of create table cards solves a lot of teething UX problems the app has.

[Cveman1]

Hello everyone and @maprehensive

I have improved the navigation UI using a single-page information architecture model to reduce multiple menu navigation states, and ultimately reduce confusion and eventual drop-off by users.

I used the app again and again to understand the navigation and different view layouts. Also, I looked through common UI patterns in other applications to learn how similar UI problems have been solved. I was able to remix ideas to improve the menu UI navigation of the ODK-X Tables app.

As always, I used typography, colour and spacing stipulated in the ODK-X guidelines.

The Empty State

• I improved the empty state screen with more helpful UX content to ease the experience, especially for first-time users.
• I added a button to list tables that would encourage action from users.
• Also, because the sync icon is the most commonly accessed action, it remains at the top bar, making it more prominent. All other secondary actions are hidden in the ellipsis icon.

View Layouts

ODK-X Tables app displays data tables in different view formats as stated in the docs:

• Spreadsheet View
• List View
• Detail View
• Detail with Sublist View
• Graph View
• Map View
• Navigate View
• Custom View

• Now, labels communicate clearly the action for each icon and don’t exert cognitive effort in learning.
• I used icons familiar to users with supporting labels making them accessible to anyone.
• I also maintained the 20px padding for the dialogue box as stated here.
• Also, I used a more minimal and subtle icon for the 'more action' of each data table and in the list instead of the settings icons used throughout the list.

Menu

• The menu icon and the items listed under the ellipsis are now consistent across the screens.
• Import and Export are grouped just like Settings and About are grouped like most modern UIs.

View the prototype in action below:

https://user-images.githubusercontent.com/80982139/198149684-bf5b7ae1-e71c-4a6f-8076-ec83c32159d2.mp4

You can also experience it here:

Thanks. What do you think?

[JessicaItepu]

Hello @maprehensive trust you have been great. Here is my contribution to this project. I am quite excited about this one and would love to get your feedback. Thank you.

[010220010]

Hii there mentor, I hope this meets you well. This is to present to you a result of the few tweaks I carried so as to meet up with the set objectives. Attached herein is a file containing my designs.

[Cveman1]

Parts of this issue might have been addressed in #403

[maprehensive]

@Cveman1 Agree. In our weekly meeting let's discuss how to approach the Survey and Tables menu design once the Services changes have been designed.

[IfeanyiSam]

Hi @Redeem-Grimm-Satoshi Outreachy 2024 Contributor here. Can I be assigned to this task?