INTRODUCTION:
I am inexperienced software developer who had a task to implement informational system all on my own. Since the deadline was short, I was unable to design UI to provide convenient experience for the user. I had no one to turn to for help either but have managed to somehow “finish” the job on time. Since only one user uses the software at the moment, there are no complaints, but UI really needs to be improved fast and this is where this community can help.
Since this is my first post here for this kind of a problem, I will provide as much detail as possible. Feel free to edit this post to fit the criteria of this site.
In case it is important, I have used
C++,
ResEdit[
^] and
pure WinAPI to create UI.
Also take into account that English is not my native, so I apologize in front for any spelling and grammar mistakes I make.
THE PROBLEM:
The main task is to optimize the space UI occupies on the desktop, and provide pleasant user experience during data entry. I gave my best to do this, but I just consider my work to be
horrible.
RELEVANT INFORMATION:
Here[
^] is the dialog box that was designed to collect data that will be entered into database.
IMPORTANT: Rectangles in the images are not the part of the UI, they are added in Paint, so I can have an easier job explaining my problem.
Controls in the orange rectangle have the task to collect the data about location of a building. Combobox is used for county, edit boxes for street, street number, x and y coordinate. All these controls are doing a fine job, but visually they are grouped badly in my opinion as they take up too much space and don’t offer pleasant user experience during data entry.
Controls in the red rectangle are used to collect general information about the building. Here I must mention that treeview control does an excellent job for my needs and I would prefer if I could keep it. Comboboxes and edit controls also do their job well, but they take up too much space and badly organized which worsens the user experience in my opinion.Two radio buttons should represent “Yes”, “No” and “Unknown”.
So far, “the left side” of the dialog box is just “too big” and slightly unpleasant to work with, but it might “pass” for now. My goal for this side would be to optimize space and to reorganize them in such a way user can have easier task with entering data.
It is the purple rectangle that encloses the most problematic part. Right “off the bat” we can see two problematic sections enclosed in green rectangles,
see image[
^].
These groups of controls have the same task, to collect yearly data but for two different units of measure ( let us say water consumption for the left side and electrical consumption for the right ). This feature was added at the very end of the project when everything else was already done. I had no time to think of a better solution than the current one. Therefore the only thing that is different is the way application treats the data entered in edit control at the bottom. User must be able to browse, delete or edit the values he entered. Again, I was improvising with this design due to tight deadline and since this feature request came in the last minute.
Here comes another important part: once finishing entering the above described data, user must enter additional data by choosing between left and right radio button, which are in the blue circle at the top ( see the first image above ).
Let us start with the easier case, let us assume user clicked the left radio button in the blue circle.
Here[
^] is what we get:
IMPORTANT NOTE: The space enclosed in orange rectangle is reserved for hidden controls that will become visible when user chooses right radio button. This leaves only the space in the purple rectangle to work with, because controls in the green circle are used in both cases to ease my programming work.
Edit controls in purple rectangle represent a pair of data user must enter. Something like name and last name. The number of these pairs user enters is unknown so I had to add controls in the green circle to enable user to add (
+ button ), delete (
- button ) , edit (
E button ) and browse through entries ( arrows ). This is really inconvenient for the user.
Now is the time to cover the case when user chooses right radio button:
First, there are two types of data user must enter,
see image[
^]. Let me first describe the role of the combobox in the purple rectangle: User can chose one of the two values from the droplist, and then the following controls appear,
see image[
^].
The only difference between first and second choice from the combobox is the extra edit control, marked with the purple rectangle in the image above. Notice again that I am using the same controls for edit, delete, and browsing through data as in previous case, which is marked in red circle. Edit controls are representing complex entry. Something like name, last name, date of birth… Again, the number of entries is unknown, so the situation is similar to the one described when user chooses left radio button, only the data is more complex.
Second, there is the orange rectangle, again see
this picture[
^].
Controls at the bottom of the rectangle store single entries and are not much of a problem. Perhaps they too can be reordered to provide better user experience. The controls at the top of the orange rectangle are the problem though. Depending on the choice from combobox, there are two cases.
First[
^] is similar to the ones described earlier.
Again, a pair of values is stored, I don’t know the number of times they will be entered, and again I use the same approach as before.
Second[
^] simply shows combobox from which user chooses the value.
MY EFFORTS TO SOLVE THIS:
To substitute my "Frankenstein mechanism", I checked
WinAPI documentation and code examples for
listview control but it doesn’t offer subitem editing and doesn’t allow combobox to be an item.
Currently I am trying to code my own grid control as I believe this would be excellent solution for these cases. All I need to do then is to add support for editing, adding, viewing and deleting the data.
Simply clicking on the listview row and pressing delete would do the trick for deleting, which means I would lose one needless button ( the
– button in the images ), and edit would be solved as well since user could double click the cell to edit the text. Again, this would lose unnecessary button (
E button in the above images ) and provide intuitive keyboard solution in the spirit of Windows. Seeing all the data is easy as listview has scrollbars. As for adding new data, I still haven’t got a good idea but I could code data entry to start after user presses
+ for example...
This is the most important problem I need to solve about my UI and I am simply not a match for such a challenge :(
As for conserving space, I got an idea to use tab control and move the three groups of data in the initial dialog box into separate tabs. The inspiration came after reading
this MSDN article.[
^]
Although I have a concept – moving groups of data into tabs and using grid control instead of my “Frankenstein mechanism” – I still can’t “see he final picture”.
QUESTIONS:
Can you advise me how to redesign my dialog box and its data entry mechanics so I don’t scream around in pain around the room each time I take a look at it?
I know I might be asking a lot, but please help me as I have tried to visualize the solution myself but just am not up to it. :(
If further info is required, or I need to clear some part of my post, leave a comment and I will reply as soon as possible.
Thank you for your help.
Best regards.
Submit an article or tip