Visually distinguish an index versus a single view

Question

I think I'm having a hard time pulling this off because no one has yet done a good job of this.

Think of the home page of most blogs as the index, just a list of the latest blog posts.

When you click on one of the blogs, you get the permalink, a view of just that blog post.

Yet, users constantly confuse one for the other. I can count multiple times when a friend has sent me the link to the blog home page thinking that, because they see that blog's post at the top of the page, I would see it there too. Of course, they meant to send me the permalink to just that post but isn't there a way to visual distinguish these two different views?

Here are two designs I'm working on now:

I want the image on the left to be the single view. After you click on an item that will be in the whitespace of image 2, it will take you to image 1 with a vertical breadcrumb in the sidebar.

What can I do to this design to say "I am a parent" or "I am a child" respectively?

Answer 1

This is an interesting question, I've experienced the same issue a lot too.

One way to solve it is to only include the first couple of paragraphs of a post with a "Read more" link on the homepage. That way the user has to click through to see the full article, and will share from that page. This is obviously how high traffic, high content blogs and news websites work, displaying varying lengths of 'teasers' so you click through.

Obviously on a low content blog this is an unnecessary and poor experience. I would say styling a sidebar probably wouldn't be enough. You could try being super explicit, at the top of the homepage have a heading above the first blog title saying:

"ALL OF OUR RECENT POSTS"

However, if a user scrolls down a little and starts reading, this styling will be lost. To a new user, no amount of styling will make it obvious that they're reading on the homepage or article page once they've started reading.

Rather than thinking about how to get users to go to permalink pages before sharing your content, why not think about solving the problem for them on the homepage. http://qz.com uses a technique where when you scroll down to the next article, the address in the URL bar changes to that article's permalink. That way when I'm reading one article in a long list, the URL I copy from the URL bar will lead to the article I'm reading. (Note that their execution isn't perfect, but the concept is great).

Answer 2

I would encourage the use of a sharing widget.

The root problem here is not "how do I encourage users to click on a permalink before selecting the address bar and copying and pasting that content" but rather "how do I get users to share a permalink".

I suspect that the type of user who can not distinguish between a post page and a home page would not be averse to using a sharing widget. I have a professional preference for AddThis because they have a rich API and are well-supported, but there are other good ones out there.

Here's what I do (screenshot shown in partial context of the home page for posterity's sake, especially since the UI is still in development):

I noted a significant increase in social interaction (likes, +1s and shares) after I added the widget to each article on the home page (I had originally included it only in post pages).

Since I show full article content on the home page, virtually nobody bothers to navigate to the article page unless they have landed there from an existing social share or wish to leave a comment. Your may not have this issue with your site's architecture, but it's worth noting.

EDIT: To answer your title question specifically, you can visually distinguish home and article pages by doing things like removing obviously top-level page elements. Using my site's current template as an example, the right-most column containing top-level information like global tags, categories could go.