Public Lab Research note

Improved smartphone-friendly posting form designs: feedback welcome!

by warren | September 23, 2019 17:02 23 Sep 17:02 | #20973 | #20973

In preparation to support groups like #onecranston and our collaborators at Brown University's Superfund Research Group, we are working to improve how our site works on mobile devices like smartphones and tablets. Right now, the "posting form" is pretty rough on a small screen. So we're starting with just the basics of getting an easy-to-view, easy-to-use posting interface.

But we're also interested in how to easily reference a specific geographic location when you post, as well as how to customize form prompts, so that different groups using the Public Lab website can create different engagement prompts that suit their own projects. Imagine these scenarios:

  • Asking people to submit old stories about nearby places' industrial histories
  • Prompting people to report oil and gas related pollution in their community
  • Documenting a set of locations with attached sensor data

We won't be able to hit EVERY use case, and surely some of the more complex ones (like sensor data) may take a little more complex interfaces to do, but I want to just be sure the basic design is clear, works on most devices, and is intuitive, even for folks who don't use their phones a lot for this kind of thing.

We have a design working doc here in case you want to see the nuts and bolts:

And here are the sketches (they're not functional yet):

Starting with a Google form

Google has hit a lot of the basic accessibility issues like standardized ways to show placeholder text, so I built a super basic form there, then tried reproducing it in a mockup that would reflect our site's styles. I used an example prompt we brainstormed with folks from #OneCranston.

image description

Google Forms doesn't have geographic location inputs (in the test form, i just added an image as a fake map), so I added a simple one to our design, based on our Style Guide draft. I first tried putting the map at the top, and assuming the current location, but letting people edit it, kind of like in the Lyft app (shown for reference):

image description

One concern is if the form is really long. If prompts get quite in-depth, that could make it more confusing to see where you are in the process, so I added a circular Material Design "call to action" button that floats on the bottom right. My idea was that if you haven't filled the text areas out, it would bring you to the next one, but if you have, it then becomes a "POST" button.

Some types of prompts will ask for a photo, like if you're documenting a spill or something. So there needs to be a clear place for that, but it does make the page a lot longer, and the upload interface isn't usually great on phones. I tried (above) adding a secondary circular floating button to add a photo, but I think this needs work.

image description

On a map

Finally, in trying to think through where prompts feed into maps, and how maps then invite the addition of more posts, I'm doing a bit of work (still based on the Style Guide) to see how such prompts can be part of a wiki page. This is the part of the design I'm least advanced on, but the basic view seems relatively simple:

image description

Input welcome!

The above are all in progress, but if you have suggestions, ideas, issues or anything else to add, please jump in in the comments below!


Hey @jywarren, do we want to have two different templates for this? One for the questions and another one for the wiki? Thanks

Is this a question? Click here to post it to the Questions page.

Hi, Cess! I think we need only one for notes, for now. The questions one already exists, and this new one would be an alternate template for

Did you have any time to chat today?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Gotcha, yeah I am available

Reply to this comment...

Login to comment.