[Patternfly] UXD Team - Thoughts on multi column forms

SJ Cox sjcox at redhat.com
Fri Sep 23 16:47:42 UTC 2016


Thank you everyone for the feedback! I definitely agree that in general
multiple columns should be avoided to prevent users from having to visually
reorient themselves.

However, since this topic is pretty split and this is the conceptual phase,
I think it would be best to move forward with the mindset that* IF* we were
to support multiple columns, it would ONLY be for the specific cases stated
above. Then we can see how this proposition moves along in the design
process.

I really do appreciate all the feedback and will revise my notes to
includes your points.  Will be posting a blog post shortly and will share
with you all.

Thanks again!
SJ

On Fri, Sep 23, 2016 at 8:14 AM, Allie Jacobs <ajacobs at redhat.com> wrote:

> I like the pattern for the login form. To me that's not a multi-column
> form but two single column forms next to each other. You're only filling
> out one single column form.
>
> I prefer a single column form for address forms. It makes it easier to
> scan down the fields, especially if you're using something to autofill
> fields and need to verify the info is correct. Related fields are still
> next to each other. Maybe if there's a reason to group two fields there
> could be extra white space around those two fields?
>
> On Fri, Sep 23, 2016 at 10:36 AM, Liz Clayton <lclayton at redhat.com> wrote:
>
>> Hi,
>>
>> On Fri, Sep 23, 2016 at 9:30 AM, Matt Carrano <mcarrano at redhat.com>
>> wrote:
>>
>>> In general I agree with what's been said about multi-column forms and
>>> think they should be avoided in most cases.  However, I do think there are
>>> situations where placing fields adjacent to each other in a horizontal row
>>> makes sense - first name, last name or city, zip would be two examples as
>>> cited.
>>>
>>
>> I haven't read all the threads, but I'm also in the camp of avoiding
>> multi-column forms in most cases.
>>
>> S.J. - You might want to check in with Joe, I know he looked into this
>> when he was doing the Forms discovery story. And the following article
>> offers some helpful info on this topic as well:
>> https://www.nngroup.com/articles/web-form-design/
>>
>> Best,
>> Liz
>>
>>
>>>
>>> SJ, my problem with the layout examples you provided is that in the
>>> first one, it feels like the columns are very disjoint, so even thought
>>> you've placed First Name and Last Name side by side, I don't see them as
>>> related when I glance at this.  In the second example, I would probably opt
>>> for some pre-selection of new or returning user and display a single form
>>> rather than present 2 forms side-by-side.
>>>
>>> So for me, the question may be less about whether we should support
>>> multi-column forms (in general, I think we shouldn't) and more about when
>>> it is appropriate to place 2 or more fields in the same row and how we
>>> should handle labeling in that case.
>>>
>>> Matt
>>>
>>> On Fri, Sep 23, 2016 at 2:44 AM, SJ Cox <sjcox at redhat.com> wrote:
>>>
>>>> Hello UXD and PatternFly community,
>>>>
>>>> Would love to get your input on when, if ever, multi-column forms are
>>>> okay.
>>>>
>>>> This sprint the PatternFly team is working on the conceptual design for
>>>> multi column forms.  In the case of multi column forms, it’s mostly best
>>>> practice to avoid their use. The main problem is that using multiple
>>>> columns within forms could cause the potential for users to interpret the
>>>> fields inconsistently.
>>>>
>>>> However, there are a couple exceptions that seem to be acceptable.
>>>>
>>>> - The main exception for using multi-column forms that cause the least
>>>> amount of confusion were strictly for name and address fields.
>>>>
>>>>
>>>>
>>>> - The second exception is when there are two different form choices.
>>>> User must choose to fill out one or the other.  In this case, when the
>>>> forms fields are shown next to each other in a multi column format, there
>>>> is little confusion as long as the distinction of the two form choices are
>>>> clear.
>>>>
>>>>
>>>>
>>>> Would love to hear your thoughts and input on this topic.  Are there
>>>> any other scenarios that are acceptable?  Do you agree with the conclusion?
>>>>
>>>> Thank you!!
>>>> SJ
>>>>
>>>> *Sarah Jane Cox*
>>>> User Interaction Designer
>>>> User Experience Design Team
>>>>
>>>> Red Hat, Inc.
>>>> <http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&>
>>>>
>>>>
>>>
>>>
>>> --
>>> Matt Carrano
>>> Sr. Interaction Designer
>>> Red Hat, Inc.
>>> mcarrano at redhat.com
>>>
>>
>>
>
>
> --
>
> Allie Jacobs
> UXD
>
> calendar
> <https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York>
>



-- 
*Sarah Jane Cox*
User Interaction Designer
User Experience Design Team

Red Hat, Inc.
<http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20160923/b3076744/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-09-22 at 11.23.59 PM.png
Type: image/png
Size: 20267 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20160923/b3076744/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-09-22 at 11.06.08 PM.png
Type: image/png
Size: 20063 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20160923/b3076744/attachment-0001.png>


More information about the PatternFly mailing list