deathreaper945
New Member
I am looking for ideas for how to visually represent a particular type of conversation flow. The complication is that this is not a simple chat but involves state transitions as well. To oversimplify it, imagine a negotiation discussion where each "turn" involves both a free-form statement and a transition to another state - including instructions to the user as to what to do in that state. For example:UserA "I am asking for $5" Bid Submitted. UserB can accept the price or counter.UserB "Could you go a bit lower?" Re-pricing proposal submitted. UserA can propose a new price or end the discussion.UserA "Okay, $4.99 but only because I really like you" Bid Submitted. UserB can accept the price or counter.UserB "You are the best! Thanks a million!" Deal is done! We hope the transaction is beneficial to both of youThe bold stuff is free form text, the italic stuff is system generated for the stage of the discussion.I want to show the flow of the conversation cleanly and avoid showing the details except when relevant or asked for. What I do now:For first pass, I use Bootstrap's Collapse (http://twitter.github.com/bootstrap/javascript.html#collapse) to create an accordion where each turn of the discussion is a collapsible item. The user's name and free text form the header of the accordion item, clicking on it expands the details under it. The most recent item starts off expanded because those details are relevant instructions at this stage.UserA "I am asking for $5"
UserB "Could you go a bit lower?"
UserA "Okay, $4.99 but only because I really like you"
UserB "You are the best! Thanks a million!"
Deal is done! We hope the transaction is beneficial to both of youTo see details associated with earlier turns, the user clicks on one of the rows which expands its details. For example if the click the 2nd row:UserA "I am asking for $5"
UserB "Could you go a bit lower?"
Re-pricing proposal submitted. UserA can propose a new price or end the discussion.
UserA "Okay, $4.99 but only because I really like you"
UserB "You are the best! Thanks a million!"
What I'd like to enhanceFirst, the use of the accordion somehow makes the content look less significant. gmail uses something similar yet doesn't have the same problem. I can't quite put my finger on it.Second, this app is for friends, and I want it to have a more casual feel than accordions convey. Using speech bubble callouts would achieve that for the simple chat part but i can't imagine how to use them to convey the other info w/o cluttering things.Any suggestions would be greatly appreciated. This is also my first SO question so be gentle.THANKS~!
UserB "Could you go a bit lower?"
UserA "Okay, $4.99 but only because I really like you"
UserB "You are the best! Thanks a million!"
Deal is done! We hope the transaction is beneficial to both of youTo see details associated with earlier turns, the user clicks on one of the rows which expands its details. For example if the click the 2nd row:UserA "I am asking for $5"
UserB "Could you go a bit lower?"
Re-pricing proposal submitted. UserA can propose a new price or end the discussion.
UserA "Okay, $4.99 but only because I really like you"
UserB "You are the best! Thanks a million!"
What I'd like to enhanceFirst, the use of the accordion somehow makes the content look less significant. gmail uses something similar yet doesn't have the same problem. I can't quite put my finger on it.Second, this app is for friends, and I want it to have a more casual feel than accordions convey. Using speech bubble callouts would achieve that for the simple chat part but i can't imagine how to use them to convey the other info w/o cluttering things.Any suggestions would be greatly appreciated. This is also my first SO question so be gentle.THANKS~!