Is this play video button placement confusing?

Question

I'm creating a blog with videos in each posts. But, I'm not sure if triangular play icon inside of a circle at the right presents itself as the must-click part of the page or worse if it leaves the impression that there's not even a video to watch. If this is an erroneous placement, please tell me how can I make this function better in terms of UX.

Answer 1

From a pure cognitive perspective, you should ask yourself:

1. Can the user gather this is a video?
2. Does the user want to the play the video?

As for 1 - the fact it is a video is implicit - it requires users to look at the play icon, which will suggest it is a video. But there might be many other distractions on the screen and the eye may miss this icon. So I'd argue this isn't the best way to convey this to users.

As for 2 - if the user knows it is a video and wants to play it, she will have no problem figuring out that the play button does it.

So your problem is with 1, not 2.

One way to make this more obvious is to make the play button more prominent, like here:

But I'd argue that the following revision would work better (I couldn't remove the old play button, but you should):

Basically:

• The (warmish) green is in contrast to the (coldish) image colour palette so to draw attention.
• The caption is short (quick to read) involving both action (play) and noun (video) to denote it's a video.
• It is positioned along the eye's vertical scan axis.

Answer 2

These have been my reactions looking at the image:

1. "Hey, there's something I can play" (when I've seen the "triangular play icon inside of a circle").
2. "No wait, that must be something else. Perhaps a slider?" because the placement of the icon is quite confusing to me. "Play" icons are usually centered in the middle of the image (e.g., Youtube, Vimeo) or on the bottom left (see video posts on http://www.nytimes.com/), while here it's on the bottom right. I usually expect a "Next" controller to be there. And also, what's the small arrow down about?

From your question I haven't got the original purpose of the button, so I'm making some hypotheses here:

• If the button is a "Read more" one, you should use a more standard solution (e.g., a centered button with some "Read more" text).
• If you want to use a video icon to categorize the post (e.g., "This is a video post") you should use a different movie-related icon:

But since these icons are not standard, in this case I'd really suggest you use a text label (or a combination of icon+text).

• If you want the users to click the button to play the video you can use that icon, but I'd suggest you place it in the middle of the image or on the bottom left.

Answer 3

By taking @izhaki's tip into consideration, I've changed the design to the one in the image below. To list the changes, I have

• decreased header font size to make button stand out
• added "Play Video" as suggested