7

I am migrating a piece of functionality from an old app (for which I only have a screenshot of the UI) to my new app, and this one part I need some advice on.

In the current UI there are around 60 independent fields that the user can check or not (but should be able to select up to every single one), and for each that they select "yes" on, a textbox would pop in for that option alone (so 120 fields total). These options are currently just run down the page in a long list, with dividers every so often to break things up a little.

My first thought is to use an accordion panel for each section (of which there are only 4) so as not to overwhelm the users (who have used the old UI for some time now, so are at least used to it), but I'm wondering if there's more I could do to make this quick to scan, select, and enter comments.

Edit: current system screenshot enter image description here

My new mockup (using accordions) enter image description here

EDIT: New idea from users I had asked the users if they really need a textbox for each option, or if they could have one per section (every 10-20 checkboxes). They said they were fine with that, and asked about having, instead of checkboxes, "a dropdown with 3 options: "Not Reviewed"; "Impact - see comments"; and "No Impact"

Given that, I'm thinking of button groups instead to minimize clicking (as well as to be able to see all three options at once), since when they say "dropdown" they just mean "selection" and only know of the dropdown implementation; they wouldn't know to ask for "button group."

So here's my new mockup, let me know what you think (and yes, we have tons of acronyms): enter image description here

Improve this question
10
  • 1
    Are there any dependent questions? For example if I answer one question as Yes, are there some other dependent questions which now are needed, while if I answer no, those dependent questions are no longer needed?
    – SteveD
    May 5, 2016 at 11:43
  • What type of items does the list have?
    – Alejandro Veltri
    May 6, 2016 at 13:43
  • All the choices are independent, and are simply text values. The user could check every single box and enter a comment for every single one (and need to be able to do something like that), or they could just check one and not enter any comment.
    – redOctober13
    May 6, 2016 at 14:37
  • Are the option generally known to the user (do they represent known concepts) or are they not necessarily familiar with them? Do the options have a parent/child relationship at all?
    – Nicholas Pappas
    May 6, 2016 at 14:53
  • @EvilClosetMonkey: Yes, the users know what all the options mean, and the options have no relationships among themselves.
    – redOctober13
    May 6, 2016 at 15:24

5 Answers 5

Reset to default
4

In this use case it appears to be the users job to consider every case. Then visibility is a reminder and a positive. Accordions / tab panels would mean extra clicks and potentially hide reminders

I'm going to assume that that UI is well presented visually. Font size, spacing, etc. Also assume that keyboard control is optimal.

Then few things can do

  • A section marker on left hand side that auto-syncs as user scrolls down list. It also provides an anchor for fast navigation is a section is of specific interest.

  • Make a "Click to add comment" area visible, and this clicking [or pressing 'enter' key] here will auto-tick the box and enter text edit mode all in one motion.

  • If user has a use case to jump to known review elements then let them type and the UI filters down just for options that match. Similar to http://caniuse.com/

Note that none of these changes be a "breaking" change in the UI for existing user. This consistency of operation is a plus especially as you have not indicated any tested problems with existing UI. One really does not want to accidentally make UI worse with a mis-guided effort to make it better :-)

Improve this answer
2

Here is my suggestion. I hope you would like it. And here I gave 2 option i.e. 'paging' to show fix number of comments or 'load more' button to show all the comment at a time.

enter image description here

Improve this answer
4
  • It's a nice layout; may I ask what you use to create that? But as to my challenge, I'm not sure this helps, because it's not comments on a blog or something like this would seem to be for, it's option/comment that the user can either select and enter or not.
    – redOctober13
    May 6, 2016 at 14:38
  • #redOctober13 I just gave you the idea that how you can show the information woth 60 comments and this is not pertoculary for the blog.you can apply this kind of concept whenver such a decriptive listing is necessary..and did you ask me about software that I used to create ?
    – Jasmin Javia
    May 7, 2016 at 7:47
  • Thanks. Yes, what software did you use for the mockup?
    – redOctober13
    May 7, 2016 at 14:58
  • @redOctober13 I use Balsmiq usually
    – Jasmin Javia
    May 7, 2016 at 17:11
1

You may try a multi-record grid that each record has a list box with 60 options and a text box.

You should make sure that the same option is not entered twice. When an option is selected, the next record will not display that option in the list box.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • 1
    I like this, but I think only if it were a few options. If you have a lot, it could become quite tedious to click the dropdown, scroll or type to find your option, then click again to select. Also would seem to put a lot more pixels on the screen compared to checkboxes, so from a simplicity standpoint, both from the user's and developer's perspective, I'm not sure this would hit the mark.
    – redOctober13
    May 6, 2016 at 14:44
0

I have an alternative suggestion. The suitability of this, however, will depend on the info typically entered into the optional 'comments' fields. If these fields typically contain a lot of data when completed, then this design may not be suitable.

I suggest breaking the sixty fields into categories and using columns and rows to break up the fields into logical groups. I have a quick mockup of one way this could work:

enter image description here

The above is only one example, but I've used two rows and columns to break up the fields into four categories. Of course, you may have more categories, but you get the idea.

By default, there are no comments fields until a user selects "yes" (as per the OP's description).

Below is a mockup showing how this may look for fields that users have selected "yes" for:

enter image description here

As you can see from my mockups, I've added a 'Save' button for each quadrant, but you may choose to handle this differently. With my design, I would change the 'Save' button to an 'Edit' button if the user has already saved the data, or have some sort of visual cue as to the user's progress.

Hopefully this (along with the other answers) give you some useful food for thought. Good luck!

Improve this answer
0

Taking bits and pieces from other's answers, as well as getting some additional feedback from the users (who said they would be okay with a single textbox at the end of each section), here are two more mockups: Using button groups enter image description here

Using a radio table (view in Codepen) enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.