1

I am working on a financial software which has a lot of data to be entered into database.

I have managed to design user interface for entering data on my own, and my employers are satisfied.

However, due to big space window will take up on the screen I have decided to add just a few more controls to enable loading/filtering data from database, or deleting currently loaded record. That way all the work would be done in one window.

My problem is in figuring out how to design switching from new entry to loading and editing existing one and vice-versa. That is why I seek help here. Below is an image that describes my problem:

enter image description here

I need to add combobox that will show the list of existing records in the database, and a button for filtering that data ( special dialog box will pop when this button is pressed to take care of creating actual search parameters ).

Also, I need to solve the problem of "mechanics" -> how will user switch between adding new record and loading existing one for modification.

MY EFFORTS TO SOLVE THIS:

I have added 3 buttons at the bottom right that use UNICODE characters for save, delete and open. I would like to add UNICODE search button as well. There should be combobbox as well. It would look something like this:

enter image description here

Please keep in mind that I have submitted only suggestions for the layout.

QUESTION:

How can I add controls in such a way that I can use the form for both inserting new items into database and loading existing ones for editing?

The only restriction you have is that usable space is the one at the bottom right corner of the window ( circled in red ) or you can use toolbar. I can also expand window's width if that will help

If I could ditch the toolbar, and achieve layout similar to above, I would "bust a move"!

Thank you.

  • Why are you trying to do this in one screen? Search, edit, and add are different functions. For example you can search on a data range but you enter a single date. You search on wildcards. Three tabs take no more room than 3 buttons. – paparazzo Dec 5 '14 at 13:42
  • Tabs are dynamically added when user presses one of the 2 bottom left buttons (it is a long story, the point is that tab control can have million tabs in theory, and they serve other purpose). I have to finish this until Monday, and I will not have the weekend since I have to finish yet another project until the following Monday as well. I am trying to pull this off by simply adding few controls and figuring out "switching mechanics" so I can manage to fulfill deadline. – AlwaysLearningNewStuff Dec 5 '14 at 15:25
  • Not meaning to argue with you. But I am not talking about the existing tab control. I am talking about a master tab with search, edit, and add. Three tab headers take about the same amount of space as three buttons. Understand you have time pressure but as a UX concern search and edit are quite different and can deliver a better UX with dedicated UI for each. – paparazzo Dec 5 '14 at 15:34
  • @Blam: I know you mean best, I am not arguing with you, I just wanted to say that I am in desperate position and simply don't know how else to fix the problem. I will try to implement your solution... Again, if I sounded arrogant I apologize, it was not my intention. I simply tried to explain why I assumed the approach I did in my post. Thank you for your advice. – AlwaysLearningNewStuff Dec 5 '14 at 15:57
  • I write document management software for a living. One UI for three things does not work well in my mind. And the effort to morph one window to do three things is more work than three windows in my mind. If that is WinForms then copy paste is a problem. In WPF copy past is just copy paste. Good luck. – paparazzo Dec 6 '14 at 20:00
2

First of all:

I understand you're under pressure and under some limitation.

I will try to offer some improvements, but this is not the best solution, and might be problematic. Try to make the best of this by Monday, but try to get another timeframe for improvements.

Suggestion:

If you must view, edit and add on the same UI, tread carefully.

You're giving the user way too much freedom to accidentally destroy sensitive data. Especially when there are a million tabs open, it's very easy to forget which ones are new, which ones I'm editing and which ones are just open for reference.

The user needs as much indication about which is which. Color-code, Icons, "Modified" asterisks, anything and everything.

Here's a draft of some improvements that came to mind. Again, this is not a good solution. Really just covering up a few pitfalls here.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1:
Give the tabs some size. Whitespace will help differentiating, sheer size will help give individual entities some weight, make them more important in the eyes of the user.
Differentiating again, add cues as to the different tabs states. I don't know how saving works in your application, but even ifAdd auto-saves a blank entry, at least keep the icon there until the end of the session. This will help the user re-orient themselves back to what they're working on if the skip between tabs a lot. "Modified" asterisk is ok if you need to manually save. If the app auto-saves changes the cue must be stronger.

2:
I suggest you keep the controls at the top. They are important. They are the source for the pile-on of tabs that could happen. Sticking them in the bottom, away from all the action, just because there's some space there is not best practice.

Good luck.


Edit: Just thought of something else:

Add will work as today. Browse will open the form in read-only format, with a link (preferable) or checkbox to enable editing.

This will add another layer of protection against accidental editing.

  • Thank you for your help. Just to clarify: user can not simultaneously add and edit data. He can only do one of those at a time. That is why I need something ( like 2 radio buttons for example ) that "enables" only one of those modes, and switching between them. When user chooses edit then the form is reset and loads chosen entry ( from combobox for example ). Also when user switches to new entry then the form is reset ( if existing entry was loaded before this action, any editing is canceled ). Hopefully this will clarify things better. Best regards. – AlwaysLearningNewStuff Dec 6 '14 at 6:05
  • Worked for me until Monday... Now is the time to do it right. I will ask for help in a separate question soon. Thank you for your help, upvoted and officially accepted your answer. Best regards until next time. – AlwaysLearningNewStuff Dec 11 '14 at 12:39
  • Happy to help. Please link your new question here when you post it – Navot Dec 11 '14 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.