Visually show that surveys have been updated or loaded

janagombitova commented 7 years ago

Today we agreed with @valllllll2000 and @Kiarii that we will make a change to the app UI to visually show that there is something new regarding the surveys.

One of the common questions/confusions users (Alphonso) have is that they say:

How do I know if my survey got updated or not?
with the data points I see that something is happening, with the survey I don't > "Users live for the green tick" (syncing a data point)

We agreed to make these following changes to give the users more indication of change:

to the drawer add a little dot when a survey has been loaded or updated
in the list of surveys bold each survey that is new or updated (new version of a form has been added)

These changes will happen for both cases of loading in new surveys or updating existing ones: via bootstrap or via network. Once a user selects the survey from the list it will not be bolded anymore.

We also considered to somehow specify what has changed with the survey as there are multiple cases:

if a survey is fully new in Alphonso's list;
if only one form is added to the survey;
if multiple forms were added to a survey;
if one or multiple form versions were updated.

The setbacks for also specifying these details are that if the survey name is too long there might not be enough space; if the phone has a small screen there might not be sufficient space; it might be too much information to share. More is less. We agreed that for now the dot indication and the bolded survey names is a sufficient change to show.

Kiarii commented 7 years ago

[As a note or point for later improvement, we could consider a toast on a respective survey screen to explicitly tell the user what change took place in the survey (except for New surveys - which might be self explanatory..), maybe bold new/reloaded forms, etc]

muloem commented 7 years ago

@janagombitova @Kiarii Did we have an issue for getting rid of the drawer menu altogether?

muloem commented 7 years ago

With the assumption that we are not going to remove the drawer menu, how about changing its color to indicate that there is something new? You probably discussed that but just confirming.

Kiarii commented 7 years ago

the little dot above it was intended to indicate changes in the menu items (surveys to be specific) and bolding as the styling for new/reloaded surveys.. @muloem see the sketch at the top of this issue

Kiarii commented 7 years ago

About restructuring the menu inorder to alleviate the UX issues with the hamburger icon, am happy to dig into it, so whenever it is put into the roadmap, i will be ready when you are :) - we have also noted the survey list doesnt really belong in the navigation drawer (side menu); may be these two could be tackled together

janagombitova commented 7 years ago

There has been no issue to remove the hamburger icon for the menu or thoughts on that, as far as I remember. Users appreciate the navigation as it is a pattern used in other Android apps. This information is however not from targeted user research on the app, but from diverse feedback. Regardless, we should focus on making changes that solve the problems we know users have - as the one above - and make further design improvements after testing with users.

I personally think we need to look at the menu itself and how to make navigation there more easy and add items to better places. But that is a different issue we already have in place

valllllll2000 commented 7 years ago

@janagombitova @Kiarii @muloem i am trying to follow between here and the chat so if i understood correctly the issues that arose are: 1) Shall we remove the navigation drawer? If so where will we show the list of surveys? It did cross my mind that showing surveys in the navigation drawer is not the best place but I have no better idea yet of where to show them so I would leave the current setup as is for now. 2) The drawer menu button (the one you press to open the drawer menu). This can be done no problem and I have seen it on other apps. The only point that have just occurred to me is maybe the black dot indicating that there are new surveys should in fact be red? 3) Survey list: showing it in bold is fine but @muloem suggestion of using color is good too, which color though?

janagombitova commented 7 years ago

I agree. @Kiarii could you specify the colour palette for this work? The dot cannot be black as the background colour of the header is dark.

Kiarii commented 7 years ago

Myself and Loic have felt that the icon can be of the same color as the toolbar elements - it is not an ever-present element on the screen so it need not be additionally coded with color - it is visually: a user can already discern something is different on the toolbar even from peripheral vision (when they are not looking directly at it). The illustration gives a context:

janagombitova commented 7 years ago

@loicsans and @Kiarii just to clarify I get your comment: you suggest to change the survey font colour to white (as the icons) and the extra dot to indicate something is new should be white (same colour) as well?

