Redesign form navigation for ODK-X Survey

[maprehensive]

The navigation between forms pages in ODK-X Survey is not well presented, and does not fit long form names well.

Why this needs to be improved:

• Long form names do not fit in the button
• The layout 'breaks' on some devices
• The design can be updated in line with the ODK-X Design Guidelines

Guidance for this issue:

• Familiarize yourself with Survey navigation within a form
• Provide a redesign of the navigation that improves on the issues above
• 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]

Hello again @maprehensive, may I please work on this issue?

[maprehensive]

@phelisa1 Yes, but I'll assign after you've completed #366. Thanks :)

[Cveman1]

Same here @maprehensive since multiple people can work on this issue.

[EQua-Dev]

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

[Augusta2]

Hello @maprehensive Can I work on this task?

[Pamela-owino]

Hello @maprehensive, can I please work on this issue?

[Cveman1]

Hello @maprehensive

This is the redesign that improves on the issues above.

Here are my reasons for this redesign:

• I used ellipsis to hide the remaining characters in long form names.
• I also used the tint blue hue #E7EEF6 has the background for the Top Bar
• The navigations are also placed in auto layouts to make them fluid and responsive across any device. They won't have to 'break' again.
• I also followed the ODK-X Design Guidelines

[maprehensive]

@Augusta2 and @Pamela-owino you're assigned. Thank you!

[BlueSkiez-dev]

@maprehensive I'd like to work on this issue...

[BlueSkiez-dev]

Hi @maprehensive
The best way around this issue is to make the view responsive.
Trying to compress the components on one line will cause a layout break, and truncating the text on the form title will cause informative issues. So the goal is to break the line and use the available space on smaller screens

My Solution to this issue is as follows:

[Cveman1]

Hello @maprehensive, In contribution to creating custom UI components for ODK-X Apps, I made an improvement to the form navigation I designed earlier. See:

Description;
It has...

• a well designed top bar which contains the title (22px) for the current survey form.
• a colour fill of #E7EEF6 as seen in the ODK-X Design Guidelines, to separate it from the form content below.
• a width that stretches across the width of the screen and is also responsive.

This way,

• Longer form names can be shown.
• The layout would remain consistent across devices.

My design follows the established 8-point grid system with a 24px on all sides.

Please let me know if this works. Thank you

[G-ann]

Hello, can I be assigned to this issue, I would love to contribute.

[jessjaey]

@maprehensive Can I be assigned this issue??

[mishymia]

Hi @maprehensive can I be assigned to this issue?

[Daveojoe]

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

[maprehensive]

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

[jessjaey]

@maprehensive worked on this issue and I would appreciate your feedback on this.
Thankyou

[caxrii]

@maprehensive I'd like to work on this

[Augusta2]

Hello @maprehensive
Hope your day is going well?

This is my contribution on this issue.

The users I asked to check out the App did not notice that the Button holding the form name was clickable, therefore, they missed whatever information they would have gotten from it.
I think we should solve the issue of the Form navigation and also find a way to make the other information reachable and more noticeable by the users.

The design of the 'floating action button' is inspired by the shape of the letter O in the ODK-X logo.

This is the link to the prototype on Figma

[caxrii]

@maprehensive

1. I did a few designs for the navigation in light and dark theme mode. Reason for this was to check for accessibility.
2. I used the chevron icons to indicate next and previous to allow The headings have more room and negative space to breathe.
3. I added a text to the second design to indicate progress as the user fills the survey forms.
4. In the Third design i felt a progress bar should indicate the users progress.
5. In the Fourth design i used the progress bar and a text below to indicate progress.

I'd love to here your feedback on this, Thanks.

[IjeomaGeorge]

Hi @maprehensive I redesigned the issue on The navigation between forms pages in ODK-X Survey,

1. I used the eclips on the household survey button just as @Cveman1 which suggests that the button has more character after the household; this allows for the button's simplicity and neatness.
2. Knowing well well that ODK-X App has both a dark and a bright mode, I also created a dark mode for it because it's best to always create both when rebuilding any.
   

[mishymia]

Hi @maprehensive
The goal is to make longer names fit so it doesn't break out on some devices
Here's my idea and reasons for the redesign.

