3

I have a table designed like this: Table with two rows and two fields on each row

I need to make it responsive so it looks good on mobile devices. Some requirements for the table:

  1. There should be tips/hints for each text field. "Tips" - maybe these are labels in the header, or something that describes the inputs in more detail ("Card number", "Chip number");
  2. A "Save" button should be in every row;
  3. The icon on the left side may be visible for some rows and invisible for other rows;
  1. The first field should accept approx. 19 digits and show the entire value.

The first idea I had was to use an accordion for each row with this design: Screen shot of two fields and a save button on a mobile device
But if there are a lot of rows (the average count would be about 20), and it's going to be a little tough to click each of them to collapse, then to save. How might I make this table be responsive?

Improve this question
2
  • 1
    According to the mockup, each row has a Save button which means they can be treated as separate forms and do not need to remain open simultaneously. It will be chaos to keep all rows inputs active and scroll through them on a phone. I suggest, using an Edit icon on each row to open the form when needed, otherwise leave it as Read-only.
    – Ren
    Aug 26, 2019 at 6:32
  • In both designs, is there a reason why you don't have a sticky button to save as the user is scrolling down and inputting potentially multiple rows at once? The way that this is done is implying that with each row, they have to save individually which becomes cumbersome.
    – UXerUIer
    Feb 3, 2020 at 15:19

2 Answers 2

Reset to default
1

Design for the task that the user is performing.

If a user needs to set up 20 users, credit card numbers and chip numbers at the same time, they're probably using a laptop or other device with a keyboard. It's always going to be hard to do this on a mobile device, which is why mobile apps are increasingly supporting credit card scanning and camera capture.

On a mobile device, are your users more likely adding single entries on the fly? Updating individual entries? In that case, your users don't need to see everything in edit mode by default. You could use a pattern where the user finds the record to update, goes into Edit mode, and then saves, or adds a single credit card entry.

As a side note, I'm not sure what your security requirements are, but you likely need to mask credit card numbers and chip numbers, anyway, so you might always want to keep them out of an editing mode until editing is needed.

Improve this answer
0

Using an accordion style seems sensible. Is having each one collapsed on page load and then the user can open the ones they want to view/amend/save.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.