Improve form design for more efficient editing/browsing through data

Question

INTRODUCTION:

I am asking for advice to properly redesign the GUI so user can have the best possible user experience.

Although I am generally satisfied how things turned out for entering data into database, I am displeased with the part of the UI responsible for reading from database/edit existing data.

Below is the reference image:

RELEVANT INFORMATION:

First of all, user must not be able to simultaneously enter new, and edit existing, data in the database.

To achieve that, I have added toolbar at the top ( controls in the red circle in the image above ). If user clicks on New page icon, form is reset and looks like in the page above. This means that if the user was editing existing records, and then clicks New page, all the edits will be discarded.

The same goes with editing and reading data: if user was entering new data, and then clicks on Open folder icon, form is reset and record from combobox ( dropdown list ) will be loaded into the form.

In both cases changes/new entry is entered in the database by clicking on Save button ( the one in the orange circle ).

The last thing, form can have many tabs which have 99% similar content as he main tab page ( that is why I have omitted them, to preserve space and clarity ).

Adding new tab pages is done by clicking on the one of the buttons in the blue circle.

/For now, my employers haven't decided just how will the app behave when user clicks on Delete or Print button in the toolbar. Still, these options will exist 100%./

MY EFFORTS TO SOLVE THIS:

I have asked questions here earlier, and on other sites, and have browsed through MSDN documentation on available controls. I have came to the conclusion, with the help of others of course, that tab control is ideal solution since I lack space a lot. I have also decided to use UNICODE images instead of icons, to keep my application faster and smaller.

Above image is all I have at the moment.

QUESTIONS:

• Can the above layout be redesigned so user can have better UX when reading/editing data without too much tampering with the GUI for entering new record?

• If you believe I have done a terrible job, please suggest an improvement, since I really want to do this right.

Thank you.

Answer 1

Having built a few apps in a similar space many years ago, the underlying UI/app framework is unhelpful.

Essentially what you have is both a "List UI" and "Item details" on the same screen. Two basic options:

1. Have two separate screens - List & Item

Simplest to implement. Arguably could be less efficient.

^{download bmml source – Wireframes created with Balsamiq Mockups}

2. Strongly separate the UI's

Note however with this UI you need to do precise state management. Building a Finite State Machine model is the way to go here.

^{download bmml source}

Obviously there are variations of the above. e.g. You can add "Read-Only" and"Edit" modes and have button for Edit.

Answer 2

Tabs usually contain different data. For example different sections of a form, like @staccato said.

Now each tab is a new annex which the user add. When adding a lot of annexes it will be difficult to distinct different tabs. Instead of tabs you could have a list of annexes and a plus button below it. (For creating a new annex) You can have a list of annexes on the left and the form on the right.

You can now use tabs to organize your form in separate steps if needed.

---

A user can now go between viewing and editing a annex by clicking a different row in the list. However never throw away the users changes without consent. You can either store the changes locally for when the user comes back or prompt the user asking to clear the form. I suggest the latter.

Same applies for changing between contracts. Never throw away the users changes.

Answer 3

I understand that this is a data entry form for inserting and updating system entities into a database. Seems like a tool that people would need to work with on a daily basis and it's therefore imperative that the UI they use doesn't cause too much cognitive load, which results in unhappy users.

The form you're presenting is over 20 fields long. I first thing I would do is split the form into tabbed sections so that a smaller portion of the form is visible at any given time. I'm not sure what the purpose of the existing tab at the top is, but if it's required, you can always use nested tabs or vertical tabs to accomplish this.

Another change I'd consider is adding textual labels into the action buttons rather than just icons, since many believe that having too many different icon buttons causes the UI to become less comprehensible.

It's fine to use the same screen for both insert and update actions, and you can differentiate which mode you're currently using by showing a title with the relevant text.