User Experience Refresh

[lognaturel]

ODK Collect was designed and released in late 2008, around the time Android reached 1.0! Its look and feel has not been updated since and it's overdue for update to bring it in-line with Google's Material Design principles.

This project will require a review of mobile data collection tools in the space for inspiration, a number of design iterations backed with stakeholder feedback, and then an implementation of the most promising design.

Here’s a quick mockup to get your design juices flowing!

Note: this project is listed as an option for students who want to participate in Google Summer of Code 2017.

Some things to discuss here and to include in your project application:

• Why is your proposed UI an improvement over the current one?
• How will users find the functionality they are looking for?
• How will you approach upgrading libraries in a safe way?
• How does your user experience design address the needs of enumerators who may not be familiar with smart phones, may have reduced vision and/or may be working in a very bright, outdoor environment?

[abhaymaniyar]

I would like to work on its UI. I will be using Material design principles. I am also thinking of changing default network access framework to Retrofit 2 because of its simplicity. I am also thinking of implementing #407 in the app using GitHub API. Any comments on that?

[yanokwa]

Hi @abhaymaniyar, if you'd like to change the default network access framework, please file a separate issue and we can discuss it there.

The UI improvements are a GSoC project. If you are a student, you are welcome to apply! To strengthen your application, share your ideas and mockups for ODK Collect in this thread.

[abhaymaniyar]

Sure @yanokwa and thank you!

[Andy671]

A bunch of issues of the project on github are caused by old API's. To my mind, project should be rewritten based on the new techniques - with Support Library, Fragments etc. I can start working on refactoring. I have made sketches of new User Experience targeting modern UI/UX design tendencies. What do you think about that?

[lognaturel]

@Andy671 These are looking so nice! As you refine your ideas, make sure to think about how users send forms, download blank ones and things like that. I know this is just a start and it's a great one!

[swapsha96]

I prepared few mock-ups following the mock-ups mentioned in GSoC '17 project. I used Android Support Library, so its compatibility can be increased by keeping minSDK as required. I am familiar with 3rd party libraries which can be used to improve UI/UX. If you want, I can add 'swipe to delete' feature and show you. I looked into current repository and saw use of many deprecated classes and functions. Best solution is to build the application from scratch using Android Support Library and Material Design guidelines.

Suggest me if you want anything else to work on.

[geekrypter]

Hi @lognaturel and @yanokwa,

I am really looking forward to contribute to this community. I am enthusiastic to contribute to "ODK Collect - Improved user experience" idea as part of GSOC 2017. I am an experienced UX/UI developer and would love to showcase my skills to the community. There are few UX suggestions which I have in mind. I also have few queries which I hope can be answered as soon as possible so that I can start working on the implementation.

UX Suggestions: 1.An app tour which tutors the user on the various aspects of the app like what to fill in a particular line, etc. 2.User friendly fonts and modifications which provides a wonderful experience for the users. 3.Migration to a latest android support library needs be present because it follows the updated/latest principles of Android and also it has to be cautious because it may affect older android version users so I suggest looking at the user base and observe which android versions most users use and migrate accordingly.

Queries: 1.Should the UI mockups be posted in this issue thread or create a separate issue that or any other possible way? 2.If few users are having older versions of android, can we have a progressive web app for them and provide support for newer android version users so that overall app structure will be advanced and will be not disturbed because of the support for the few users and can benefit more users on a large scale? 3.Are there any other features that needs to be added or are we encouraged to suggest new features that can be useful to the app? 4.Should we be making changes to the application to help with the migration and other features or is concentrating on the design aspects sufficient for the discussion?

I apologise for the many queries. Just wanted to make sure the goal is clear for me. Please do make any comments on the suggestions and queries. I wish to add more suggestions as I proceed. Thank you.

[kunalsingh3110]

Hi @lognaturel and @yanokwa , I have made these changes to the ODK Collect app . Please review and suggest me further changes needed.

[lognaturel]

Thank you for the sketches and ideas, everyone! It's great to see different options for the user experience. I added a couple of questions to the initial issue for you to consider as you refine your plans. I would encourage you to start with low-fidelity sketches as you're considering different options for how users would interact with the application. That will be what we are most interested in as we review proposals. We will also be interested in how you will perform this work incrementally to reduce the chance of bugs being introduced.

