Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have text content that users entered using TinyMCE, so it contains a good bit of HTML. I need to display this content back to them on a page along with a few other things, but the user-generated content tends to blend in too much with the page and the content around it, making it less clear that the content is user-generated.

How should I make this user-generated content look different in overall appearance from the other HTML content?

share|improve this question
    
A picture of how it looks right now would be helpful in answering this question. –  Sam Blake Sep 1 '13 at 4:21
add comment

2 Answers 2

up vote 1 down vote accepted

There are a number of possible approaches; here are a few:

  1. Visual distinction. Use <hr>s to set off the user generated content, or put the content on a different colored background.

  2. Typographical distinction. Use different typographical styles for user-generated content than for the normal site content. You might change the font, say, or even just change it's size and leading. (Be careful if this is intended as a preview, though; if possible, you want users to see their content in the formatting that it'll be shown in later.)

  3. Simulated preview. Show the user generated content in a simulation of a page; for example, you might show what a sample news feed would look like with this new content appended to the top. This has the added benefit of showing the content in context, which may affect the way users perceive it.

share|improve this answer
    
Thanks, I chose to put a different coloured background. Essentially the user generated text and background is inverted from the normal contents colour (I'm using mostly black and white). –  Fogest Sep 1 '13 at 5:04
add comment

You could also consider using a small icon and include metadata about the UCG. Microsoft uses a machine translation icon on support materials done with MT to information users that as such the quality of the MT content may not be human-perfect, but its still usable.

A tooltip or legend can explain what the icon means

Combined with metadata with the content topic for example (Written/submitted by: a.n. user On: dd/mm/yyyy Category: community )

If your intention is to combine user-generated content with "native" content as part of an overall community strategy then using an obvious visual styling or color distinguishing one type of content from another may detract from overall seamlessness and readability. As always, test with real users doing real tasks in real environments with the use case in mind.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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