I am working on an application that allows status updates related to the application. It is very similar to posting a Facebook status so I have been using a similar layout to their posting screen.

You can add/remove pictures. I was about to put the x to delete image button on the top left of the images because that seems intuitive to me and my team, however, facebook uses the x button on the top right.

Which should I use if either, and why?


download bmml source – Wireframes created with Balsamiq Mockups

  • It should be a button with the words "delete image", or similar, in it. Other than that, placement of an unlabeled icon with questionable outcome is ultimately personal opinion. Commented May 27, 2015 at 17:56
  • 3
    I think it is very reasonable to assume users are familiar with this sort of icon. One billion people have installed facebook, and this is a common UI pattern. Commented May 27, 2015 at 18:08

6 Answers 6


Top right

Most users will perceive the image and related text as a whole, then process it starting at the top left then moving downwards and across if necessary.

For image+text (English/left-to-right languages) combinations, the visual flow looks like this from eye-tracking studies:

enter image description here

Here's what that flow looks like for a Facebook image+text feed:

enter image description here

Since most users will be reading rather than deleting, placing the delete button on the top left is intrusive because it just interrupts the visual flow for most users who just want to read the image and text.

By placing the x button on the top right or bottom right, you are placing it neatly out of the way of the primary visual flow, but still in a position that is accessible for users who need to find and press the delete button.

This way, you are creating a better UX flow for the majority of users.

  • 1
    Actually, in an image/text combo the eye will nearly always land on the image first, and if you look at saccade pathways on images, patterns are loose and heavily depend on the image and context, but hardly ever follow an orderly pattern, let alone one involving the edges. See, for example, one of the first saccade pathway images.
    – Izhaki
    Commented May 27, 2015 at 21:24
  • @Izhaki that's why I noted that users will first perceive the whole picture+text first, then move down the left-aligned path. The saccade patterns in your link relate to images-only, but tracking looks different for image+text layouts for left-to-right languages like English. I'll update my answer to clarify.
    – tohster
    Commented May 27, 2015 at 21:38

Top right. Since most people are right handed (roughly up to 90 percent of people are right-handed) and using Fitts's law formulas it is the best option.




  • 1
    I agree, also, maybe as most people (although some try to convince themselves otherwise) are Windows users and and are used to the top-right for closing things etc that seems more natural as well
    – Chris
    Commented May 27, 2015 at 18:11
  • 3
    While placing the icon in the top right might be rationalized based on research or patterns, Fitts Law certainly isn't one of them. How does Fitts Law apply to putting a close/delete button in top-right? If my mouse cursor is in the bottom left of the screen, does being right-handed help me move to the button any faster? (It doesn't) Commented May 27, 2015 at 18:13
  • Good point Evil Closet Monkey. Commented May 27, 2015 at 18:55
  • 1
    @EvilClosetMonkey Depends. Are we talking about mobile apps here, or desktop apps?
    – Ajedi32
    Commented May 27, 2015 at 19:05
  • 1
    Fitts' law, while still considered seminal and valid, has been under scrutiny from the research community, with more accurate models emerging, specifically with relation to touch interfaces. See this research paper from Google. Also, having distance at its very core, applying Fitts' law to thumb to screen is rather loose. This research paper serves as a much stronger argument to your point.
    – Izhaki
    Commented May 27, 2015 at 22:19

First of all I would suggest you to ask yourself "Do I want my user to delete a photo that easily?"

Actions that cause some sort of loss should not be made that easy to reach. They should be intuitive but not easy. Deleting a photo is one of them. Also I would want my user to keep photos for as long as possible to build a sound profile. Maybe someone at some point of time feel tempted to delete a photo but then regret to do that. Believe me this case will arise more frequently. By making this kind of action a little hard to complete you are working in favor of user.

So first of all don't make "delete photo" actions that easy to access. One thing you can do is make some way to select the image. Once an image is selected the screen goes in editing mode and a trash button appears in the navigation bar to delete the selected photos.

Don't follow huge apps like facebook blindly they have a huge and faithful user base. It is very rare that a user notices something like that in such apps given other things present there to distract him and this might make facebook engineers to think that what they have been doing is right.

If you still want to stick to your x button you can check out this http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php to understand where to place an action item.


I think you're confusing things. What the X means (in Facebook as in almost any site or app) is to CLOSE a window, not to delete. Delete actions are important and shouldn't be placed in a spot where the user can accidentally click it, much less if they click it on purpose thinking they will actually CLOSE a window.

I think you should clarify what do you want to do first. If you're trying to close a window, then yes, top right is the perfect spot because most people is right handed so they won't need to cross the window to perform the close action (this is specially evident in mobile: if you apply the close button on top left, then you'll cover the screen with your hand to perform that action)

However, if you want to DELETE, just like your post says, then NONE of your options is recommended. Instead, you could have an action bar on top of the image which includes a proper delete icon and/or a delete text, or an "actions" block under the photo or as part of additional content (such as photo title, caption, description, and such, just like FB does). And once you perform such an important action, you need to have a confirmation dialog.

In short: if it's CLOSE, then you should use your second mockup, top right, just like Tohster said. If you want to DELETE, here's a quick mockup showing both options I mentioned (obviously, you should use one, not both at the same time)

enter image description here

EDIT I didn't understand from your question this was going to be applied on an ongoing action (add a picture), but an already performed action, since you can't delete what doesn't exist. What you're doing is cancelling an action , which is different, yet my reasoning still applies. See image for the FB app where you can clearly see the icon cancels an action, and compared to your image (and FB working on already uploaded content) where your icon actually CLOSES the window. Conceptually, they're always a CANCEL button. In the first case, they cancel the action of uploading an image, in the second case, you cancel the visualization of the element which was fired by a previous on_click event

enter image description here

  • I think you might be confusing things. In the mobile app for Facebook, when you add a picture, there is an x button on the top right of the picture you added. When pressed, it deletes the images. I'm not sure what you think I was referring to. Commented May 27, 2015 at 21:27
  • also, take a look to the approved answer at ux.stackexchange.com/questions/9331/… where it explains the use of these icons. And remember, icons depends on context, they could mean different things depending on context
    – Devin
    Commented May 27, 2015 at 22:32
  • @JosueEspinosa The x isn't for "deleting the image", instead it's removing the image from the list that is going to be uploaded (or in other words, cancelling). That is why they use an x instead of a trashbin icon. Commented May 27, 2015 at 23:53

The decision of where to position a toggle button - on the left or right side of the page - depends on a number of factors. These include the nature of the site or app, the user's preferred reading direction, and the designer's personal preferences. In some cases, the decision may also be dictated by the available space on the page.

Ultimately, there is no right or wrong answer when it comes to toggle button positioning. The best solution is the one that works best for your particular project.


Top right.This is a general User Interface design pattern which users are used to. To do something different would not be advised.

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.