@geekrypter also had some good questions. Participating in the discussion in this thread is the best way to refine your ideas. Feel free to link to a google doc that has public comment privileges if you want to share several sketches and have a live document that you iterate on, for example.

We recently upgraded minSdkVersion to 16 and targetSdkVersion to 22 following a community survey (see #293). We must support devices going down to API 16 for at least the next year or so. Creating a web app is out of scope.

If you think of features that would be useful as you explore the app and rethink the user experience, please file individual issues. Also consider joining or starting conversations such as #493, #506, #507.

[avijayvergia]

Hi @lognaturel and @yanokwa,

I am keenly interested in contributing to the Unified UI idea in GSoC'17. I have prepared a google doc consisting of the UI mockups that I have made. The link to it is below:

https://docs.google.com/document/d/1RPTJhPapwRc_1DkVAapbZNvlCNObGTJ7MBl7NrFMJn0/edit?usp=sharing

All the mockups use the AndoidDesignSupport Library for certain elements in them. Please look into the doc and provide suggestions.

[ghost]

Hello @lognaturel and @yanokwa,

I am very much interested in contributing to "ODK Collect - Improved user experience" idea as part of GSOC 2017. My idea is to completely change the UI of the application making it user-friendly and attractive, keeping the functionality and back-end part same. I am experienced in using Material Design. The idea of keeping minSDK-16 will not cause any problem and by using Android Support Libraries, it's compatibility can be widened. Changes I would like to make- 1- Instead of 3 tabs on the top, the user will be provided with buttons/vertical tabs, which would expand into the specified functionality. 2- Changed font style. 3- Introducing mock slides, for users to understand it's working properly.

Please do make comments and suggestions. Thank You.

[Prakhar321]

Hi @lognaturel and @yanokwa

I am interested in contributing to "ODK Collect - Improved user experience" idea in GSOC'17.I have prepared a doc consisting UI mockup I made and reasons regarding changes from initial mockups. Link to it is below: https://drive.google.com/file/d/0Bxypy3bc3L2pM1FsVWxPZFZXMzQ/view?usp=sharing

As there are some queries about supporting previous SDK's and upgrading library, these mockups support min SDK 14 and regarding upgrading app with material design libraries, this can be done with changing in layouts. However, I suggest that UI should be made from scratch for better and bug-free output. For users who are unfamiliar with smartphones, for them, there should be a tutorial on the first use of the app which will guide them about how to use & what to do. Also, simple UI should be maintained for simplicity of user.

Please look into the doc & do make comments & suggestions. Thank You.

[parthuest]

@Andy671 I really like your work. It would be great to work on your idea. @lognaturel I think before directly jump in to Andy's idea we can change small UI elements first like buttons and colors. Than it becomes easy to transform Activity into Fragments and work on flow of app. I am also applying for GSOC 2017 for UI idea and I love material design. Can you please assign me task for proposal?

[rajatthakur]

Hello everyone, Here are some of the mockups that I have prepared for the ODK collect app. Additional Functionality I wish to add : Get Blank Form Page: Search. Fill Form Page: Options Menu to edit/send/delete a form, Search, Sorting and filtering forms.

[Midhun07]

Hi everyone,

Here is a mockup that i have prepared for the welcome activity. https://drive.google.com/file/d/0Bz8bddyXz2BpTHNYcENaNUs1ak0/view?usp=sharing This is compatible from android-15 onwards. Future work:

1. Add a small circular indicator on top of get form button showing availability of any new forms.

[TamsilAmani]

Hello @lognaturel and @yanokwa

I am really interested in contributing for ODK Collect project. Here are some mock UI designs which I've made. Please open the link and see for yourselves. I'll be pleased to answer any questions and clear your doubts regarding the same. Do mention in comments if you feel like.

Here are the sample designs. https://docs.google.com/document/d/1W_TL_dDtudauad0KfXZXM6-iMUMYFOS6-0KMySjDSnM/edit?usp=sharing

[royrivnam]

Here is the mockup of the ui i have created on the basis of the screenshots you have given in the issue .. @lognaturel

[shobhitagarwal1612]

These are some of the mockups that I have designed to improve UI/UX of the app. https://docs.google.com/document/d/10opI1c82-K_B6EDwTKc5HiDt1PMU-Qe7lmkziDPNUEw/edit Please give your reviews and comments. Also suggest what else needs to be done. I have not finished designing all the screens so I will keep on adding more to the same link. Thanks :smile:

Edit: Draft proposal link : https://docs.google.com/document/d/19FEwVFovP4GDqTMiJF-FeCF46FnsEHZAmbd_o1hBYfo/edit#

[batbrain7]

Hello I am a CS Undergrad Student who aspires to contribute to the Open Data Toolkit Collect App and below is my proposed UI for this issue.

My UI/UX design provides better accessibility to users than the previous one with an improved look and feel.The design provides all the features with an easier availability for the user, For Example : The delete option is on each card, which is quite noticeable to the user which in my opinion is better than swiping or sliding.The collapsible toolbar can hold images of the previous form which constantly reminds the user of his forms. The delete on front and collapsible toolbar in my opinion was necessary to increase the sufficiency of the application. Also a search on toolbar is also provided to locate and find any form.

[lognaturel]

These are all looking so good! It's great to see the different ways to think about this user interface. One thing I would like to make sure is clear is that you should not feel like you have to follow the sketches shared in the initial issue. They were only ideas and not meant to be taken as "the right way to go." If you think some of the elements there are good, great! But think carefully about what is best for this app and its users. For example, tabs can be confusing for people who aren't used to smart phones and may forget which tab they are looking at. How can you make sure to address that?

What @batbrain7 and @rajatthakur have done by annotating their mockups is a powerful way to explain WHY certain UI elements are included. Those explanations are just as important as the mockups themselves! Even if you include annotations, make sure to include some text explanations to connect everything together.

Some of you have been including images to identify forms (@TamsilAmani and @rajatthakur I believe). That's a very nice idea. Do make sure you think about how those images would be set on the server side and how things would look if the image were missing.

If you make updates to your documents that you would like someone to give you feedback on, feel free to ask for feedback in the #gsoc channel of the Slack. No need to tag anyone specific, one of the mentors will take a look as we get a chance to!

[krishnarai30]

I am Krishna Rai a sophomore year student at Delhi Technological University, Pursuing B.Tech Computer Engineering. I have prepared a mockup UI for ODK Collect. Here is my opinion on some of the issues with upgrading the UI of the application.

Q. Why is your proposed UI an improvement over the current one?

A. The UI proposed by me in the below-mentioned mockup has an edge over the current one as this is crisp and to the point, it provides user all the functionality within one window itself without the need of going through any specific documentation whatsoever. Moreover, the UI uses the mixture of old dependable libraries and new attractive ones to provide an experience that keeps the user fixated towards the app and doesn't find the process to fill the form tedious.

Q. How will users find the functionality they are looking for?

A. Users will access all the features of application through the navigation drawer. Also, the MainActivity named as "Collect Forms" is a self-sufficient activity to provide all the functionality to the user for the same.

Q. How will you approach upgrading libraries in a safe way?

A. The ODK Collect current version uses native libraries of android only and the UI suggested by me also uses the simple material design libraries provided by google and thus upgrading to new UI would be efficient this way and code from the previous application can be preserved easily. The Application UI suggested in my mockups supports the minimum SDK of Ice Cream Sandwich thus reaching out to 99.5%+ users of android without any failures.

Q. How does your user experience design address the needs of enumerators who may not be familiar with smartphones, may have reduced vision and/or may be working in a very bright, outdoor environment?

A. The Application UI might seems dark themed and might look basic, But there is a science behind it.

Research Paper 1

Research Paper 2

With reference to the aforementioned Research paper on reduced vision, I have devised the below-mentioned mockups.

The proposed UI follows basic black and white theme with simple green color notation for the user if the form is finalized. The black and white color offers the maximum readability to both the conditions ie. if there is a bright light or the person has reduced vision.

From the image diagram, we can see that even a partially blind person can access the application without any difficulty.

People not familiar with Smartphones can also handle the application quite easily as the card view used gives appropriate images and details of the form very efficiently and all the feature can be accessed from one window itself without any confusion. Further, we can provide a quick documentation for using the application too.

As for my previous experiences, I have worked for various research and commercial projects on Government and University level. I would like to contribute to this project for GSoC 2k17.

Mockup:

Mainactivity

MainActivity

Navigation Drawer

Deletion of form

[dhruv2601]

I am Dhruv Rathi, a sophomore at Delhi Technological University, India currently pursuing Bachelor of Technology in Computer Engineering. Hereby, I present my mock-up for the update of UI/UX of ODK Collect.

Here is how I plan to meet the current requirements:

Q. Why is your proposed UI an improvement over the current one? A. The UI I propose in the mock-ups focuses on the following features and ideas:

1) Smooth transitions and spotability: The transitions from one frame to another is smooth, animated and functionalities incorporated can be easiy spotted.

