2

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.

UX sample

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.

enter image description here

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:

enter image description here

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:

enter image description here

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:

enter image description here

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.

image number 6

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.

enter image description here

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.

enter image description here

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.

  • A lot of questions coming your way: 1) Why is the user using this program? What happens before and after this screen? Is there anything you can automate (for example, get the coordinates from looking up the address)? What are the specific fields that you are collecting? Is there any field that has to be entered before another can be filled out? General feedback: Use a single column layout to make the order of the steps apparent. Code as much as you can so your user does not need to put in as much information. Don't repeat information. Don't hide information entered. – benortiz Nov 1 '14 at 23:55
  • 1
    I see one problem in your assumptions here: you seem to conflate "optimize screen space" (in the sense of packing the controls closer together) and "better user experience". This is not the same thing; in fact, it is frequently better to use lots of white space in design, as a visual hint for groupings. Oh, and entering data is seldom "pleasant", it is at best "non-annoying", and the physical arrangement of the controls is rarely a major source of annoyance. Unless you managed to mix up unrelated entry fields (which you didn't, I can read it), problems are likely to arise elsewhere. – Rumi P. Nov 4 '14 at 14:11
  • @RumiP.: Thank you for your useful observations. The problem with current dialog box is that it is larger than the 17 inch screen when resolution is set to 800 x 600. I just wanted it to occupy less space, for start, and possibly reorganize controls to get "cleaner" look. Best regards. – AlwaysLearningNewStuff Nov 4 '14 at 15:37
3

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.

  • Thank you for trying to help, I highly appreciate it. The map ( in the background of the dialog box ) is just an "eye candy" and will probably be removed. My problem is that I have ton of controls that occupy a lot of space. I just don't know how to "shrink" my design... Best regards. – AlwaysLearningNewStuff Oct 30 '14 at 0:08
  • 1
    Fundamentally it seems the pattern is similar to a long filter. Try utilizing just one side of the screen like istockphoto.com/illustrations/map#11abae22 or kayak.com/flights/PDX-CHI/2014-10-29/2014-11-28 with a little background from patternry.com/p=refining-search . Essentially think about grouping controls based on functionality. If they are in a column then you can simply stack them with a horizontal line separating them while keeping everything left-justified. It will be easier to work with and read. Then ask you user what they think. I hope this was helpful. – Ken Oct 30 '14 at 0:20
1
+50

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.

  • Thank you for additional help. I am currently trying to divide my window into 3 sections with a line, the way you told me. It is very hard and the only thing that comes to my mind is to break 3 sections from the first image into separate windows. I would use property sheet or installation wizard to lead user to the process. I will read your suggested links to try and implement your new advices. Thanks again. Best regards. – AlwaysLearningNewStuff Nov 1 '14 at 21:25
  • You might try StackOverflow or more technical-related questions. – Ken Nov 2 '14 at 17:01
  • I still haven't "given up" from your advices, I am just inexperienced so I don't know how exactly to implement them. I am trying to sketch the new layout per your advices so content of the 3 rectangles from the first image gets repositioned into 3 columns. My problem is to show content that is related to the radio button press. I just don't know how to reposition it to preserve space... Best regards. – AlwaysLearningNewStuff Nov 2 '14 at 17:44
  • I have implemented your idea of adding a cue banner to the edit controls and combo boxes ( like your Choose... cue banner in combo box, on the image you submitted ). I have got a lot of free space but don't know how to fit treeview control properly ( it must stay, it can't be replaced with checkboxes ). I will still try to align 2 left rectangles from my first image into columns like you did in your sketch and will edit my post with those results. Hopefully there will be a way to find a solution for the right rectangle and its components. Best regards until then... – AlwaysLearningNewStuff Nov 3 '14 at 20:21
  • Glad I could help answer your question. Design is an iterative process balancing user/technical/and business constraints, inherently compromised but any improvements is vastly better than none at all. Keep me posted if you'd like. If you feel you've gotten enough info, feel free to mark this one answered. Good luck. – Ken Nov 4 '14 at 21:05
1

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.

  • Thank you for your help, I will read that article as soon as possible. We shall stay in touch... – AlwaysLearningNewStuff Nov 4 '14 at 23:30

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.