4

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?

mockup

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. – Evil Closet Monkey May 27 '15 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. – Josue Espinosa May 27 '15 at 18:08
7

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 May 27 '15 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 May 27 '15 at 21:38
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

  • 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 May 27 '15 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) – Evil Closet Monkey May 27 '15 at 18:13
  • Good point Evil Closet Monkey. – Scott Williams May 27 '15 at 18:55
  • 1
    @EvilClosetMonkey Depends. Are we talking about mobile apps here, or desktop apps? – Ajedi32 May 27 '15 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 May 27 '15 at 22:19
2

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.

2

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. – Josue Espinosa May 27 '15 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 May 27 '15 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. – Derek 朕會功夫 May 27 '15 at 23:53
0

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, privacy policy and cookie policy

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