Design changes / requirements
- Decrease ? button size from 50x50 px to 44x44 px (keep icon same size)
- Decrease ? offset from edge from 23px to 16px
- Increase outer margins of the content area from 48px to 54px
Mocks
| Current | Updated | |
| While scrolling |  |  |
| Final field/bottom of content pane |  |  |
Background/Ticket as submitted
Problem
When editing a template invocation in VisualEditor, there is as of recently late a "question mark" button floating over top of the input fields, such that it often obscures the last input field in a way that I believe a typical editor is not navigate around in order to type or read the text there.
As a hack, I added some line breaks and scrolled down, to see behind it:
 |
Unsolicited general feedback
Perhaps this is an irrational response to "moved my cheese", or perhaps it is a useful anecdote. I find the button confusing and could not predict or understand what kind of support or help it would provide. I was half expecting it to open a web page (and unclear whether it would correctly open in a new tab or lose the edit).
I found its visual appearance and prominent position suggesting that it is a required or suggested step to take, or something for the welcome experience that you can close after clicking once in order to focus on editing. It feels distracting and asking for attention.
It also reminds me of the FAB as popularised by Android (Floating Action Button), which is typically linked up to the most common action taken from the current screen (e.g. Submit Form, Save Settings, New Email, Send Message, etc.). I cannot think of anything in our current ecosystem that uses a round button with this design, less so something with this design and a similar action attached to it.
Some suggestions:
- Place it on the bottom left corner where it is visually more ignorable.
- Reserve a bottom margin for the height of the button (whether left or right), such that when scrolling to the end of the form, it is not obscuring or otherwise overlapping any information or input fields.
- Consider a square or rectangular{F35245252} button like other buttons in our ecosystem.
- Consider a textual label ("Help?", "Support?") with smaller icon, or even no icon.
Similar purposes with different design: