Skip to content

Commit

Permalink
add citation + renumber script
Browse files Browse the repository at this point in the history
  • Loading branch information
catenglaender committed Dec 4, 2023
1 parent 8e52753 commit 99d2ddb
Show file tree
Hide file tree
Showing 3 changed files with 307 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Often times, many properties are mandatory for the creation of the object. This

## Loosing overview

Especially forms meant for administrators and users with more permissive roles (we will call them "managing users" in this paper) tend to have so many input fields, checkboxes and dropdowns that it takes quite some time to look at every single option.
Especially forms meant for administrators and users with more permissive roles (we will call them "managing users" in this paper) tend to have so many input fields, checkboxes and dropdowns that forms almost always extend below the fold (the area of the screen visible before scrolling.)

If you are a new user, you have to scan the entire form for options you might need because the grouping does not always help with the decision to ignore an entire section of the form. When options are spread over multiple sub-tabs, it's not always immediately clear which tabs can be ignored most of the time and which tabs might contain further relevant choices as they are presented with equal visual weight.

Expand Down Expand Up @@ -95,6 +95,8 @@ It might seem obvious, but the best way to maintain a feeling of overview is to

"In any situation where completion is important (which is almost always), minimize the number of fields you use." [^3]

A project at ebay that removed many fields from the registration process to an optional after registration form proved to be very succesful: "The impact [...] was tremendous because a lot more people registered successfully and began to use eBay. And perhaps ironically, significantly more people answered the optional questions when they were asked after they registered!" [^3B]

If there are fields that are barely used or are left over from abandoned or never finished concepts, they should either be brought to full functionality or be removed. Moving such fields to a hidden advanced or optional section only shifts the problem out of direct sight, but does not solve it.

When following the approach that all properties and settings of an object are mapped almost completely to a form, managing users will be left with quite a few options. However, there might still be possibilities to remove fields:
Expand Down Expand Up @@ -134,19 +136,25 @@ Conditional visibility could potentially also be triggered by other field types

User testing yielded the following conclusions:

* "obscures most of the initial options—as only one option is visible in the drop-down list" [^8]
* "using a single control may better
communicate the scope and impact of the
initial selection" [^8]
* "easy on the eyes and completed quite quickly" [^9]
* "relatively high satisfaction scores" [^9]
* "safe [...] when your list of initial options scales past a number that either horizontal or vertical tabs can support" [^9]
* It "obscures most of the initial options—as only one option is visible in the drop-down list" [^8] which could be a downside if the goal is maximum overview at a glance, but an upside if you want to de-clutter the screen
* "Using a single control may better communicate the scope and impact of the initial selection". [^8]
* "It's easy on the eyes and completed quite quickly" [^9]
* It had "relatively high satisfaction scores" [^9]
* Dropdowns are "safe [...] when your list of initial options scales past a number that either horizontal or vertical tabs can support" [^9]

### Accordion

One of the most frequently suggested tools to group and hide content are inline accordions.

### Accordion
User testing from the Baymard Institute and Luke Wroblewski working with London-based usability firm Etre came to the following conclusions:

One of the most frequently suggested tools to group and hide content
* On the upside, "accordion forms have the potential to be really effective because [...] hiding irrelevant form controls from people until they need them results in forms that are easy on the eyes." [^10]
* On the downside, they "can inadvertently confuse users, or even flat out violate their expectation." when "users can’t figure out which form fields will be submitted – whether it is only the fields in the currently active inline accordion or tab “sheet”, or whether the collapsed “sheets” will be submitted as well."[^11]
* "Allowing multiple open sheets suggests that all sheets will be submitted, although the user may be unsure if only the open ones will be submitted."

However, notably, in a testing with e-commerce checkout forms, accordion forms tested surprisingly well:

Notably, in another article they

Screenshot from a StackExchange conversation about validating long forms:

Expand Down Expand Up @@ -181,7 +189,7 @@ WordPress Plugin Multi-Step Checkout for WooCommerce by Silyk Press
ILIAS 9 has UI components called Optional Group and Switchable Group that can reveal further input fields when a checkbox or radio button is ticked. This UI component is not widely used yet and there are many legacy modules where this feature could only be utilized after a switch to the new UI framework.

These components could be a very important tool when dealing with advanced and branching form options.

[^10B]
## Wizards for filling out in sequence

## Optimized for viewing and checking
Expand All @@ -191,9 +199,12 @@ These components could be a very important tool when dealing with advanced and b
[^1]: Ciprian Borodescu. A gentle introduction to orchestrating intelligent journeys with User Intent Graphs. February 13, 2022 https://uxdesign.cc/a-gentle-introduction-to-orchestrating-intelligent-journeys-with-user-intent-graphs-503192a637e2 visited November 29, 2023.
[^2]: Jakob Nielsen. Mental Models. nngroup.com. October 17, 2010. https://www.nngroup.com/articles/mental-models/ visited November 29, 2023.
[^3]: Designlab.com. Form UI Design: 36 Tips & Best Practices. June 16, 2022. https://designlab.com/blog/form-ui-design-best-practices/ visited November 29, 2023.
[^3B]: Luke Wroblewski. Web Form Design - Filling in the Blanks. Rosenfeld Media. Brooklyn, New York. 2008; p. 233.
[^4]: DHIS2 Documentation. Forms. https://ui.dhis2.nu/principles/forms/ visited November 29, 2023.
[^5]: Luke Wroblewski. Web Form Design - Filling in the Blanks. Rosenfeld Media. Brooklyn, New York. 2008; p. 318.
[^5]: Wroblewski. Web Form Design - Filling in the Blanks. p. 318.
[^6]: Wroblewski. Web Form Design - Filling in the Blanks. p. 320.
[^7]: Dustin Horstmann. Conditional Form Field with Bootstrap. February 26, 2018. https://codepen.io/horstmannd/pen/jZeXev screen recording from November 29, 2023.
[^8]: Wroblewski. Web Form Design - Filling in the Blanks. p. 286.
[^9]: Wroblewski. Web Form Design - Filling in the Blanks. p. 287.
[^9]: Wroblewski. Web Form Design - Filling in the Blanks. p. 287.
[^10]: Luke Wroblewski. Testing Accordion Forms. A List Apart - Issue 314. September 21, 2010. https://alistapart.com/article/testing-accordion-forms/ visited on December 4, 2023.
[^11]: Jamie Holst. Accordion UX: The Pitfalls of Inline Accordion and Tab Designs. Baymard Institute. October 21, 2014 https://baymard.com/blog/accordion-and-tab-design visited December 4, 2023.
Loading

0 comments on commit 99d2ddb

Please sign in to comment.