0

My iOS app (for iPhone and iPad) has two main screens with two buttons each:

  1. A table: Clicking on one of the cells opens screen 2; with Upload & Delete button
  2. Detailed screen with more information about that specific cell; with Abort & Save button

Screen 1 looks like this:

enter image description here

After moving the two buttons in the detailed view from the bottom (same as screen 1) to the navigation bar (back button = "abort", "save" button on the right), I want to do the same for the table view.

But where does a "save"/"upload" button usually go in the navigation bar?

  1. Delete on the left, Upload on the right
  2. Upload on the left, Delete on the right
  3. Both on the left
  4. Both on the right

Both buttons are only going to be used after the detailed view for every cell was saved, so it won't happen that often. Edit: As mentioned in the comments, the "Delete" button affects every item in the table. It's not meant to delete just single items.

Is there a "fixed" position in (Apple's) iOS apps? I checked the Apple HIG but there's nothing in there about it.

Improve this question
4
  • Normally when considering the location of buttons, "usually" is something to consider as part of a platforms familiarity, more important is what your users need to complete their task.
    – DarrylGodden
    Commented Jul 4, 2019 at 10:02
  • My users get a file from a server with some base information. With this base information they use the "detailed" screen to fill in the missing information (each cell is then checked off). Once they're done they can either upload the file to the server or delete it. Both won't happen often but I'd say that they are still almost equally important as seeing the base information and editing it. The problem is simply that I've not been able to find any infos about placement. The "Notes" app has 3 buttons (delete,...) in a toolbar (not a navigation bar), so that doesn't help unfortunately.
    – Neph
    Commented Jul 4, 2019 at 10:17
  • I’m voting to close this question because question is abandoned and answers are no longer relevent to new HIG guidelines
    – Devin
    Commented May 29, 2023 at 20:33
  • @Devin So far there hasn't been a suggestion for the "correct" location of these specific buttons that affect the whole list, not just single items. This question isn't about a specific iOS version. If there are new guidelines, wouldn't it be important to mention those for everyone who comes across the question?
    – Neph
    Commented May 31, 2023 at 8:39

3 Answers 3

Reset to default
0

I recommend using either of these two layouts. enter image description here

enter image description here

Improve this answer
3
  • Sorry, I'm not sure how your suggestions would translate to my app, can you give more details please. I know that "edit" is usually in the top right and "back" in the top left but in my case it's "upload" and "delete" (which you usually don't get without any other options) and they should both be at the same y level. There's enough space for them to be displayed permanently, so pressing an additional button would be confusing - I'm guessing that's what you have to do to see the extra options on your second screen?
    – Neph
    Commented Jul 15, 2019 at 10:54
  • Why should they be on the same Y level? The first screen of iOS calendar event page illustrates a way to do it without putting them on the same level. Cancel or Delete option is usually put at the bottom of the page in iOS, and that is where users will expect it the most. If you want to put them together on the top navigation bar, use icons and put them side by side on the top right.
    – Ren
    Commented Jul 15, 2019 at 11:09
  • "Delete" is usually at the bottom of a "more detail" page with a "back" button, that's true but it's a completely different case here because my button is a "delete everything" button, which you usually don't get. "Upload" also isn't something commonly used, the only case I found is the "notes" app but that one's got 3 buttons (delete, share, edit), so that doesn't help much either. I'm trying to gain more space and make it look more like the "detailed" view, which has both buttons in the navigation bar. That's why I want to put them there too, otherwise I could keep them where they are.
    – Neph
    Commented Jul 15, 2019 at 11:29
0

When modifying data on a form, I typically place "Cancel" on the left side of the navigation bar which closes the form (same as a back button), I place "Save" on the left side of the navigation bar. Save button is disabled until the user edits information or inputs all required data.

If you want to provide the option to delete all the data in the fields, I would place a "Clear" button on the left side and a "Save" button on the right side.

After Clear is tapped, you might want to change it to "UNDO"

If the user can just accept the data provided, the Save button would not be disabled. If the user is required to input additional information or clear the form, I would disable the save button until the user completed those tasks.

Improve this answer
1
  • My detailed view looks like you described it: The "back" button acts as a "cancel" button on the left and the "save" button is placed on the right (and also leads back to the table). I didn't go the "disabled" route because that can get frustrating quickly when you don't know what fields it wants you to fill in (a lot are optional in my app). Instead I mark the fields that are missing when a user hits "save". As mentioned in the comments, I wasn't looking for the position of a button that effects only a single list item (in detailed view) but that instead affects everything in the table view.
    – Neph
    Commented May 6, 2021 at 8:24
0

For this I would employ the swipe-left on an object to reveal secondary options such as Delete or an "edit' and then reveal a the individual - sign next to each object.

For examples see the "Drag " (not suggesting using drag, just can see the example of the minus sign there) and "Swipe" videos : https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/gestures/

Improve this answer
1
  • "Swipe left" on an item is a good and valid way of displaying options for single elements. If you want, like in my case (as mentioned in the comments), an overall function that affects the whole list (so e.g. deleting the file that stores all the info) having to edit every element one by one can get annoying quickly and is a bad solution imo.
    – Neph
    Commented May 6, 2021 at 8:15

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.