2

I'm looking at designing a web app for that allows users to view details info of an item and do one of 3 things

  • Create another item by "copying" the current one (primary action)
  • Edit specific details of the current item
  • Delete the current item

Are there conventions as to where primary & delete buttons should be placed on a mobile screen? Which of the following options (or others methods) would be best to handle this?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • As a user of many UXs, I much prefer to have the most commonly used controls as big as possible, while the least commonly used ones are in a context menu of some type. Consequently, I prefer Option 2. This is not an answer to your question since I don't know if there is or isn't an accepted standard. Commented May 8, 2014 at 18:48

3 Answers 3

2

Well, you probably don't want to separate Delete and Copy. They are both actions that affect the same item, and are so often part of the same menu that your users might expect them to be together.

The action bar is a good pick for grouping actions (hence the name). In order to save space AND have relevant actions together, you might just switch to a somewhat progressive disclosure action bar:

-

http://imgur.com/LLVDssv

-

(I included a third button because only two felt a bit unbalanced, but it can be removed/changed as needed. Note that using the action bars for action buttons clears space for the main content.)

As for "Fat finger issues" regarding the buttons being too close from each other: this is actually quite a common setup for action bars, and is usually not an issue. You can for example check the Gmail or Facebook paper mobile apps. Add either a confirmation dialog or undo button depending on disastrous an accidental deletion can be. Alternatively, you could (aka should) do some user testing to see if it actually comes up as an issue for your users.

0

The best practice is the one that works for you. That being said, the latest Android UI guides have copy, paste, and delete in the top nav. Personally, I like number 2 as well, only with a copy icon next to the trash bin icon instead of at the bottom.

4
  • 2
    I have some concerns with putting delete right next to copy due to proximity and fat finger taps. I guess it should be OK if a delete confirmation message is shown? Thoughts on this?
    – nightning
    Commented May 8, 2014 at 20:25
  • 1
    You should always confirm deletes, and give the user the ability to turn off confirmations. Commented May 9, 2014 at 1:04
  • 1
    @MaxVernon "You should always confirm deletes"? Scuse me, I'd rather not be bothered by confirmation questions. That's lazy programming. Separate deletes from other actions spacewise and give me an option to undo anything I have done. Commented May 9, 2014 at 10:58
  • 2
    @MaxVernon You should always confirm actions with permanent consequences (i.e. it is some work for the user to return the system to the previous state). However, you should rarely have something in your UI which is not easily undoable. If the delete action in question is deleting an item that can be quickly re-added to the list, then I would not consider that a candidate for a confirmation. If the item being deleted takes time to create, then you should confirm.
    – Franchesca
    Commented May 9, 2014 at 11:20
0

As per Don Norman's Design of Everyday Things, the best mapping between controls and the things which they control is the have the control directly on the thing it controls.

When looking at your screen in isolation from the rest of the app it appears like the buttons mean "copy" "delete" and "rename" of the menu bar at the top. They don't make it clear what exactly they are acting on.

Also do not add new buttons just to make things look more balanced! There should be a very good reason for adding the button, (i.e the user needs that action to accomplish their goal). If there is no need for it, then get rid of it, and figure out how to make things balance some other way.

You did a good thing by posting it here for other eyes to see it, but I'd at least let a few people try it in person, and see where they get stuck and why.

1
  • 1
    The Don Norman quote is a very good one and certainly worth considering here. However, you've somewhat neglected to provide your own answer as to where these buttons should go. Your answer is more of a critique of OP's wireframes rather than an answer in its own right.
    – JonW
    Commented Mar 5, 2018 at 17:20

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.