How to display configuration forms to minimize clicks

Question

I'm writing a desktop application that allows a user to create a project and add data sources to it. I need to allow the user to edit existing data sources so they can change advanced options not exposed when adding it, or just to change settings if the data source itself changes. The main GUI where they could edit the data sources is mocked up below:

In this mockup, the left list is all user-added data sources and the right-hand side contains the details of the selected data source. Since the fields need to be validated for correctness (i.e. you can't enter an HTTP URL for an FTP data source) and database constraints (names must be unique), I need to provide feedback when a value is invalid. As I see it, I have two options:

1. When a field loses focus (or a "target" is added), the data is sent to the database for validation and saving (in one step). This way there is no explicit "Save" button, saving the user clicks. If an error occurs I'd like to display an overlay/tooltip near the field explaining why the value is invalid. The problem with this approach is that a user could enter an invalid value and then click on another data source in the list. Doing so would not save the data they typed in and since they'd be loading another source they wouldn't see the error. This feels unexpected.

2. Offer a "Save" button in the lower or upper right that sends all updated values to the database. The database will stop at the first error, so only one invalid value will be shown each time "Save" is invoked. I don't like this approach since I don't think the button should be necessary, but it gets around the user missing an error like in the first approach (clicking on a different data source in the list would be similar to canceling editing).

In either situation, if an error occurs the data is not saved in the database.

Is the missed error in option one a valid concern? Is there another way to display configuration forms like this, or possibly some good examples to refer to? My primary concerns are simplicity of the UI and quick editing of configuration values.

For what it's worth this is a WPF GUI that uses the MahApps.Metro library for a Metro/Modern UI look and feel.

Answer 1

Picking from these two options I would prefer 2nd solution from various reasons:

1. It's Windows application and the standard they handle entering and editing since early versions is a Save button. It means users will know how to use it and prefer not learning anything specific.
2. In combination with TAB and keyword shortcuts it's the fastest and safest thing you can get without inventing something ultimately new, even in comparsion with web apps.
3. Reusing what Windows have for years you prevent future thinking about specific situations. They are likely to be solved already.

1st might work too, but would need tweaks and considering things mentioned above. What about adding save buttons/action, revert action and validation to each field (combined with shortcut ENTER or sth else)? I am thinking about making the action explicit (hitting something - button, keyword etc.). Here's a quick attempt, there will be logical holes in it, but maybe it can help somehow as well.

For the tweaks you can also learn from Windows a lot. Try searching for files in Explorer or for applications in Start menu search box and look on new Outlook. That application is not ideally redesigned since previous version in terms of visual design (I am subjective here), but they are incorporating good things to speed up working with emails. Outlook is an application that needs and goes the way to be fast and efficient.