tool-suite-X
tool-suite-X copied to clipboard
odk-x
Redesign form navigation for ODK-X Survey
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 Yes, but I'll assign after you've completed https://github.com/odk-x/tool-suite-X/issues/366. Thanks :)
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
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:
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 @jessjaey @mishymia @Daveojoe Yes please go ahead and work on it. You no longer need to be assigned to the issue. Thanks!
@maprehensive worked on this issue and I would appreciate your feedback on this.
Thankyou 
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
@maprehensive
- I did a few designs for the navigation in light and dark theme mode. Reason for this was to check for accessibility.
- I used the chevron icons to indicate next and previous to allow The headings have more room and negative space to breathe.
- I added a text to the second design to indicate progress as the user fills the survey forms.
- In the Third design i felt a progress bar should indicate the users progress.
- 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.