0

INTRODUCTION AND RELEVANT INFORMATION:

I am designing user interface for entering test results. Number of tests performed range from no tests performed at all, up to 12.

Let me try to explain this with an example. Please take a look at below image:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

That is my current solution.

As you can see, I use checkbox and textbox to record test result.

If the test is performed, user checks corresponding checkbox which in turn enables corresponding textbox in which user should type in test result.

IMPORTANT: In the near future, new tests may be added, so the total number of options may expand.

PROBLEM:

Problem is that this solution takes up too much space on my form, and is not flexible if clients decide to add more options.

MY EFFORTS TO SOLVE THIS:

My gut feeling tells me that checked listview could be a better solution, but I do not know how to design the UI for handling new entries/deletion/edition of existing entries.

I am still working on it, and if I figure out viable solution I will update this post with it.

At the moment I am using Google to try and find some ideas...

QUESTION:

Is there a better solution that conserves space and is "friendlier" for extensions (addition of new options)?

I am targeting desktop applications on Windows, no phones/tablets, in case this info matters...

  • What is a typical number of tests performed? Does a typical user need to enter just a few tests or most of them? And how many more might be added? Just a few more, or could the number greatly expand, say to 100? – user31143 Dec 11 '15 at 6:02
  • @dan1111: What is a typical number of tests performed? I do not have that information Does a typical user need to enter just a few tests or most of them? It is highly situational, so let us assume all of them will be performed just to be on the safe side. Just a few more, or could the number greatly expand, say to 100? I can not guarantee 100% but I am 75% sure it might be 2 or 3 tests added. Sorry for not being very helpful, but I am not expert on those tests and clients are very uncooperative... If I get any relevant info I will update my post/leave a comment. Regards. – AlwaysLearningNewStuff Dec 11 '15 at 6:23
  • When GridView has been designed they had the same problem...just display your data in a tabular form and keep last row for adding new elements. When they pick (from a dropdown) test to add you also add the row. I admit GridView is not nice but it's absolutely functional. – Adriano Repetti Dec 11 '15 at 16:36
  • @AdrianoRepetti: Actually your suggestion suits me quite well, since I do need to preserve as much space as needed. The problem I face is visualizing the solution. Can you provide link to some standard example of doing this? Thank you for trying to help. Regards. – AlwaysLearningNewStuff Dec 11 '15 at 20:05
  • Just look Dan's answer. Data grids usually have that controls, embedded as last row but besides layout that's the concept. – Adriano Repetti Dec 11 '15 at 20:24
1

The optimal design depends on the typical use of the system. Specifically, does the average user enter most of the tests, or only a few?

If the typical user will be entering most of the tests, I would stick up with the current design or something similar. While it takes up a lot of screen real estate, the space is being devoted to functionality the user needs. Data entry will be easier if all of the tests are immediately visible.

This might become problematic if there is a huge increase in the number of tests, but from your comments that sounds unlikely.

If the typical user will only enter a few tests, consider an interface where they select individual tests to enter a score. Here is an example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I had similar idea as your mockup. Tell me please, how would you edit the fields in the table? I ask because that approach will save space, and that is really important to me. Since number of tests is constant, and even if it expands it wont be more than 2 or 3 added, user can easily scroll to edit/delete data. – AlwaysLearningNewStuff Dec 11 '15 at 6:52
  • you could certainly make the test score field editable in the example table That is exactly what I had in mind, but I do not know should I do it on double click or something else. From user experience perspective, perhaps showing a "pencil button" on hover would be a good idea? Just a thought... – AlwaysLearningNewStuff Dec 11 '15 at 7:02
  • @AlwaysLearningNewStuff, see the updated mockup. If you want the test score to be editable, I would say just make it a field, rather than requiring the user to click on a pencil icon to change it. Also, I changed it so that this editable field is the only way to enter the score (otherwise there is confusion where a user might not realize they have to click "add" before the test is entered). – user31143 Dec 11 '15 at 7:12
  • I have decided to put everything in a listview. I will dump all of the tests inside listview and set Score cells to empty text. If user performs a test they can edit corresponding cell. That way I preserve more space, and implement your idea. +1 – AlwaysLearningNewStuff Dec 12 '15 at 11:35

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.