Should a 'delete image' button be on the top-left or top-right?

Question

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}

Answer 1

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:

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

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.

Answer 2

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.

Scott

http://en.wikipedia.org/wiki/Handedness

http://en.wikipedia.org/wiki/Fitts%27s_law

Answer 3

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.

Answer 4

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)

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

Answer 5

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.

Answer 6

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