I am personally used to a red dot indicating I have something new in my apps.

Kiarii commented 7 years ago

@Jana yes, that is our suggestion, we are reserving the double coding (dot + color) for simplicity; [Double coding is definitely a pattern in iOS, in Android its a bit subtle]; If I may refer to some examples even though the context is a bit different:

janagombitova commented 7 years ago

@Kiarii 👍 sounds good. Hearing your reasoning why we decide to go for one path or another helps me to also explain if questions arise.

janagombitova commented 7 years ago

Today we have discussed with @valllllll2000 and @Kiarii the communication around downloading forms to the device. Either the download is triggered automatically by opening the app, or the user triggers the action himself by using Reload all surveys or Download form actions, currently placed in the Settings.

We agreed that this location is not the best choice for these actions and that we should bring them closer to the surveys to make it easier for our Alphonso's to get new forms, versions of forms into his device.

Kiarii will consider placing these two actions in the side menu panel where the surveys are listed. We will not change the behaviour of these two actions at the moment. The initiative right now is to find them a more user friendly location. We will change their naming for improving consistency:

Reload all surveys >> to Reload all forms (@kiarii did we say reload or download?)
Download Form >> to Download specific form

We have also discussed the case, where if a survey is added to an assignment, Alphonso has to close and reopen the app to trigger getting the survey into his device. We considered a few ways how to improve this and further ideation will happen in this issue: https://github.com/akvo/akvo-product-design/issues/222

valllllll2000 commented 7 years ago

I have been experimenting on how it could look so here are some screenshots:

1) Navigation drawer expanded You can see at the right of survey, there are 2 buttons one to download all forms and the other to download one, obviously some nicer icons would be needed. screenshot_20170321-181220

2) after clicking the user The overflow black menu could use some redesign. screenshot_20170321-181226

3) General screen

I have changed the toolbar color to the same as the caddisfly app, this is optional
The plus sign from menu to add datapoints could be moved to bottom right, using the floating action button, also optional.
If we decide to keep the orange toolbar then we would need to use another color for the tabs, not sure which one. @janagombitova @Kiarii what do you guys think?

janagombitova commented 7 years ago

@valllllll2000 before I dive into smaller points, should be maybe break these changes down into separate issues? I find these really great experiments heading in a good direction that we can build on. Here is my take on the ideas:

0. Highlighting a new form is dowloaded/loaded

Do you have a screen shot on how Kiarii's mock ups will look like in practice for this improvement?

1. Navigation drawer expanded

So here we are talking about how to easily allow users to either reload all their forms or how to manually download a specific form in this location. Both actions currently live under Settings.

I do agree with placing them in the Surveys part of the menu, but I have a few things I want us to keep in mind:

consistency when it comes to working with the elements in the menu - expanding items, use of icons, colours, highlighting the "labels" of the different parts of the menu, etc
the two actions need to be clear to the users on what they mean and what they do

I am curious to see @Kiarii 's drawings

2. User expanded

On my devices I do not get a black menu. Why is my experience different from yours (different devices and Android versions) and how can we make sure it is unified?

It looks like this for the newer phone: screen shot 2017-03-22 at 11 21 43

For the old dinosaur: screen shot 2017-03-22 at 11 23 13

3. General screen

Toolbar colour change

I personally like that the toolbar holds our Flow branding colour and that the title (Akvo Flow and I then assume also the selected survey title) are in white as the icons. I know @loicsans wanted to make this change, so I am curious to hear his take for this and also what to do with the tabs.

Plus icon

I really like this improvement. But, there is always a but.. ;) the colour should match with our branding. We should use either the button colour we have in submissions or orange. I am not actually sure, but I do not want us to introduce another colour. I assume @loicsans will have a way forward.

Regarding the icon in itself, how will it look like and work, if there are many submissions on the screen? Will it work for also very old Android phones (our old dinosaurs). If yes, then we should make this change.

valllllll2000 commented 7 years ago

