Sticky line item totals

Putting the final touches on the invoice form, I apply a sticky behavior to the line item totals.


This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)

In the previous post, I wrote about possibly the tiniest UX detail in Cushion’s new system—the overflow shadow. I intended to include what I’m writing about today, but then figured that this topic deserves its own post—even if it’s short and sweet.

line item totals (not sticky)

I stumbled upon the idea while implementing the import entries modal. I would test the flow by importing a dozen or so entries, which would always result in more line items than the form could show within the window. This overflow would push the line item totals below the fold, so the user would need to scroll in order to see them.

line item totals (sticky)

Since I was recently focusing on sticky headers and overflow shadows, I wondered if sticky line item totals would resolve this issue. I applied a sticky bottom to the line item totals, and immediately noticed a difference. Not only can I clearly see the line item totals, but I can also easily access the line item buttons, like “Import entries”, whenever the line items are in view. Both of these realizations made it a no-brainer.

Along with implementing the sticky bottom, I applied the same overflow shadow to the line item totals, or rather the FormSubfooter component, which could now be reused across other forms. If the subfooter is ever stuck, its shadow appears to indicate more content below the fold. As soon as the user scrolls past the subfooter, its shadow hides and the sticky behavior releases the subfooter to continue scrolling with the rest of the line items. This transition makes me weak in the knees every time.

As I’ve mentioned in the past, these little UX tweaks give me so much life. I feel like they make a world of difference, even if they’re not immediately obvious to the user. It’s another level of craft that reiterates to the user that the person behind the software truly cares about every little detail. And it’s true!

Reply via email


This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)


Print Share Comment Cite Upload Translate Updates
APA

Jonnie Hallman (@destroytoday) | Sciencx (2021-05-13T11:56:00+00:00) Sticky line item totals. Retrieved from https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/

MLA
" » Sticky line item totals." Jonnie Hallman (@destroytoday) | Sciencx - Thursday May 13, 2021, https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/
HARVARD
Jonnie Hallman (@destroytoday) | Sciencx Thursday May 13, 2021 » Sticky line item totals., viewed ,<https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/>
VANCOUVER
Jonnie Hallman (@destroytoday) | Sciencx - » Sticky line item totals. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/
CHICAGO
" » Sticky line item totals." Jonnie Hallman (@destroytoday) | Sciencx - Accessed . https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/
IEEE
" » Sticky line item totals." Jonnie Hallman (@destroytoday) | Sciencx [Online]. Available: https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/. [Accessed: ]
rf:citation
» Sticky line item totals | Jonnie Hallman (@destroytoday) | Sciencx | https://www.scien.cx/2021/05/13/sticky-line-item-totals-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.