3

I'm creating an application that builds a form using simple UI options (a la Cognito or Wufoo).
My current issue is that I'm trying to think of a way to display an option to define the width of the selected column, such that the user can define the column size (the user sees it as just an element such as a text input box, but from a DOM perspective, it's inside a column).

I've broken the column sizes down into 6 grids (based off bootstraps 12 column grid), but would like to have the default options show just 4. This is because most times the user is going to just need the simple options for column sizes between 1-4 (that is to say between 1/4th of the width, all the way to full width), but on occasion someone creating a fancy form might need the option to break a column width down to a 6th of the full width.

So what I need is a simple UI that allows for this kind of configuration. I've played around with some options, but what I have right now seems a bit too complicated and takes up too much space.

So for example, the below image has configuration to select widths based on 1-4, but then allows 1-6 if you click the drop down. What would be beneficial is if I had a single UI to take into account the different sizes, and have it done in such a way that it's mobile friendly (that means no extraordinarily small click zones that only a mouse can click).

enter image description here

Update

In order to have 1-4 but also an expanded option, it needs to extend to 1-8 (not 1-6).
An approach that moves in the direction I'm looking for would be something like the following, where the user could select any of the increments. The trouble with that though is that by default it presents too many options for the average user who is typically going to want the sizes 1/4, 1/2, 3/4, and full.

enter image description here

Improve this question

3 Answers 3

Reset to default
3

Can you just make the edge draggable?

You could have notches in the dragging if needed. Any JS library has a drag edge feature.

http://jsfiddle.net/euka4rm3/

For notches here is an example, just imagine the draggable element to be the whole border. https://jqueryui.com/slider/#steps

Improve this answer
3
  • I'm playing with that idea now, but it would have to have notches for sure. The question is, how can I design some kind of slidable UI to have notches, and allow users to easily understand what is happening. Our audience contains users who are not technical, and may not understand anything more than the most basic UI components. Do you have examples of notched dragging?
    – Andrew
    Jul 26, 2016 at 17:05
  • I've updated the question with another idea. My problem is more of a UI/UX question rather than a technical "how-to". One of the difficulties that would arise with just a draggable UI is that it's not as intuitive for the mobile users. At least what I'm envisioning you saying isn't. So yah, some examples would be appreciated, or an explanation of how it would look.
    – Andrew
    Jul 26, 2016 at 17:26
  • I added an example of how notches work in a slide, but the same tech approach can be applied to a larger div. jqueryui.com/slider/#steps
    – Glen Lipka
    Jul 26, 2016 at 18:27
2

Example of UI for column width

Do you think this could work? Consider that rectangle a variable space or column. I didn't make the complete animation but I hope it will give you an idea.

Improve this answer
3
  • I like this concept a lot but just a (possible) nitpick, I think the denominator is supposed to remain the same, so 2/6 columns, 3/6, 5/6, etc. EDIT: or better yet, instead of the fractions at all just write "two columns" "three columns"...
    – DasBeasto
    Jul 26, 2016 at 21:53
  • Yes. Here it's like we have several grids, but can be "easily" done with just one denominator. About the copy, fractions or the number of columns, I agree, the fractions are a little technical, it's more obvious if you write it out.
    – Mr. G
    Jul 26, 2016 at 22:34
  • There's a certain simplicity to this that I like. However, the usability for when the user wants to make it just one column wide (out of 8) means that the user has to click the button 8 times, which is just too much for such a simple operation.
    – Andrew
    Aug 9, 2016 at 20:24
0

If you're building a form, why not simply let the other chosen options dictate the column sizing?

For example, I need a form that has...

  • 6 text input boxes
  • One set of radio buttons (5 total options)
  • A large text box for an extended response

I want these to be split into two separate columns, and I want the ability to arrange/order them in those two columns.

Knowing this, we should be able to determine the optimal size. If I'm missing something obvious, let me know. But... If you're trying to provide brain dead simple form creation, there are very few situations that would require you to deviate from this sort of implementation.

Improve this answer
4
  • So that dictates that you must use a two column grid, if I understand you right. We have use cases where someone might insert a "text element" that they want to take up the full width. And then in the next column insert a "text element" that takes up 3/4th of the width, and the other 4th they insert an image. And then the next column could consist of just a simple input element that takes up 1/4th. There needs to be the option to configure the width. Because each element might need to be a different size, I don't believe we can infer the width so simply. Did I miss something in your example?
    – Andrew
    Jul 26, 2016 at 18:27
  • Hmm.. This is a web application, right? I feel like that level of control is nice, that it over complicates due to the vast majority of users wanting to create a simple form with a straightforward flow. Most well UX'd web forms are one to two columns, and sometimes support multiple pages that walk you through the process.
    – Daniel Brown
    Jul 26, 2016 at 18:50
  • 1
    However, given this new info, you could do the following: Users can add "rows" to the form. Rows can contain UI components. So I add a row, I add text element to it, and I also add an image to the same row. Dividers appear between each component that can be adjusted to determine component width. Set "snap" points based on the level of granularity you want, and default widths to common sense defaults. Essentially: Containers + Components. Creates a compelling visual and is more intuitive in my opinion. Let me know if you need/want a mock-up or want to talk more.
    – Daniel Brown
    Jul 26, 2016 at 18:51
  • This is a really good idea. However, the current constraint that doesn't allow this to work as easily is that I need to be able to define column sizes for a tablet and mobile width as well. So if I limit the user to just being able to drag and resize on the preview (which I agree is more engaging), I am no longer able to resize for mobile. That being said, this is a really good idea and I might be able to use this idea as well, thanks.
    – Andrew
    Aug 18, 2016 at 14:02

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.