2) Material Design: With implementation of material design libraries the design ensures a good look and feel.

3) Support for wide range of devices: The design uses libraries which supports +96% of Android phones and is UI compatible for all screen sizes.

4) Targeting a larger audience: Viewing different forms using material buttons instead of Tabs and fragments makes it more user-friendly.

5) Implementing voice control and interaction(discussed below)

Q. How will users find the functionality they are looking for? A. 1) Help section is provided in the main activity and navigation drawer which gives an introduction to the app usage. 2) The navigation drawer brings together all functionalities (with suitable icons).
3) On first time opening of the app, an intro activity is also granted. 4) Easily spottable buttons for a better transitions in all activites.

Q. How will you approach upgrading libraries in a safe way? A. The UI uses material design libraries which are maintained by Google itself, thus each library update is notified and can be worked upon timely and efficiently.

Q. How does your user experience design address the needs of enumerators who may not be familiar with smart phones, may have reduced vision and/or may be working in a very bright, outdoor environment?

A. 1) For people with reduced vision : The text size will increase, spacing between letters will increase, and an overlay suitable to low vision will be added. The the whole interface will be resized accordingly(maintaining a great UI), and the colour palette will be set so as to suite low vision. Also voice navigation and controlling interaction can guide users through the app and the app can itself execute the instructions given by user using Google's Vision API and/or many others.

