User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

For my own personal project while I learn PHP, I am creating a web app where friends can quote each other. So a user will come and post what their friend said and their friends can like it and comment on it.

One problem I am having UI wise is how to display both the person being quoted and the person who posted the quote. I think its important to show both because the person posting the quote should be known. I have my own ideas but nothing I'm too excited about.

Drawings and pictures would be much appreciated.

share|improve this question
Any reason for the downvote? – jonshariat May 13 '11 at 16:17
up vote 3 down vote accepted

I think it's a case of using hierachy to distinguish the users

Have the 'quoter' be the first person, have their name and image listed at the top. Below that, in a block quote or similar pattern, have the 'quotee' , their quote, and their image?

[image] carlosz

"I have the simplest tastes. I am always satisfied with the best."

Oscar Wilde [image]

If you wanted to further accentuated that, maybe have the block quote in a defined box, and the 'quotee' to the right hand side

[image] carlosz

                "I have the simplest tastes.
                I am always satisfied with the best."
                                                          Oscar Wilde[image]

Something like that has an obvious flow. Here's the 'quoter', he's the quote, and here's the 'quotee'.

share|improve this answer
I like the second option the best! All the quoters on the left and the quotees on the right. Love it! thanks. – jonshariat May 13 '11 at 0:55

You could have an ear icon for the 'overhearer' and a mouth icon for the quoted person. It's a pretty universal way of representing the role of each person and you could use both icons at quite a small size and still convey the meaning clearly.

share|improve this answer
I want to use their profile images. – jonshariat May 12 '11 at 20:54
Sure. They're not mutually exclusive so you could go with both. Just a random suggestion anyway :) – rstage May 13 '11 at 10:03
And thank you for it! :) – jonshariat May 13 '11 at 16:17

Quotes usually have the quotee at the end:

"I have the simplest tastes. I am always satisfied with the best." — Oscar Wilde

share|improve this answer
Agreed. But should I have their picture image next to their name, coming form a speech bubble, and what about the poster? – jonshariat May 12 '11 at 22:13
Maybe a link to the user profile or expand information on mouse over like the twitter hovercard – solarc May 12 '11 at 23:28

Your Answer


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.