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?Luciano– Luciano2024-09-20 12:06:42 +00:00Commented Sep 20, 2024 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 Chen– Wei-ying Chen2024-09-20 12:22:46 +00:00Commented Sep 20, 2024 at 12:22
- Chunking / grouping fields is a common usability solution nngroup.com/articles/form-design-white-spaceLuciano– Luciano2024-09-23 08:57:50 +00:00Commented Sep 23, 2024 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.
- 1Oh, you're right. I didn't think of that. Thanks.Wei-ying Chen– Wei-ying Chen2024-09-21 02:38:09 +00:00Commented Sep 21, 2024 at 2:38
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.
