I'm building a website to track user comments on news around environmental issues.

I went over all the use cases for the majority of my demographic, and decided I needed to collect some information across the board. The comments get added in real-time to a map below it.

original mock

I kinda stole from SO in terms of the tags, which I wanted visible, as a means to educate the end user as well. The problem is, in reality, this is what it looks like:

user posts comments, which gets added to map.

I would never use this site if I were an end-user, and so I'm lost of what is my next step. Do I just can the ui, and use a single textfield, and collect this information AFTER they submit? or Is there a way to put all that information (17 tags, 3 types, 10 ecosystems), along with geolocation and media on a single friendly mobile-friendly interface?

  • How much effort are you willing to put in - to make/build a better experience. I have some ideas i'll just moderate them as I post it.
    – Rayraegah
    Nov 6, 2013 at 21:10
  • I'm willing to put in all the effort possible! :) Thanks for your feedback and input ahead of time! Nov 6, 2013 at 21:40
  • Have you tried adding the next prompt as the previous ones are completed? Sort of like a single-page wizard
    – Ben Brocka
    Nov 6, 2013 at 22:14
  • Ben Brocka - I haven't tried adding next prompt. Do you mean user would click on "add comment" menu, and then a full page (wizard) shows up, that they complete, and after they finish, it would show what they added? Kinda like a modal? Nov 6, 2013 at 22:52
  • Is this for use by casual users, or can some familiarity with the options be assumed?
    – Erics
    Nov 8, 2013 at 10:35

1 Answer 1


enter image description here

First - don't show any of the tags or the tags area, not until the user starts typing or has pressed the GO button.

As ben suggested - the easiest way is to have a 2 page wizard,

  • PAGE 1: User inputs comments
  • PAGE 2: User sets tags.

The page is just a concept, you can even expand an area to show more information.

My idea:

See the image attached above for a vague visual representation. Use a + to toggle between tag lists. Make sure the user can add multiple tags at once.

Have an auto tagging feature. As the user types his comment, pick up the keywords and start showing / adding them as tags. When the user submits, just make a prompt and make the user understand that by adding the right tags it reaches the right audience and give him a chance to edit his tags or skip and submit.

in my example, the keywords that triggered the tags are

  1. fishes = auqatic life
  2. pollution = pollution
  3. boats = sports
  4. help = solution
  • Wow, nice response. I have a couple questions - so I would need to create a dictionary of terms that could match the potential tags? (I'll google later). I like the idea of toggling the lists with a +button. What I don't get - is that the tags show up after the user elects to click go, but if I am going to show this anyway, why wouldn't I just leave it out there? I'm guessing the response might be the single textfield is more inviting to the user? Nov 6, 2013 at 22:57
  • The tags show up as the user starts typing OR after the user clicks the Go button (go with your flavor on this). Just expand the area and show the tags currently added. If the user wants to add more tags or remove it show it as an editable list (like stack-overflow does). Also for auto tagging see example mrolafsson.github.io/autotags A single text field is less complicated, fast and more inviting to add a response.
    – Rayraegah
    Nov 6, 2013 at 23:00
  • i dig it! thanks for your ideas, I will try to make it work, esp autotags. Nov 7, 2013 at 5:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.