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:

enter image description here

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.

  • Ett meddelande, meddelandet, meddelanden, meddelandena... The indefinite plural form would probably work best here. :)
    – ntoskrnl
    Oct 23, 2014 at 20:33

5 Answers 5


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.

  • 8
    I really think you have something here. Then there wouldn't have to be any substantial update to its visual look (which we'd like to avoid), but still clearly communicate its constraints. I really like it, thanks! Oct 23, 2014 at 10:19
  • 1
    One negative aspect of this is that it really messes up UX for scrolling the page with a mouse wheel if the wheel rotation causes your pointer to end up on top of the chat preview. It possibly also interferes with touch interface use (if the touch-and-drag scrolls the preview rather than the whole window) in a way that's unpleasant to users. Oct 25, 2014 at 8:11
  • @R.. Sure - that's a good point - it's always important to design content within the context of it's next largest container (and so on) and we don't have enough information in the question to be able to comment usefully in that area for this particular scenario, so I guess that aspect is in the hands of the OP. Oct 25, 2014 at 13:47

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).


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.

  • Looks good, is intuitive and easily done with CSS.
    – sleblanc
    Oct 26, 2014 at 21:14
  • 3
    I'd still perceive that as scrollable… Only the bottom half of that top message is visible, so my first thought would be "How can I see the rest of it?".
    – Anko
    Oct 27, 2014 at 1:02

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

  • 1
    Adding to what Mervin has suggested, I would suggest having a character limit on the messages (ellipsis). The reason being so that you can have a predefined number of messages displayed at any given time without having to design for the possibility of having an overflow issue when a chat message might span over more than 1 line, and therefor giving the effect that there is scrollable content. Also I would also give the content box a title "Latest messages in the chatrooms" for example. The loader at the bottom should provide a message along the lines of "Refreshing in 30secs". Oct 23, 2014 at 9:17
  • @KyleMcBride, I just edited my answer to reflect your suggestions, hope you dont mind
    – Mervin
    Oct 23, 2014 at 9:28
  • Thanks for the answer Mervin! I think you have a nice idea. Problem is though that there aren't really any practical constraints to the message length, which means that the displayed messages will in some instances bleed outside the frame (or leave a "hole" in the frame if removed) if we don't adjust the height of the container based on the composition of the messages displayed. And adjusting the height isn't a feasible option I'm afraid. Oct 23, 2014 at 10:24

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.

  • What's a scrollbar with no handle? Is a scrollbar not equivalent to a handle in all recent GUIs? Oct 25, 2014 at 4:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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