• The button that contains "Household survey", I added a drop-down icon to clearly indicate that it is a button.
• I increased the spacing between text and the icon (48px maintaining the 8pt grid system of the guidelines), doing so it can contain longer texts and doesn't break out.
• I placed the "Next" button at the downright corner of the screen to create breathing space in the top navigation bar.
• Lastly, I retained the regular position of the back button since that's what users are used to, while I brought the next button down so it's easier to go forward.
  

[Rubadel]

I design this layout, (I try more than one for search design)

Features of my opinion:
-The main problem of Long form names is solved and in all device.

• Made navigation most easy, that it show all surevys in list so user can browse them quickly and take overview, rather than show one by one.
• Enabled the search, so if they are so many the search will help ( I recommend to activation the search within title and content by coding) .
• Simple and more comfortable/familiar for all users.

[salmasabo]

@maprehensive
1.I placed the navigations in auto layout so it's scalable and responsive across all devices.

2.I chose chevron icons to indicate back and forth as they are the modern icons used to depict that.

3.also added numeric progress to indicate progress as users fill the form.

[Karimatu05]

Hello @maprehensive what do you think on this please, looking forward to see your feedback thank you

[JessicaItepu]

..

[designita]

@maprehensive Here is my contribution to the above stated issue, I'd appreciate your review.

[Redeem-Grimm-Satoshi]

Form Navigation Redesign

##This is modern and minimalist design.

1. Long form names will be able to fit in since the button's width matches the parent container and a horizontal margin of 4dp /px was applied.
2. Layout won't break on smaller devices since the button's width increases/reduces depending on the device screen size
3. User can input a page number and skip to the page directly ( for a great user experience )
4. Material design icon used ( free to use )
5. Design falls inline with the ODK-X design guidelines.

@maprehensive I'll happy to receive a feedback from you.

[Pamela-owino]

Hi @maprehensive This is my redesign proposal
1 declutter the navigation bar and make it more cleaner.
2. The back and next icons are well known and therefore do not need labels.
3. Include page numbers to make it easy for the user to navigate through pages.

[010220010]

Hello @maprehensive, this is to present to you my redesign for the flagged issue to meet the set objectives following the approve style guides. Please do well to review it and let me know your thought on it, thank you.

[Erieola]

Hello @maprehensive here's my contribution to this task.

Figma link: https://www.figma.com/file/unVUG3yR0McIsDeeqPrtrO/Erie?node-id=43%3A7373

[Cveman1]

Hi @Redeem-Grimm-Satoshi. Following the top app bar solution in #397, here's a redesign for the form navigation for ODK-X Survey.

Users no longer need to tap the name of the form to reveal the menu that provides navigation and exit options. This wasn't so intuitive. It now overflows into the 3 dot menu, following the specs for Materials' Top App Bar.

###Guidance

1. The Top App Bar follows the guidelines here Redesign every Top App Bar as a UI Component to meet Material Design Guideline #397
2. The card containing the information about the form should conform to the ODK-X Design Guidelines
3. The buttons follow the guidelines in Redesign the buttons used in ODK-X tools #402

What do you think @maprehensive

[medinasheriff]

Hello @maprehensive, I'm an Outreachy applicant. Since you've said we can just jump into tackling an issue without being assigned. I decided to try with this.

BUTTONS: I noticed everyone has tried to stick with the Back, and Next buttons being side by side, but I checked and there's no instruction stating it absolutely has to be that way, so I placed the text field between them.

Thoughts: I believe having the text field between them is better for user experience due to the distance between the 2 buttons, and also positioning sort of just lets you know the direction youre going.

I also made them TEXT buttons because, this makes it look less clustered.

TEXT FIELD: Following the ODK-X design guide, the text field had to be a specific size, the specified size wouldn't allow long survey names to show in full, so I introduced a truncating effect where the rest of the text is clipped when maximum text capacity is reached.

I introduced an overlay which shows the full text, and extends vertically for really long survey names once the textfield is touched, this allows users to see and read full text at once instead of only having to scroll inside the text box.

All text and colours adhere to the provided ODK-X design guidelines.

[medinasheriff]

@maprehensive @Redeem-Grimm-Satoshi I noticed an issue with the design guidlines, the colour code given for the "bg for forms/sections #E8EEF6" for dark mode is wrong, its the same as the code for the white background. I'm bringing this to you as an added issue albeit a small one. It could affect the uniformity of designed dark mode screens.

[medinasheriff]

@maprehensive Here is the link to a new issue I created for the design guidelines #489