Edit & save buttons - do I need them? where to place them?

Question

I'm designing a simple app for the Android platform.

I have a page with some data, this page can be reached by two options:

1. create new page- input fields are empty
2. edit existing page- input fields are field with data

An explanatory picture could be found here:

I have two questions:

1. where to place the edit button or maybe not use an edit button and just enable editing after user presses the field.
2. where to place the Save button.

Answer 1

While you may omit Edit button by making the fields editable right away, you have to offer Save, Cancel, Undo, and Redo when allowing users to edit data to provide protection against accidental changes. At the same time, despite having a discrete Save button you may want to keep a "cached" copy of the edits prior to the commit in case the device crashes so that the user can go back to the last uncommitted state.

If you go the way of making the data always editable, you may want to hide the editing controls until the user makes some changes in order to avoid the confusion about the state of the data (i.e. user won't have a visual cue on whether the data has been edited if you show the controls at all times).

The buttons' position depends on how long the page is. If the page is too long (more than 2-3 scrolls), it wouldn't hurt the overall experience to duplicate the buttons on both ends of the page.

In addition, you should pop-up a modal confirmation of saving if the user presses the BACK button after making some changes & not saving them. BACK button on Android must not be treated as a cancellation command because that is not its function by design.

Answer 2

To be honest I don't think you need either an Edit OR a Save button.

• For edits - just allow them to edit by selecting the field and starting to type.

• For saving - I'd suggest just automatically saving by default everytime they complete the field.

You've already determined what the user wants to do on the page by the method they're using to go into it. If they want to edit then you shouldn't require them to choose the 'Edit' button, open the page that needs to be edited and then requiring them to press a different 'Edit' button before they can begin the edits. Keep it simple and clean.

Answer 3

The new emerging design pattern is the Done + Discard. If you have a ICS device, just edit a calendar entry, there will be a Done button at the top left, and Discard button at the top right, and they will replace the Action Bar.

Roman Nurik spoke about it here: https://plus.google.com/u/0/113735310430199015092/posts/R49wVvcDoEW

There's also code that show how its done: http://code.google.com/p/romannurik-code/source/browse/misc/donediscard

Its called the done discard pattern.

Specific to your question:

1. The fields should be editable by default, instead of click-edit-ok.
2. Save should be called "Done" and placed at the top.

Answer 4

Hard to answer, because it depends on what you are doing.

Is the page mainly for editing or mainly for presentation?

I think we could help you more if you post your real screen dump.

If you want to keep it simple, as you write, maybe you can find some inspiration in how the typical android Settings lists present and affords editing of data? See for example the Date and Time settings.