This is how a section of my form looks on desktop:
On mobile:
Should I give the buttons full width on mobile instead? If so, why?
-
In the full width mobile version, the proximity of the Add Field and Delete buttons makes it look like they're only related to Value. Are Key, Type and Value part of one field or are they each separate fields?– LucianoCommented Sep 20 at 12:06
-
Key, Type, and Value are 3 inputs that belong to the same custom field. I agree with you. How would you solve this?– Wei-ying ChenCommented Sep 20 at 12:22
-
Chunking / grouping fields is a common usability solution nngroup.com/articles/form-design-white-space– LucianoCommented Sep 23 at 8:57
Add a comment
|
2 Answers
Keep in mind you have to deal with a restricted "thumb length" on mobile phones. So making the buttons easy (easier) to reach from either the right or left border of the screen should be considered here.
-
1
I proposed a solution for a web app in this question. User-friendly way of displaying booleans in a custom field. Adding the mobile version for this could be the following; where you can use primary, secondary, and ghost versions of your buttons.
Try to disengage the Add Field from the Submit button since they perform different actions, and the user could fall into a misinterpretation of what each button does.
