How do I make a list NOT look scrollable?

Question

On a site there's a preview of the chat log for each "room" on the site which a visitor can see without entering the room. The list is continuously populated with new messages. Thing is though, the list is not scrollable. You can't take part of the full conversation from outside, for that you need to enter and be in the room. The problem now is that the area containing the chat preview does look very scrollable:

I know some basic things you could do. Like not letting any message bleed outside the upper border (removing it instead), or adding a descriptive text saying something along the lines of "Enter to see the full chat". But I'm curious to know if you know of any nice pattern to use here to convey that this is a snippet, and what you see is what you get until you enter the room.

Answer 1

Since it looks so scrollable, then let it actually be scrollable, but only for a few messages and when you get that far, indicate that's as far as they can go and show the 'Enter to see the full chat' messaging.

That way, you've let them interact and engage a bit more, and they've seen a little teaser so when you show the message, you know you've got their interest and are showing the message at the right time.

Answer 2

Another suggestion - instead of making it scrollable, fade each subsequent message to transparency, so that the text createsa a gradient. The most recent message would be at 100% opacity (normal text) while messages going farther back would fade more and more. This way, you could keep updating the feed, while a user would have visual notification that there are archives that are inaccessible (without having to scroll to see them).

Answer 3

Remove the shadowing from the frame or remove the whole frame and give it the same background color as the rest of the box. Then add a seperator between title and chat. This way the list is on the same level as the static text. Something like this:

the picture is not perfect, just a rough draft i made real quick.

Answer 4

One approach i can think of is something like this

^{download bmml source – Wireframes created with Balsamiq Mockups}

This way you can show a restricted number of messages from the log in a fixed space and there were be no bleeding of the text which gives the impression the content is scrollable.

The visual indicator of new messages being loaded will also ensure the user is aware that new messages are constantly being loaded and the log is getting updated without him having to try and scroll down.

Also since the space at the bottom is restricted for the loading message the entire log message space is not from edge to edge hence giving the impression of a closed system

Edit : Adding Kyles suggestion from the comments, I would suggest making the last message have a character limit in the display (the rest of the content can be denoted by ellipses) so that it doesnt overlow and overlap with the area designated for the loading section

Answer 5

A quick idea: Don't inset the log. Put it on the same level as the other obviously-static text.

Another idea (though imo inferior): show a scrollbar that has no handle. This also implies that you should show literally everything. As you suggested: don't have cut-off text. Only show full text, so the user does not think there is something hidden to uncover. Showing a familiar-looking scroll bar with no handle will emphasize this feeling.