4

If user is uploading an excel

  • which is containing 100s of records,
  • and each record may have 35-45 attributes

we would like to show them a preview of data which they are uploading before they actually upload it on the server.

Are there any known UI design patterns of showing upload preview of the data?

Please keep in mind that

  • User should be able to select records (or unselect records) in the preview screen for upload (debatable).

  • Post uploading, we need to know feedback to user (if there are any errors) and highlight the record and the attribute which is giving the error.

  • Take corrective action on the records which are showing issues.

Thanks.

3
  • 2
    Google Drive and Dropbox have already setup patterns for this; hit their webapp and see the process.
    – Dipak
    May 24, 2016 at 7:18
  • @dip +1, always use the conventions used by popular sites. There's no reason to confuse the users. Sep 21, 2016 at 18:51
  • Who is the user? This is important to know. If the user is an accountant using an enterprise system, that's very different from a SMB owner trying to get out invoices or a consumer trying to import contacts. Oct 21, 2016 at 18:59

3 Answers 3

1

Yes there should be preview screen before committing data to server

But, Why not to correct data in preview screen

As preview is explicitly "to view" not to edit it (correct it). Because editing (correcting) is done on user local machine where application is already installed.

User should be able to select records (or unselect records) in the preview screen for upload (debatable).

Selecting record will not add any value. Instead it will increase user effort by manually updating excel file in local machine.

Post uploading, we need to know feedback to user (if there are any errors) and highlight the record and the attribute which is giving the error.

In such case you can provide automatically file check on server.

Take corrective action on the records which are showing issues.

After automatically being validate allow user to download validated excel file, make them correct locally and re upload again.

3
  • Andy, it is not always possible to do validation on client side. Do you have a pointer to such UI design pattern where I can go and look for how it is implemented? May 25, 2016 at 5:12
  • Please correct me, if i am wrong. Validation happen on sever side as user is uploading the file to the server.
    – Andy
    May 25, 2016 at 5:46
  • Validating 100s of records takes time so server would simply parse the file and send it back to client at first for previewing. May 25, 2016 at 5:48
0

This sounds similar to uploading a list of contacts to an email marketing platform. To ensure the correct data sync, users preview a few data records associated with a particular attribute before committing to the upload. In an email marketing system, you would have an "Email Address" attribute that you would want to be sure was storing the fields you designated as "Email Address" and you might have an attribute called "Phone Number" you would want to collect the "Phone Number" fields from your spreadsheet. You could preview how fields were being stored for a particular attribute one at a time vs by row if you have 35-45 attributes for each record.

I would probably leave record editing out of the preview mode. At that stage, the user is likely to need to edit the original Excel file as well which would duplicate the user's efforts.

How would your system determine if there were any "errors"?

-1

YES, I THING IT MUST HAVE

There are highly chances to have errors in uploaded excel documents which may here or there.

In terms of preview, what we can do here is show all uploaded records as table format which may inline with your brand guidelines with editable clicking on particular cell like inline editing option.

Like how we are showing errors in typical form fields as red color, would be better to show them in same way the entire row if system found any issues. Here we have to thing better user experience for editing error data. Let's say optional field required to be updated, clicking on specific content, we can show them as drop down UI.

What do you think?

8
  • Can you suggest any UI design pattern for the same? May 24, 2016 at 6:43
  • Just go through this online documentation for your visualization. Keep in your mind, the primary flow in this is, you have to provide excel template which should have enough columns with sample data in order to inform your user how s/he required to fill up the data to be uploaded. Here it is, webapphuddle.com/…
    – Vasethvan
    May 24, 2016 at 6:50
  • The way they narrated is little bit complicated. But you don't need to follow each and every step they explained. We can follow our own style from the point of your understanding. Hope it helps.
    – Vasethvan
    May 24, 2016 at 6:52
  • Thanks, but his doesn't talk about post-upload behavior at all. Also the UI design patter for showing a preview is not shown either. May 24, 2016 at 6:52
  • Then this youtube demo will help you out, I guess... youtu.be/RsZlgM1y5_E
    – Vasethvan
    May 24, 2016 at 6:56

Your Answer

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

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