Here are new propositions for displaying the surveys in the navigation drawer with or without icons: The survey that is in bold means it has new data available.

screenshot_1490286947

valllllll2000 commented 7 years ago

@janagombitova I have read your comments and separated the diferent proposals into diferent tasks and here are replies to the points you raised

0) New surveys See above the 2 options I came up with. Basically the surveys that have new staff are in bold.

1) Download form(s) You can also see the option in the screenshot above, I am not sure how to add the 2 extra options so I just added them in bold right before the survey section title. I think maybe having them in text is better than with some icons which you have to guess what they mean.

2) User I have created a separate issue for that https://github.com/akvo/akvo-flow-mobile/issues/670

3) General: Toolbar: here is the issue https://github.com/akvo/akvo-flow-mobile/issues/668 '+ Button: https://github.com/akvo/akvo-flow-mobile/issues/669

janagombitova commented 7 years ago

@valllllll2000 wonderful! Thank you very much, I think this will make it easier for us to decide on the separate parts. Regarding the item remaining in this issue, new survey and download form(s) let's wait for @Kiarii and his designs

Kiarii commented 7 years ago

what we have discussed so far:

muloem commented 7 years ago

One comment on these: we have been trying to move away from the notion of users being aware of the form id since its an internal storage concept. Infact we are trying to move away from that in general all over the app and backend. Could we already avoid having that here? i.e a user has just one button that is the equivalent of download and all surveys that have been assigned should be received.

The reload all forms is something that I believe was added because of issues regarding stability of the form download. I think we should move away from it and just focus on ensuring that when a user / device is assigned a form, its correctly delivered.

Finally regarding the color highlight that I was mentioning earlier, I was actually referring to highlighting the drawer menu with colour i.e. the drawers would be coloured or not to show that there is something new.

janagombitova commented 7 years ago

@muloem I agree that we need to move away from showing users internal IDs. However in this case, downloading a form via the form ID is actually used by our users. The most common case is to test out a survey before the "real" data collection. The get the survey forms on their phone a click around to see how the survey renders on the phone and how question link to each other, sometimes even submit mock data to see how the data is rendered. Before the actual data collection they delete the survey from the phone and delete the test data. A second case is in training (Akvo training or partner training colleagues and data collectors) where they quickly get the surveys on the phones without the hassle of creating an assignment. Third case, is us testing ;) So before we figure out how to satisfy these needs in a different way, we will keep it here, as we have bundled these actions into one shared location.

On the reload all forms we are changing the behaviour in a way to also cross check for new surveys in assignments and not only new survey versions. See here: https://github.com/akvo/akvo-flow-mobile/issues/660 This action will enable the user to get in all the forms she is supposed to have. The idea is to replace the current behaviour of force closing and reopening the app. So it is basically the one button you refer to in your 1st paragraph.

What would be worth reconsidering is - Does the user need to fill in the admin passcode to be able to receive surveys she is supposed to receive? @valllllll2000 and @muloem What are your thoughts and risks?

On the highlighting of the drawer menu, wed decided to follow the commonly known indication on android apps where you have the little dot indicating something new or extra is in that location.

janagombitova commented 7 years ago

@valllllll2000 I have the feeling we have two major changes in this issue:

visually indicate that a new survey form or a new version has been downloaded to the phone
change how a user can trigger the surveys to download.

I would like to suggest we keep the visual changes to the list of surveys in this issue and deal with the downloading of the forms here:https://github.com/akvo/akvo-flow-mobile/issues/660 to keep things organised. Do you agree?

valllllll2000 commented 6 years ago

I have added a separate issue for the "download forms" section https://github.com/akvo/akvo-flow-mobile/issues/1180

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

janagombitova commented 4 years ago

Commenting so the GitHub/StaleBot Gods do not close the issue

valllllll2000 commented 4 years ago

iperdomo commented 4 years ago

Tested on Huawei P9 / Android 7.0 / App version 2.9.5 ... the updated forms are shown in bold

akvo / akvo-flow-mobile