I am a junior software developer tasked to implement an informational system without assistance. Due to a tight deadline I was unable to design a UI that provides a great user experience. Though I had no one to turn to for help, I managed to finish the job on time. There is currently only one user, and I believe this community can help improve the user experience before a more widespread launch.
I will provide as much detail as possible since this is my first post here. Feel free to edit this post to fit the criteria of this site.
If it matters, I have used
C++, ResEdit and pure
WinAPI to create the UI.
The main task is to optimize the space UI occupies on the desktop, and provide a pleasing user experience during data entry. I gave it my best shot, but I consider my work to be horrible.
Below is the dialog box that was designed to collect data that will be entered into database.
IMPORTANT: Colored rectangles are not the part of the UI, they were added in Paint so I can have more easily explain my issue.
Inputs in the orange rectangle collect data about location of a building. A dropdown is used for county, and text boxes for street, street number, x and y coordinate. All these controls are functional, but are visually displeasing in my opinion as they take up too much space.
Controls in the red rectangle are used to collect general information about the building. Here I must mention that tree view does an excellent job for my needs and I would prefer if I could keep it. The select boxes and edit controls also do their job well, but they take up too much space and are badly organized which worsens the user experience in my opinion. Two radio buttons should represent “Yes”, “No” and “Unknown”.
The left side of the interface is just too big and slightly unpleasant to work with, but it might be OK for now. My goal for this side would be to optimize space and to reorganize the inputs to make it easier to input data.
The purple rectangle encloses the most problematic part. Right off the bat we can see two problematic sections enclosed in green rectangles, see image below.
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.
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 ).
We'll start with the easier case, assume a 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:
There are two types of data user must enter, see image above. The select box in the purple rectangle allows a user to choose one of two values from the dropdown, and then the following controls appear, see image below:
The only difference between first and second choice from the select box 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… 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.
Controls at the bottom of the orange rectangle below, store single entries and are not much of a problem.
Perhaps they 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 the select box, there are two cases. First is similar to the ones described earlier, please see image below.
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. The second simply shows a select box, see image below.
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 the select box to be an item.
I am trying to code my own grid control as I believe this would be an 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 the final picture.
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.