I was designing a microcopy for searching friends on an online community. I want to enable users to search either by names/emails or comma separated criteria. I made a draft wireframes shown on the image below.


In my current design the microcopy inside the searching bar causes confusion for users that they may not be able to type in names. Also giving two example is too much for users. The pop up box by hovering makes the design cluttered, and complex. Any suggestions about how to rectify this?

  • I think you've sort of answered your own question here. Two examples is too much and the popup makes it cluttered. Therefore... remove those things. Maybe have a (help?) link alongside that can trigger the popup, if there is a lot of text. Or you could just add some help text to the page itself. Also, you need a label on that field otherwise nobody will know what they are supposed to add to it, so use that placeholder text as part of the label. "Search (i.e. 'name@example.com' or 'math, grade 4')" – JonW Jun 19 '14 at 14:18
  • Why not just put "Search for emails or names" in the placeholder and "Separate different names with a comma ';'" under the search area ? – Gildas Frémont Jun 19 '14 at 14:18

Some ideas (bubble with examples would appear on click or hover):

search proposal

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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