More intuitive UI

[shapironick]

A beta user wrote to me in an email:

Clicking "New Test" leads me to a whole form with "title", "result", and a panel of "details". Should i give the test a title?

Perhaps we should be more specific and say "name this location" in black text to the left to make it clearer? We could also have a time-stamp that we automatically add to the title with date and time of the before picture, so that users could sort between multiple tests at the same location.

Are both tags meant to be photoed in the one form? Or am I making two separate entries?

I think that we could maybe only let the "after exposure" button visible after the "before exposure" field has been filled to avoid confusion. Perhaps the "result" field only becomes visible after the before and after photos are both taken?

I think it would also be nice to have some helper text pop up/ or a tour for first time users that explain the features ("first click here to add a picture of the badge in the test location" then that window disappears when they click on that field (or the can x out that helper text) and once that field is filled in the next helper text pops up. we did that for this project as an example https://github.com/publiclab/wherewebreathe

[shapironick]

Another response that reinforces the suggestion for a tour or helper text within the new test screen for first time use.

The HINT button is helpful with step by step instructions. If there is a way to include it in the NEW TEST screen, that would be super helpful. I forgot what to do and wasn’t sure if I could exit the New Test screen without losing info.

[shapironick]

Another response from one of Jessica's colleague's supporting the above design features (not trying to beat a dead horse by posting this, just hoping to aggregate all the different responses that we receive outside of the survey)

What’s not clear is when it is actually working – what does the user take a picture of – there are no directions that indicate what that should/should not be.

[shapironick]

Perhaps the ppb reading could appear as its own screen following the entering of data and uploading of images? that way the users could know that 'it is working' when they have filled out all of the required fields and they are able to proceed to the next page that displays their reading.

[ShaneYY]

Here's what I got based on these feedbacks, first-time tour sounds like a good idea, I will look up for how it works.

[gretchengehrke]

Hi Siyang, That mock-up looks good. Could you edit it to say "First, tap here to snap the test location" and grey-out the "Upload Data" button until the screen when the result is shown?

[shapironick]

Looks good @ShaneYY ! sorry for the delay (i was offline because of a minor traumatic brain injury). with public lab we can maybe find some UI designers to help so you can focus on the engineering side? If you could upload the IOS code that would be great and then we could see if UI developers could help us refine the interface. Thank you so much!

[shapironick]

Hi @ShaneYY , I hope you had a wonderful holiday! Just as a heads up, I'll be workshopping some ideas for an improved UI with @lightandluck this coming Monday. If you could upload the latest code by then that would be great! or if not let us know and we can push back our meeting. Thanks!

cc: @kdannemiller @gretchengehrke

[lightandluck]

@shapironick @ShaneYY Looking forward to hearing more about the project and helping where I can! I downloaded the app on Android and iOS and will poke at them this weekend.

[ShaneYY]

Hi @shapironick @lightandluck Sorry for the delay. I have updated the code for Android so far and will update the iOS (still working on it) in the following week. The first-time walkthrough as we discussed has been added.

The finals are close and I may not be able to respond until Wednesday afternoon. Thanks!

[shapironick]

Thanks, @ShaneYY ! good luck on finals! I think @lightandluck has everything he needs for now and is going to work on some suggestions. No need to sprint on the iso update! let's regroup after the dust has cleared on your finals :)

[lightandluck]

Yea, we had a very informative meeting this morning and there isn't anything blocking me from getting started. Any leftover questions I can direct to Nick.

No need to rush. Good luck on finals!

[shapironick]

Just a quick update @ShaneYY , Kevin is working up a lot of notes and sketches and is aiming to deliver wire frames by the end of the weekend. :)

[shapironick]

Here is a quick write up about @lightandluck 's excellent UI redesign work https://publiclab.org/notes/nshapiro/01-23-2018/refining-the-user-interface-of-a-community-science-app

Here are some further considerations (copied from the end of the above note):

Some initial refinements that might be necessary in the final stage of programming this app are as follows:

• Make the function of the "+" in the upper right hand corner more explicit by naming it "new test".

• In the redesigned workflow, starting a new test takes the user directly to a camera view to take the "before" picture of the badge. The picture of the testing location, a part of the initial UI, has been removed in the redesign. The image that is shown as a thumbnail in the main list view of the app is not the location image but the before image of the badge, under the assumption that there is enough contextual information in that photo around the badge for it to be valuable for jogging the mind about that specific test. I think we might want to revisit this and maybe the location test photo should be should be where the user is taken when they click "new test" and then from that screen they are taken to the "before" photo. Or, alternatively, we could cut the thumbnail in the main list view all together and keep the workflow the same as is proposed in the redesign.

• In the redesign we do not clearly indicate when the health survey should be taken. Assuming that we would want this survey to be administered in the 72 hours between the before and the after photo (ie. before they can be biased by the test results)we may want to lead them to the

• Do we want the users to enter temp and humidity twice (once for each photo), as both can fluctuate considerably in 72 hours, and the quantification of formaldehyde would be calculated from an average of the two?

[gretchengehrke]

Hi @ShaneYY @shapironick I just downloaded the beta test (from the OSU website), and for the iPhone version, the test location photo function still lacks description (see issue closed above).

[gretchengehrke]

Hi @ShaneYY @shapironick After going through the app again, I whole-heartedly agree with @lightandluck 's ideas and especially about the misnomer of "Upload Data" which then takes you to the longest portion of the whole test. Also, since we are hoping that people will take the health and additional household information surveys before they get their final formaldehyde concentration result, we need to separate the upload data function from the taking survey function. How soon can this be accomplished? I'm working on the IRB materials for our case study now, and need to have very clear language about when and how people will be answering various questions and sharing data. Thanks!

[gretchengehrke]

Hi @ShaneYY Is it possible to add a "back" arrow or a "cancel" button after you click "New Test"? I hit New Test on accident, and couldn't figure out how to get out of it except by closing the app. Thanks!

[ShaneYY]

Hi @gretchengehrke The app in Apple Store hasn't been updated yet, I will embed the UI improvements from Kevin and your suggestions into the later version.

[gretchengehrke]

Thanks @ShaneYY. Sorry I got confused about the plan!

[lightandluck]

@gretchengehrke @shapironick Just a gentle suggestion, that the text for the 'launching' screens (the ones that send the user out to the surveys), should be easy to understand, honest, and specific to the survey that they are being sent to. I imagine a collaborative effort to come up with that text would help @ShaneYY a lot while he's updating the app.

[shapironick]

Yes! Absolutely. Thanks, Kevin :)

On Feb 20, 2018, at 12:13 AM, Kevin Nguyen notifications@github.com wrote:

@gretchengehrke @shapironick Just a gentle suggestion, that the text for the 'launching' screens (the ones that send the user out to the surveys), should be easy to understand, honest, and specific to the survey that they are being sent to. I imagine a collaborative effort to come up with that text would help @ShaneYY a lot while he's updating the app.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[bihechen]

We've actually done this improvement. Can we close this issue now or is there anything else to be mentioned?

[shapironick]

I think we would benefit from another overall UI audit at some point as there are likely still issues, but without specifics, I think you are right and we should close this!