Some references are for suitable color combinations are: -> How People with Low Vision Access Computing Devices -> Adjusting Typographic Metrics to Improve Reading for People with Low Vision

2) An intro activity will guide the user through the app, and as mentioned above the voice interaction will make the user interaction extremely smooth.

3) Handling different environments : Using the Environmental Sensors in smartphones, the exposure will be calculated and the color pallete will be readjusted accordingly. The text size will change according to the proximity of the user and the sensor's data.

The Mock-ups provided also includes adding an Image corresponding to the title of the form being added, this is be done by collecting the first 10 or so results of google images and giving the user to add icon of their choice dynamically, in addition to this, a model can be created using Machine Learning which will record the user's choice against the title of that form and thus soon the trained model will itself suggest the user the most appropriate image.

I would like to add many more ideas and work on them to make Open Data Kit accessible to a larger audience through GSoC 2017.

[lakshyagupta21]

@lognaturel Please suggest or comment on the mockup proposed by me.Still there are things that needs to be added like wireframes for different screen dimensions (Tablets). I'll update them as well whenever it gets finishes. Link to Google Doc

[yanokwa]

Hi everyone! I've been looking through a lot of these mockups and there is a lot of focus on the main screen and form lists. That's great, but users spend most of their time filling out forms, so be sure to suggest approaches there too. I'm particularly interested in how you'd change how repeats work.

[abdulwd]

I'm really interested in contributing to ODK Collect app for which I've prepared some mock designs. The designs can be found here.

[florianm]

@yanokwa +1 on streamlining repeats. My users are thrown by "Add new XYZ group" - a custom label for this dialogue, and dropping the work "group" would be a great improvement.

[lognaturel]

@florianm You may also be interested in sharing any ideas you have at #809. It's important enough that it has its own issue!

[lognaturel]

Thanks again for all the great ideas here and for the great teamwork!

I'm going to close this issue now that Google Summer of Code is in progress. For those who would like to follow along, sub-tasks related to the UI refresh will be tagged gsoc2017. We will also be keeping track of progress in the UI refresh project. We value everyone's feedback and ideas!