1

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. enter image description here

6

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:

A screenshot showing an image with a being triangle in the centre and a big blue play button

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

The same image as above, but with a button saying 'play video' with green background

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

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:

enter image description here enter image description here

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.
  • 2
    2nd saying it looks more like "Next" than "Play video." Perhaps centering or adding text would help. – mc01 Sep 16 '14 at 23:34
  • @ Thanks for that the suggestion. When you click on that icon, screen goes black and a video appears. Also a cross icon takes play button's place to indicate you can close the video if you don't want. I'll try left side. Thanks – Furkanicus Sep 17 '14 at 5:35
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

play video

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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