Patrick Hill

Trying to decide between error message summary format.

First has message at top. Page would scroll up on form submit.
Second has message show right above buttons.
Button container sticks to bottom of screen on scroll.
I like the message showing right above buttons because you'd see it right where you clicked but concerned it would cover too much of the page, especially on mobile.

#uidesign #wip

Oct 6, 2023 at 12:54pmWeb
Show threadPatrick HillOct 6, 2023
@taimar @chrisonline would it help if you could toggle the error summary like this? Could actually be more helpful on mobile because you can quick reference all the errors and navigate to them. But, it does take up more space.
Show threadChristian GrasserOct 6, 2023
@hill @taimar This is a nice idea. Yes of course.
Show threadTaimar TeetlokOct 6, 2023

@chrisonline @hill I feel the collapsed message just creates extra work for users as they would need to aim + tap the message in order to see the actual error descriptions.

Showing an already expanded message on top would allow people to immediately read its content w/o any extra interactions.

Show threadPatrick HillOct 6, 2023
@taimar @chrisonline thanks for the feedback 🙌
Show threadChristian GrasserOct 6, 2023
@hill I would prefer on mobile the first one and on bigger screens the second one.
Show threadTaimar TeetlokOct 6, 2023
@hill The first one is a more bulletproof pattern because its sticky button bar has a fixed size and it covers less content. Multiple errors + potentially long error descriptions + sticky surface + small screens = a dangerous combination (you might leave no visible content area on small screens).