Can't properly redesign GUI to get better user experience

Question

INTRODUCTION:

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 PROBLEM:

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.

RELEVANT INFORMATION:

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.

SPECIFIC 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.

Answer 1

Stand on the shoulders of giants

Leverage familiar patterns (google maps, yahoo maps, etc) and talk to your user. See if they are accustomed to using another mapping UI.

Here is an ESRI Map Design checklist that might be helpful if not an overkill.

At first look, it seems that your controls get lost in the background. You'll notice with Google that controls tend to be spaced closely together and are in a white panels that looks like it sits above the map for a background. Similar to real life if you have a map on the table with magnifying glass laying on top. Metaphors are powerful ways to help the user.

Answer 2

The image below is an example of how to handle some of the visual design issues. Further analysis is needed for more a solution that includes interaction design, validation, data connections and usability.

• Overall try to align everything in an orderly fashion reducing visual complexity and enhancing clarity. The main goal of this piece is to allow the user to enter, edit and save data. Anything on the screen that is not absolutely necessary should be removed without question. (no 'eye-candy').
• Layout with a grid system similar in theory to Bootstrap. This example shows 4 cols, forms should flow from top to bottom then to right to next column in predictable and logical order. They should be clear and in the users voice. Therefore placeholder text is used. However, it should be clear to the user what each section/element is for.
• Typography leveraging solid conventions will help he user see sections, elements and areas clearly.
• Labels are long. Position them above the form element to allow for plenty of horizontal space.
• Dynamic areas should expand from top to bottom pushing content down instead of occupying reserved space.
• Talk to your user. Get them involved and capitalize on the opportunity to tailor a solution that best suits their needs. That will lead to an efficient and successful experience.

gui http://gyroscopestudios.com/stackexchange/gui.gif

Note: There is a ton missing from this UI sketch. Its only for demo purposes. Further analysis is needed to determine most appropriate solution.

Answer 3

A couple suggestions I hope may be useful without requiring a ton of re-coding:

• If this is only being used by one user and you have access to that user, ask him/her what their pain points are and fix those first.

• Consider approaching this from an accessibility standpoint. Specifically, if the user could only use a keyboard to tab through form fields, use space to check/uncheck boxes, and use the up/down keys to select form dropdowns/count fields, what is the most appropriate flow for them to go forward and backward through the fields to make data input efficient and accurate. Focus and active states go a long way here as well. This should help you group related field accordingly and align things correctly.

• If the background visual is just eye candy, I would consider getting rid of it and keeping everything purely functional to eliminate distraction.

Also: http://www.nngroup.com/search/?q=form+fields is a really good resource for "scholarly" articles written on UX related topics that could prove really helpful for you. I've linked it with the "form fields" keyword for the search, but you can explore at will.